Vector
A mathematical quantity with magnitude and direction, commonly used for positions, directions, and velocities.
An interactive documentary / 001—010
BEYOND
THE
PIXELS.
Every glowing point, every impossible surface, every world inside your browser begins with mathematics. Explore the invisible machinery that turns code into three-dimensional experiences.
01 / SPATIAL THINKING
First, there
is space.
A 3D scene begins with a coordinate system. Every point has an X, Y, and Z position. These three values describe where an object exists, but not how it appears on your screen.
The origin is the reference point. Translation moves an object, rotation changes its orientation, and scale changes its dimensions. Combine these transformations and you can position almost anything in a virtual world.
// Create a position in 3D space
mesh.position.set(2, 1, -3);
mesh.rotation.y = Math.PI / 4;
mesh.scale.set(1, 2, 1);
X / Y / Z
Vectors
Transforms
COORDINATE SYSTEMFIG 01.01
02 / GEOMETRY
Worlds built
from nothing.
A mesh is generally a combination of geometry and material. Geometry describes a shape; a material describes how its surface responds to light. Together, they form one of the basic building blocks of a 3D scene.
Complex objects can be assembled from triangles. Each triangle has three vertices, and each vertex can store position, normal, color, texture coordinates, and other attributes.
// Geometry + material = mesh
const geometry =
new THREE.IcosahedronGeometry(1, 2);
const material =
new THREE.MeshStandardMaterial({
color: 0x78f6ff,
roughness: 0.3,
metalness: 0.5
});
const mesh = new THREE.Mesh(
geometry, material
);
scene.add(mesh);
Vertices
Triangles
Meshes
POLYGONAL STRUCTUREFIG 02.01
03 / THE CAMERA
Choose what
the world shows.
A camera transforms a 3D world into a view. A perspective camera makes distant objects appear smaller, creating the familiar sense of depth. An orthographic camera keeps apparent object size independent of distance.
The camera's field of view, aspect ratio, near plane, and far plane determine how the scene is projected. The view matrix positions the world relative to the camera, while the projection matrix maps it into clip space.
// Perspective projection
const camera =
new THREE.PerspectiveCamera(
55,
innerWidth / innerHeight,
0.1,
100
);
camera.position.set(0, 2, 7);
camera.lookAt(0, 0, 0);
Perspective
Projection
Depth
CAMERA FRUSTUMFIG 03.01
04 / LIGHT & MATERIALS
Surfaces tell
stories through light.
Materials determine how a surface interacts with illumination. Roughness controls how broad or concentrated its highlights appear. Metalness influences how metallic surfaces reflect their surroundings.
Realistic rendering often combines direct lighting, environment lighting, surface normals, shadows, and physically based material models. The final result depends on both the lighting and the material.
// A physically based surface
const material =
new THREE.MeshStandardMaterial({
color: 0xa68aff,
metalness: 0.75,
roughness: 0.22
});
const light =
new THREE.PointLight(
0x78f6ff, 80, 30
);
light.position.set(3, 4, 2);
BRDF
Roughness
Reflections
ILLUMINATION STUDYFIG 04.01
05 / THE RENDERING PIPELINE
From your code
to the screen.
Rendering is a sequence of transformations. Application code updates scene data, the camera defines the view, and the graphics pipeline processes geometry and shaders before producing pixels.
The exact pipeline depends on the renderer and its configuration. Modern engines may include shadow maps, depth testing, post-processing, temporal techniques, and multiple rendering passes.
// The core rendering loop
function animate() {
requestAnimationFrame(animate);
mesh.rotation.y += 0.005;
renderer.render(scene, camera);
}
animate();
Vertex shader
Rasterization
Fragment shader
01 / SCENE DATAOBJECTS
02 / VERTEX PROCESSINGPOSITIONS
03 / PRIMITIVE ASSEMBLYTRIANGLES
04 / RASTERIZATIONFRAGMENTS
05 / FRAGMENT SHADINGCOLORS
06 / FRAMEBUFFERPIXELS
SIMPLIFIED GPU PIPELINEFIG 05.01
06 / SHADERS
Teach the GPU
to imagine.
Shaders are programs executed as part of the graphics pipeline. Vertex shaders process vertex data; fragment shaders determine the output for fragments that may contribute to pixels.
With custom shaders, developers can build procedural patterns, distort surfaces, animate noise, generate holographic effects, and manipulate color directly on the GPU.
// Fragment shader concept
uniform float uTime;
varying vec2 vUv;
void main() {
float wave = sin(
vUv.x * 18.0 + uTime
);
vec3 color = mix(
vec3(0.04, 0.1, 0.3),
vec3(0.2, 0.95, 1.0),
wave * 0.5 + 0.5
);
gl_FragColor = vec4(color, 1.0);
}
GLSL
GPU
Procedural art
PROCEDURAL FIELDFIG 06.01
07 / TIME & MOTION
Make mathematics
move.
Animation is the process of changing scene properties over time. Position, rotation, color, scale, camera movement, and shader uniforms can all be animated.
Use elapsed time rather than frame count whenever possible. Delta time makes motion more consistent across devices running at different frame rates. Interpolation and easing can make transitions feel intentional.
// Time-based motion
const clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
const time = clock.getElapsedTime();
mesh.position.y =
Math.sin(time) * 0.5;
mesh.rotation.x = time * 0.2;
renderer.render(scene, camera);
}
Time
Interpolation
Easing
ANIMATED TRAJECTORYFIG 07.01
08 / SCROLL-DRIVEN WORLDS
Scroll is not
just a page.
A scroll-driven experience can treat document position as an input to a 3D scene. As the reader moves through chapters, the camera can travel, particle systems can reorganize, and objects can transform.
This creates a connection between explanation and demonstration: the scene becomes part of the story instead of serving as a decorative background. Keep motion smooth and provide alternatives for reduced-motion preferences.
// Map scroll progress to scene state
const progress =
scrollY / (
document.body.scrollHeight -
innerHeight
);
camera.position.z =
THREE.MathUtils.lerp(8, 2, progress);
mesh.rotation.y = progress * Math.PI * 2;
Scroll progress
Camera paths
Storytelling
SCROLL → SCENE STATEFIG 08.01
09 / PERFORMANCE
Beauty needs
a budget.
Real-time graphics must finish their work within a frame budget. At 60 frames per second, a frame takes about 16.7 milliseconds. That time must accommodate application logic, rendering, browser work, and other tasks.
Reduce unnecessary draw calls, reuse geometry and materials, limit expensive effects, control pixel ratio, and avoid allocating new objects in every frame. Profile on representative devices rather than relying on guesses.
16.7 msFrame budget at 60 FPS
1 drawIdealized single draw call
GPUParallel computation
LODLevel of detail
Instancing
Culling
Profiling
FRAME BUDGETFIG 09.01
10 / INTERACTIVE LABORATORY
Stop reading.
Start building.
Change the parameters and watch a live particle system respond. This small laboratory uses the same principles introduced throughout the documentary.
REFERENCE / QUICK DEFINITIONS
The language
of 3D.
A compact glossary of foundational concepts used throughout real-time graphics.
Matrix
A structured set of numbers used to represent transformations and map coordinates between spaces.
Mesh
A collection of vertices and geometric primitives, typically combined with a material to create a visible object.
Normal
A direction perpendicular to a surface, used in lighting calculations and other geometric operations.
UV coordinates
Two-dimensional coordinates that associate points on a surface with locations in a texture.
Rasterization
The process of determining which screen-space fragments are covered by geometric primitives.
Shader
A GPU program that processes graphics data, such as vertex positions or fragment colors.
Framebuffer
A rendering destination that stores output such as color and depth for a frame or rendering pass.
Ray tracing
A family of techniques that trace rays through a scene to estimate visibility, reflections, and illumination.
Physically based rendering
Rendering methods that use material and lighting models designed to behave consistently with physical principles.
Instancing
Rendering many copies of geometry efficiently by sharing underlying resources and varying per-instance data.
Post-processing
Image operations applied after a scene is rendered, such as bloom, color grading, and depth-based effects.
END OF DOCUMENT / BEGINNING OF CREATION
The browser
is a universe.
Three-dimensional web graphics bring mathematics, programming, design, and storytelling into a single interactive medium. Learn the fundamentals, experiment with the parameters, inspect the rendering pipeline, and then build something that could not exist as a static page.