Chapter 855: Post-Processing with WebGPURenderer (Manual)

Core Idea

WebGPURenderer ships a new node-based post-processing system (RenderPipeline, replacing EffectComposer) built on TSL, designed from the start to support Multiple Render Targets (MRT) and automatic pass combination for better performance than the older WebGLRenderer post-processing stack.

Key Concepts

• RenderPipeline: the WebGPURenderer equivalent of EffectComposer; effects are represented as composed TSL node graphs rather than a fixed list of Pass objects.
• pass() (TSL): creates the initial "scene"/"beauty" pass representing the rendered scene, the usual starting point before layering effects like bloom or a dot-screen filter.
• Automatic tone mapping / color-space conversion: applied automatically at the end of the effect chain by default; can be disabled and handled manually via renderOutput() when you need precise control (e.g. applying FXAA or 3D LUT color grading at a specific point).
• Built-in MRT support: a pass can output multiple attachments in one render (e.g. beauty + velocity for temporal anti-aliasing) via the mrt() TSL function; scene depth is available "for free" without extra MRT configuration if requested.
• Attachment precision/packing: MRT attachments default to RGBA16 (half-float); for data that doesn't need that precision (e.g. diffuseColor), setting an attachment's texture type to 8-bit cuts memory/bandwidth roughly in half — advanced setups (like SSR) may pack multiple values, such as metalness and roughness, into a single attachment and unpack them with a custom sample() function.

Code Examples

scenePass.setMRT(mrt({
  output,
  normal: packNormalToRGB(normalView),
  metalrough: vec2(metalness, roughness),
}));

const normalTexture = scenePass.getTexture("normal");
normalTexture.type = THREE.UnsignedByteType; // RGBA8 instead of default RGBA16

• What it demonstrates: configuring an MRT output that packs normal and metalness/roughness data into extra attachments, then downgrading one attachment's precision to save memory.

Key Takeaways

1. RenderPipeline (TSL node graphs) replaces EffectComposer for WebGPURenderer-based post-processing.
2. Tone mapping and color-space conversion happen automatically at the end of the chain by default, but can be taken over manually via renderOutput().
3. Built-in MRT support lets one pass produce multiple outputs (e.g. beauty + velocity for TRAA) without the awkwardness of the old WebGLRenderer MRT workflow.
4. Downgrading attachment precision (RGBA16 → RGBA8) where full precision isn't needed is a real, supported way to cut post-processing memory/bandwidth cost.

Connects To

• WebGPURenderer: the renderer this new post-processing stack is built for.
• How to Use Post Processing (manual): the older EffectComposer-based workflow for WebGLRenderer that this system replaces.