Help us understand the problem. What is going on with this article?

WebVR(ブラウザーでVRデバイスが使用できるAPI)を軽く試して気づいたこと

More than 5 years have passed since last update.

個人的に望んでいたAPIの実装が開始されたというニュースを知りとてもうれしいです。
それが、WebVR
Oculus RiftなどのVRデバイスがブラウザーで(直接)使用するためのAPIです。
現在は、ChromeとFirefoxのWebVRを実装した特別な?ビルド版が配布されています。
Chrome
Firefox
今のところ、両ブラウザーともにOculus Riftのみ対応しており、Chromeは近いうちにcardboardにも対応(つまりはAndroid用?)するようです。また、MozillaスタッフのブログではLeap Motion, PrioVR, Sixense Stemといったデバイス名も見られますので将来これらのデバイスに対応するのではと期待します。
Chromeのサンプルページのソースを見ればデバイスの取得、センサーデータの取得といったWebVR APIの(Oculus Riftに関する)一通りの使用方法が確認できます。
このWebVRを軽く試してみて気づいたこと書きます。
※Chromeでしか試していません。

Oculus Riftは2つのデバイスで認識される


VRデバイスを列挙するコード
if (navigator.getVRDevices) {
  navigator.getVRDevices().then(EnumerateVRDevices);
} else if (navigator.mozGetVRDevices) {
  navigator.mozGetVRDevices(EnumerateVRDevices);
}

function EnumerateVRDevices(devices) {
  for (var i = 0; i < devices.length; i++) {
    if (devices[i] instanceof HMDVRDevice) {
      hmdDevice = devices[i];
      break;
    }
  }
  // hmdDeviceのhardwareUnitIdと同じPositionSensorVRDeviceを取得
  for (var i = 0; i < devices.length; i++) {
    if (devices[i] instanceof PositionSensorVRDevice &&
      (!hmdDevice || devices[i].hardwareUnitId == hmdDevice.hardwareUnitId)) {
                    sensorDevice = devices[i];
    }
  }
}

Oculus Riftは、HMDVRDeviceとPositionSensorVRDeviceの2つが認識されます。
* HMDVRDevice
ディスプレイ側のデバイスで、画面サイズや目の位置(getEyeTranslation関数)、FOV(getRecommendedEyeFieldOfView関数)の情報を取得することができます。
* PositionSensorVRDevice
センサー側のデバイスで各センサーの各種情報(getState関数)を取得することができます。

デバイスを接続していなくても動作確認できる


上記のVRデバイスを列挙するコードを、デバイスを接続しないで実行するとEnumerateVRDevices関数のdevices引数にはデバッグ用の仮想的なデバイス(deviceName="Mockulus Rift")が渡されますので、デバイスがなくても動作を確認することができます。

複数デバイスにも対応?


私はOculus Riftを複数所有していないため実際に確認してませんが、HMDVRDevice,PositionSensorVRDeviceそれぞれにdeviceIdプロパティ, hardwareUnitIdプロパティがあるのですが、これらのプロパティの値(文字列)の最後には番号があり、1つですと"0"となっており、デバイスが増えるごとにこの番号が増えていき列挙時に取得できると予想します。

WebGLでないと動作しない


サンプルコードを見ると、canvasをフルスクリーンすることで歪みエフェクトをかけたレンダリングが行われます。

歪みエフェクトをかけて表示するコード
if (canvas.webkitRequestFullscreen) {
  canvas.webkitRequestFullscreen({ vrDisplay: hmdDevice, /*vrDistortion: false*/ });
} else if (canvas.mozRequestFullScreen) {
  canvas.mozRequestFullScreen({ vrDisplay: hmdDevice });
}

ならば2Dコンテキストのcanvasでも行けるのではと予想したのですが、試してみるとフルスクリーンを実行したとたんにページが落ちます。
chrome_error.png

目の横方向位置合わせはコーディングが必要?


WebVR Test
こちらのサンプルで、目の位置を設定するコードが

var eyeOffsetLeft = hmdDevice.getEyeTranslation("left");
var eyeOffsetRight = hmdDevice.getEyeTranslation("right")
cameraLeft.position.sub(eyeOffsetLeft);
cameraRight.position.sub(eyeOffsetRight);

となっておりますが、サンプルを実際にOculus Riftで見てみると左右の間隔が離れていました。
もうひとつのサンプルQuake 3 level rendererをOculus Riftで見てみると、間隔があっていました。
Quake 3 level rendererでは、getEyeTranslation関数で取得した目の位置と、getRecommendedEyeFieldOfView関数で取得したFOVから、ビューマトリックスおよびプロジェクションマトリックスを算出しています。
将来的には上記のコードできっちり間隔が合ったものとなるのかは不明ですが、
算出して設定するサンプルをあげているため、やはりコーディングが必要なのかもしれません。

あとがき


現状では、トラッキング情報を取得するために別途EXEを実行したり、歪みエフェクトをかけるためにOculusRiftEffect.jsを使用したり(または自力でシェーダーを組んだり)しなければならないのですが(Oculus RiftをWebで使用するためのライブラリのまとめ)、そんなことする必要なく使えるようになるはすごくコーディング及び環境構築が楽になります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした