THREE.JS / FOUNDATIONS 277

Slice a material by angle.

A local-space angular predicate drives maskNode and maskShadowNode on a physical node material. This lab keeps the official inAngle() idea executable on the pinned package by composing atan(), mod(), and TSL comparisons directly.

Initializing-

Creating the sliced physical material and shadow receiver.

backend
-
predicate
-
mask
-
shadow
-
Choose the local-space slicepositionLocal -> angle -> discard
Angular predicatewaiting
position
-
atan
-
modulo
-
start
-
arc
-
coverage
-

The current package lacks the newer inAngle helper, so the equivalent interval test stays visible as supported TSL.

Material hookswaiting
baseline
-
maskNode
-
maskShadow
-
material
-
specimen
-
rebuilds
-

NodeMaterial discards fragments outside the interval; the shadow hook keeps the cast shadow policy aligned.

Backend boundarywaiting
WebGPU
-
WebGL2
-
fallback
-
CPU avg
-
draw calls
-
resources
-

WebGPU executes the node mask and shadow hook; WebGL2 uses a direct GLSL discard reference because the node graph is not executed there.

LocalizepositionLocal

Every fragment is tested in the specimen's own XY coordinate space.

Measureatan + mod

Signed angles become a positive interval around the local origin.

MaskmaskNode

The material discards fragments outside the selected arc.

ShadowmaskShadowNode

The same predicate can participate in the caster shadow pass.

CompareGLSL fallback

The direct path keeps backend limits visible instead of pretending parity.

Mask timingwaiting
rebuild ms
-
CPU avg
-
CPU p95
-
frames
-
updates
-
draw calls
-

Adjust the interval and measure the active material submission path over thirty frames.

positionLocalatan / modmaskNodeshadowscreen

This is a deterministic adaptation of the official angular-slicing example: generated specimens replace the external asset, while the local-space angle, node-mask, shadow-mask, and direct-discard contracts remain executable. The pinned package's missing inAngle() export is recorded as an adapter boundary rather than hidden.

Sources: official angular-slicing example · TSL · NodeMaterial · MeshPhysicalNodeMaterial