Jonathan Haaswritingnowusesabout
emailgithubx
Jonathan Haaswritingnowusesabout

The Mathematics Behind Real-Time Graphics

June 19, 2025·3 min read

The mathematical foundations that power real-time graphics: matrix transformations, perspective projection, lighting models, ray marching, and noise...

#mathematics#graphics#linear-algebra#shaders#webgl

Every pixel on screen is the product of mathematical operations running thousands of times per second. The gap between "understanding the math" and "shipping interactive graphics" is smaller than most developers assume, because the foundational concepts are few and the rest is composition.

Transformations: Matrices as Workhorses

A 4x4 matrix encodes translation, rotation, and scaling in a single operation. The upper-left 3x3 submatrix handles rotation and scaling. The rightmost column handles translation. Composing multiple transformations is matrix multiplication: M_final = M_projection * M_view * M_model.

This is why matrices dominate graphics pipelines. Every vertex in a scene gets multiplied by one composed matrix instead of applying transformations sequentially. The computational savings at millions of vertices per frame are enormous.

Perspective Projection

The most critical transformation: making distant objects appear smaller. The perspective projection matrix divides by the w component of homogeneous coordinates after projection. Objects further away have larger w values, making them smaller after division. This single division operation creates the illusion of depth that makes 3D scenes feel spatial.

The projection matrix is parameterized by field of view, aspect ratio, and near/far clipping planes. Choosing these parameters poorly causes z-fighting (depth buffer precision issues) -- a common bug that understanding the math prevents.

Lighting: Simplified Physics

Real-time lighting approximates physical light transport. The Phong model decomposes light into three components: ambient (uniform base), diffuse (Lambert's cosine law -- brightness proportional to the angle between surface normal and light direction), and specular (shiny highlights from the reflection vector dotted with the view direction, raised to a shininess exponent).

Modern PBR (physically based rendering) uses the Cook-Torrance BRDF, which models microfacet distribution, Fresnel reflectance (why water is more reflective at shallow angles), and geometric shadowing. More expensive per pixel, but the results are physically plausible across lighting conditions.

Ray Marching: Geometry Without Polygons

Signed distance functions (SDFs) return the shortest distance from any point to a surface. A sphere SDF is |p - center| - radius. A box SDF is max(|p.x| - size.x, |p.y| - size.y, |p.z| - size.z).

The ray marching algorithm steps a ray through space using the SDF value as a safe step size -- the SDF guarantees no surface is closer than that distance. Union is min(d1, d2). Intersection is max(d1, d2). Smooth blending creates organic transitions between shapes.

This technique renders complex geometry -- fractals, infinite detail surfaces, boolean combinations -- without a single polygon. The Menger sponge, for example, is four lines of iterative space-folding that produces infinite geometric detail at any zoom level.

Noise and Procedural Generation

Perlin noise generates natural-looking randomness via smooth interpolation between random gradient vectors, using a quintic smoothing polynomial. Layering multiple octaves (fractal Brownian motion) with halving amplitude and doubling frequency creates natural textures -- terrain, clouds, organic surfaces.

This mathematical principle powers procedural content generation across the industry. The Fast Fourier Transform does the inverse for audio visualization: decomposing signals into frequency components that drive geometric motion.

Quaternions

Euler angle rotations suffer from gimbal lock. Quaternions (q = w + xi + yj + zk) provide smooth, stable rotations without singularities. SLERP (spherical linear interpolation) between quaternions produces the smoothest possible rotation path between two orientations -- critical for camera animation and skeletal animation.

The Practical Takeaway

Matrix composition for transforms, Phong or PBR for lighting, SDFs for procedural geometry, noise for natural textures, quaternions for rotation. These five concepts cover the mathematical foundation of real-time graphics. Everything else is application and optimization.

The math is not complex. It is specific. Understanding it converts graphics programming from trial-and-error into deliberate engineering.

share

Continue reading

Building HDR Holographic Effects with CSS and JavaScript

HDR displays can push brightness values beyond the standard RGB range. Here's how to use that for holographic-style effects in the browser.

Simulating Liquid Metal with Web Technologies

How metaballs, spring physics, and viscosity damping create convincing fluid metal simulation in the browser at 60fps.

Building Cerebro: Giving AI Agents an Organizational Brain

Why AI agents need a world model before they can act safely, and how Cerebro provides pre-action enforcement, entity intelligence, and consequence...

emailgithubx