Monday, February 19th, 2007

3D Renderer using Canvas

Category: Canvas, Showcase

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.

3D Demo

The demo does the following:

  • 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

3D Canvas Demo

Posted by Dion Almaer at 8:30 am

3.8 rating from 40 votes


Comments feed TrackBack URI

Amazing!! Sin for the version in texture much slow one!!

Comment by Giovambattista Fazioli — February 19, 2007

Another proof of concept: 3D bumpmapping rendered using Flash…

It does however *require a plugin*, but hey, it works in IE ;)

Comment by Philippe — February 19, 2007

how about a smaller, simpler demo? loading a model of a person and making it walk in a very small uncomplicated (yet 3d) terrain, for example?

Comment by jk — August 22, 2007

“It does however *require a plugin*, but hey, it works in IE ;)”

If someone would make a simple 3d graphics library in flash that could be interfaced from javascript, fully scripted via javascript in the html file itself, that WOULD be cool. But writing little 3d demos in flash itself is worthless. Basically, rather than Mozilla or Safari or Opera or Microsoft writing a 3d-canvas, someone who knows flash very well could write a flash app that you can script via javascript just like the canvas tag works.

Comment by jk — August 22, 2007

Leave a comment

You must be logged in to post a comment.