K3D Canvas 3D
Frequent canvas developer and pepper guru Kevin Roast has been busy working on his own 3D engine written entirely in JavaScript and HTML5 canvas using the pixel, line and polygon drawing APIs.
Funky 3D Icosahedrons FTW!
Comments from the Author:
All 3D maths is hand cranked and rendering performed using the nifty Canvas APIs – no 3D plugins or Canvas3D extensions required. Objects can be displayed as points, wireframe, solid polygons and shaded using depthcued (z-order) or light sourced – things can be rotated around and moved about to make cool demos. A simple linear-additive lighting model with any number of coloured lights can be applied to solid objects.
There are a bunch of different demos to be viewed on Kevin’s site, click on each demo to start (or stop) them.
Comments
Eben
I really don’t know what to say other than my jaw dropped when I saw what you have done with 3D Canvas!
I’m currently building a website for teaching maths to kids and I’ve been using Canvas quite a bit. When it came to the part where I need to create 3D shapes I was just dumbstruck (I’m still a novice at this). It’s quite awesome what you have done. Is there any way that you could maybe point me to a site where I can get some help in drawing 3D shapes? I would really appreciate it.
Posted on April 7, 2010
Kevin
Thanks for the comments. I’m not sure if there is any one site where you can get all the info needed. It’s a matter of building up from the basics; vectors, 3d representation of objects in space, transformations, projections and finally lighting and shading. I would suggest the best place to start is to look at the code for the demo (View Source on the page and get the URLs to the .js files) as it’s well commented and then get a book on Game Mathematics – one that covers 3D maths.
Posted on April 9, 2010
MV
Please do not skip reading what Kevin mentioned. It’s important to get good basics.
On other hand there are out there programs that can do some basic things for you in regards to exporting 3D object into vertices.
I used Blender (open source, has mac version) 3D program and python script to export header file (.h). It can give you vertices, no need to manually enter it.
Sometimes is trial and error!!!
Posted on April 9, 2010
Socapex
All examples work great simultaneously on safari 4.0.5, mac os x.
Posted on May 1, 2010
Spoogegibbon
OMG your demos are simply amazing, who needs flash any more?
Posted on June 8, 2010
Kevin
Thanks for the comments.
A texture mapping example has been added to the demo page.
Posted on June 9, 2010
Lucio
Amazing stuff
Posted on July 4, 2010
Henning
Wow. Very nice and I’ll probably be using that code. Thank you.
A quick note: It is easy to get something (not everything, that’s probably going to be hard) working in IE using the excanvas library from Google and just adding a forEach method to the Array.prototype.
If I get something done in the details of that, I’ll let you know.
Posted on August 15, 2010
Related demos