Command Palette

Search for a command to run...

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

The same idea on WebGPU: pass, bloom, RenderPipeline

The output depends on the browser. With WebGPU it logs backend: WebGPU. Without, it warns THREE.WebGPURenderer: WebGPU is not available, running under WebGL2 backend. and logs backend: WebGL 2 (fallback). Both then log ... applied by the pipeline itself: true | scene pass samples: 4.

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.

The same idea on WebGPU: pass, bloom, RenderPipeline
Press Run to see the page.
idle

Console

Nothing logged yet.