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 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 lights" will draw yellow dots where the lights are.
"Lighting" enables lighting/shading.
"Backface culling" does so only faces that are facing the camera are rendered.
"Z-sorting" sorts all faces so they are rendered back-to-front. It is not perfect and errors can be seen on some models.
"Filled faces" renders solid faces.
"Wireframe" renders, well.. the wireframe.
"Texture" enables textured models
"Texture shading" enables shading on the textured parts.
Issues and compatibility
Only works in canvas-enabled browsers
excanvas is used to add canvas support to IE, but performance is rather horrible.
No textures in IE, since excanvas doesn't seem to support clipping paths, which are needed. Maybe transparent PNG's could be used to eliminate the clipping path.
Tested in Firefox 184.108.40.206, Opera 9.23, Safari 3.1, IE7
Performance seems best in Safari. Opera and Firefox are ok with the simpler models. IE is crap.
Looks like there's something wrong with the face normals on the sphere models. Oh well.
The texture images themself have also been skewed in order for things to work. I imagine a bit of messing with the code could eliminate the need for this.