Graphics is a subject you have to move to understand.

Most graphics material explains a matrix by printing it. You read the sixteen numbers, you nod, and nothing happens — because a transform is not a table of numbers, it is a motion, and you cannot see a motion in a static page.

Render Quest puts the numbers under your fingers instead. Every lab is a live canvas with the maths exposed beside it: drag a slider, and the matrix, the geometry and the rendered pixels all change together. The point is to build the intuition first, so the API you eventually write has somewhere to land.

How it is built

Raw WebGL and WebGPU, deliberately — no scene graph, no rendering framework. The plumbing a framework hides — contexts, buffers, attribute pointers, the perspective divide — is the actual subject. The matrix library is a few hundred readable lines and ships with a numeric test suite: every claim the site makes about a projection matrix is checked on every commit, not asserted in prose.

Most labs are built on WebGL, and that is a decision about reach rather than a preference. A matrix does not care which API multiplies it, so the concepts transfer unchanged — and where a lab genuinely cannot be built on WebGL, like the compute one, it says so and uses WebGPU. Which to reach for in your own work is a separate question, and the technology guide has a tool that answers it.

The visuals are the same story. Nothing on this site is stock art or a pre-rendered image — the scene on the home page is the projection lab with its controls removed, running live in your browser at this moment.

What is here

10 labs, each isolating one idea and handing you the controls to it:

• The Model Matrix — Why a matrix chain reads right to left, and why the columns are the object’s own axes.
• Projection & the Frustum — What the perspective divide actually does, and why near and far are a hard clip rather than a fade.
• Coordinate Spaces — Where each matrix in the chain hands over to the next, and what the GPU does between them.
• Light & Normals — Why normals need the inverse-transpose, and what separates flat, Gouraud and Phong.
• Textures & Sampling — Why a texture looks wrong at a distance, and what mipmapping is really trading away.
• Compute & Particles — What a compute shader is for, and the kind of problem that leaves WebGL behind entirely.
• Draw Calls & Instancing — Why the number of draw calls matters more than the number of triangles.
• Colour & Gamma — Why lighting maths done on sRGB numbers is wrong, and why the mistake looks like a style rather than a bug.
• Depth & Transparency — That depth precision is set by the near plane rather than the model, and that the depth buffer cannot answer the question transparency asks.
• Write a Shader — That a shader is a function from a pixel coordinate to a colour, and that the errors are readable once something shows them to you.

The Tech section covers the same two reference scenes in WebGL, WebGPU, Three.js and vgpu, so you can see what each layer does for you and what it costs you — the first two actually running on the page, the other two honestly labelled as code.

Alongside those, the Learn page is a curated path through the rest of the subject — the best courses, books and interactive explainers on the web for graphics and for building games, arranged in the order that makes each one easier than the last.

What comes next, and what was proposed and turned down, is on the roadmap, along with the reason for each. Everything planned there has shipped; what gets added next depends on what turns out to be missing.

Built by Ali Bader Eddin. The source is on GitHub, and the labs are here.