THREE.JS / FOUNDATIONS 274

Move lighting after geometry.

Deferred rendering stores opaque geometry data first, then reconstructs lighting from a G-buffer. This lab makes the named attachments, override context, transparent forward lane, and final pipeline choice visible beside a direct WebGL2 reference.

Initializing-

Creating the scene, G-buffer, and deferred resolve pass.

backend: -
mode: -
G-buffer: -
pipeline: -

Choose the lighting pathopaque pass -> MRT -> resolve -> composite

renderer target lighting mode inspection view light energy 1.00

animate lights transparent layer

G-bufferwaiting

color 0: -
color 1: -
color 2: -
depth: -
payload: -
builds: -

Opaque materials write color, view position plus metalness, and view normal plus roughness into named attachments.

Resolvewaiting

opaque pass: -
lighting: -
context: -
transparent: -
output node: -
layers: -

overrideNodes() supplies the stored position, direction, and normal back to a standardized PBR material.

Backend boundarywaiting

WebGPU: -
WebGL2: -
fallback: -
draw calls: -
CPU avg: -
textures: -

Deferred lighting is WebGPU-only here; WebGL2 remains a forward-render reference.

Captureopaque pass

Opaque geometry is rendered once into named color and depth attachments.

Packmrt()

Albedo, view position, metalness, normal, and roughness share one pass.

ResolveoverrideNodes()

A fullscreen material reconstructs standard lighting from the stored fields.

Composetransparent pass

Transparent geometry remains forward-rendered against the opaque depth.

Pipeline timingwaiting

build ms: -
CPU avg: -
CPU p95: -
attachments: -
lights: -
updates: -

Switch inspection views and lighting modes, then measure the active output path.

scenepass()mrt()resolvetransparentscreen

This is a deterministic adaptation of the official deferred example: generated geometry and local lights replace the exact teapot, HDR, Inspector, and scene framing, while the pass, MRT, override context, depth handoff, and RenderPipeline contracts remain executable.

Sources: official deferred example · PassNode · MRTNode · RenderPipeline · TSL