Wednesday, November 19th, 2008
Canvas in 3D
<>p>Peter Nederlof of the infamous Dutch “Lost Boys” created a 3D engine in Canvas.Straight from the horse’s mouth:
I’ve been working on a 3D engine on canvas for some time, and as I was posting a message on our blog, I figured you guys might be interrested as well :)
The demo is over here: http://www.xs4all.nl/~peterned/3d/
Another (completely useless but fun to watch) one is over here (and
using chrome is strongly advised): http://www.xs4all.nl/~peterned/3d/psychedelic3D.htmlUltimately the purpose of this engine would be to provide an easy to
use platform/interface for creating 3D stuff, from degrading interface
elements for sites, to complete games. Collada support is en route,
and with squirrelfish hitting air, I’m considering trying that too :)
More details are available on the Lost Boys blog.
Related Content:












Note to the eplilepsy patients overhere, please do not open the psychedelic link if you don’t want to have a seisure :-P
Peter is the man _/-\o_
Pretty solid work. The mouse click needs a little more work but the foundation is solid
Wow…!
GREAT work…!! :P
very nice.
jaw = drop
+1 for the epilepsy warning. This is awesome. It can only be a matter of time before full featured CAD programs are built where people can collaborate right there in the browser. Amazingly, after 100 Google hits, I still can’t find an API for Canvas, that just lists the functions available and the parameters required. Has anybody else found one?
@paulhan:
Canvas IS the API…. What more do you want?
Very cool. Peter is definitely the man.
@paulhan,
There’s a tutorial/ref over at the mozilla developer center; https://developer.mozilla.org/en/Canvas_tutorial
Peter most certainly is the man.
But the iPhone is the device.
I’ve created a kind of a ripp-off of Peter’s picturewall purely based on CSS-transformations, -animations and a tiny bit of JavaScript.
You can see it here: http://quento.q42.net/FotoWall/index.html
Warning: iPhone or iPodTouch (or simulator) only.
My apologies for the 750KB PNG.
@SchizoDuckie
Canvas IS the API…. What more do you want?
A full list of the functions and parameters required would be nice.
Something like php.net or jquery.com
@Peterned
Thanks, that was the first place I visited. There’s some good stuff there, but just what was needed to get the demonstrations working. There’s a fair bit more to canvas than just that. At the minute, most of what I’m learning is by looking through processing.js, and getting the function calls there. The html canvas spec is an exercise in pain.
@paulhan
I clicked a couple of links on Peterned’s link and came here. Coul couldn’t find this?
http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element
@SchizoDuckie
Lose the attitude please, I just asked a question, and read my posts first before hitting the go button. I said already that the whatwg spec is an exercise in pain. What part of the sentence didn’t you understand?
I’m working on a project that I hope to release openly at some point, a Canvas railroad generator. It will need to use pretty much most of the things that are available in Canvas, so I’m just looking for a shortcut. If I don’t find anything, I’ll write the damn thing myself. Jeez
Paul.
psychedelic3D is really great! but indeed cpu intensive.. i’ve had about 5 fps on chrome, 3 fps on opera and 1 on ff3.1 beta3 (and 0.3 on safari 4)
hi, I forwarded this articl, http://html3d.com/archives/2010/11/html-page-canvas-in-full3d/