3D Performance Guide

Browsers enforce a hard limit on simultaneous WebGL contexts, typically 8 to 16. Because each ThreeDShapeElement creates its own renderer and therefore its own context, exceeding the limit causes the oldest context to be silently lost, leaving blank or corrupted viewports.

• •Always call dispose() when deleting a 3D shape. This is what actually releases the context.
• •Use pause() and resume() for shapes that go off-screen. Note that pauseLoop() stops rendering but does not release the context — only dispose() does that.
• •Keep simultaneous 3D shapes under 8 to stay safe across all browsers.

Texture memory is usually the larger bottleneck compared with polygon count.

Multiple maps on a single material multiply this cost. The texture cache in MaterialSystem avoids loading duplicates across objects.

• •Simple primitives — a box, or a sphere at 32 segments — are roughly 1K to 2K triangles. No concern.
• •Imported models above 100K triangles will degrade performance, especially with several shapes on the canvas.
• •ThreeDShapePreview creates temporary engines; ensure they are disposed when the picker closes.

this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

On a 3x display, rendering at 3x means nine times the pixels of 1x. The visual difference between 2x and 3x is negligible while the GPU cost is not, so the ratio is capped at 2 for consistent performance across devices.