THREE.JS / FOUNDATIONS 37
Blur the image, then mix by depth.
The performant DOF recipe is intentionally small: one box-blurred color pass, one view-Z focus mask, and one TSL mix. It is a useful baseline for learning where quality begins to cost performance.
Initializing basic depth of field—
Preparing the box blur and view-Z focus mask…
performance controls
- path
- —
- depth input
- —
- draw calls
- —
- triangles
- —
- cpu ms
- —
Basic depth-of-field initialization failed.
The performant postprocessing pipeline could not initialize.
Click a visible object to move the focal plane there. WebGPU uses a TSL box-blur graph; forced WebGL2 uses a custom depth-aware ShaderPass for a real compatibility comparison.
LAB 37 / BASIC DEPTH OF FIELD