graphics trained
the learned layer for the graphics guru: picking the rendering altitude and paying the GPU budget it demands.
mental model
Choose the lowest layer that can make the pixels: CSS for ordinary interface decoration, a shader for a GPU field or material, and Three.js for a scene. Three.js' WebGPURenderer targets WebGPU with WebGL 2 fallback, but custom ShaderMaterial, RawShaderMaterial, and onBeforeCompile() do not work in that renderer; use TSL/node materials when WebGPU is required. Official source
examples
import * as THREE from 'three/webgpu';const renderer = new THREE.WebGPURenderer({ antialias: true });renderer.setAnimationLoop(render);
Use await renderer.init() before a manual animation loop; initialization is asynchronous. Official source
best practices
- Set a frame-time and device budget before choosing 3D.
- Search the local example catalog before hand-writing a scene.
- Dispose retired GPU resources and inspect a rendered result.
strengths
Shaders make compact procedural effects; Three.js supplies scene, asset, camera, and WebXR primitives.
weaknesses / pain points
Graphics are sensitive to GPU availability, memory, asset decoding, shader compilation, and mobile thermals.
gotchas
- WebGPU does not make a WebGL shader scene portable. Official source
- Unbounded device pixel ratio can exceed the frame budget.
known bugs
No version-specific defect is recorded. Add one only with a release and upstream issue.
troubleshooting
| symptom | root cause | fix |
|---|---|---|
| first interaction hitches | shader or asset work begins on demand | preload or compile the critical path |
| WebGPU migration fails | WebGL-only material extension remains | port to TSL/node materials or retain WebGLRenderer |
| mobile regresses | canvas or scene exceeds budget | reduce DPR, draw calls, textures, or complexity |
practiced cases
- The bundled example catalog holds 556 entries, and the WebGPU fallback and initialization semantics match the official manual.
Read the graphics guide.