Javascript/Canvas Textured 3D Renderer

UPDATE: A newer, updated version with texture support has been posted here.

Comments: go here

Nothing to render


Render lights
Lighting
Backface culling
Z-sorting
Filled faces
Wireframe
Texture
Texture shading

Select a model from the list. Click and drag mouse to rotate. Use +/- to zoom in and out.


This application loads arbitrary 3D models and renders them using "2d" context on the <canvas> element.
It was made to test the possibility of displaying (very) simple 3D models using just javascript and canvas and whether this method could be used in another larger project.
It seems that when we restrict ourselves to a few hundred faces, static models can be rendered without too much trouble.

Needless to say, textures are even more demanding than the filled faces, so expect pretty bad performance for the high-polygon models. When textures are enabled, only the simpler models can be rotated in something resembling real-time, since the frame rate drops rather drastically.

The textures are rendered by skewing, rotating and scaling the texture image, so half of it (a triangular part) fits the triangle to be rendered. A clipping path ensures that only this half of the image is rendered. The skewing is done by a rotate -> scale -> another rotate, inspired by this function from senocular.com. As you might have figured out, this does not give entirely correct results. The texture for each face is not distorted according to the z-values of the triangle corners. That means that, for any textured face, all the texture pixels are rendered as if they were at the same distance from the viewer. I don't think the problem is very visible on the models provided here, but it can certainly be a problem if you have relatively larges faces.

The models are stored as JSON data structures.
The teddy, lamp and plane are all converted from models found at Archive 3D.
The textures are just regular JPEG images, although some of them have been skewed. Note: only half of the image is actually used for rendering.


Render controls

Issues and compatibility
Also check out these other canvas 3D experiments:
Comments: go here




(c) 2007-2008 Jacob Seidelin