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


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.

The models are stored as JSON data structures.
The teddy, lamp and plane are all converted from models found at Archive 3D.

Render controls

• "Render lights" will draw yellow dots where the lights are.
  
• "Lighting" enabled 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.
  

Issues and compatibility

• Only works in canvas-enabled browsers
• excanvas is used to add canvas support to IE, but performance is rather horrible.
• Tested in Firefox 2.0.0.12, Opera 9.23, Safari 3.0.4 beta, IE7
• Performance seems best in Safari. Opera and Firefox are ok with the simpler models. IE is crap.

Also check out these other canvas 3D experiments:

• Hans Schmucker's 3D Canvas racing demo
• Benjamin Joffe's Canvascape
• Eben Upton's Ajax3D engine

Comments: go here