Kawanet Blog II

アクセスカウンタ

zoom RSS gyuqueさんのJavaScript 3Dが熱い! Google Chromeのキラーアプリに!?

<<   作成日時 : 2009/02/15 18:16   >>

驚いた ブログ気持玉 49 / トラックバック 0 / コメント 0

gyuque さんのピュア JavaScript の 3D デモが熱すぎるのでご紹介。
各デモの再生は、Google Chrome を強く推奨です。
Google Chrome の速さは、JIT 搭載の V8 だけでなくて、
描画エンジンの Skia もポイントらしい。(⇒詳細)
IE では動きません。Firefox は少し遅いです。
 
3D は、Google Chrome のキラー機能になりうるんじゃないでしょうか!!??

第1弾 jscloth


まず最初は、JavaScript でもテクスチャマッピングを実装できたのが驚愕です。


物理シュミレーションも行っていて、クリックすると布が風に揺れます。
Adobe MAX から2日後に登場して、そのスピードに驚きました。

第2弾 「はちゅねミク」


JUI の打上げでお披露となりました。
jscloth よりも、もっと多くのポリゴンを使っています。
これなら、スト II レベルも実現できそう。


内部構造はオブジェクト指向(笑)で、swing() メソッドが実装されているので、
JavaScript からメソッドを呼ぶだけで、ネギを振ってくれます。
デモでは、クリックすると swing() メソッドが発動します。


打上げには、昨年の JUI カンファレンス(1回目)のメインスピーカーで、
ちょうどドイツから来日中の Paul Bakaus も参加してもらいました。
飲み会の途中で、透過処理も実現できて、フォグも描画できそうだから、
マリオカートくらいは動きそう。

第3弾 「iPod touch」


最新作は、iPod touch です。


このデモのスゴさは、iPod のウラに隠れています。


なんと、鏡面反射の処理を実装しています。
東陽理化学研究所もビックリのピカピカな裏面です。

iPhone・iPod touch の Safari でも(多少は遅いものの)動きます!!
iPod touch の中で、JavaScript 描画された iPod touch を眺める週末も粋ですね。
 
各デモの詳細な実装方法などは、Canvasによる3Dテクスチャマッピングとパフォーマンスチューニング(仮題) で紹介されています。
 
快適にデモを見るには、βも外れた Google Chrome がオススメです。
かなり実用的な快適な速度で動きます。

Google Chrome を今スグ GET!

そもそも、JavaScript には 3D 関係の機能は存在していません。
Flash 10 を使えばもっと高度なことができるでしょうし、
Flash 10 を待たなくても Papervision3D により Flash では 3D が手軽になっています。
JavaScript 単体でも、エコだ!動物園 並みのことはできそう!
 
 

JavaScript で 3D のこれまで


川崎も、以前から JavaScript での 3D 描画に取り組んできました。
最初は、2006年に Animation.Cube をリリース。


画像を、数ピクセル単位の帯画像にスライスして分割表示することで、
横方向の回転のみをサポートした 3D キューブのアニメーション処理を実現。
仕組み上、斜め方向には回転できない、3D というのも恥ずかしいレベル。

海外では、DIV タグの border でポリゴン描画するデモも公開されています。



昨年2008年には、 canvas を利用した ワイヤフレーム や、ポリゴン描画 に挑戦しました。


当時は JavaScript から 3D よりも Wii リモコンを操作することが主目的だったので、
Zソートや、裏面カリングすら実装していないものの、一応は動きました。

こうした アホらしい 涙ぐましい、技術開発の努力の積み重ねが重ねられてきたわけですが、
canvas でテクスチャマッピングまでできるとは思いませんでした。
感動したッ!

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 49
驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた
面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
ナイス ナイス ナイス
ガッツ(がんばれ!)
かわいい

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
gyuqueさんのJavaScript 3Dが熱い! Google Chromeのキラーアプリに!? Kawanet Blog II/BIGLOBEウェブリブログ
文字サイズ:       閉じる