JavaScript · p5.js · OpenGL

JavaScript · p5.js · OpenGL

After the Asteroids clone I wanted to know what actually happens between “here are my vertices” and “here are pixels on a screen.” I could have picked up Three.js and had results the same evening. Instead I built the pipeline myself on top of p5.js’s WEBGL renderer, using it as a thin OpenGL context and doing the mathematical work in my own code.

The engine covers the whole transformation chain, local to world to view to clip space, out of matrix math I wrote and verified by hand. Model transforms composed in the right order, and learning why the order matters is a rite of passage. A controllable camera with its own view matrix. Perspective projection with a configurable FOV and near and far planes. On top of that, lighting from surface normals, basic shading, and primitive meshes built from raw vertex data.

The problems were the ones every graphics programmer runs into, and running into them personally is the whole point. Matrix multiplication in the wrong order, quietly producing garbage. Rotations that behave alone and drift once composed, which is how I met quaternions. Normals breaking after a non-uniform scale. Debugging is brutal, because a wrong matrix doesn’t throw an error. It renders nothing, or it renders something inside out. I learned to debug with my eyes: draw the axes, draw the normals, isolate one transform at a time.