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

Posted on:September 22 2012

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.





Comments:


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


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


cool, it make me understanded why triggles are important in 3D scene
geek42
Quote
2012-09-23 06:59:00


Beautiful work
Nic
Quote
2012-09-25 08:05:00


Add comment:


Posted by:


Enter the missing letter in: "?nternational"


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons