Technologies
The same scene, four ways.
Every page below renders one identical thing: a cosine-palette plasma, three cosines a phase apart. The maths never changes, so what you are comparing is purely the code you have to write around it.
colour = 0.5 + 0.5 · cos(time + uv.xyx + (0, 2, 4))
| Technology | What it is | Lines for this scene | Demo |
|---|---|---|---|
| WebGL | Browser API · GLSL | ~42 | Runs here |
| WebGPU | Browser API · WGSL | ~58 | Runs here, with WebGPU |
| Three.js | Library · scene graph | ~22 | Code only |
| vgpu | Library · WebGPU + WGSL | ~12 | Code only |
Line counts are for the plumbing around the shader, not a quality score — fewer lines means more is being done for you, which is exactly what you want in one situation and exactly what you do not want in another.
WebGL
Open →Browser API · GLSL
The baseline. Everything on this site runs on it.
WebGPU
Open →Browser API · WGSL
The successor. Stricter, far more capable, and finally shipping.
Three.js
Open →Library · scene graph
A scene, not a pipeline. The default answer for most 3D on the web.
vgpu
Open →Library · WebGPU + WGSL
A small typed layer over WebGPU that also runs headless.
Not sure which to learn first? Start with WebGL — not because it is the future, but because everything else here is a reaction to it, and the ideas transfer. The labs are all built on it, and the reading path takes it from there.