knowledge base · for web technical artists

From bits to pixels.

Everything between an IEEE 754 float and a shaded pixel —42 interactive articles on the browser as a rendering machine, from the event loop up. Every one opens with a live instrument: play first, read second.

now showingenter the article →

live, not a recording — a different instrument plays each visit

Dot ProductThe dot product takes two vectors and returns a single number measuring how aligned they are — the projection of one onto the other. It is the cheapest non-trivial operation on a GPU, and it is how surfaces get lit.conceptsCross ProductThe cross product of two 3D vectors is a new vector perpendicular to both, whose length is the area they span. It is how surface normals are made, how cameras find 'up', and how a triangle knows which way it faces.conceptsInterpolationEverything smooth on screen is a lerp: a + (b−a)·t, with t as a percentage of the way there. Animation is remapping t before the lerp; the rasterizer itself is a barycentric lerp handing every fragment a weighted mix of its triangle's three vertices.conceptsMatricesA transformation matrix is nothing but its columns: where the basis vectors land. Read the columns and you've read the transform — rotation, scale, and shear are just different column placements, and composing them is where order starts to matter.conceptsHomogeneous CoordinatesThe fourth number. A 3×3 matrix can rotate, scale and shear — but never move. Adding w embeds our world one dimension up, where translation is just a shear; w = 1 makes a point that moves, w = 0 makes a direction that refuses, and later the same w carries the perspective divide.conceptsTransformationsEvery object carries three numbers' worth of pose — scale, rotation, translation — and every frame they compose into one model matrix, in that exact order. The same composition trick rotates around any pivot and drives whole scene-graph hierarchies.conceptsNormalsA normal is a unit vector standing perpendicular on a surface — the mesh's answer to "which way do I face?". It's stored data, not derived truth: the same triangles read as faceted or curved depending only on the normals they carry, and transforming them wrong is one of the classic graphics bugs.conceptsCurvesParametric curves are the dominant representation in graphics: walk them with t, differentiate for tangents, chain cubics into splines. Bézier's blending form and the de Casteljau construction make them practical.geometrySurfacesA 3D model is a hollow shell — the camera only ever meets the skin. Graphics has three languages for that skin: an implicit equation, a parametric sweep of curves in two directions, and the triangle mesh everything becomes before the GPU. The craft is authoring in a smooth language and rendering in the mosaic one.geometryMeshesEvery 3D surface you've seen on a screen is a mosaic of triangles. A mesh is that mosaic plus the data each corner carries — and the triangle is the atom because three points are the most a surface can promise to keep flat. Smoothness isn't a property; it's a budget.geometryBuffersOn the GPU a mesh is not an object — it's a flat run of packed numbers. Typed arrays hold them off the JS heap, attributes tell the shader how to slice the byte stream, an index buffer deduplicates shared corners, and the whole thing is uploaded once and drawn forever.conceptsEndiannessA number wider than one byte has to land in memory in some order — little-endian machines write the small end first, network and file formats often write the big end first. JavaScript hides this until binary data crosses a boundary: typed arrays speak native order for fast GPU uploads, DataView parses files and sockets with the order spelled out.conceptsCollision vs Visual GeometryShipped games run two geometries in parallel: the camera gets the sculpted, organic mesh, and the physics gets a plain box or capsule hidden inside it. Decoupling them is what makes 'prettier' an art pass instead of a rewrite — and reskinning a whole world a content swap the gameplay never notices.conceptsCoordinate Spaces (Pipeline Overview)Every vertex travels a chain of coordinate spaces — Local → World → Camera → Clip → NDC → Screen — each entered by a matrix. Knowing which space you're in, and which matrix moves you, is the foundation of 3D graphics.spacesProjectionThe projection matrix is the pipeline's lens. Perspective routes each vertex's depth into w so the ÷w shrinks distant things; orthographic sets w = 1 and depth stops mattering. Four numbers — fov, aspect, near, far — define everything the camera can see.spacesClip SpaceClip space is the vertex shader's output — a 4D homogeneous space where the GPU tests −w ≤ x,y,z ≤ w and discards what fails, before any expensive per-pixel work. The ÷w that follows turns the frustum into the NDC cube.spacesGPU PipelineThe fixed assembly line from draw call to frame: your code runs at exactly two stations (per vertex, per fragment), silicon runs the rest, and the work count explodes in the middle — thousands of vertices become millions of fragments before collapsing into one image.apiRasterizationRasterization turns a mathematical triangle into pixels by asking one question at every pixel — is my sample center inside? Fast enough for dedicated silicon, blind enough to alias: the staircase is the price of a binary answer, and more samples per pixel is the remedy.techniquesShadingShading is deciding the color of every pixel — one small recipe (ambient + diffuse + specular) run at one of three frequencies: per face, per vertex, or per fragment. The recipe sets the material; the frequency sets the quality, and the specular highlight tells you which one you're looking at.techniquesTexturingA texture is an address system: every vertex carries a (u, v) address into a 0–1 image, and every fragment looks its value up. The fetch itself has choices — nearest or bilinear, mipmap level — and the image doesn't have to be a picture: normals, roughness, and shadow all ship as texels.techniquesSigned Distance Fields (SDF)One function answers, for any point in space, how far the nearest surface is and which side of it you're on. The shape is just where the answer hits zero — and once geometry is a field of numbers, modeling becomes min and max, and the gradient hands you the normal for free.conceptsRay MarchingRendering with no geometry at all: the scene is a single function returning the distance to the nearest surface, and every pixel walks a ray through it in guaranteed-safe jumps. Shapes become formulas, boolean ops become min and max, and melting two objects together is one smooth-min.techniquesRay TracingRasterization asks which pixels a triangle covers; ray tracing asks the opposite — what does this pixel see? One ray per pixel, intersected analytically with real geometry, then recursion: shadow rays, reflection rays, a whole tree of light per pixel. Physically honest, and priced accordingly.techniquesParticlesTen thousand embers, one draw call: a particle system treats every ember as a single vertex given a life — position, velocity, age — rewritten in place every frame inside one persistent buffer. Nothing is allocated, nothing is freed; death is a respawn.techniquesCPU-Bound vs GPU-BoundA frame is produced by two different machines — a few fast sequential CPU cores and thousands of parallel GPU cores. Frame time ≈ max(CPU half, GPU half): knowing which half is the wall decides which optimization helps.conceptsDraw-Call BatchingThe cure for a CPU-bound frame: send fewer commands, not less data. Instancing draws thousands of independent copies in one call; merging welds static clutter into one buffer. Each buys the same thing and trades away something different — the demo's gold pebble shows exactly what.techniquesLevel of Detail (LOD)Distant objects cover a handful of pixels, so most of their triangles are invisible money. LOD keeps several versions of the same mesh and swaps them by distance — the triangle counter drops by an order of magnitude and the picture doesn't change.techniquesGarbage Collection (and Object Pooling)In JavaScript memory frees itself — but the collector stops the world to do it, and inside a render loop that pause is a dropped frame. The cure is not allocating faster; it's allocating once.conceptsMobile / Fill-Rate OptimizationPhones render more pixels than laptops into a fraction of the power budget, so the mobile wall is usually fill rate: how many pixels get shaded, how many times. The DPR cap is the single biggest lever, overdraw is the silent killer, and every fix ends the same way — re-measure.techniquesThe Event LoopOne thread runs everything — your code, the DOM, every animation frame. The loop that schedules that thread decides whether a frame ships in 16.6 ms or stalls behind a task that wouldn't yield.apiThe Browser's Rendering PipelineBefore any shader runs, the browser runs a pipeline of its own — style, layout, paint, composite — and the CSS property you animate decides how much of it re-runs every frame. Two properties skip nearly all of it.apiWeb Workers (and OffscreenCanvas)The browser gives you one thread — and one escape hatch. A worker is a real OS thread with its own event loop and no DOM; the bridge between you is postMessage, which copies unless you transfer. With OffscreenCanvas, even the render loop itself can leave the main thread.apiPrototypes & ClassesEvery property access in JavaScript is a walk up a chain of linked objects — `class` syntax just wires those links politely. Ten thousand meshes can afford one shared `raycast` because a method lives once, on the prototype, not once per object.conceptsReactivity (and the Frame Loop)A framework re-runs your code when state changes — a dependency graph you declare just by reading. The seam with the render loop: values that change every frame must never live in that graph, or sixty writes a second recruit every subscriber. The framework owns the shell; the loop owns the frame.conceptsWebGLWebGL is OpenGL ES living in a canvas: the browser's direct line to the GPU. It only cares about two things — clip-space coordinates and colors — and it's a state machine: you bind, then you operate. Everything Three.js does stands on the calls this page shows.apiGLSLThe small C-like language that runs at the pipeline's two programmable stations — thousands of copies at once, one per vertex or pixel. Everything is a vector, the type system refuses 1 where it wants 1.0, and with no console in sight, the color itself is the print statement.apiThree.jsA scene-graph and material library over WebGL and WebGPU — not an engine. You think in objects, cameras, and materials; it thinks in buffers, programs, and draw calls. Its material tiers are a cost ladder of bottled shaders, and every abstraction has a documented escape hatch.apiOpenGLThe decades-old cross-platform graphics standard that everything web-3D descends from: OpenGL ES is its mobile cut, WebGL is that cut in a browser, and GLSL is its shading language. It lives in your GPU driver, not in a library — and reading it is reading WebGL's source culture.apiWebAssembly (WASM)The browser's second CPU language: a compact binary format compiled from Rust or C++ that skips JavaScript's type-guessing entirely. It cannot touch the GPU — its job is the CPU half: physics, mesh decompression, tokenizers — running in one flat linear memory the garbage collector never visits.apiWebGPUThe successor, not the next version: WebGPU speaks to Vulkan, Direct3D 12, and Metal directly, trades WebGL's global state machine for immutable pre-validated pipelines, and adds the one thing WebGL never had — compute shaders, GPU work with no pixels attached.apiCompute ShadersGPU computation with no pixels attached: storage buffers, workgroups, and massive parallelism for simulation, physics, and ML. Before WebGPU made it official, the web faked it — state hidden in textures, a fragment shader as the update function — and the hack still runs everywhere WebGL does.techniquesLatent SpaceA latent space is a space where position encodes meaning: an encoder turns content into a vector, similar things land near each other, and the graphics math you already have does the rest — similarity is a normalized dot product, and travel between meanings is interpolation.concepts