3D on 2D Canvas
Satoshi Ueyama has created 3 amazing demos of 3D objects and texturing on a 2D canvas to prove that JavaScript and canvas can render textured 3D scenes. However, the performance of these demos is heavily reliant on the browser’s JavaScript engine. Therefore, we recommend you open the following links using Google Chrome.
In the demo, click the cloth to create a small wind effect.
The first demo shows simple texture mapping. Textures are mapped on “cloth” model that consists of polygon mesh. Textures deform following swing of the cloth.
3D Miku will move her arm if you click her in the demo.
The second demo renders a model composed on modeling tool. This is the heaviest demo, which contains about 1400 polygons.
3D iPod with a metallic reflection around the back
The third demo shows a technique called “Sphere Environment Mapping”. Sphere environment mapping renders pseudo metallic reflection by mapping a texture that contains “environment” from object’s view. This demo looks very attractive but is not hard to implement. Difference between previous demos and this demo is not much — Generate texture coordinates dynamically or store statically.
View all three demos here (Google Chrome strongly recommended)
Comments
Brad
This is amazing. Runs really fast in Safari 4 Beta too.
Posted on February 26, 2009
Johnson
Works great in Safari too
Posted on December 13, 2009
gh
All3 demos work fine in Safari 4.0.4 on OS X 10.4.11 on a dual G5.
Posted on January 29, 2010
Thomas Vossfeldt
This preusdo 3d canvas demo also works fine with FF 3.5.7. Really great!
Posted on February 17, 2010
Carlos Bacco
Runs VERY smoothly on Opera 10.50b (athlon 2.4+ single, GForce6150), but there are wireframe lines appearing over the objects.
Posted on March 1, 2010
Lukas Andrzejczak
Runs quite smothly (esp. the iPod) on Opera 10.50 [Athlon XP 3000+, 2.2MHz, Single core]
And wireframe lineas are visible, same as Carlos, but that’s not a problem. BTW the chrome metal back of the iPod blew my mind. HTML5 in great, as it seems.
Posted on May 11, 2010
JC
Isn’t this javascript?
Posted on June 7, 2010
Joe Hocking
The code is written in JavaScript, yes. If you mean “why is this only compatible with FireFox and Chrome?” that’s because it uses features of the canvas element only compatible with those browsers (or rather the release versions of those browers; this demo also runs in betas of safari and opera.)
Thanks so much for these demos! This 3D rendering code will be interesting to play with.
Posted on August 18, 2010
Siji
Really amazing !!
It works fine in my Firefox 4.0 beta
Posted on September 28, 2010
Dan
runs fast but bad quality
Posted on October 7, 2010
vr
Works fine in Safari 5.0.2 on OSX 10.6.5 and Firefox 4.0b7. Firefox 4.0b7 is faster with these…
Posted on November 16, 2010
Bob
This is great. Web stuff just doesnt seem to like standard development though.
This is the sort of cutting edge stuff that you could do with Java 12 years ago, then with Flash 5 years ago. Anyone want a bet that this technology ends up in the bin passed over and unused?
Posted on March 4, 2012
AUBIN Bruno
Only the 1st demo work, on
- Chromium
- Firefox
- Opera
- Seamonkey
Doesn’t work on:
- Rekonq
- Epiphany
- Qupzilla
Posted on September 16, 2012
Related demos