Please use a canvas-enabled browser (Firefox, Opera or Safari).
Comments? Check this blog post.
Select a model from the list (please allow a couple of seconds to load/prepare textures, at least in Firefox).
Click and drag mouse to rotate. Use +/- or w/s to zoom in and out.
Render lights
Lighting
Backface culling
Z-sorting
Filled faces
Wireframe
Texture
Texture shading
Nothing to render
Render controls
- "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.
This simple 3D engine will load 3D models and render them using the "2d" context on the <canvas> element.
Textures are of course even more demanding than the filled faces, so expect pretty bad performance for the high-polygon models when textures are on.
The models are stored as JSON data structures.
The textures are just regular JPEG images. Before rendering can begin, they are chopped up into small pieces (for each face) according to the UV coordinates of the mesh. These pieces are then rotated and scaled onto a canvas for easier rendering. This may take a few seconds. This will probably be redone, so the "baking" of textures is done beforehand to speed up loading (or at least allow for both raw and baked textures).
The chopped up triangular texture parts are then rendered by skewing, rotating and scaling them into place so they fit the triangle to be rendered. A clipping path ensures that only the relevant part of the baked texture is rendered. As you might have figured out, this approach (called affine mapping) does not give entirely correct results since all the texture pixels on each face 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 (especially with my shoddy texturing job!), but it can certainly be a problem in some cases. It seems like an ok compromise for now, though, since doing correct texturing with pure JavaScript would be too slow for any real-time use.
Textures are of course even more demanding than the filled faces, so expect pretty bad performance for the high-polygon models when textures are on.
The models are stored as JSON data structures.
The textures are just regular JPEG images. Before rendering can begin, they are chopped up into small pieces (for each face) according to the UV coordinates of the mesh. These pieces are then rotated and scaled onto a canvas for easier rendering. This may take a few seconds. This will probably be redone, so the "baking" of textures is done beforehand to speed up loading (or at least allow for both raw and baked textures).
The chopped up triangular texture parts are then rendered by skewing, rotating and scaling them into place so they fit the triangle to be rendered. A clipping path ensures that only the relevant part of the baked texture is rendered. As you might have figured out, this approach (called affine mapping) does not give entirely correct results since all the texture pixels on each face 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 (especially with my shoddy texturing job!), but it can certainly be a problem in some cases. It seems like an ok compromise for now, though, since doing correct texturing with pure JavaScript would be too slow for any real-time use.
Issues and compatibility
- Only works in canvas-enabled browsers
- New texturing only supported in Firefox, Opera (9.5b+) and Safari (only in latest WebKit nightlies)
- In Safari, the textures are a bit "wobbly" and some artifacts appear on the edges.
- excanvas is used to add canvas support to IE, but performance is rather horrible and there is no support for textures.
- Tested in Firefox 2.0.0.12, Opera 9.5b, Safari 3.1, IE7
- Performance seems best in Safari. Opera and Firefox are ok with the simpler models.
Comments? Check this blog post.