THREE.JS / FOUNDATIONS 217

Cut geometry. Keep the volume.

A rotating torus knot makes the difference between global clipping, material-local clipping, shadow clipping, and a stencil-generated cap visible in one WebGL2 scene.

Initializing Preparing WebGL2

Preparing local and global clip planes, shadow clipping, and stencil caps...

renderer: -
local: -
global: -
mode: -
stencil: -
calls: -
triangles: -
frame ms: -

Clip-plane controlslive

plane X 0.00 plane Y 0.00 plane Z 0.00 global X 0.15

local material planes global renderer plane intersection clip mode clip shadows stencil caps plane helpers wireframe mesh

Local planes live on the clipped material; the global plane is owned by the renderer and applies to every draw.

Rendering contractWebGL2 stencil buffer

renderer.localClippingEnabledenable material planes

material.clippingPlanesobject-local world planes

renderer.clippingPlanesglobal plane set

clipIntersection / clipShadowsboolean material policy

stencilWrite + renderOrdersolid cap composition

The cap is not a second solid. It is a stencil pass: back faces increment, front faces decrement, and a material plane is rendered where the stencil is non-zero.

Live policy readoutready

material planes3 local

renderer plane setempty

clip intersectionunion

shadow policyclipped

stencil cap groups3 active

GPU resourcesowned

Toggle one policy at a time and watch the silhouette, shadow, and cap respond independently.

Derived from the official clipping planes and clipping stencil examples and the current Material / WebGLRenderer docs.

THREE.JS FOUNDATIONS LAB