How Computers Render Graphics
A visual primer on pixels, triangles, and the pipeline
Pixels Triangles Shaders
Framebuffers
Prepared for: Brother 2026-02-09
How Computers Render Graphics
Contents
• 1. From math to pixels
• 2. The rendering pipeline in six steps
• 3. Shaders: tiny programs, huge effects
• 4. Depth, blending, and why order matters
• 5. Practical performance rules
How to use this booklet
This is a short, original mini-book. Each section is designed to be readable in one sitting. Skim the
highlighted boxes first, then return for the full explanations, diagrams, and small examples.
Original PDF generated locally Page 2
How Computers Render Graphics
1. From math to pixels
A screen is a grid of pixels. Rendering is the process of deciding what color each pixel should be for a
given frame.
Even realistic images are often built from simple geometry, especially triangles, because triangles are
always planar and easy to transform.
Key idea
Modern graphics is mostly fast linear algebra plus clever shortcuts.
Original PDF generated locally Page 3
How Computers Render Graphics
2. The rendering pipeline in six steps
A typical real-time pipeline: (1) build geometry, (2) transform it into camera space, (3) project to 2D,
(4) rasterize into fragments, (5) shade fragments, (6) write results to a framebuffer.
Each step is a place to trade quality for speed. Games do this constantly, because the frame budget
is limited.
Pipeline steps and what they do
Step What happens Example decision
Geometry Objects become triangles Level of detail
Transforms Move into camera view Camera position
Projection 3D to 2D mapping Field of view
Rasterization Triangles to pixels Anti-aliasing
Shading Lighting and materials Simple vs complex shader
Output Write image HDR or standard
Real pipelines add depth tests, textures, post-processing, and more.
Original PDF generated locally Page 4
How Computers Render Graphics
3. Shaders: tiny programs, huge effects
Shaders are small programs that run on the GPU. A vertex shader processes vertices, and a
fragment or pixel shader computes colors.
Many visual effects are shader tricks: normals, shadows, fog, reflections, and stylized outlines.
Toy performance budget (illustrative)
40
35
32
24
20
18
16 15
12
8
0
ry ng ture
s
met Sha
di
Tex Post CPU
Geo
Percent of frame time by category, shown as a toy example.
Original PDF generated locally Page 5
How Computers Render Graphics
4. Depth, blending, and why order matters
The depth buffer tracks how far a pixel is from the camera. It prevents far objects from drawing over
nearer ones.
Blending is used for transparency, but it often requires drawing in a careful order. This is why
transparent objects are sometimes expensive.
Key idea
If you ever wonder why glass looks wrong in games, blending order is a common culprit.
Original PDF generated locally Page 6
How Computers Render Graphics
5. Practical performance rules
Performance is not magic. You reduce work: fewer pixels (lower resolution), fewer triangles (lower
detail), simpler shaders, smaller textures, and fewer draw calls.
Treat each visual feature as having a cost. You can spend that cost only if the player will notice the
benefit.
Optimization knobs
Knob What it changes Typical benefit
Resolution scale Pixels per frame Big GPU savings
LOD models Triangle count Stable frame rate
Shader simplification Math per pixel Less heat and lag
Texture sizes Memory bandwidth Fewer stutters
Culling Skip unseen objects Less overall work
Good optimization keeps quality where it matters: what the user looks at.
Original PDF generated locally Page 7