top of page
Back

3D Engine

After the Asteroids clone I wanted to know what was actually happening between "here are my vertices" and "here are pixels on screen." Rather than picking up Three.js and getting results fast, I built the pipeline myself on top of p5.js's WEBGL renderer, using it as a thin OpenGL context and doing the mathematical heavy lifting in my own code.

The engine covers the classic transformation chain: local → world → view → clip space, built from matrix math I wrote and verified by hand. Model transforms (translate/rotate/scale composed in the right order — learning why order matters was a rite of passage), a controllable camera with its own view matrix, and perspective projection with a configurable FOV and near/far planes. On top of that: [directional/point] lighting using surface normals, basic shading, and primitive mesh construction from raw vertex data.

The struggles were exactly the ones every graphics programmer hits, and hitting them personally is the point. Matrix multiplication order silently producing garbage. Rotations behaving fine individually and drifting when composed — my first encounter with why quaternions exist. Normals breaking after non-uniform scaling. Debugging was brutal because a wrong matrix doesn't throw an error; it just renders nothing, or renders something inside-out. I learned to debug visually — render the axes, render the normals, isolate one transform at a time.

bottom of page