Comparison1 min read
[demo] Canvas2D, WebGL or WebGPU for a portfolio scene
What each one costs, what breaks, and why this site ships all three.
A personal site with a live scene has to run on a lot of machines it will never see in testing. Here is how the three options compared while building this one.
WebGPU
The newest and fastest of the three, with compute shaders and a modern API. The catch is availability: my own Chrome on Linux reports no WebGPU adapter, even though navigator.gpu exists. Checking for the object is not enough; ask for an adapter.
WebGL2
Available almost everywhere. With three.js's WebGPURenderer, the same scene code runs on WebGL2 when WebGPU is missing, so there is one scene to maintain, not two.
Canvas2D
No GPU needed, small and predictable. For a few hundred flat tiles it is fast enough, and it is the right choice for reduced motion, where the scene is drawn once and left alone.
The verdict
| WebGPU | WebGL2 | Canvas2D | |
|---|---|---|---|
| Reach | growing | near universal | universal |
| Code | shared with WebGL2 | shared with WebGPU | separate twin |
| Good for | heavy scenes | most scenes | fallback, reduced motion |
Ship all three, in that order, and let the browser decide.