Simple 3d engine with JavaScript canvas

This weekend I was testing the canvas element in JavaScript. It was pretty easy so I decided to make a very simple 3d engine. The engine only consists of a simple scene graph where the camera is fixed at origo and pointing along the Z-axis. The "pipeline" consists of two steps, transformation and rendering.

All transformations are represented by 4x4 matrices which are pushed to a matrix-stack as the code traverses the scene graph. After the transformations are done the scene is rendered. The renderer only supports solid faces and edges. Since the objects aren't sorted before they are drawn all faces and lines are transparent.

I never got the inheritance to work properly in JavaScript so there is no base class for objects just one implementation of a cube-class.

A demo of the engine can be found at:

The latest source is available in the project repository at:


longge said...

123 said...