THREE.JS / FOUNDATIONS 223

Smooth the edges.

This study isolates the current WebGPU FXAA node boundary: a scene texture is color-transformed, passed through FXAANode, and written by a native RenderPipeline. The fallback keeps direct WebGL2 rendering visible without claiming node parity.

Initializing Preparing WebGPU

Preparing the FXAA postprocessing graph...

backend: -
graph: -
output: -
target: -
resolution: -
frame ms: -
sample: WAITING
resources: -

FXAA graph controlsnode graph

output node pass resolution

animate scene

FXAANode receives the scene color after the RenderPipeline pass.

Run a bounded sample after selecting an output; the sample reports average and p95 frame time.

Source contractWebGPU / TSL

pass(scene, camera)scene texture

renderOutput(color)sRGB boundary

fxaa(output)edge smoothing

setResolutionScale()target ownership

needsUpdate = truegraph rebuild

The native route keeps color transform and anti-aliasing as explicit graph nodes.

Node readoutready

scene pass-

anti-alias node-

color transform-

graph ownership-

RenderPipeline owns the final graph; FXAANode owns the screen-space edge filter.

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

THREE.JS FOUNDATIONS LAB