The previous explorer let three.js hide the machine. This one removes the library: every triangle here is fed to the GPU through buffers you fill yourself, transformed by a vertex shader, and colored by a fragment shader — the same depth gradient as before, but computed per-pixel on the GPU. Turn on the wireframe to see the actual primitives, and read the exact shaders and matrices that are running.
Interactive render
Sphere · — tris · — verts
nearfar
drag to orbit · scroll to zoom
Tessellation
subdivision detail
—
The WebGL pipeline
Click a stage. Your data flows left to right; the two highlighted stages run on the GPU, once per vertex and once per pixel.
01
Vertex data
Positions, normals, indices packed into typed arrays and uploaded to GPU buffers.
your JS · CPU
→
02
Vertex shader
Runs per vertex. Multiplies the position by model·view·projection to clip space.
GLSL · GPU
→
03
Rasterizer
Fixed hardware. Turns each triangle into fragments and interpolates the varyings.
fixed · GPU
→
04
Fragment shader
Runs per fragment. Decides the pixel color — here, depth → red·green·blue.
GLSL · GPU
→
05
Depth test + screen
The z-buffer keeps the nearest fragment per pixel; survivors hit the framebuffer.
fixed · GPU
The shaders that are running
vertex.glsl// runs once per vertex
fragment.glsl// runs once per fragment (pixel)
Geometry generator
sphereMesh()// builds the buffers for this tab
Hooking it to the GPU
No library means you compile the shaders, link a program, push the buffers, wire attributes to shader inputs, and issue the draw call yourself. The condensed essentials: