THREE.JS / FOUNDATIONS 266

Make a mirror feel like water.

A reflection can blur in the graph itself. This lab combines a depth-capable ReflectorNode, explicit TextureNode.sample() reads, and the official hash-blur addon so the mask, noise, repeat budget, and transparent composite remain inspectable.

Initializing blurred reflection—

Preparing the depth-masked reflection graph and animated stage.

backend: —
graph: —
roughness: —
radius: —
repeats: —
depth: —

Blurred reflection controlswaiting

reflection output hash-blur repeats roughness mask 0.90 blur radius 0.20 capture resolution 0.50 reflection intensity 0.10

animate stage auto-rotate camera

The reflection graph will be compiled after the renderer is ready.

Blurred-reflection contractTSL

capturedepth-capable mirror

ReflectorNode + depth

blur sourcerandomized taps

hashBlur()

samplingexplicit texture reads

TextureNode.sample()

maskreflection × depth

depth-masked alpha

surfacetransparent composite

MeshStandardNodeMaterial

fallbackWebGL2 reference

direct matte floor

Hash blur trades clean convolution for randomized texture taps; more repeats reduce noise while increasing graph work.

WebGPU executes the depth-masked reflector and hash-blur graph. The forced WebGL2 route preserves the actor field and lifecycle but does not execute ReflectorNode or TSL.

Derived from the official Blurred Reflection example, ReflectorNode, TextureNode, and the hashBlur addon. Use ?forceWebGL=1 to inspect the explicit fallback.

LAB 266 / BLURRED REFLECTION