THREE.JS / FOUNDATIONS 222

Compose the aperture.

The WebGL study used imperative stencil passes. This route expresses the same idea as a WebGPU node graph: a PassNode produces the scene texture, a TSL effect transforms it, and a screen-space region selects how much of that effect is mixed back in.

Initializing Preparing WebGPU

Preparing the node-composed postprocessing graph...

backend: -
architecture: -
graph: -
region: -
output: -
target: -
frame ms: -
sample: WAITING
resources: -

Node graph controlsnode graph

architecture region policy effect node dot scale0.35 RGB amount0.005 output node pass resolution region center X0.62 region center Y0.52 ellipse radius X0.30 ellipse radius Y0.38

animate objects

The effect is mixed into the inside ellipse through a TSL screenUV mask.

Run a bounded sample after selecting a graph configuration; the sample reports average and p95 frame time.

Composition contractWebGPU / TSL

pass(scene, camera)scene texture + depth

screenUVnormalized fragment coordinates

mix(base, effect, mask)regional composition

RenderPipeline.outputNodefinal graph node

renderOutput()tone/color boundary

needsUpdate = truegraph output changed

The WebGPU path composes nodes instead of inserting imperative full-screen passes.

Node readoutready

scene pass-

effect nodes-

region node-

output transform-

graph ownership-

PassNode owns its render target; RenderPipeline owns the final composed node graph.

Derived from the official WebGPU postprocessing example, current RenderPipeline, PassNode, RenderOutputNode, ScreenNode, and TSL contracts. Use ?forceWebGL=1 to inspect the explicit direct WebGL2 fallback.

THREE.JS FOUNDATIONS LAB