Monday, February 19th, 2007
Hans Schmucker has created a proof of concept for 3D Renderer using Canvas.
I’ve written another 3D Renderer for the Canvas element… however it is differet to the existing implementations, this one loads a standard Alias Wavefront OBJ file and renders it. It’s not as far as it could be so far (mainly because the Canvas element seems to have a pretty poor clipping system implemented, so that even if the majority of a shape is outside the canvas it will still try to draw the whole shape and then clip it against the window on a per-pixel basis), but it’s definitely usable. Shading (each triangle gets a color based on its distance from the viewport) and collision detection (it only detects if there is a triangle below the viewport and will move the view to that position) are primitive, but still, I think this is pretty impressing for standard JS.
- Load a model
- Set up controls to modify a view object
- Find the nearest triangle below the player
- Move the player down to that triangle
- Rotate the model
- Clip it against Z=0 so you only render what’s in front of you
- Split partially visible triangles against Z=0
- Project all vertices, so that they get smaller the farther away they are
- Draw them, with the distance dictating the color
Posted by Dion Almaer at 8:30 am