THREE.JS / FOUNDATIONS 271

The light needs a medium.

A fog volume makes rectangular sources visible in flight. A dedicated linear-depth prepass supplies occlusion, a layered volume pass supplies scattering, and a denoise pass makes the reduced-resolution result usable.

Initializing volumetric area light—

Preparing the density field and post-processing pipeline.

BACKEND: —
OUTPUT: —
VOLUME SCALE: —
RAY STEPS: —
DENOISE: —

Volume pass controlsWAITING

output source emitter

ray steps 12 volume scale 0.25× fog intensity 1.00 smoke amount 1.80 source power 900 lm denoise 0.60

gaussian denoise animate emitters auto-rotate camera layer 10

Volumetric contract POST PROCESS

materialVolumeNodeMaterial

scene depthdepthNode

lighting layerLayers 10

offsetbayer16

composeGaussianBlur

fallbackdirect PBR + fog

The scene pass captures depth; a reduced-resolution layer renders only volume-visible lights and fog, then Gaussian blur is composed back over the scene.

The renderer will report whether the WebGPU volume pipeline or the direct WebGL2 reference is active after initialization.

Derived from the official Volumetric Lighting Rect Area example, VolumeNodeMaterial, RectAreaLightNode, and RenderPipeline contracts.