WebVR — ウェブによる仮想現実

Oculus Rift の人気とその他の多くの機器が間もなく市場に登場することで、未来は明るいように見えます。 ゲームをプレイするのに "十分な" VR 体験を実現するのに十分なテクノロジーがすでにあります。 Oculus Rift や HTC Vive などのデスクトップ型のものから、 Playstation VR (現時点では WebVR に対応していないことは確かです) を備えたコンソール、Gear VR や Google Cardboard などのモバイルエクスペリエンスまで、選択できる機器はたくさんあります。

WebVR API は、コンピューターに接続された VR 機器の情報とヘッドセットの位置/向き/速度/加速度の情報をキャプチャし、それをゲームやその他のアプリケーションで使用できる有用なデータに変換するための中心的な API です。

現在、 WebVR API のブラウザー対応はまだ実験的です — nightly builds of Firefox と experimental builds of Chrome で動作しますが（Mozilla と Google が一丸となって実装に取り組みます）、遅かれ早かれ通常のビルドで見ることができるようになるでしょう。

WebVR 仕様は、編集者草案の状態にあり、これはまだ変更される可能性があることを意味します。 開発は、Mozilla の Vladimir Vukicevic と Google の Brandon Jones が主導しています。 詳細については WebVR.info のウェブサイトにアクセスしてください。

WebVR API は、ヘッドセットの両方のレンズに立体画像を送信することと、センサーから頭の位置データを受信することの 2 つの概念に基づいており、これら 2 つは HMDVRDevice（head-mounted display virtual reality device、ヘッドマウントディスプレイ仮想現実機器）と PositionSensorVRDevice によって処理されます。

コンピューターに接続されている機器に関する情報を取得するには、次のように Navigator/getVRDisplays メソッドを使用できます。

navigator.getVRDevices().then(function (devices) {
  for (var i = 0; i < devices.length; ++i) {
    if (devices[i] instanceof HMDVRDevice) {
      gHMD = devices[i];
      break;
    }
  }
  if (gHMD) {
    for (var i = 0; i < devices.length; ++i) {
      if (
        devices[i] instanceof PositionSensorVRDevice &&
        devices[i].hardwareUnitId === gHMD.hardwareUnitId
      ) {
        gPositionSensor = devices[i];
        break;
      }
    }
  }
});

このコードは、利用可能な機器をループして、適切なセンサーをヘッドセットに割り当てます。最初の devices 配列には、接続された機器が含まれており、HMDVRDevice を見つけるためのチェックが行われ、変数 gHMD に割り当てられます。これを使用して、シーンを設定し、目のパラメーターを得て、フィールドオブビュー等を設定することができます。例として

function setCustomFOV(up, right, down, left) {
  var testFOV = new VRFieldOfView(up, right, down, left);

  gHMD.setFieldOfView(testFOV, testFOV, 0.01, 10000.0);
}

gPositionSensor 変数は PositionSensorVRDevice を保持します — これを使用して、現在の位置や方向の状態を取得したり（例えば、すべてのフレームでシーンビューを更新したり）、センサーをリセットできます。 例えば、次のコードは画面上の位置情報を出力します。

function setView() {
  var posState = gPositionSensor.getState();

  if (posState.hasPosition) {
    posPara.textContent =
      "Position: x" +
      roundToTwo(posState.position.x) +
      " y" +
      roundToTwo(posState.position.y) +
      " z" +
      roundToTwo(posState.position.z);
    xPos = -posState.position.x * WIDTH * 2;
    yPos = posState.position.y * HEIGHT * 2;
    if (-posState.position.z > 0.01) {
      zPos = -posState.position.z;
    } else {
      zPos = 0.01;
    }
  }

  // …
}

これを取得するデモの完全な説明と詳細については、WebVR API の使い方を参照してください。

最初の WebVR の実験とデモでは、おそらくウェブで最も人気のある 3D エンジンである Three.js を使用しました。 Three.js github で利用可能な VREffect および VRControls 関数を参照して、Three.js で WebVR を実装および処理するのに役立ててください。

Boris Smus は、レスポンシブ WebVR の概念について書いています。 このコンセプトでは、 VR ハードウェアのないラップトップ、 Oculus Rift を搭載した PC、Google Cardboard に内蔵したスマートフォンなど、さまざまなデバイスで単一のウェブゲームをプレイしながら、それらすべてにユニークで価値のある体験を提供できます。 レスポンシブデザインに似ていますが、 VR の世界に適用されます — 一度書けば VR ヘッドセットで実行できます ... またはそれなしで。 WebVR ボイラープレートのソースを確認できます。 これは、WebVR の学習を開始する良い例であり、ウェブベースの VR 体験の出発点です。

WebVR のシンプルなビルディングブロックを提供する A-Frame と呼ばれるマークアップフレームワークもあるため、VRウェブサイトやゲームをすばやく構築して実験できます。 詳細については、A-Frame を使った基本的なデモの作成というチュートリアルを参照してください。

没入感は、ゲームプレイやグラフィックスよりも重要です — 体験の "内側にいる" と感じる必要があります。 実現するのは簡単ではありませんが、リアルな画像は必要ありません。 それどころか、基本的な形状を高フレームレートで飛び交うだけで、かなりの効果が得られます。 実験が重要なことを覚えておいてください — 特にあなたのゲームに何が有効かを確認してください。

それは起こっています — 消費者向けデバイスは現在市場に出回っており、ウェブ上でそれらをサポートする JavaScript API がすでにあります。 今必要なのは、安定した仕様、優れた UX と UI、より優れたハードウェア、より多くのツールとライブラリーです。 そしてそのすべてが間近に迫っています。 WebVR に飛び込んで実験するのに最適な時期です。

• WebVR API
• WebVR の概念
• WebVR API の使い方
• A-Frame を使った基本的なデモの作成