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.
12 comments:
Thanks for posting this in english! Now I can share it :)
Wow! This is amazing! Thank you!
Amazing!
Thanks for posting
I'm sorry but why is it cool, when it is slower as Flash, the rendering quality is worser and it doesn't work in the browser with the biggest market share?
I'm a JavaScript fan since 1997 and have implemented a lot in it. But, JavaScript and 3D that's a bit too late. There are other rock-solid technologies that do it better today. How long do we have to wait?
If it was really standards- conform why not in MSIE?
Fascination about the design study is ok, but don't try to deduce a market trend of it.
BTW: What kind of user interface presentation will there be when this technology is used? Doesn't suits to any model that is used today. Everything before that tried to pimp up the desktop methaphor with 3D failed.
rainwebs: If it was really standards- conform why not in MSIE?
- because MSIE doesn't support these standards, the people at Micro$oft like to invent their own standards instead. True, it's still the browser with the biggest market share but it's also still the one that has the worst support for standards like css and javascript. I've been a Flash fan for a long time, and implemented a lot in it, but it's great that effects like these can be accomplished using only 'open' standards. The canvas-tag is a great thing!
rainwebs: But, JavaScript and 3D that's a bit too late.
It is late because hardly anyone realized what Browser technology was going to encompass in the future.
rainwebs: There are other rock-solid technologies that do it better today.
It is not too late, it is the natural progression.
Yes, and they use OpenGl, which is what Canva's 3D context is being developed for.
What you have to remember is that the web was popularized as an Open system. The current "solid" technologies exist in a VERY closed system. User agent vendors are working to correct this.
Great post
website design nyc
Thank You very much,can i use your examples in my aplication
I remeber a few years ago there was a plugin named FlatlandRover, it was very popular but only worked in IE, the plugin and the company did not make it that far into the web2.0 era, but it was faster because it was running native code, the 3d world was a text file.
You could also import 3d objects from 3dmax and so on...
This canvas technology is going nowhere, too much codding, not really optimized for 3d, and not cross compatible.
No body will do 3d in a browser window for the years to come.
This technology is been here for a long long time and no one will use it.
You can see a number of 3D JavaScript examples over here
I think the Canvas tag is fine for 2D Graphics which can be used in various ways, but can't really imagine how is the 3D going to be useful... Yeah, it's cool how the simple JavaScript does this, but it's slow (don't have Chrome) and web pages don't need it. 2D graphics can be implemented like for some games, effects or whatever, but 3D is just too much...
Great blog and nice post I am trying to maintain a list of cute blogs. Thanks for nice collection of posts. I’m going to browse through these. it’s nice I can come and read your blog.
ccna ccent
Post a Comment