WebGL

created updated 147 words1 min read

  • concepts
  • cs

webgl is how a browser draws with the gpu. you get a <canvas>, and instead of the cpu painting pixels one by one, you hand the gpu shapes and tiny programs called shaders and it draws them all at once.

why that matters for a graph: if every dot and line were its own svg or html element, a few thousand of them would make the page crawl. the browser has to lay out and track every single one. with webgl, it's one canvas and the gpu chews through thousands of shapes per frame like it's nothing.

the catch is that webgl lives outside normal css. it can't read css variables or color-mix(), so any colours have to be worked out in javascript and handed over as real values.

sigma.js uses webgl to draw the graph on this site, more in How I Built the Graph.

linked from

cache