I know webGL already exists, and serves as a fantastic solution to integrating 3D into web pages, but I wanted to know what is actually involved in a simple 3D rendering architecture. I’ve used OpenGL quite extensively, but I thought it would be interesting to try and write it all from scratch… so I did!

Meet js3D, a 3D rendering system based on the HTML5 canvas and written ENTIRELY in javascript. All matrix computations and vector transformations are hand coded. Models are specified in the typical format, vertices and triangles. Normals are automatically calculated, and used to calculate a simple, per-face color.  This system is entirely a proof of concept. It’s ugly, unoptimized, and inelegant, but it works!

Currently the worst part of the system is the rasterization code. I attempted a per-pixel rasterization system, which iterated through all points on each triangle, and colored a frame buffer based on the calculated color values for each pixel. I did this primarily because it allowed me to perform simple depth tests using a depth buffer, and the opportunity to use custom pixel shading programs. The rasterization system is COMPLETELY unoptimized at this point, and as a result, it is painfully slow. Rendering using the built in polygonal drawing tools in HTML5 Canvas is far faster, however I could not find a way to draw polygons to a second buffer or context, and as a result, depth testing quickly became impossible.

It might not be a visual marvel, but it works, and I’d say it does its job fairly well, considering the tools used.

The project is available on Github here and is free to download and use!