Graphics Processing: an interactive computer graphics course

Published 8 Nov 20266 min read

Graphics Processing is an interactive computer graphics course that follows a triangle all the way from a 3D model to coloured pixels on your screen. Its 25 sections cover why GPUs have thousands of cores, pixels and the frame buffer, meshes, the rendering pipeline, coordinate spaces and matrix transforms, rasterisation, fragment shaders, depth testing, textures, lighting and graphics APIs.

Each step has a live demo: you rotate a triangle with a matrix, watch a scan light up the pixels inside it, run small shaders on a pixel grid and move a light across a surface.

What the computer graphics course covers

Sections	Topic	What you do
1 to 3	What graphics processing is, and CPU vs GPU	Race a 4-core CPU against a 64-core GPU, then sort tasks between them
4 to 5	Pixels and the frame buffer	See each pixel's three bytes in memory, then size a frame buffer
6 to 7	Triangles, vertices and meshes	Turn 3D meshes, then count triangles and vertices
8 to 10	The rendering pipeline and coordinate spaces	Follow one vertex from model space to the screen, then order the stages
11 to 12	Transforms with matrices	Translate, scale and rotate a triangle, then transform a vertex yourself
13 to 15	Rasterisation and blending	Watch pixel centres tested against a triangle's edges, then pick the pixels that light up
16 to 17	The fragment shader	Run GLSL shaders on a pixel grid, then write the vec4 for a colour
18 to 19	Depth testing	Draw near and far triangles with the depth test on and off, then pick the winning fragment
20 to 21	Textures and UV coordinates	Trace how a fragment reads its texel, then sample a texture
22 to 23	Diffuse lighting	Use the dot product of the normal and the light direction
24 to 25	Graphics APIs	Match graphics APIs to what they are for

Why GPUs exist

A full HD screen has 1920 × 1080 pixels, and at 3 bytes each one frame needs 6,220,800 bytes, about 6 MB, redrawn around 60 times a second. Every pixel can be worked out on its own, so a GPU runs the same small program on thousands of simple cores at once, where a CPU has a few powerful cores built for long chains of dependent steps.

The pipeline

Every frame passes through the same stages. The vertex shader moves each corner through model, world, view and screen space using matrices. Rasterisation finds which pixel centres fall inside each triangle, blending corner values such as colour across it. The fragment shader chooses each pixel's final colour, the depth test keeps the nearest surface, and textures and lighting add detail.

\text{brightness}=\max\left(0,\ N\cdot L\right)Diffuse lighting from section 22: N is the surface normal and L points at the light

Try a question from the course

GPUs draw everything as triangles, so a flat square is split into two. This grid is 3 squares across and 2 up, so it has 3 × 2 = 6 squares and 6 × 2 = 12 triangles. The corners form a grid of 4 × 3 = 12 vertices, because neighbouring triangles share them.

Shared vertices save memory: 12 triangles, but only 12 vertices

Now count the triangles or vertices in a new mesh, then press Mark to check your answer in the course.

Press Mark to have your answer marked in the Graphics Processing course.

Who this course is for

Game and app developers who use an engine and want to know what happens underneath.
Computing students meeting the CPU and GPU, pixels and image representation, who want the full picture.
Anyone curious about what a graphics card actually does with all those cores.

What you need to know first

The course page lists Programming Languages and Trigonometry. You will meet short GLSL shader code, rotations by 90, 180 and 270 degrees, and vectors with a dot product, all explained as they come up. The Vectors Calculator helps with the dot product.

How long it takes

There are 25 sections and most take a few minutes. Learners without a plan can open two sections of a course a day, in order, so the whole course takes 13 days. A plan removes the daily limit and lets you go straight to any topic, such as shaders or lighting.

Guided coursePC ComponentsSee the graphics card from the hardware side: its cores, VRAM, power draw and cooling.

Common questions

Is this computer graphics course free?

You can take every section without paying, two sections a day, in order. A plan removes the daily limit and opens any section straight away.

How does a GPU work?

It takes the triangles that make up a scene, moves their corners into place on the screen, works out which pixels each triangle covers, then runs a small program for every one of those pixels to choose its colour. Thousands of cores do this in parallel.

What is the rendering pipeline?

The fixed order of steps that turns triangles into pixels each frame: processing vertices, assembling triangles, rasterising them into fragments, shading the fragments, then testing depth and writing to the frame buffer.

What is a shader?

A small program that runs on the GPU. A vertex shader runs once for each corner and moves it into place. A fragment shader runs once for each covered pixel and decides its colour.

Why do GPUs use triangles?

Three points always lie on one flat plane, so a triangle is always flat and quick to fill, and any shape can be built from enough of them.

Do I need to know how to code?

A little helps. The course shows short GLSL snippets and explains each one, and the practice questions ask for values rather than full programs.

Revision cards

Say the answer first, then flip the card to check it.

Where to go next

Solve it
Vectors Calculator
Visualise magnitude, direction and operations
Open the tool
Learn it
Graphics Processing
Shaders, pipelines and the GPU architecture behind real-time rendering
Start the course