THREE.JS / FOUNDATIONS 109

A shadow can carry color.

Compare a depth-only caster, a colored castShadowNode, and a transmissive physical material. The renderer decides whether the shadow map keeps that material payload.

Initializing -

Preparing one directional shadow map and three caster contracts.

Shadow map: -
Shadow payload: -
Hook paths: -
Transmission: -
Compile ms: -
Draw calls: -
Frame ms: -
Resolution: -

Shadow payload-

Map output Map resolution Glass transmission 0.94 Shadow payload alpha 0.72

Animate light and casters

The colored and glass lanes write RGB/alpha shadow payloads; the native lane remains depth-only.

Three shadow contractssame light, different payloads

nativedefault ShadowNode / opaque depth

coloredcastShadowNode = vec4(1, .16, .08, 1)

transmittedMeshPhysicalNodeMaterial + transmissionNode

renderershadowMap.transmitted = true

The depth-only option intentionally removes the custom cast hook before compiling. Try ?forceWebGL=1 to compare the WebGL2 backend through the same WebGPU renderer API.

LAB 109 / TRANSMITTED SHADOW