How Mathematics Improves The World | Turning a Three-Dimensional World Into a Picture on a Flat Screen
A dragon in a game has no pixels.
At least not at first.
It begins as geometry.
Vertices.
Triangles.
Surface normals.
Materials.
Lights.
A camera that does not physically exist looks at it from a position that also does not physically exist.
Then a rectangular screen containing a few million pixels must somehow show the scene as if the dragon occupied a coherent three-dimensional world.
Far objects must become smaller.
Near objects must hide far ones.
Light must bounce.
Shadows must fall.
Curved surfaces built from triangles must look smooth.
And all of this may need to happen sixty, ninety or hundreds of times each second.
Computer graphics is the Mathematics of converting a spatial model into a visual measurement.
Quick Read
Rendering is the process of producing an image from a description of a 3D scene. The fourth edition of Physically Based Rendering describes projective camera models, radiometry, geometry, light transport and ray tracing as parts of one physically grounded image-formation problem. Khronos’ OpenGL documentation describes the real-time transformation pipeline in another language: model and view transformations move geometry into camera space, a projection matrix produces clip coordinates, the perspective divide maps them to normalized device coordinates, and the viewport maps them to screen coordinates.
There are two broad computational traditions. Rasterization asks which pixels are covered by projected triangles, interpolates attributes across those pixels and resolves visibility with depth tests. Ray tracing follows rays from the camera through pixels into the scene, finding geometric intersections and evaluating light transport. Modern graphics often mixes both.
Mathematics enters through linear algebra, projective geometry, barycentric coordinates, interpolation, radiometry, probability and numerical integration. A perspective matrix explains why distant objects appear smaller. The z-buffer explains which surface is visible. Monte Carlo integration explains how physically based renderers approximate enormous light-transport integrals with finite random samples.
One-sentence answer: Mathematics improves the world by converting a three-dimensional description of geometry and light into a two-dimensional field of pixel values, making simulation, design, games, cinema, scientific visualisation and digital interfaces possible on flat displays.
The Scene Exists in Object Space First
A 3D model is usually defined in its own local coordinates.
A car wheel may be centred at the origin.
A character hand may be defined relative to the wrist joint.
A building module may be modelled around a convenient local frame.
These are object coordinates.
To place the object in a world, translate, rotate and scale it.
Linear algebra turns many geometric operations into matrix multiplication.
Homogeneous Coordinates: Translation Joins the Matrix Family
A 3D point (x,y,z) becomes a 4D homogeneous vector:
(x, y, z, 1).
Now translation can be represented with a 4×4 matrix.
Rotation.
Scale.
Translation.
Perspective.
All compose through matrix multiplication.
Homogeneous coordinates are one of computer graphics’ quiet superpowers.
Model Transform: Put the Object Into the World
Let M be the model matrix.
pworld = M pobject.
Scale the wheel.
Rotate it onto the axle.
Translate it to the car.
Parent-child transforms let a character hierarchy move coherently.
A fingertip follows hand, wrist, elbow and shoulder transforms.
Scene graphs are multiplication trees.
View Transform: Move the World So the Camera Can Stay Simple
Graphics often treats the camera as if it were at the origin looking in a canonical direction.
Instead of moving a physical camera through a virtual world, apply the inverse camera transform to the world.
pcamera = V pworld.
Khronos describes this movement into eye coordinates before projection.
Changing viewpoint is a coordinate change.
Perspective: Distance Must Change Apparent Size
A cube twice as far away should appear roughly half as large in angular extent under the pinhole model.
For a simple camera looking along z:
x′ = f x/z, y′ = f y/z.
The division by depth creates foreshortening.
PBRT describes perspective projection as the classic projective camera model in which farther objects become smaller, unlike orthographic projection.
The human impression of depth begins with a division.
Projection Matrices Delay the Division
Graphics hardware does not usually divide x and y by z immediately.
A projection matrix produces clip-space coordinates including w.
Later:
xndc = xclip/wclip,
yndc = yclip/wclip,
zndc = zclip/wclip.
Khronos calls this the perspective divide.
That homogeneous construction lets clipping happen elegantly before the nonlinear divide.
Field of View: Geometry Controls Visual Feeling
A narrow field of view magnifies a small angular region.
A wide field of view shows more space and exaggerates perspective toward the edges.
PBRT’s perspective camera uses field-of-view angle to scale the canonical projection.
Cinematography, games and VR all use this parameter differently.
One angle changes the psychological character of the image because it changes projective geometry.
Near and Far Planes: The Camera Sees a Frustum
A perspective camera does not render all of infinite space.
A near plane cuts away geometry too close.
A far plane limits distant geometry.
Together with horizontal and vertical field of view they create a viewing frustum.
Objects outside it can be clipped before expensive pixel work.
Visibility begins with geometric rejection.
Clipping: A Triangle Can Cross the Camera Boundary
One vertex lies inside the frustum.
Two outside.
Discarding the whole triangle creates a hole.
Instead clip the triangle against the viewing volume and create new vertices where edges cross planes.
Computational geometry edits the primitive before projection finishes.
Viewport Transform: Normalised Space Becomes Pixels
After perspective divide, OpenGL-style normalized device coordinates live in a canonical cube.
The viewport transform maps x and y to a rectangle of actual screen pixels and z to the depth-buffer range.
Khronos documents this final transformation from NDC to window coordinates.
A floating-point geometric world lands on a finite raster.
Why Triangles?
Three non-collinear points define a plane.
A triangle is always planar.
Any polygon can be decomposed into triangles.
Interpolation across triangles is simple.
Graphics hardware has been optimised around them for decades.
Complex curved characters are therefore often represented as enormous meshes of tiny flat triangles.
Smoothness emerges from quantity and shading, not from the primitive itself.
Rasterization: Which Pixels Does This Triangle Cover?
Project a triangle into screen space.
Now determine which pixel sample locations lie inside it.
Edge functions provide efficient half-plane tests.
A point is inside when it lies on the correct side of all three oriented edges.
Rasterization turns continuous projected area into discrete samples.
Barycentric Coordinates: Every Point Is a Weighted Mixture of the Vertices
For a point p inside triangle vertices A, B and C:
p = αA + βB + γC,
α+β+γ=1.
These barycentric weights interpolate:
- depth;
- texture coordinates;
- vertex colours;
- normals;
- other attributes.
One geometric coordinate system becomes a universal interpolation machine.
Perspective-Correct Interpolation
Interpolate texture coordinates linearly after projection and textures appear to swim or distort across receding surfaces.
The reason is perspective division.
Attributes need correction involving reciprocal depth or clip-space w so interpolation remains linear in the appropriate pre-divide space.
A visual artefact is repaired by respecting projective geometry.
The Z-Buffer: Who Is in Front?
Two triangles project onto the same pixel.
Which one is visible?
Store the closest depth seen so far.
For each new fragment:
- compare its depth;
- keep it if closer;
- discard it if hidden.
This simple algorithm solves most ordinary visibility in raster graphics.
A million overlapping polygons become one visible layer per pixel.
Depth Precision Is Not Uniform
Perspective projection maps camera depth nonlinearly into the depth buffer.
Precision is concentrated nearer the camera in conventional mappings.
Choose a near plane absurdly close to zero and far-depth resolution collapses.
Two surfaces can fight numerically: z-fighting.
A camera parameter becomes a numerical-analysis decision.
Normals: Geometry Has Direction
A surface normal points perpendicular to the surface.
Lighting models use the angle between normal and light direction.
For diffuse Lambertian reflection:
I ∝ max(0, n·l).
The dot product converts angle into brightness.
A surface facing the light receives more direct illumination than one grazing it.
Smooth Shading: Make Flat Triangles Look Curved
A sphere mesh is made of flat triangles.
If each triangle uses one face normal, the sphere looks faceted.
Assign normals at vertices and interpolate them across triangles.
Lighting changes smoothly.
The geometry remains flat locally.
The shading tells the eye a smoother story.
Texture Mapping: Another Coordinate System
A 2D image is wrapped onto a 3D surface using texture coordinates (u,v).
Each mesh vertex stores where it corresponds on the texture.
Barycentric interpolation provides texture coordinates for every fragment.
Then sample the image.
A wooden table can have millions of visual details while its mesh remains relatively simple.
Coordinate mapping substitutes data for geometry.
Aliasing: Pixels Sample a Continuous World
A thin fence recedes into distance.
Its projected bars become narrower than a pixel.
Sampling can make them flicker, disappear or form moiré patterns.
This is aliasing.
Signal-processing theory says frequencies above the sampling limit fold into false lower frequencies.
Antialiasing integrates or filters the signal before or during sampling.
Multisampling: Ask the Pixel More Than One Question
One binary sample per pixel produces jagged edges.
Take several subpixel samples and average coverage.
The edge becomes a fractional intensity rather than a staircase.
More samples reduce aliasing and cost more computation.
Image quality is a sampling-budget allocation problem.
Ray Tracing Starts From the Pixel Instead
Rasterization projects geometry toward pixels.
Ray tracing often starts at the camera.
For each pixel sample, generate a ray through the virtual image plane into the scene.
Find the nearest geometric intersection.
Evaluate material and incoming light.
PBRT is built around this ray-tracing view of image formation.
The screen becomes a set of questions sent into the scene.
Ray–Triangle Intersection: Geometry as Equations
A ray is:
r(t)=o+td, t≥0.
Find t and barycentric coordinates such that r(t) lies on a triangle.
Algorithms solve a small linear system efficiently.
Repeat against every triangle naively and rendering becomes impossibly slow.
Acceleration structures change the complexity.
Bounding Volume Hierarchies: Do Not Test Every Triangle
Group geometry inside bounding boxes.
Group those boxes inside larger boxes.
A ray missing a high-level box skips everything inside it.
A bounding volume hierarchy turns millions of potential intersection tests into a logarithmic-style traversal for well-behaved scenes.
Khronos’ cross-vendor Vulkan ray-tracing specification exposes acceleration structures as a core part of hardware-accelerated ray tracing.
Shadows: Ask Whether the Light Is Visible
A point on a surface sees a light.
Cast a shadow ray toward the light.
If another object intersects first, the direct light is blocked.
A shadow is a visibility query.
Soft shadows from area lights require integrating visibility over many possible light points.
That brings probability into the renderer.
Reflection: One Ray Creates Another
A mirror reflects an incoming direction according to equal incidence and reflection angles.
Cast a secondary ray.
It hits another surface.
That surface may reflect again.
Recursive ray tracing creates mirror reflections naturally.
Glass adds refraction through Snell’s law and Fresnel reflectance.
Optics becomes code.
The Rendering Equation: Light Transport in One Integral
At a surface point, outgoing radiance in one direction equals emitted light plus reflected incoming light integrated over directions:
Lo = Le + ∫ frLi(n·ω)+dω.
The BRDF fr describes how material reflects light.
Li is incoming radiance.
The integral spans an entire hemisphere.
Incoming light itself depends on other surfaces, creating a recursive global problem.
Photorealistic rendering is numerical integration over paths of light.
Monte Carlo Integration: Render With Random Samples
Many rendering integrals are too complicated for exact solutions.
Sample random directions according to a probability density p(x).
Estimate:
∫f(x)dx ≈ (1/N)Σ f(xi)/p(xi).
The estimator converges statistically as samples increase.
The grainy noise in a low-sample path-traced image is uncertainty made visible.
More samples reduce variance.
Importance Sampling: Spend Rays Where Light Matters
Sampling directions uniformly wastes rays in directions contributing almost no light.
Importance sampling chooses a probability distribution shaped like the integrand where possible.
Glossy material?
Sample near the reflection lobe.
Small bright light?
Sample the light directly.
The expected value remains correct while variance falls.
Probability improves image quality without changing the physics.
Multiple Importance Sampling: Combine Imperfect Strategies
One strategy samples the light source well.
Another samples the material reflection well.
Neither wins everywhere.
Multiple importance sampling combines estimators with weights that reduce variance across cases.
This is a recurring mathematical pattern:
several biased-looking search strategies can combine into one unbiased, lower-noise estimate.
Colour Is Not Just Three Numbers
Light has a spectrum.
Displays emit limited spectral primaries.
Human vision compresses spectra through cone responses.
PBRT’s fourth edition treats spectra and colour explicitly before film output.
RGB is a practical representation, not the physical definition of light.
Rendering must eventually convert physical radiance into display-reproducible colour values.
High Dynamic Range: The World Is Brighter Than the Screen
Sunlit cloud and dark interior can differ by enormous luminance ratios.
A display has limited peak brightness and black level.
Tone mapping compresses scene luminance into display range while preserving perceptually important contrast.
This is another compression problem—but not image-file compression.
It is dynamic-range remapping for human perception.
Gamma and Transfer Functions: Equal Numbers Are Not Equal Brightness Steps
Image encoding often uses nonlinear transfer functions.
Arithmetic on gamma-encoded values can produce incorrect lighting.
Render in an appropriate linear-light space.
Encode for display afterward.
A colour-management mistake can look like a lighting mistake because representation changes arithmetic meaning.
Motion Blur: Time Is Another Integration Dimension
A physical camera shutter remains open for an interval.
Moving objects occupy different positions during that interval.
Accurate rendering integrates radiance over time.
Sample different shutter times for different rays.
Motion blur emerges from temporal integration.
A single frame is not always one instant.
Depth of Field: A Lens Does Not Focus Every Distance
The pinhole camera keeps everything sharp.
Real lenses have finite apertures.
PBRT notes that pinhole perfection is visually unrealistic and implements lens-based camera models.
Sample points across the lens aperture and focus them on a focal plane.
Objects away from that plane blur into circles of confusion.
Photography becomes geometry plus integration.
Real-Time Rendering: The Deadline Is Part of the Algorithm
A film renderer may spend minutes or hours per frame.
A game at 60 frames per second has about 16.7 milliseconds for each frame.
At 120 fps: 8.3 ms.
Everything—animation, physics, visibility, shading, post-processing—must fit inside the budget.
Real-time graphics is Mathematics under a hard deadline.
GPUs: Parallelism Matches the Pixel Problem
Millions of vertices can be transformed similarly.
Millions of fragments can be shaded similarly.
Ray workloads can also expose massive parallelism.
Graphics processing units contain large numbers of arithmetic lanes optimised for throughput.
The mathematical structure of graphics shaped the architecture of modern computing hardware.
Level of Detail: Use Fewer Polygons Where the Eye Cannot Tell
A distant tree covers thirty pixels.
Rendering a million-triangle model is wasteful.
Use a simpler representation at distance.
The allowable geometric error depends on projected screen error.
Perspective tells the engine when detail stops mattering visually.
Approximation becomes perception-aware resource allocation.
Culling: Do Not Render What Cannot Contribute
An object behind the camera.
Outside the frustum.
Hidden behind a wall.
Back-facing triangle in an opaque closed mesh.
Rejecting invisible work is one of graphics’ biggest performance gains.
Visibility mathematics prevents the computer from solving pixels the viewer can never see.
Scientific Visualisation: The Picture Can Represent Data, Not a Fantasy World
CT volume.
Weather simulation.
Molecular structure.
Fluid dynamics.
Graphics maps high-dimensional scientific data into visual variables.
Colour map choices, opacity transfer functions and viewpoint affect interpretation.
A beautiful visualisation can still mislead if its mapping exaggerates or hides structure.
Rendering is part of scientific communication, not merely decoration.
Digital Twins: Rendering Is the Window, Not the Twin
A digital twin may show a photorealistic factory.
The rendering is not the core model.
The twin’s value lies in state estimation, physics, sensor integration and predictive models.
Graphics makes those states visible.
A realistic image can help operators understand the model.
It should never make an unvalidated model feel more true merely because it looks real.
A Classroom Thought Experiment: Perspective With a Window
Stand in front of a window.
Close one eye.
Trace the outline of a distant building onto transparent film placed on the glass.
Move closer to the window.
The projected outline changes.
Move the building in imagination twice as far away.
Its angular size halves approximately.
Students have recreated the geometry of a pinhole camera with a window plane.
Primary Mathematics: 3D Graphics Begins With Shapes and Coordinates
Primary students already know:
- 2D and 3D shapes;
- coordinates;
- symmetry;
- scale;
- angles;
- fractions.
Rotate a cube.
Draw its projection.
Compare near and far sizes.
The graphics pipeline begins with visual geometry children already understand.
Secondary Mathematics: The Screen Becomes Linear Algebra
Secondary students add:
- vectors;
- matrices;
- trigonometry;
- coordinate geometry;
- interpolation;
- probability.
Transforms become matrix multiplication.
Perspective becomes division by depth.
Lighting becomes dot products.
Ray tracing becomes line–surface intersection.
Advanced Mathematics: Rendering as Geometry Plus Integration
Modern rendering draws on:
- projective geometry;
- linear algebra;
- computational geometry;
- radiometry;
- probability;
- Monte Carlo integration;
- signal processing;
- numerical analysis.
Geometry decides where surfaces are.
Projection decides where they appear.
Visibility decides what survives.
Light transport decides pixel values.
Why This Improves the World
1. It makes interactive 3D worlds possible
Projection and rasterisation turn moving geometry into millions of screen pixels within milliseconds.
2. It lets design exist before manufacture
Architects, engineers and product designers can inspect virtual geometry before physical construction.
3. It makes scientific data visible
Complex simulations and measurements can be converted into spatial pictures humans can inspect.
4. It simulates light rather than merely painting colour
Physically based rendering predicts image formation from materials, geometry and illumination.
5. It creates efficient approximations
Culling, level of detail, sampling and acceleration structures spend computation where it affects the final image most.
6. It connects mathematics to perception
Antialiasing, tone mapping and colour transforms account for the fact that the final consumer is a human visual system looking at a finite display.
What Mathematics Does Not Do
A photorealistic image does not prove the simulated world is physically correct.
A projection does not preserve all 3D distances or angles.
A high polygon count does not guarantee visual quality.
More ray-tracing samples do not fix a wrong material model.
A beautiful scientific visualisation does not guarantee honest data mapping.
And a flat screen can create a convincing impression of depth without containing depth itself.
Frequently Asked Questions
How does a computer turn 3D coordinates into 2D?
Geometry is transformed into camera space, multiplied by a projection matrix, clipped, divided by the homogeneous w coordinate to create normalized device coordinates, then mapped into screen coordinates by the viewport transform.
Why do distant objects look smaller?
Perspective projection divides projected x and y coordinates by depth, so apparent size decreases as distance from the camera increases.
What is rasterization?
Rasterization converts projected geometric primitives, usually triangles, into fragments associated with screen pixels and interpolates surface attributes across them.
What is ray tracing?
Ray tracing generates rays from the camera into the scene, computes intersections with geometry and evaluates visibility and light transport along those paths.
Why is ray tracing noisy?
Physically based ray tracing often estimates multidimensional light-transport integrals using a finite number of random Monte Carlo samples. With too few samples, estimator variance appears as image noise.
Sources and Further Reading
- Pharr, Jakob and Humphreys, Physically Based Rendering: From Theory to Implementation, Fourth Edition, open online edition covering geometry, radiometry, cameras, ray tracing and sampling.
- PBRT, Projective Camera Models, on orthographic and perspective projection.
- Khronos OpenGL Wiki, Viewing and Transformations, on object, eye, clip, normalized device and window coordinates.
- Khronos OpenGL Wiki, Perspective Divide and Viewport Transform.
- Khronos, Vulkan Ray Tracing, on the open cross-vendor ray-tracing framework and acceleration structures.
Continue Through eduKateSG
Continue with How Mathematics Works. Compare this article with Making Digital Pictures Smaller Without Losing What Matters: rendering creates pixel information while compression represents that information efficiently afterward. It also connects to Making a Robot Hand Reach Exactly the Right Place, where homogeneous transforms and coordinate frames move from visual geometry into physical manipulation.
Final Thought: The Screen Is Flat; the Mathematics Is Not
A vertex begins in a model.
A matrix puts it into the world.
Another puts the world in front of the camera.
A projection compresses depth.
A triangle covers pixels.
A depth test decides what is visible.
A light integral decides what colour arrives.
Then millions of numbers illuminate a flat panel.
Your eye sees a world.
Mathematics built the bridge between the two.