Track T

Three.js & WebGL, under the hood

How a triangle becomes pixels on the GPU: the rendering pipeline, WebGL as a state machine, geometry and buffers, the model/view/projection matrices, shaders, the scene graph, draw calls, and materials.

1. The GPU pipeline: how a triangle becomes pixels

   Before any Three.js abstraction makes sense you need the one mental model underneath all of it — the fixed sequence of stages a GPU runs to turn a list of 3D points into colored pixels, which two of those stages are little programs you actually write, and why the whole thing is built around doing the same tiny calculation to millions of things at once.

   13 min
2. WebGL: the state machine under Three.js

   WebGL is not a library of "draw this" functions but a big configurable state machine — you bind buffers into slots, attach a compiled shader program, describe attributes and uniforms, and only then issue a draw call that silently operates on whatever happens to be currently bound, which is the single mental shift that makes raw WebGL legible and explains why Three.js exists.

   12 min
3. Geometry and buffers: getting vertices into GPU memory

   A Three.js mesh is, underneath the friendly BufferGeometry object, a set of plain typed arrays copied once into GPU buffers plus a description of how to slice that memory back into per-vertex attributes, and this lesson works through how that upload happens, why it should happen exactly once, and how a separate index buffer lets a shared vertex be stored once but drawn many times.

   12 min
4. The matrices: model, view, and projection

   The vertex shader's one required job is to decide where a vertex lands in clip space, and this lesson is the full mechanism behind that decision — the chain of four 4x4 matrix multiplies and one division that turns a point defined in an object's own local space into a position on your screen.

   14 min
5. Shaders: the two programs you run on the GPU

   The vertex shader and fragment shader named in the flagship lesson are actual programs, written in a C-like language called GLSL and compiled to run on the GPU itself, and the three kinds of variables that connect them explain exactly how a value computed once per vertex ends up shading every pixel in between.

   13 min
6. The scene graph and the render loop

   A Three.js scene is not a flat pile of meshes but a tree of transforms that compose down each branch, and nothing on screen moves or even appears a second time unless you personally re-trigger the pipeline every frame — this lesson takes apart both structures, the scene graph that produces the model matrix from lesson 4 and the render loop you write by hand to drive it.

   13 min
7. Draw calls: the real performance model

   The instinct to optimize 3D by shaving triangles is almost always aimed at the wrong number — a draw call is a CPU-to-GPU command with a fixed dispatch cost, most scenes are bottlenecked by how many of those commands the CPU can issue per frame rather than by how much the GPU has to shade, and every real optimization technique in Three.js exists to send the same picture with fewer commands.

   13 min
8. Materials, lighting, and textures: how a surface gets its color

   Every visual difference between a Material in Three.js — flat, lit, physically-based, textured, bump-mapped — comes down to what math runs inside the same fragment-shader slot from lesson 5, so this closing lesson treats a Material as a fragment-shader generator and follows one pixel's color from surface normal and light direction through texture sampling to the number that finally lands in the framebuffer.

   14 min