About
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, deliberately. There is no scene graph and no rendering framework in the way, because 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 it ships with a numeric test suite: every claim the site makes about a projection matrix is checked on every commit, not asserted in prose.
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
4 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.
The Tech section renders one identical scene 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.
Built by Ali Bader Eddin. The source is on GitHub, and the labs are here.