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.

Click the cloth to add a wind effect.

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

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

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)

Info

Type:
Applications, Texturing
Author:
Satoshi Ueyama
Posted on:
February 26th, 2009
Posted by:
Andi Smith
Views:
40918

Rating

4.41

Your Rating:
1 Star2 Stars3 Stars4 Stars5 Stars

Works on

BETA Please let us know if you find 3D on 2D Canvas works in other browsers by leaving a comment below.

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

Add comment

(required)
(required)
(will not be published)
(required)