What a chain adds to a frame
info.autoReset is off so the numbers cover the whole frame, not only the last pass.
Post-processing draws the scene into a picture, then changes the picture with a chain of passes. On WebGL that is EffectComposer, and the chain must end with OutputPass once. On WebGPU a node pipeline does the same.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
List the passes, in order, for a chain with an outline, bloom and FXAA.
Write a function createChain(renderer, scene, camera) that returns a plain renderer call when the GPU cannot draw into half-float targets.
Explain it without notes
Why must OutputPass come before FXAA, and why only once?
A teammate adds bloom to a page and the colours look washed out. List three things to check.
Console
Nothing logged yet.Expected console output
renderer.render draw calls: 3 | triangles: 1584 | textures on the GPU: 1
Render pass only draw calls: 3 | triangles: 1584 | textures on the GPU: 1
Render + Output draw calls: 4 | triangles: 1585 | textures on the GPU: 2
Render + Bloom + Output draw calls: 17 | triangles: 1598 | textures on the GPU: 14
passes: RenderPass > UnrealBloomPass > OutputPass