Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 15.2 — The Effect Chain
3D Web · Example 1 of 3

Missing, correct and doubled OutputPass

Pixel values are rounded to steps of 5. The last line is the washed-out look.

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.

01

List the passes, in order, for a chain with an outline, bloom and FXAA.

02

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

01

Why must OutputPass come before FXAA, and why only once?

02

A teammate adds bloom to a page and the colours look washed out. List three things to check.

Missing, correct and doubled OutputPass
Press Run to see the page.
idle

Console

Nothing logged yet.

Expected console output

renderer.render (direct)         orange: 255, 105, 45   grey: 130, 130, 130
Render + FXAA (no OutputPass)    orange: 255, 35, 5     grey: 55, 55, 55
Render + Output + FXAA           orange: 255, 105, 45   grey: 130, 130, 130
Render + Output + Output + FXAA  orange: 255, 175, 115  grey: 190, 190, 190