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
Related demos