Project 03 · 3D WEB ENGINE
Facet
A 3D engine for the browser built on raw WebGPU: linear algebra, scene graph, PBR materials and a small shader language, with nothing like three.js underneath.
The challenge
Render physically based 3D scenes in the browser at 60 fps, with an engine small enough to read in a weekend.
The approach
Facet talks to WebGPU directly. The maths library, scene graph and material system are written for exactly what the engine needs, and a small shader language compiles down to WGSL.
The layers
Every subsystem, with the code it took and the time it took to write.
01
Linear algebra
4,210 lines3 weeks
02
Scene graph
6,890 lines4 weeks
03
PBR pipeline
12,400 lines2 months
04
Shader compiler
11,050 lines2 months
05
Editor viewport
7,225 lines5 weeks
From the source
A perspective matrix, written by hand
facet/math/mat4.js
// column-major perspective matrix
export function perspective(out, fovy, aspect, near, far) {
const f = 1 / Math.tan(fovy / 2);
out.fill(0);
out[0] = f / aspect;
out[5] = f;
out[10] = far / (near - far);
out[11] = -1;
out[14] = (far * near) / (near - far);
return out;
}
Feb 2026
A lit, spinning cube
Apr 2026
PBR materials and image-based lighting
Jul 2026
Shader language compiles to WGSL
Aug 2026
Facet 1.0 released