WebVR — Webによる仮想現実 - ゲーム開発

仮想現実のコンセプトはそれほど新しいものではありません。しかし現在、webはWebVRを動作させるのに必要なテクノロジーやwebアプリでWebVRを使用するためのJavaScript APIを持っています。この記事では、 WebVRをゲームでの使用の観点から紹介します。

VR デバイス

Oculus Riftを代表とするたくさんの製品が市場に出て、これからますますこの分野が発展するでしょう。私たちは既に"ゲームを VR体験をするのに十分な"テクノロジーを持っています。下にいろいろなデバイスを集めてきました： Oculus Rift や HTC Vive のようなデスクトップ接続型VRデバイス、コンソール越しに接続するPlaystation VR 、 Gear VR や Google CardboardのようにスマートフォンによってVRデバイスを体験できるデバイスなどです。

Note: 詳細については WebVR Concepts をご覧ください。

WebVR API

The WebVR API is the central API for capturing information on VR Devices connected to a computer and headset position/orientation/velocity/acceleration information, and converting that into useful data you can use in your games and other applications.

Note: もちろんゲームを作るために便利なAPIがほかにもたくさんあります。例えば入力を制御するための The Gamepad API やディスプレイの表示方向？を処理するための Device Orientation API などです。

ブラウザサポートと仕様の状態

現在、WebVRに対するブラウザのサポートはまだ実験的です — 現在、 nightly builds of Firefox と experimental builds of Chrome (Mozilla と Google は一緒に実装するために一丸となって取り組んでいます)のみでしか動きませんが、しかしすぐに通常版で使用できるようになります。

the WebVR spec is in Editor's Draft status which means it is still subject to change. The development is led by Vladimir Vukicevic from Mozilla and Brandon Jones from Google. For more info be sure to visit the MozVR.com and WebVR.info websites.

WebVR APIを使う

WebVR APIは２つのコンセプトから成り立っています

The WebVR API is based on two concepts — sending stereoscopic images to both lenses in your headset and receiving positional data for your head from the sensor, and those two are handled by HMDVRDevice (head-mounted display virtual reality device) and PositionSensorVRDevice.

デバイスの取得

あなたのコンピューターに接続されているデバイスの情報を取得するにはNavigator.getVRDevices メソッドを使用できます:

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;
      }
    }
  }
});

This code will loop through the available devices and assign proper sensors to the headsets — the first devices array contains the connected devices, and a check is done to find the HMDVRDevice, and assign it to the gHMD variable — using this you can set up the scene, getting the eye parameters, setting the field of view, etc. For example:

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

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

The gPositionSensor variable holds the PositionSensorVRDevice — using this you can get the current position or orientation state (for example to update the scene view on every frame), or reset the sensor. For example, the below code outputs position information on the screen:

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;
    }
  }

  ...

}

For a full explanation and more details of the demo this is taken from, see Using the WebVR API.

ツールとテクニック

The first WebVR experiments and demos used Three.js as it's probably the most popular 3D engine for the web. See the VREffect and VRControls functions available on the Three.js github to help you implement and handle WebVR with Three.js.

Boris Smus has written about the concept of Responsive WebVR, where a single web game can be played on various devices like laptops without VR hardware, PCs with Oculus Rift, or smartphones inside Google Cardboard and still deliver a unique and valuable experience across all of them. It's like responsive design, but applied to the VR world — write once and run in any VR headset ... or without it. You can check the WebVR Boilerplate sources — it's a good example to start learning WebVR from, and a starting point for any web-based VR experience.

There's also a markup framework called A-Frame that offers simple building blocks for WebVR, so you can rapidly build and experiment with VR websites and games: read the Building up a basic demo with A-Frame tutorial for more details.

Immersion is more important than gameplay or graphics - you have to feel you're "inside" the experience. It's not easy to achieve, but it doesn't require realistic images. Quite the contrary as having a basic shapes flying around in high framerate can make a lot. Remember: experimenting is key - see what works for your game in particular.

WebVRの将来性

消費者用のデバイスは既に市場に存在し、私たちはすでにそれらをweb上でサポートするためのJavaScript APIs を持っています。私たちは今、安定した仕様書を持つことが必要です。より良いuxやui、より良いハードウェアやたくさんのツールとライブラリなども必要になるでしょう。 — そしてそのすべて地平線上にあります。WebVRを経験してこの世界に潜るには完ぺきなタイミングでしょう。

WebVR — Webによる仮想現実