atelier-webgllisted

# Atelier — 3D, WebGL & Shaders The highest-ceiling, highest-cost layer. A WebGL hero can be the thing people remember — or a multi-MB, inaccessible LCP disaster. The discipline: **the 3D is a single earned moment, engineered with fallbacks, never the substrate of the page.** > **Inputs:** the Direction Doc's signature moment + motion budget (this is award/creative-world spend). > **Default stack:** React Three Fiber + Drei (vanilla Three noted). **Gate:** `atelier-perf-a11y` is > mandatory here — canvas is opaque to assistive tech and heavy on LCP/INP. **For new flagship 3D, default > to WebGPU** (`three/webgpu` + TSL, `await renderer.init()`) with the automatic WebGL2 fallback — see > `references/shaders-glsl-tsl.md` and `references/r3f-drei.md`. Deep reference: > `references/fundamentals-deepdive.md` (§2). Library versions > move fast — verify current (≈ Three r18x · R3F v9 · React 19 at writing). --- ## Decide first: should this be WebGL at all? Be honest about cost (full breakdown in `references/integration-fallbacks.md`): - A 3D hero ships a big engine (Three core ~150KB+ gzip) + multi-MB assets + shader compile + a continuous rAF loop → hurts LCP, INP, battery, thermals. - **Canvas is invisible to assistive tech** (not focusable, not readable), can trigger vestibular issues. - **Justified** when the experience *is* the product (portfolios, agencies, product showcases, launches). A **net negative** as a decorative background on a content/conversion site — use a