Drawing 3D scenes in HTML 5's 2D Canvas

I just programmed a small test application using HTML 5 canvas, extending the CopperLicht Javascript library: I'm misusing the 2D canvas for drawing 3D triangles on it. Right now, I only implemented a 3d transformation and clipping pipeline, and not material renderers, so you only get empty wireframe triangles, but it looks nice anyway. Try it out yourself, it should work using InternetExplorer (9 and newer), Firefox, Chrome and Opera. Didn't try with Safari yet. Use the Cursorkeys or WASD to move the character. Jumping works with space, running by holding down shift. The 3D scene itself was created with CopperCube (it's the example third person camera scene which comes with the editor).

Rendering is not as fast as with WebgL, but works in every modern browser, so if extended a bit, it could work as a nice backend for CopperCube if the user doesn't have WebGL. Maybe. For now, it was just a fun experiment.

four comments, already:

Really nice.
So, are we soon going to have real-time ray-tracing in pure javascript/html5?
Nostaw - 22 09 12 - 14:46

Also possible with smooth surfaces, using gradients. Created this some time ago:
http://wacker.github.com/rendering/rende..
wacker - 22 09 12 - 16:08

cool, it make me understanded why triggles are important in 3D scene
geek42 () (link) - 23 09 12 - 06:59

Beautiful work
Nic - 25 09 12 - 08:05


Name:  
Remember personal info?
yes
no
Email (optional):
URL (optional):
Enter "layered" (antispam):
Comment:Emoticons / Textile

  ( Register your username / Log in )

Notify: Yes, send me email when someone replies.  

Small print: All html tags except <b> and <i> will be removed from your comment. You can make links by just typing the url or mail-address.
Note: If you type in your email adress above, it will be visible to other visitors, although it will be hidden for bots using javaScript.