【CEDEC 2015】ブラウザゲーム新時代の幕開けか？　”WebGL”が可能にしたブラウザと3DCGの新たな道

新時代を切り開く武器となるか

2015年8月26日から8月28日までの3日間、パシフィコ横浜で開催されるコンピュータエンターテインメント開発者向けカンファレンス“CEDEC 2015”。ファミ通Appではスマホ関連のセッションを中心にリポート！

ここでは初日にあたる8月26日午前11時20分から実施された、“WebGLとモバイルウェブの「これまで」と「これから」 そして来るべきWebGL 2.0へ向けて”の講演の模様をお届けする。

本講演では、WebGL開発支援サイト”wgld.org“の運営やWebGLスクールの主催などもされている、まさにWebGLのスペシャリストである杉本雅広氏が登壇。WebGLの現状とその将来性について語られた。

そもそも“WebGL”について造詣の無い人に簡単に説明をすると、WebGLとは”ウェブブラウザ上で3Dグラフィックを表示させることができる標準仕様”のこと。

もっと噛み砕いてざっくりと説明をするなら、“JavaScript”のような比較的入門者向けとも言えるプログラミング言語で、Webブラウザ上に3Dグラフィックのモデリングを生成することができるシステム”だ。

従来までならば、Webサイトなどで3Dモデルを表現するのは容易ではなかった。

そもそも3Dモデルを作るには、Mayaなどに代表される専用のアプリケーションを使い、その上で何千何万とあるポリゴンを細かく調整する必要がある。専門的な知識を多く有する点からも、たとえ簡単な3Dモデルだとしても素人がそうやすやすと手を出せる代物ではなかった。

しかし、WebGLはJavaScriptのAPIなので3Dモデル制作で使用されてきたような専用アプリケーションは不要。

杉本氏はWebGLの使い勝手のよさを「ブラウザとテキストエディタがあれば気軽に開発が進められる」とし、そのうえで「Open GL ES（※）がベースになっているため、ネイティブアプリ開発の入門としても活用できる」とWebGLが持つ高いポテンシャルについても言及した。

（※）Open GL ES：デスクトップPCやワークステーションといったクロスプラットフォーム向けのリアルタイム3DグラフィックスAPI

WebGLの実用例

WebGLの有用性について紹介をした後に、WebGLになじみのない人に向けてWebGLを実際に使用した作例を紹介した。

■APEXvj

SoundCloudやローカル音源を用いることができるサウンドビジュアライザ。「CGの完成度が高いのでぜひ見て欲しい」と杉本氏。

※APEXvjを使ってみる（URL：http://www.apexvj.com/v3/）

■cru·ci·form

“cru·ci·form”は、リアルタイム建築ビジュアライゼーションテストプロジェクトのひとつ。ハイクオリティの3Dモデルで描かれたコンクリート状の廊下を、ブラウザ上で自由に視点を変えながら閲覧することができる。

杉本氏は『cru·ci·form』最大の特徴を「さざまなデバイスで実行できるように負荷レベルを最初に選択する方式を採用しているのが最大の特徴。そのほか、被写界深度やノイズなどのポストプロセスを多数実装しているのもポイント」と説明した。

▼動画でも閲覧可能

※cru·ci·formを使ってみる（URL：http://www.clicktorelease.com/code/cruciform/）

■SPACELAME

こちらは一変してブラウザベースのランアクションゲーム。

プレイヤーはジェットパックを背負った羊をマウスで操作し、道中のアイテムを集めながらゴールを目指す。道中には障害物となる隕石が存在し、隕石にぶつかり続けて体力がなくなってしまうとゲームオーバーになる。

ランゲーというジャンルなこともあり、こちらのステージもリアルタイムで生成されているのがポイント。ネイティブアプリのランゲーやコンシューマー機のそれにもひけをとらないグラフィックとなっているので、一見の価値アリ。

※SPACELAMEを使ってみる（URL：http://spacelamb.12wave.com/）

■Speck

分子や原子といった科学的なデータのビューワーとして使えるのが『Speck』。「被写界深度やアンビエントオクルージョンなど、非常に多彩なエフェクトが備わっていてすごい」（杉本氏）とのこと。

※Speckを使ってみる（URL：http://wwwtyro.github.io/speck/）

■Maratropa

Twitterと連携するタイプの一風変わったデモ作品。画面上に無数に存在する白いオブジェクトひとつひとつがTwitterアカウントと紐づいており、いわばTwitterアイコンの地図のようなものになっている。

それぞれのアイコンの色を読み取って、背景色もそれに合わせた色に変化するのも特徴だ。

※Maratropaを使ってみる（URL：http://maratropa.com/tfnyow）

■DENNIS

ミュージックビデオをWebGLで再現した作品が『DENNIS』。

すべてのモデルデータを計算して（=プロシージャル）生成しているため、毎回異なるミュージックビデオになっているのだという。公式によると「二度と同じミュージックビデオにはならない」のだとか。

またオブジェクトもシンプルなため、スマートフォンでも手軽に再生が可能。さらにスマートフォンで閲覧する場合は、ジャイロによる視点変更もできる。

※DENNISを使ってみる（URL：http://www.dennis.video/）

こうした実際のデモ作品を紹介した上で、杉本氏はWebGLが可能にした功績を以下のようにまとめている。

ブラウザベースでこれだけのことが実現できるとなると、気になるのはモバイルでの実装。

これほどまでの3D表現ができるのであれば「ブラウザベースのゲームでもネイティブゲームと遜色ないものが作れるのでは？」と夢見てしまうのは至極当然のことだろう。

そうした意見に応えるかのように、杉本氏はモバイル環境でのWebGL実装の現状を解説。

中でも、表示させるブラウザとハードによって挙動に大きな差が出ることに触れた上で、「もともと組み込まれているブラウザの種類が多いAndroidだと、すべての端末に対応さえるのは非常に困難」であると述べた。

そのため現在は、対象を”iOS8以降を搭載したiPhone”に限定せざるを得ないのだという。

モバイルデバイスであるからこそWebGLが活かせるポイント

前項では比較的ネガティブな意見が多かったが、ここからは“モバイルデバイス上であるからこそWebGLを活かせる点”について言及。

とくに杉本氏が注目しているのが、“ジャイロセンサーを用いたVR的な利用法“だという。昨今ではハコスコ（※）を代表に、スマートフォンを用いることで手軽にVR体験をすることが可能になっている。視野全体をフル3Dで覆うVRとWebGLの親和性は、たしかに高いかもしれない。

（※）ハコスコ：ダンボール製のビューワーにスマートフォンを装着することでVR体験ができるガジェット。ダンボール制ということもあり、1000円ほどの比較的安価で購入できるのが特徴。

さらに杉本氏は「OSやブラウザは限定してしまうが」と前置きをして「スマートフォンの照度センサーを使って、WebGLで表現する3Dモデルの明るさを変化させるようなことをいつかやってみたい」とコメント。スマートフォンに内臓された多彩なセンサーには、無限の可能性が秘められているのだ。

だが、ここでふと湧いてくるのが「そもそもWebGLじゃなくて、ネイティブアプリでやればよいのでは？」という疑問。

杉本氏はその点にも当然触れ、「ネイティブアプリにしかできないことは年々減っており、多くのことがJavaScriptで実現可能になっている」とコメント。

また「ブラウザベースなら、ネイティブアプリ特有のバージョンアップやバグフィックスのたびにストアへの再申請は不要。バグの改修やカスタマイズをするときはサーバー上の実装を置き換えるだけでよい」と、ブラウザベースであるWebGLのメリットを述べた。

たしかに、ネイティブアプリ最大のネックが”ストアへの申請”である。

昨今のスマートフォンゲームの多くが、配信日を事前に策定できなかったり、アップデートを高頻度で行えなかったりする理由がそこにある。（※AppStoreでは、新規・アップデート版問わず、ストア上に新たなアプリをアップロードする際に必ずApple社による審査が必要）

しかし、ブラウザベースならばストアを介さずにサービスを提供できる。そのためネイティブアプリと同程度のクオリティのサービスをWebGLで実現できるのであれば、WebGLを用いたブラウザベースのものに移行するのはやぶさかではないと言えよう。

一方で、前項でも触れたようにWebGLにもデメリットはある。先ほど触れたように端末やブラウザによって挙動にバラつきが出る点に加え、バッテリーの問題も挙げられた。リアルタイム生成のハイグラフィック3Dモデルを表示し続ければ、当然デバイスにもかなりの負荷がかかる。そうなれば、モバイルデバイスのバッテリーはあっという間に底を尽きてしまうのだ。

さらにデータをキャッシュする（=端末にダウンロードしたウェブページのデータを貯蓄すること）技術を用いれば動作は早くなるが、これをすると他サイトを見たり、ほかのアプリを使ったりなど何をするにしても挙動が重くなってしまう。

「初体験でVR酔いをした人がVRに嫌悪感を抱いてしまうように、キャッシュ機能を用いすぎてデバイスの挙動が重くなってしまうと、WebGLそのものが悪だと認知されてしまう。今後は節度を持った開発が求められていくと思います」（杉本氏）と、今後の開発における注意点についても喚起した。

メリット・デメリットを理解した上でどう向き合うか？

WebGLのメリット・デメリットを理解した上で、WebGLと同向き合うべきか。杉本氏はWebGLのメリットを活かした道を示した。

とくに”JavaScriptベースなのでWeb関連のスキルを利用しやすい点”、”ふつうの3Dの技術を学ぶよりは入りやすく、汎用性も高い点”を強く言及。

「WebGLをきっかけにハイエンドグラフィックの技術を磨いて、それをWeb、アプリに転用するスキルも身につけられる。3Dの勉強の入門としても、ぜひ触れてみて欲しい」と述べた。

最後にwebGLの最新バージョンである”WebGL 2.0″に関する新機能についても触れられ、今回の講演は終了した。

編集後記

記者が今回の講演を聞いて、とくに注目していたのが“Web技術の転用がしやすい”という点である。

ブラウザベースのソーシャルゲーム全盛の時代から昨今のネイティブアプリ主導の形に変容していくなかで、ブラウザのソーシャルゲームを得意とした多くのメーカーが、ネイティブアプリへの移行に遅れを取っていた。

その最大の要因が、会社の規模拡大に合わせて大量に雇用した開発者たちが“ブラウザゲームの専門家”で、“ネイティブアプリの知識が少なかった”からだ。

結果、根本から作り方が異なるネイティブアプリ開発に対応しきれなかった開発者たちが、ゲームとは異なる道に進むようになった。

時代は変わり、現在ではネイティブアプリの知識に長けた開発者たちが重宝される形となっている。しかし、それでも一時代を築いたWebブラウザの専門家たちが、独創的なオリジナリティを持ち合わせていたのも事実だ。

ネイティブアプリ化の流れでゲーム業界を離れてしまった才のあるプロフェッショナルたちが、WebGLがより広く普及することでふたたびこの世界で活躍をしてくれるかもしれない。

モバイルゲーム関連の記者としては、WebGLが創りだす未来に心躍ってしまうのだ。