Skip to content

SYSTEM Cited by 1 source

WebGL

WebGL is a browser graphics API originally based on OpenGL ES 2.0 (WebGL 1) / ES 3.0 (WebGL 2), shipped in the early 2010s. It was the first real GPU-accessible API on the web and powered a generation of in-browser 3D and 2D graphics applications — and, importantly for this wiki, in-browser design tools like Figma, which uses WebGL for its infinite 2D canvas. WebGL remains widely deployed; WebGPU is its successor.

Programming model highlights

  • Global state + bind points. Resources (vertex buffers, textures, framebuffers, materials) are bound to global binding points; each draw() call implicitly uses whatever is currently bound. Forgetting to rebind one input before a draw is a recurring source of silent bugs. Contrast with concepts/explicit-graphics-state in WebGPU.
  • Per-uniform upload. Shader uniforms are set individually via uniform1f / uniformMatrix3fv / etc., one value at a time. Cheap in WebGL; not how WebGPU works (see concepts/uniform-buffer).
  • GLSL shading language, two dialects: WebGL 1 GLSL (older, simpler) and WebGL 2 GLSL.
  • Synchronous readPixels — reading pixels back from GPU is blocking. Convenient for compatibility probes on startup; goes away in WebGPU (see concepts/synchronous-vs-asynchronous-readback).
  • Synchronous getError — error checking is a blocking call per operation; calling it frequently tanks performance.
  • No compute shaders. Rendering-only API.

Why applications migrate off it

  • No compute shaders → no GPU-side general compute.
  • Global state → hard to reason about, bug-prone.
  • Error handling is synchronous and error messages are terse.
  • Per-draw CPU overhead is higher than with modern APIs.

Why migration is hard

  • Applications already shipping on WebGL have deep integration with its model — implicit state, per-uniform calls, sync readback all hard-wired in. The canonical migration pattern (see patterns/graphics-api-interface-layer) is to first reshape the internal abstraction to be WebGPU-shaped, then build the second backend, then roll out gradually with runtime fallback and device blocklists.

Seen in

  • sources/2026-04-21-figma-rendering-powered-by-webgpu — Figma's canvas renderer migrated from WebGL to WebGPU while keeping WebGL as a peer backend; extensive discussion of how WebGL's API model shaped Figma's original graphics interface layer and forced the pre-migration abstraction redesign.
Last updated · 200 distilled / 1,178 read