Technologies

The same scenes, four ways.

Every page below covers the same two reference scenes: an animated cosine-palette plasma (three cosines a phase apart) and a lit, depth-tested, spinning cube. WebGL and WebGPU render them on the page; Three.js and vgpu print the code that would and say so, because neither is a dependency of this site. The maths never changes, so what you are comparing is purely the code you have to write around it — and the cube is the more honest half, because a full-screen effect exercises almost no plumbing.

colour = 0.5 + 0.5 · cos(time + uv.xyx + (0, 2, 4))

Side by side

Of these eight numbers, six are counted rather than asserted: each is the length of the listing printed on that page, by the same rule as the line count in the listing’s own header, so the figures here cannot disagree with the code underneath them. The two carrying a tilde — WebGL’s cube and WebGPU’s cube — are estimates of a complete implementation, because those listings are excerpts and there is nothing printed to count. Either way the figure is 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. Of the two scenes the cube is the more honest: the plasma has no geometry, no camera and no depth buffer, so it barely exercises the differences at all.