THREE.JS / FOUNDATIONS 265

Let roughness blur the mirror.

A mipmapped reflector can become a material input instead of a single sharp copy. This lab maps a generated roughness field to textureBicubic(), making reflection filtering and its resource contract visible in one surface.

Initializing roughness reflection—

Preparing the HDR environment, mipmapped reflector, and roughness field…

backend: —
graph: —
roughness: —
blur strength: —
target scale: —
frame ms: —

Reflection filtering controlswaiting

reflection output capture resolution environment roughness field 0.72 bicubic blur 0.90 environment rotation 0.00

animate field auto-rotate camera

The reflection graph will be compiled after the renderer and environment are ready.

Roughness-reflection contractTSL

capturereflector node

ReflectorNode

mip policyinternal target

generateMipmaps: true

blur samplerroughness → LOD

textureBicubic()

roughness mapgenerated linear data

CanvasTexture / NoColorSpace

lightingphysical surface

MeshStandardNodeMaterial

fallbackWebGL2 reference

direct matte floor

The floor reads the reflector color at a roughness-dependent mip level; high roughness broadens the reflection without a separate blur render pass.

WebGPU executes the reflector and TSL texture-bicubic path. The forced WebGL2 route keeps the environment, actors, and lifecycle visible but does not execute ReflectorNode.

Derived from the official Roughness Reflection example and the ReflectorNode, TextureNode, and TSL contracts. Use ?forceWebGL=1 to inspect the explicit fallback.

LAB 265 / ROUGHNESS REFLECTION