Incredible JavaScript+Canvas 3D demos from Japan!

Mr. Satoshi Ueyama hacked out the new era of JavaScript 3D tech by unveiling the real of Google Chrome's power. Satoshi is one of the great JavaScript hackers in Japan, and also known as gyuque listed on the article of 30 Japanese geeks you should follow on Twitter. (cached)

He has introduced the brand new JavaScript technique using Canvas for 3D on his post. Browsing with Google Chrome is strongly recommended for all demos below.

I'm sure this could be one giant leap for JavaScript user interface technologies.

Demo #1: 3D texture mapped with physical computing

This is his first demo which shows 3D textured by Canvas. You can click on the cloth to make it waved.


http://gyu.que.jp/jscloth/

Demo #2: Hatsune Miku 3D with OOP

The 3D Miku is OO-style implemented as an object which has swing() method. This means she swings green onion in her hand when swing() method is called. Click on her.


http://gyu.que.jp/jscloth/miku.html

She wears hundreds of polygons. The demo was created for Paul Bakaus, jQuery UI lib's lead, visiting Japan.


Demo #3: 3D iPod touch with environment mapping

You may find the all demos above have the same width as 480px. Yes, it is definitely same as the horizontal viewport size which iPhone and iPod touch have. Now you can see iPod touch displayed on your iPod touch by the demo #3!

It could be slightly slow on ITSELF, however, it's still cool. These demos show us that we rarely need Flash anymore on the mobile platform, right? ;)


http://gyu.que.jp/jscloth/touch.html

But the most important point of the demo is not its width. You need to see behind of it. He also implemented the reflection mapping feature on his lib.


http://gyu.que.jp/jscloth/touch.html

The all demos above are coded only by pure JavaScript using Canvas. Here are no Java, Flash, ActionScript etc. but just the Web standards.

You can see Google Chrome runs all demos much faster than any other browsers. It has a great rendering engine named Skia. CPUs are already enough fast to calculate most things, you know, and now JITs are implemented as well. But canvas renderers admit of their performance. Skia is special. Safari is also fine. Firefox, 3.0 and 3.1 JIT-ed, are seem to be slower, unfortunately. We don't have to say that IE have no capability to run these.

Gyuque runs several benchmarks to describe Skia has significant advantage on its canvas rendering engine.


http://d.hatena.ne.jp/gyuque/20090211#1234364019

The 3D JavaScript tech could be one of the killer applications of Chrome now. I guess the next generation of browsers will soon compete on Canvas performance.

Original of this post was written for my Japanese blog.
You must see more detail on gyuque's post.