THREE.JS / FOUNDATIONS / SOURCE PROMOTION

Three layers, one camera mask.

The official example separates three animated particle fields into camera layers. Each field keeps its own TSL instance attributes and material color; the camera mask decides which layer is visible.

Initializing

Preparing the layered particle field…

Backend: —
Graph: —
Particles: —
Camera mask: —
Motion: —
Frame: —
Sample: WAITING

Source-shaped controls Particles per layer Motion speed 1.00× Red layer Yellow layer Green layer Animate layers

Ownership boundary

camera.layers owns visibility; native WebGPU uses the source-shaped TSL position node, while the WebGL2 lane is an explicitly labeled CPU sprite reference.

The local deterministic sprite asset substitutes for the official blossom PNG. Exact random distribution, Inspector layout, page/pixel presentation, broad device/compiler/backend matrices, performance generalization, stress behavior, and whole-example fidelity remain separate.

Derived from the official WebGPU Layers example. Use ?backend=webgl for the explicitly labeled reference lane or ?inspector=1 to opt into native Inspector controls.