THREE.JS / FOUNDATIONS 221

Let the mask own the effect.

The previous lab masked a mesh on the main canvas. This one moves the same stencil idea into an ordered postprocessing chain: render the scene, define an ellipse with MaskPass, apply custom ShaderPass effects only inside it, clear the mask, then finish with OutputPass.

Initializing Preparing WebGL2

Preparing direct and EffectComposer render paths...

renderer: -
architecture: -
chain: -
mask: -
buffer: -
passes: -
frame ms: -
resources: -

Pass-chain controlscomposer

architecture mask policy effect stack composer resolution

show mask outline animate scene

The active chain is RenderPass → MaskPass → Grade → Pulse → ClearMaskPass → OutputPass.

Postprocessing contractWebGL2 / EffectComposer

EffectComposer.readBufferprevious result

MaskPass.needsSwap = falsestencil-only pass

MaskPass.inverseinside / outside policy

ShaderPass.needsSwap = trueeffect writes next buffer

ClearMaskPassstencil test disabled

OutputPasstone/color transform last

Composer mask handling copies the untouched region around each swapping effect, so subsequent passes can modify only the stencil-selected pixels.

Pass readoutready

render pass-

mask pass-

effect passes-

clear mask-

output pass-

buffer ownership-

The ellipse is drawn by a separate mask scene; it does not appear in the color buffer unless the outline helper is enabled.

Derived from the official advanced postprocessing example and current EffectComposer, RenderPass, MaskPass, ClearMaskPass, ShaderPass, and OutputPass docs.

THREE.JS FOUNDATIONS LAB