HTML5を使ったブラウザベースの仮想現実

SFHTML5グループは、近頃、WebGL、WebVR、Three.js、GLAMといったHTML5の技術を使って、仮想現実を作ること、また、これらの技術のFirefoxやChromeの現在の実装状況について議論した。このアイディアはウェブ全体に仮想現実の経験を持ち込む。

VRMLとX3D ISO標準の共同制作者であるTony Parisi氏はWebVRの入門動画を作成している。WebVRは仮想現実とウェブの技術のミックスしたものを指す。現時点で、仮想現実ソフトウエアのほとんどはゲームみたいなもので、大量のグラフィックを作成し修正している。既存の仮想現実アプリは、Unityで作られているが、Unityに習熟している人はほとんどいない。Parisi氏のアイディアはこの領域を地ならしして、すべての開発者がJavaScript+WebGLというウェブの技術を使って仮想現実アプリを作成できるようにすることだ。JavaScriptでWebGLで2D/3Dグラフィクスを描画するThree.jsはVRのシーンを描画するのを簡単にする。WebGLよりもコードは3から10倍も短くなる。また、氏はGLAMという3Dコンテンツのための宣言的言語についても取り上げている。この言語を使えば仮想現実はさらに簡単に実現できる。GLAMを使って、回転する3Dのキューブを実現しようとすれば、以下を書けばいい。

#photocube {
    image:url(../images/flowers.jpg);
    rx:30deg;
}

Parisi氏はChromeの(実験ビルド、Blinkのソースコードブランチ)とFirefox (ナイトリービルド)は、ヘッドトラッキングWebVR APIを実装し始めている。これは、仮想現実デバイス(Oculus Riftなど)の動きを追跡し、WebGL/CSS3コンテンツのためのステレオ3D描画をサポートする。Google Cardboardは同じような仕組みを提供する。これは、Cardboardのようなスマートフォンと仮想現実のアプリを実現する。このアプリは、スマートフォンのカメラとモーションセンサーを使って、WebGLを使った携帯のブラウザ内でのステレオスコープイメージを生成する。

UI/UX design for WebVRというセッションの中で、MozillaのFirefox OSのUXリードデザイナであったJosh Carpenter氏は、FirefoxとOculus Riftを使って、仮想現実の特徴について説明している。

• リンクでシームレスに安全にナビゲートする機能。ナビゲーションリンク、ズーミング、すくローリング、バック、フィールドへの情報の入力などが含まれる。つまり、ブラウザのような経験を仮想現実ヘッドセットで実現できる。
• 開発が簡単。この目的のために新しいツールの開発が必要。JavaScript、Three.js、WebVR、WebGL、ブラウザというツール群はまだ未成熟。
• 仮想現実をデバイスでも実現できるようにする。
• ウェブサイトを自動的に仮想現実に変換する。古いウェブサイトへ遷移することもできるし、仮想現実に居続けることもできる。
• 仮想現実のコモディティ化。多くのデバイス。より良い性能。

また、Carpenter氏は普通のウェブサイトを仮想現実に変換するというデモも見せた。氏はひとつの仮想現実サイトから別へ移行するのに多くのトランジッションを開発している。仮想現実ブラウザの設計に大きな可能性を見いだしている。360°のカンバスが実現できるからだ。

GoogleのWebGL、WebVRの開発者であるBrandon Jones氏はWeb Browser VR Internalsと題したセッションで仮想現実アプリケーションのコードサンプルを提供し、仮想現実シーンの描画について説明した。仮想現実を描画するのは気の滅入る作業のようだが、Three.jsを使えば、次のコードのようにかなりシンプルになる。

<script src="js/effects/VREffect.js"></script>
<script src="js/controls/VRControls.js"></script> // Normal scene setup, then...

var vrControls = new THREE.VRControls(camera);
var vrEffect = new THREE.VREffect(renderer);

function onEnterVRFullscreen() {
   vrEffect.setFullScreen(true);
} 
function onWindowResize() {
   vrEffect.setSize(window.innerWidth, window.innerHeight);
} 
function onRequestAnimationFrame() {
   vrControls.update();
   vrEffect.render(scene, camera);
}

Jones氏はThree.jsは仮想現実を第一級の関心事として扱っておらず、仮想現実描画向けに最適化されていないことを認めているが、それでも有用だとしている。氏は仮想現実アプリの開発者向けにいくつかアドバイスをしている。

• 軽量なバーテックスシェーダを使うこと。

• 性能問題が起きた場合は、フレームレートよりもカンバスの解像度を低くする。

• ビュー以外に依存するもの(陰影や環境マップ)の2重描画を確実に避ける。

• それぞれの目に対してシーンを完全に連続で描くのは状態の変化を重くする。シーンによっては、各オブジェクトについて、左目を描画して、ビューポイントをスワイプし、右目を描画したほうが効率的かもしれない。

Jones氏はChromeはQuake 3仮想現実シーンの描画デモを行った。

リソースとしては、SFHTML5 Meetupの動画、Getting Started with WebVR API、完全に仮想現実に対応しているMozilla VR、Google Cardboard、Chrome VR Experiments、GLAM, Mozilla WebVRメーリングリストが挙げられる。