Computer Graphics: Past to Present

by Brendan Duncan

vector beamraster pixelsshaded
One shape, three eras. The same spinning ring drawn as a 1960s vector display would draw it, as an early raster screen would, and with the lighting we'll build later in the book. Every picture in between is a step you'll write yourself.

Every image a computer shows you, whether it's a game, a film effect, a map or the text you're reading right now, ends up as a grid of colored dots. This book is about how those dots get their colors.

We start with the simplest thing there is: setting one dot. From there we draw lines, fill shapes, mix colors, and then step into 3D, building a complete renderer from scratch in plain JavaScript, followed by a ray tracer and a path tracer that follows light the way physics says it really behaves. Only when every stage is familiar do we hand the work to the GPU, the specialized chip built to do exactly what you've just written, millions of times faster. The next parts chase the path tracer's realism in real time and bring things to life with animation and simulation. The last part covers the techniques behind today's real-time renderers, from temporal antialiasing and clustered lights to volumes, ray tracing in compute shaders, and scenes learned from photographs.

YOU NEED

Some JavaScript

Variables, functions, loops and arrays. If you can write a small web page script, you're ready.

YOU DON'T NEED

A math background

Every idea is explained in plain words and pictures first. Formulas appear only as code.

TOOLS

A browser and an editor

Part IV uses WebGPU, which current Chrome, Edge, Safari and Firefox support.

How to read this book

Each chapter mixes four kinds of material:

  • Interactive figures. Drag the points, move the sliders. Most ideas in graphics are much easier to see than to describe.
  • Live code. Code panels with a Run button are editable. They're the same code you'd write in your own project, running right on the page. Break them, change the numbers, see what happens.
  • "In plain words" panels. Where other books would put an equation, we describe what it means and why, then show it as a line of JavaScript.
  • Complete sources. Every interactive figure has a source button that shows it as one self-contained HTML page: save it, open it, and change anything.
  • Exercises. Each chapter ends with a few things to try, with hints you can open if you get stuck.

The chapters build on each other, especially in Parts I and II, so reading in order works best the first time through.

There are no dependencies on external libraries or frameworks used for this book. Everything is built from scratch using vanilla JavaScript and WebGPU, with independent standalone examples.

Contents

The chapters