A comprehensive, opinionated guide for the software engineer who wants to understand computer graphics from first principles — the math, the algorithms, the GPU pipeline, shader programming, creative coding, and how real-world systems actually render. Bridges academic rigor with practical fun.
49 chapters · 10 Parts · 3 Appendices · 3 languages (JS, C++, GLSL) · 13+ build projects
100x-computer-graphics-guide/
Part 0 — The Math You Need ← Vectors, matrices, transforms, projections, curves — visualized in p5.js
Part 1 — Your First Pixels ← p5.js, canvas, color theory, 2D graphics, first C++ rasterizer
Part 2 — The Rasterization Pipeline ← Triangles→pixels: vertices, rasterization, Z-buffer, textures, OpenGL
Part 3 — Lighting and Shading ← Light physics, Phong, shaders, GLSL, materials, normal maps, shadows
Part 4 — Ray Tracing ← Ray casting, reflections, BVH, materials — build a ray tracer in C++
Part 5 — Advanced Rendering ← Radiometry, BRDFs, Monte Carlo, path tracing, PBR, global illumination
Part 6 — Animation and Simulation ← Keyframes, skeletal, particles, rigid bodies, cloth, fluids, Nature of Code
Part 7 — Creative Coding and Shaders ← Shadertoy, Three.js, generative art, noise, live-coding, ray marching
Part 8 — Real-World Systems ← How Chrome, Unity, Unreal, Blender, and WebGPU actually render
Part 9 — Geometry and Curves ← Meshes, halfedge, Bezier, subdivision, spatial structures, file formats
├── appendices/ ← Glossary, resources, math reference
└── README.md ← You are here
You're a software engineer who wants to understand how pixels get on screen. Not the CSS kind — the "how does a GPU turn triangles into a photorealistic frame 60 times per second" kind. Maybe you want to understand how Chrome renders a webpage at the hardware level. Maybe you want to write shaders that make people stop scrolling. Maybe you want to build a ray tracer that produces photorealistic images from pure math. Maybe you just think generative art is beautiful and want to understand what's happening.
This guide is for you if:
- You have zero graphics or linear algebra background
- You want to understand the math deeply — not skip it with a library
- You want to build renderers, ray tracers, and shaders from scratch
- You want to know how Chrome, Unity, and Unreal actually render
- You want practical skills that produce visible, shareable results
- You think live-coding visuals and generative art are cool
- You want to learn C++, GLSL, and creative JavaScript along the way
Reference curricula: CMU 15-462, MIT 6.837, UCSD CSE167x, Columbia Animation/CGI, Rutgers CS 428 Key resources: LearnOpenGL, Ray Tracing in One Weekend, PBRT, Scratchapixel, Nature of Code, The Book of Shaders, Matt DesLauriers' creative coding workshops
Three languages, each where it's strongest:
| Language | Used For | First Appears |
|---|---|---|
| JavaScript / p5.js | Math visualization, creative coding, instant feedback, canvas-sketch, Three.js | Part 0 |
| C++ | Software rasterizer, OpenGL, ray tracer, path tracer, serious graphics | Part 1 (Ch 9) |
| GLSL / WGSL | Shader programming (vertex + fragment), Shadertoy, GPU-side code | Part 2 (Ch 15) |
| Your Goal | Start Here | Then |
|---|---|---|
| Learn from zero | Part 0: Ch 0 → 1 → 2 → 3 → 4 | Part 1, then Part 2 |
| Build a ray tracer | Part 0 (math), then Part 4: Ch 21 → 22 → 23 → 24 → 25 | Part 5 (path tracing) |
| Write shaders | Part 0, Part 2 (Ch 15), Part 3: Ch 16 → 17 → 18 | Part 7 (Shadertoy, creative) |
| Creative coding / generative art | Part 0, Part 1: Ch 5 → 6 → 7 | Part 7: Ch 36 → 37 → 38 → 39 |
| Understand how Chrome renders | Part 0 → Part 2 → Part 8: Ch 41 | Done |
| Understand how Unity/Unreal works | Part 0 → Part 2 → Part 3 → Part 8: Ch 42 | Done |
| Physics simulation | Part 0 → Part 6: Ch 31 → 33 → 34 → 35 | Nature of Code projects |
| Photorealistic rendering | Part 0 → Part 4 → Part 5: Ch 26 → 27 → 28 → 29 → 30 | Part 8: Ch 43 |
| Quick lookup | Glossary | Math Reference |
Every concept visualized immediately. You SEE what a matrix does to a shape in p5.js before you memorize the formula.
| Ch | Title | Difficulty | Language | What You'll Learn |
|---|---|---|---|---|
| 0 | Vectors and Points | Beginner | JS/p5.js | Vectors as arrows, dot product (lighting!), cross product (normals!), coordinate systems |
| 1 | Matrices and Transforms | Beg→Inter | JS/p5.js | Matrices as transformations, 2D/3D transforms, homogeneous coordinates, quaternions intro |
| 2 | Coordinate Spaces and the View Pipeline | Intermediate | JS/p5.js | Object→world→camera→clip→screen, model/view/projection matrices, perspective projection |
| 3 | Trigonometry and Curves for Graphics | Beg→Inter | JS/p5.js | Sin/cos as circular motion, parametric curves, interpolation (lerp, smoothstep), Bezier curves |
| 4 | Calculus Essentials for Graphics | Intermediate | JS/p5.js | Derivatives (normals, rates of change), integrals (light energy), gradient, numerical integration |
Exit state: You work with vectors, matrices, and transforms fluently. You understand the coordinate space pipeline every 3D application uses.
Instant gratification. Drawing and animating within the first hour. p5.js and canvas-sketch in the browser, then your first C++ rasterizer.
| Ch | Title | Difficulty | Language | What You'll Learn |
|---|---|---|---|---|
| 5 | Drawing with Code: p5.js and Canvas | Beginner | JS | p5.js setup, draw loop, shapes, color, animation, canvas-sketch toolkit, interaction |
| 6 | Color Theory for Programmers | Beginner | JS | RGB, HSB, color spaces, gamma, alpha compositing, blending modes, How Chrome Does This |
| 7 | 2D Transformations in Practice | Beg→Inter | JS | translate/rotate/scale, matrix stack, scene graphs, sprite animation, How Unity Does This |
| 8 | Pixels and Images | Intermediate | JS | Pixel manipulation, convolution kernels (blur, sharpen, edge detect), image formats, How Chrome Does This |
| 9 | 2D Graphics from Scratch | Intermediate | C++ | Bresenham's line, scanline triangle fill, polygon clipping, anti-aliasing, build a 2D rasterizer |
Exit state: You can draw, animate, and manipulate 2D graphics. You've built a 2D rasterizer from scratch in C++.
How 3D becomes 2D. Build a software rasterizer in C++, then learn how the GPU does it with OpenGL.
| Ch | Title | Difficulty | Language | What You'll Learn |
|---|---|---|---|---|
| 10 | The Graphics Pipeline Overview | Intermediate | — | Vertices in → pixels out, pipeline stages, fixed vs programmable, How Unity Does This |
| 11 | Vertex Processing and Transforms | Intermediate | C++ | Vertex attributes, MVP transform chain, clipping, perspective divide, viewport transform |
| 12 | Rasterization: Turning Triangles into Pixels | Inter→Adv | C++ | Edge functions, barycentric coordinates, interpolation, fill rules, sub-pixel precision |
| 13 | Depth, Visibility, and the Z-Buffer | Intermediate | C++ | Z-buffer algorithm, depth precision, reverse-Z, painter's algorithm, transparency |
| 14 | Texture Mapping | Inter→Adv | C++ | UV coordinates, bilinear/trilinear filtering, mipmaps, anisotropic filtering, How Chrome Does This |
| 15 | Your First OpenGL Program | Intermediate | C++/GLSL | GLFW + GLAD + GLM, hello triangle, VAOs, uniforms, textured 3D cube with camera |
Exit state: You've built a software rasterizer AND an OpenGL program. You know how triangles become pixels.
Making things look real. Light, materials, and shaders — the difference between a gray triangle and a gleaming metal sphere.
| Ch | Title | Difficulty | Language | What You'll Learn |
|---|---|---|---|---|
| 16 | How Light Works (for Graphics) | Intermediate | — | Light sources, diffuse/specular reflection, the rendering equation (conceptual), energy conservation |
| 17 | Phong and Blinn-Phong Shading | Intermediate | C++/GLSL | Ambient + diffuse + specular, Gouraud vs Phong shading, lit 3D scene in OpenGL |
| 18 | Shader Programming Deep Dive | Inter→Adv | GLSL | GLSL language, vertex/fragment patterns, uniforms, texture coordinates, rim lighting, GLSL noise, antialiasing |
| 19 | Materials and Textures Advanced | Inter→Adv | C++/GLSL | Normal mapping, tangent space, environment mapping, PBR preview, How Unity Does This |
| 20 | Shadows | Inter→Adv | C++/GLSL | Shadow mapping, artifacts and fixes, PCF, cascade shadow maps, How Unreal Does This |
Exit state: You can light and shade 3D scenes. You write shaders in GLSL. You understand materials, normal mapping, and shadows.
The other way to render. "For each pixel, what does it see?" Elegant, physically accurate, and the foundation of photorealistic rendering.
| Ch | Title | Difficulty | Language | What You'll Learn |
|---|---|---|---|---|
| 21 | Ray Casting Fundamentals | Intermediate | C++ | Ray representation, ray-sphere/plane/triangle intersection, camera rays, minimal ray caster |
| 22 | Recursive Ray Tracing | Inter→Adv | C++ | Reflection, refraction (Snell's law, Fresnel), shadow rays, Whitted ray tracing |
| 23 | Acceleration Structures | Inter→Adv | C++ | BVH (AABB, SAH construction, traversal), k-d trees, uniform grids, O(n)→O(log n) |
| 24 | Materials and Textures for Ray Tracing | Intermediate | C++ | Lambertian, metals, dielectrics, procedural textures, emissive materials |
| 25 | Camera Models and Effects | Intermediate | C++ | Thin lens (depth of field), motion blur, tone mapping, gamma correction |
Exit state: You've built a complete ray tracer from scratch with BVH, multiple materials, depth of field, and motion blur.
Physically-based rendering, global illumination, Monte Carlo methods. How Pixar and Blender's Cycles actually work.
| Ch | Title | Difficulty | Language | What You'll Learn |
|---|---|---|---|---|
| 26 | Radiometry and the Rendering Equation | Advanced | — | Radiance, irradiance, BRDF, solid angles, the rendering equation (Kajiya 1986) |
| 27 | Monte Carlo Integration | Advanced | C++ | Random sampling, the estimator, variance, importance sampling, Russian roulette |
| 28 | Path Tracing | Advanced | C++ | Path tracer implementation, Cornell Box with global illumination, noise and convergence |
| 29 | Physically-Based Materials | Inter→Adv | C++/GLSL | Cook-Torrance, GGX, Fresnel, metallic workflow, IBL, How Unity/Unreal Do PBR |
| 30 | Global Illumination Techniques | Advanced | — | Photon mapping, radiosity, light probes, SSAO/SSGI, denoising, Unreal Lumen, Blender Cycles |
Exit state: You understand PBR from the rendering equation through Monte Carlo to path tracing. Your path tracer produces photorealistic images.
Making things move. Keyframes to physics simulation — with Nature of Code integration for simulating natural systems.
| Ch | Title | Difficulty | Language | What You'll Learn |
|---|---|---|---|---|
| 31 | Animation Fundamentals | Intermediate | JS/C++ | Keyframes, spline interpolation, easing, animation curves, the animation loop, How Unity Does This |
| 32 | Skeletal Animation and Skinning | Inter→Adv | C++ | Bones, FK/IK (CCD, FABRIK), linear blend skinning, dual quaternion skinning, animation blending |
| 33 | Particle Systems and Forces of Nature | Intermediate | JS/C++ | Particles, forces, ODE integration, Nature of Code: gravitational attraction, flocking/boids, steering behaviors |
| 34 | Rigid Body Dynamics | Inter→Adv | C++ | Linear/rotational dynamics, collision detection (GJK, SAT), impulse resolution, How Unity PhysX Works |
| 35 | Cloth, Fluids, and Soft Bodies | Advanced | C++ | Mass-spring, PBD, Eulerian fluids, SPH, How Unreal Chaos Physics Works |
Exit state: You can animate characters, simulate particles, implement physics. You've built flocking simulations and rigid body dynamics.
Where graphics becomes art. Maximum visual payoff, infinite creative possibilities. Shadertoy, Three.js, Nature of Code, Matt DesLauriers' techniques.
| Ch | Title | Difficulty | Language | What You'll Learn |
|---|---|---|---|---|
| 36 | The Book of Shaders: Fragment Shader Art | Intermediate | GLSL | Shapes from math, SDFs, smoothstep, GLSL noise, uniforms, hot reloading, Shadertoy + canvas-sketch |
| 37 | Noise and Procedural Generation | Inter→Adv | GLSL/JS | Perlin, simplex, Worley noise, fBm, domain warping, procedural textures and landscapes |
| 38 | Generative Art and Simulating Nature | Intermediate | JS/p5.js | Nature of Code (random walks, genetic algorithms, ecosystems), Sol LeWitt wall drawings, penplotter art, flow fields |
| 39 | Live-Coding, Three.js, and Real-Time Visuals | Intermediate | JS/GLSL | Three.js creative coding, canvas-sketch, audio-reactive visuals, GIF/MP4 export, VJ culture |
| 40 | Ray Marching and SDFs in Shaders | Inter→Adv | GLSL | 3D SDFs, smooth operations, lighting, soft shadows, AO — entire 3D scenes in a fragment shader |
Exit state: You can create shader art, generative visuals, live-coding performances, and procedural content.
How the software you use every day actually renders. Dedicated deep-dives into production systems.
| Ch | Title | Difficulty | Language | What You'll Learn |
|---|---|---|---|---|
| 41 | How a Browser Renders a Webpage | Inter→Adv | varies | Chrome's pipeline: DOM→Style→Layout→Paint→Composite, Skia, GPU compositing, Canvas, WebGL |
| 42 | How a Game Engine Renders a Frame | Advanced | varies | Unity URP/HDRP, draw calls, batching, LOD, occlusion culling, Unreal Nanite/Lumen |
| 43 | How Path Tracers Work in Production | Advanced | varies | Blender Cycles, PBRT architecture, RenderMan, Arnold, production vs hobby path tracers |
| 44 | WebGPU and the Future of Graphics | Inter→Adv | JS/WGSL | WebGPU architecture, WGSL shaders, compute shaders, NeRFs, Gaussian Splatting, RTX |
Exit state: You understand how Chrome, Unity, Unreal, Blender, and WebGPU work under the hood.
The shapes that graphics operates on. Meshes, curves, surfaces, and spatial data structures.
| Ch | Title | Difficulty | Language | What You'll Learn |
|---|---|---|---|---|
| 45 | Meshes and Mesh Processing | Intermediate | C++ | Triangle meshes, vertex/index buffers, halfedge data structure, mesh operations |
| 46 | Bezier Curves and Splines | Inter→Adv | JS/C++ | de Casteljau, cubic Bezier, B-splines, NURBS, subdivision surfaces, font rendering |
| 47 | Spatial Data Structures | Inter→Adv | C++ | BVH deep dive, k-d trees, octrees, BSP trees, spatial hashing, frustum culling |
| 48 | 3D File Formats and the Asset Pipeline | Intermediate | C++ | OBJ, glTF, FBX, USD, Alembic, the asset pipeline, How Unity imports assets |
Exit state: You understand meshes, curves, spatial structures, and the file formats that connect tools together.
| Appendix | Title | What's Inside |
|---|---|---|
| A | Glossary | 250+ terms from AABB to Z-buffer, cross-referenced to chapters |
| B | Resources | Books, courses, repos, YouTube, communities — annotated |
| C | Math Reference | Vector ops, matrix forms, trig identities, GLSL built-ins |
TRANSFORMS Ch 1 → Ch 2 → Ch 7 → Ch 11 → Ch 31 → Ch 32
matrices → view pipeline → 2D practice → vertex processing → animation → skeletal
LIGHT & COLOR Ch 6 → Ch 16 → Ch 17 → Ch 26 → Ch 29 → Ch 36
color theory → light physics → Phong → radiometry → PBR materials → shader lighting
RENDERING EQ Ch 16 → Ch 17 → Ch 26 → Ch 27 → Ch 28 → Ch 30
conceptual → Phong approximation → full equation → Monte Carlo → path tracing → GI
SAMPLING/NOISE Ch 8 → Ch 12 → Ch 14 → Ch 27 → Ch 37 → Ch 40
pixels as samples → rasterization → texture filtering → Monte Carlo → noise functions → ray marching
REAL-WORLD Ch 6 → Ch 8 → Ch 10 → Ch 14 → Ch 19 → Ch 29 → Ch 30 → Ch 34 → Ch 41-44
Chrome color → Chrome images → Unity pipeline → Chrome textures → Unity materials → PBR → Lumen → PhysX → deep dives
BUILD FROM Ch 9 → Ch 11-14 → Ch 15 → Ch 21-25 → Ch 28 → Ch 33 → Ch 40 → Ch 45
SCRATCH 2D rasterizer → 3D rasterizer → OpenGL → ray tracer → path tracer → particles → SDF scene → mesh processor
DSP/CODE Ch 3 → Ch 27 → Ch 37 → Ch 40
parametric curves → Monte Carlo → procedural noise → ray marching (all math→code)
CREATIVE Ch 5 → Ch 7 → Ch 36 → Ch 37 → Ch 38 → Ch 39 → Ch 40
p5.js → 2D transforms → shaders → noise → generative art → Three.js/live-coding → ray marching
| Ch | Project | Language | Domain |
|---|---|---|---|
| 9 | 2D Software Rasterizer | C++ | Rasterization |
| 11-14 | 3D Software Rasterizer (progressive) | C++ | Rasterization |
| 15 | First OpenGL Program (textured cube) | C++/GLSL | GPU |
| 17 | Lit 3D Scene in OpenGL | C++/GLSL | Lighting |
| 21-25 | Ray Tracer (progressive build) | C++ | Ray Tracing |
| 28 | Path Tracer (Cornell Box) | C++ | Advanced Rendering |
| 33 | Particle System + Flocking Simulation | JS/C++ | Simulation |
| 36 | 5 Classic Shader Effects | GLSL | Creative |
| 38 | Flow Field + Fractal Tree + Ecosystem | p5.js | Generative Art |
| 39 | Audio-Reactive Shader + Three.js Scene | JS/GLSL | Creative |
| 40 | 3D SDF Scene in a Fragment Shader | GLSL | Ray Marching |
| 44 | WebGPU Triangle + Compute Particles | JS/WGSL | Modern GPU |
| 45 | OBJ Loader + Halfedge Mesh | C++ | Geometry |