WebGL

Low-level GPU rendering in the browser. The mental model: minimize state changes and draw calls, move work to the GPU, and never block the main thread.

Context setup

const gl = canvas.getContext('webgl2', {
  alpha: false,              // skip compositing transparency if unneeded
  antialias: true,
  powerPreference: 'high-performance', // request discrete GPU
  desynchronized: true,      // lower-latency present where supported
  preserveDrawingBuffer: false, // true is slow; only for readback/screenshots
});

• Prefer WebGL2 (instancing, VAOs, MRT, 3D textures are core). Fall back to WebGL1 only if you must.
• Handle context loss: listen for webglcontextlost / webglcontextrestored and recreate resources.