3Dゲームの実現はAndroid4.2から実装されるWebGLに期待!?
後半に登壇したのは、サイバーエージェントでスマホ向けブラウザゲーム「バトルスロット」の開発に関わっているブルンナー・グンタ氏である。セッションテーマは、HTML5でモバイル3Dゲームの開発を可能にする技術について。ブルンナー氏はアルゼンチンのブエノスアイレス大学情報科を卒業後、日本工学院でグラフィックデザインを学んだという。
フロンティアゲーム事業部 ブルンナー・グンタ氏
HTML5での描画技術はさまざまだ。本当にスマホブラウザで使える技術はどれか把握するため、まずiOSやAndroidで使われているブラウザの状態をチェックした。
国内で使われているスマホの98％がiOSとAndroid端末である。従ってチェックの対象となったのはSafari、Android標準ブラウザ、Chromeの3種。「事実上標準のレンダリングエンジンはWebKit。しかし採用している描画技術、デバイス、OSバージョン、ブラウザ自体のバグなどにより、そのパフォーマンスやユーザー体感はまったく異なるものになっている」とブルンナー氏。
検証結果
ゲーム描画において特に気になるのがパフォーマンスである。「理想の描画速度は60fps。最低でも20fpsは欲しい」とブルンナー氏。以下はどのHTML5の描画技術がスマホで使えるかを把握するため、ブルンナー氏が検証した結果だ。
DOM CSS2
マージンレフトやレフトで動かしたところ、「iOS、Androidともに速度が遅く、iOSの場合はGPUも働かなかった。この方法は使えない」（ブルンナー氏）という結論に。
DOM CSS 3D
TranslateXで動かしたところ、「iOSは4以上ならGPUも有効で描画速度も速い。一方のAndroidは機種によって不安定なので、iOSについては使える」とブルンナー氏。次にTranslate3Dで動かすと、iOSはGPUも有効で描画速度はさらに向上。一方Androidは不安定で描画されず、Chromeは場合によるという結果に。「iOSのみ有り」という結論になった。
CSS3 Filters
グレースケールや色相などPhotoshopのような機能が使える。「iOSは6より実装。CPUも有効でぼかし以外の描画速度は速い。しかしAndroidは未実装でChromeはまだ不安定なので、iOSについてのみ有り」（ブルンナー氏）
CSS Custom Filters
アドビが開発した映画のようなエフェクトを実現するため技術。CSS FilterLabというブラウザベースのツールを使うことで、いろいろな表現ができる。しかし、iOS、Androidともに未実装で「今後に期待」とブルンナー氏。
Canvas
自由度が高い一方、DOM側で実装されていた機能は使用できなくなる。描画はすべて自分でやらないといけない。iOS5以上ではピクセルの描画のみGPUが支援、Androidは場合によってだが安定。「この技術は有り」とブルンナー氏。
WebGL
PC版のChromeでは盛り上がっているHTML5での描画の最先端技術。THEREE.JSで動かしてみた。iOSは実装されているが非公開。iAdのみ許可されている。Androidは4.2以上のChromeより有効だが、現状は不安定とこれからの技術。ブルンナー氏は「現状はないが、今後は有り」と結論付けた。
今後使える3D技術とライブラリ
これらの状況から、スマホで使える3D技術とは何か。現在はiOSではCSS3 3D、AndroidはCanvas 2Dで3Dをシミュレーションする方法を採用。今後はどのような技術が使えるのだろうか。「iOSはCSS 3Dはもちろんだが、iOS7～8からはWebGL許可に期待している。AndroidはAndroid4.2以上のChromeより実装されるWebGLが本命だろう」（ブルンナー氏）
またCSSで高度な3D表現ができるよう、Three.jsをはじめ、Sprite3D.js、Photon、famo.usなどのライブラリが続々登場している。
ここでブルンナー氏が、Three.jsを使って作成したCSS 3Dのデモを実施。そのスムーズな動きに、ブルンナー氏もこのような動きはネイティブアプリでしか無理だと思っていたようで、何度も「これはSafariですよ」と口にしていた。
現在のスマホブラウザの表現力の状況は、昔のコンシューマ向けゲーム機戦争の時代と似たような状況にあるという。各ブラウザは、プレイステーション2やスーパーファミコンなどのゲーム機に例えられるというのだ。
「かつてのコンシューマ向けゲーム機同様、3D表現は特定のプラットフォームに絞ること。古いブラウザは通常の2Dレンダリングがお勧めだ」（ブルンナー氏）
先に紹介したデモはたった一日で作成したもの。時間をかければかなり楽しいゲームができるという。「Three.jsでデモを作ってみてほしい。ただしAndroidの標準ブラウザだとがっかりするかもしれませんが…」
ブルンナー氏は最後にこう参加者に呼びかけ、セッションを終了した。
