Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

HTML5で近代的な3Dゲームを実現する第一歩になりそうなWebGLのデモ

3Dグラフィックスをブラウザだけで表現できる「WebGL」は、HTML5が浸透してくることでますます期待されています。

今までもWebGLを使ったサンプルやアプリケーションが登場していますが、どちらかというと3次元で表現したものがブラウザで見れるといったレベルのものがほとんどでした。

ブラウザで表現するのにも限界があるのか?と思っていましたが、そんなことはないというサンプルを見つけました。

Team Fortress2が作ったthree.jsのWebGLを使ったデモです。

精密な3Dグラフィック表現、キャラクターのスムーズなアニメーション、微妙な影の重なり具合など完成度が高いサンプルになっています。

本当にブラウザで動いてるの?

と疑ってしまうほどです。

three.jsは、JavaScriptからWebGLを簡単に使えるようになるライブラリーです。

今までもthree.jsを使ったサンプルはいくつか紹介されていて、見たこともあったのですが今回のデモが素晴らしかったのでご紹介しました。

HTML5で作られたゲームは、専用ゲーム機に比べるとまだまだな感じはありますが、今回のデモを見る限りそれほど遠い未来ではないような感じがします。

HTML5/WebGLがゲーム業界のスタンダードになる

そんな時代が近い将来やってくるかもしれませんねw

Kinectの世界がブラウザで体験できる】 Chromeバージョン21から標準でWebRTCが使えるようになったので、Kinectのようなゲームがどんどん登場してきています。面白いので是非チェックしてみてください。 Chromeがゲーム機になる!WebRTCを使ったダンスゲーム「BeHero Tap Dance」

【3Dグラフィックスの現場で使えるサービス】 ファイルをアップロードするだけで3Dモデルの共有ができるサービスです。様々な3Dファイルフォーマットに対応しているので、こちらもあわせてチェックしてみてください。 3Dモデルが簡単に共有できるWebGLを使った3Dモデルビューア「3dfile.io」

【画期的な3Dモデルテクノロジー】 顔写真をアップロードするだけで簡単に3Dで動く顔が生成できる技術です。デモが用意されているので是非試してみてください。 これはすごい!一枚の顔写真から自分の顔の3Dモデルが作れるサービス「Vizago」

ソースコードをブログで公開している方へ】 ソースコードがメインの記事だとどうしても画像が無いそっけない記事になってしまうため、FacebookGoogle+でシェアされた時に目立ちにくくなってしまいます。そんな時は、ソースコードからゴージャスなスナップショットが作れるChromeアプリ「Marmoset」が便利です。 ソースコードからゴージャスなスナップショットが作れるChromeアプリ「Marmoset」

それでは、また!