THREE.JS / FOUNDATIONS 220

Make the aperture earn its pixels.

A render-target texture is rectangular; a portal opening does not have to be. Compare an unmasked quad with a stencil-written ellipse, then invert the test to make the outside visible. The capture pass is kept separate so the mask remains a main-frame composition contract.

Initializing Preparing WebGL2

Preparing paired targets, an ellipse mask, and the stencil-enabled renderer...

renderer: -
targets: -
passes: -
mask: -
stencil: -
calls: -
frame ms: -
resources: -

Aperture compositionlive

mask policy capture passes target size

capture every frame show portal effect show aperture outline animate scene objects

The stencil mask writes reference 1 before the portal surface tests it; the surface clears the stencil buffer after its draw.

Stencil contractraw WebGL2 composition

WebGLRenderer({ stencil: true })canvas attachment

colorWrite = falsemask writes no color

stencilFunc = Alwaysmask writes reference 1

stencilFunc = Equal / NotEqualsurface tests aperture

renderer.clearStencil()between portal surfaces

The render targets are color/depth attachments only. Stencil is used by the main canvas composition pass, while captures temporarily hide the portal assembly and restore renderer state.

Composition readoutready

mask write-

surface test-

stencil clear-

state restore-

GPU resourcesowned

The aperture outline is a visual helper only; the actual mask material writes the stencil attachment without writing color.

Derived from the official clipping stencil example, portal example, and current Material, WebGLRenderer, RenderTarget, and MaskPass docs.

THREE.JS FOUNDATIONS LAB