LAB 182 / DOM + SCISSOR COMPOSITOR

One renderer.
Many worlds.

Each card owns a scene, camera, material, and orbit target. One canvas finds their DOM rectangles and composes only the visible worlds.

WebGPU / WebGL240 scene records

RENDER CONTRACT

Change the compositor

Scene cards 24 Card layout Viewport density animate meshes orbit targets skip offscreen scenes

The renderer clears once, then uses each element’s viewport rectangle as a scissor pass. Scroll to make the visible-only policy observable.

OBSERVABILITY

path—

scenes—

visible—

passes—

draw calls—

canvas—

frame—

scroll—

1DOM rect → viewport + scissor

2one renderer → many scene graphs

3offscreen cards → skipped work

WHY THIS MATTERS

A product page, editor, or portfolio can host dozens of live 3D previews without creating a renderer per card. The scene graph stays independent while the compositor owns canvas state and visibility policy.

Initializing—

Preparing one canvas and many independent scenes…

LAB 182 / MULTIPLE ELEMENTS