セールス採用 / グシャッてからが本当の自分だった
セールス採用 / グシャッてからが本当の自分だった
2015.05.08

圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選

のびすけ
(編集部注*2014年6月17日に公開された記事を再編集したものです。)

こんにちは! 最近バランスボールで仕事してます。エンジニアののびすけです。

最近はHTML5が何かと話題になっていますね。今までWebブラウザの標準機能で実現できなかったことができるようになるということで注目されています。でも大抵の場合、HTML5とは広義で、JavaScriptやCSSも含めた意味合いのことが多いです。

今日は、そんなHTML5のAPIの1つであるWebGLを使ったサイトやデモを紹介したいと思います。WebGLはWebブラウザ上でプラグインなどのインストールなしで3D表現を行える技術です。

※WebGLはPCブラウザではIE10以前のバージョンに未対応、そしてスマートフォンブラウザでも閲覧できないので、それ以外のブラウザで見てください。

特にこだわりがなければGoogle Chromeでの閲覧が好ましいです。また、WebGLの描画はPCに掛かる負荷が大きいので高いマシンスペックでの閲覧が理想です。


【こちらもおすすめ】
デザイナー・ノンプログラマにおすすめしたいThree.jsのカンタン3D体験

Webの未来を感じるWebGLを使ったサイト・デモ20選

アニメーションや色、3D描画の表現が面白いと個人的に感じたものや、操作していて面白かったものを選出しました!

音が出るサイトもあるので音量に注意しましょう!
また、感想は若干エンジニア目線な部分もあります。

1. WebCamMesh

WebCamMesh

ページにアクセスするとパソコンのWebカメラ起動許可を求められます。Webカメラから取り込んだ映像にリアルタイムで3Dメッシュのエフェクトを掛けて表示されます。

Webカメラにリアルタイムでエフェクトをかけることができるって感動しませんか?

参考:Webカメラの映像をWebGLで3Dメッシュにする実験サイト『WebCam Mesh』 – K’conf

2. CubeSlam

Googleが公開しているWebGLを使った3Dのエアーホッケーのようなゲームです。WebRTCという技術も使っていて、友達と対戦することもできます。

3Dの技術に加えてリアルタイムな通信も実現されているところがすごいです。Websocketで通信をしている訳ではなく、WebRTCの技術を使ってピアツーピア通信で実現しているってところがミソだと思います。

参考:WebRTCとWeb AudioとWebGLのパワーを見せつけるためにオープンソースのPongクローンをGoogleがローンチ | TechCrunch Japan

3. webgl+motion tracking+pure data

基本的に最初に紹介したWebCamMeshと同じ感じで、カメラにリアルタイムにエフェクトが掛かるのに加えて、映像の動きに合わせて音が出ます。

これ、楽しいです!
手をかざしたり動かしたりして音が出るのを確かめてみましょう。私の環境ではカメラの許可を求めるアラートが出ないで、カメラ呼び出しがされましたが、WebCamMeshとはまた別の技術なのでしょうか。

4. HelloRacer

キレイに描画されたレーシングカーをキーボードで操作できます!
Webの技術で作られているとはにわかに信じ難いくらい、キレイなモデリングです。

定期的にカメラアングルが変わるのは、色々な角度から見てほしいという作者の気持ちの表れであるような気がします。

5. Dynamic procedural terrain

草原や丘の上を渡り鳥が飛んで行くアニメーションです。
綺麗です。迫力があります。

マウスでぐりぐり動かせるので、地表を見てみると、けっこう細かく質感が再現されているのが分かります。