THREE.JS / FOUNDATIONS 144

Give reflection a depth budget.

A reflective floor captures a small actor field and its depth texture. Use the reflected depth node to fade distant reflection content, then compare the graph's quality and ownership costs with a direct baseline.

Initializing Backend pending

Preparing the depth-capable reflection graph.

mode: -
actors: -
depth node: -
range: -
capture: -
draws: -
CPU avg / p95: -
graph builds: -

Depth attenuationWebGPU depth controls are live.

capture scale depth range recursive bounces

attenuate with reflected depth show reflector contribution blur + vignette postprocess animate actor field

Render graphpending

actor field→ReflectorNode→depth node→attenuation→pipeline

The floor owns both reflection color and reflected depth; the depth node drives the attenuation factor.

GPU ownershipwaiting

actor field-

reflector target-

depth texture-

scene pass-

sample stateidle

Depth-capable reflection resources remain owned until an explicit release.

Drag to orbit · WebGPU runs the depth-node path · use ?forceWebGL=1 for the direct baseline

Compare WaterMesh reflection and refraction →

LAB 144 / REFLECTOR DEPTH