Chrome Life

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

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

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」

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

それでは、また!

HTML5/WebGLに関するオススメ書籍

タグ: , , , , , ,

新着記事

この記事の読者におすすめの記事

このブログを購読しませんか?

RSSリーダーを使うと、このブログの更新情報がすぐに入手できるようになります。
このブログのRSSをRSSリーダーに登録すれば、更新されるたびに記事の本文を読むことができます。

Twitterでもこのブログの更新情報や筆者が見つけた情報をつぶやいていますので、@opakenをフォローしていただけるとうれしいです。

Facebookのファンページも用意しています。こちらでも更新情報を配信しています。「いいね!」をクリックしてもらうだけで購読できます。