---
name: webgl-foundation
description: "Integrate a Three.js scene as progressive enhancement. Use for Three.js, WebGL, performance."
---

# WebGL foundation

Integrate a Three.js scene as progressive enhancement.

## Implementation decisions

1. Create one renderer per active canvas and cap DPR at 1.5–2.
2. Use ResizeObserver and synchronize camera aspect.
3. Use setAnimationLoop and suspend rendering when hidden or offscreen.
4. Dispose geometries, materials, textures, observers and renderer. Show a fallback on WebGL context loss.

## Working source

Read [components/scene.tsx](../webcraft-shared/source/components/scene.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions.

The original workshop uses Three.js 0.180 and procedural builders. The external asset viewer separately loads licensed glTF, scanned PBR maps and HDRIs. Preserve the provenance of each corpus. See [objects.ts](../webcraft-shared/source/lib/objects.ts) for material and geometry ownership and [scene.tsx](../webcraft-shared/source/components/scene.tsx) for renderer lifecycle.

## Verify observable behavior

- Repeated mounts do not leak loops.
- WebGL failure leaves useful content.
- Page content precedes Three.js loading.

## Scope

Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative.

Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/3d

Version 2.0.0 · Original WEBCRAFT content · MIT