Wednesday, November 19th, 2008

Canvas in 3D

Category: Canvas

<>p>Peter Nederlof of the infamous Dutch “Lost Boys” created a 3D engine in Canvas.

Flickr mashup with photos on a 3D plane

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.html

Ultimately 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:

Posted by Chris Heilmann at 10:33 am
15 Comments

++++-
4.3 rating from 44 votes

15 Comments »

Comments feed TrackBack URI

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_

Comment by SchizoDuckie — November 19, 2008

Pretty solid work. The mouse click needs a little more work but the foundation is solid

Comment by TNO — November 19, 2008

Wow…!
GREAT work…!! :P

Comment by ThomasHansen — November 19, 2008

very nice.

Comment by jonhartmann — November 19, 2008

jaw = drop

Comment by arapehl — November 19, 2008

+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?

Comment by paulhan — November 19, 2008

@paulhan:
Canvas IS the API…. What more do you want?

Comment by SchizoDuckie — November 20, 2008

Very cool. Peter is definitely the man.

Comment by Menno — November 20, 2008

@paulhan,
There’s a tutorial/ref over at the mozilla developer center; https://developer.mozilla.org/en/Canvas_tutorial

Comment by Peterned — November 20, 2008

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.

Comment by Lon42 — November 20, 2008

@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.

Comment by paulhan — November 20, 2008

@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

Comment by SchizoDuckie — November 21, 2008

@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.

Comment by paulhan — November 22, 2008

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)

Comment by YangombiUmpakati — March 14, 2009

hi, I forwarded this articl, http://html3d.com/archives/2010/11/html-page-canvas-in-full3d/

Comment by 123123123123 — November 25, 2010

Leave a comment

You must be logged in to post a comment.