原文 https://developer3.oculus.com/documentation/vrweb/latest/

Introduction

VR Webガイドへようこそ。

VR Webは、WebのためのVR体験を制作することを助けるためのAPIやその他のテクノロジーのプラットフォームです。VR Webコンテンツには、WebGLとWebVR APIによって作られた没入感のある3DシーンとVRで動作するよう拡張された2Dコンテンツがあります。デスクトップやモバイルのブラウザー上で行える全てのことは、VRでも行えます。

このガイドはVR Web体験の開発を始めるためにWebVR APIとReact VR Javascriptライブラリーを紹介します。また、開発者プレビューのCarmel Webブラウザーも提供します。これを使って作成したVR体験をテストすることができます。

WebVR

WebVRガイドへようこそ。

ざっくり言うと、WebVRはブラウザーのためのVRヘッドセットのインターフェースAPIです。これは通常二つのフェーズからなります:

セットアップ。アプリケーションがヘッドセットを検出し、VRDeviceオブジェクトにより記述され、表示のためのターゲットに設定する。
フレームごとのレンダリング。セットアップが完了したら、requestAnimationFrameハンドラーはポーズデータを取得し、WebGLで両目の映像をレンダリングし、ヘッドセットに送信します。WebVRを直接扱うためにはJavaScriptとWebGLの知識が必要です。

WebVRは進化中のAPIですが、APIの構成は固まっており、大部分の主要なブラウザーベンダーは2017年中旬にはほぼ利用可能になるだろうと考えています。

開発者プレビューのCarmelはこのAPI構成を対象としています。全てのサンプルとドキュメントはこのバージョンのAPIの使い方を説明します。

はじめに

開発者プレビューのCarmelはOculus Gear VRストアのGallery Appsセクションで利用可能です。

Carmelを起動すると、Oculusとサードパーティにより開発されたWebVRベースのサンプルギャラリーが表示されます。サンプルは随時ギャラリーに追加されます。時々チェックしてください。

開発者プレビューのCarmelはいくつかの大事な制限があります。アドレスバーと履歴ベースのユーザーエクスペリエンスが不足していることがわかるでしょう。我々はこのソフトウェアをWebVR開発者のための初期のサンドボックスとして使われるようにだけデザインしました。すでにある2Dウェブコンテンツはまだ表示できません。我々はこれは開発者に可能な限り早くテクノロジーを届けるための最適なトレードオフであると信じています。

自分のWebVRコンテンツを起動する

あなたのWebVRプロジェクトをテストするために、ovrweb browsable intent スキームを使ってください。詳しくは、コンテンツを起動するを見てください。

<a href="ovrweb:http://ocul.us/experience">
  HTTPコンテンツへ移動
</a>
<a href="ovrweb:https://ocul.us/experience">
  HTTPSコンテンツへ移動
</a>

デバッグする

CarmelはChromiumをベースに作られているので、Chromeのリモートデバッグ機能を使うことができます。これにより使い慣れたコンソール、タイムライン、プロファイラー、DOMビュワー、アドレスバー、更新などのツールを使用することができます。

もしあなたの端末がまだ開発マシンに接続されたことがない場合は、コンテンツをデバッグするを見てください。

代わりに、ほとんどのコンテンツはCarmelを起動する前にデバッグすることができます。Carmelでデバッグを始めるまえに、いくつか知っておくべきことがあります:

端末に合うようにカメラをセットアップする方法を知っておく。これは、共通のアイバッファーサイズと視野を計算することを意味します。90度の視野角と片目につき1024x1024のバッファーを使用することをお勧めします。
You only need to render one eye, but have an adjustment so you can pick which eye to render. This can allow you to swap between the left and right eye and look for bugs. Alternatively render both eyes.
マウスとデバイスの向きは、頭の向きを模倣するために使用することができるので、ビューを動的に変更することもできます。Expect that first generation frameworks with WebVR support will bake these interaction features in.

次にどうする？

さて、WebVR対応デバイスが手元にあり、VR Webの開発を始めるのにもっとも簡単な方法はWebGLの上に、もしくはWebGLフレームワークの上で開発を進めることです。これらのコンテンツはほとんどの端末で動かすことができ、WebVR APIのために拡張することも簡単です。

Oculus Connect 3でReact VRについて発表しました。これはReactの新しいプラットフォームで近いうちに利用可能になります(※2016/12/19時点で、こちらから利用可能)。React VRを使うと、Reactベースのモデルを高機能なUIコンポーネントと共に使用して、次世代のユーザー体験を構築できます。すでに存在するブラウザーにもフォールバックして対応することができます。

さらに、Carmelスターターキットサンプルもチェックしてください。デバイスの検出、表示の要求、ステレオレンダリングの基本について説明します。

Carmelの次の大きなマイルストーンは、VRコンテンツだけでなくすでに存在する2Dコンテンツも表示できるようにすることです。Google、Microsoft、Mozillaのすべてのパートナーとともに、Webの重要なマイルストーンを提供することに熱心に取り組んでいる段階です。スタンダード、セキュリティ、ユーザーエクスペリエンスに焦点を当て、このマイルストーンに向けて取り組んでいます。

詳しくは、その他のドキュメントを見てください。何か質問があれば、問題を報告したい場合は、フィードバックフォームから連絡してください。

コンテンツを起動する

Chrome等のAndroid 2Dブラウザーから、ovrwebプロトコルのリンクをタップすることでCarmelを起動できます。URLはプロトコルに続けて指定します。下記はどのようにHTMLリンクを作成するかとJavaScriptナビゲーションをovrwebプロトコルを使って実行する例です。

<!-- Carmelを通常のリンクで起動する。http://ocul.us/experience はあなたのURLで置き換えてください。 -->
<a href="ovrweb:http://ocul.us/experience">
  HTTPコンテンツへ移動
</a>
<a href="ovrweb:https://ocul.us/experience">
  HTTPSコンテンツへ移動
</a>

<script>
// JavaScriptからも遷移できます
function onClick() {
  // http://ocul.us/experience はあなたのURLで置き換えてください。
  window.location.href = "ovrweb:http://ocul.us/experience";
}
</script>

VRコンテンツの中では、通常のWebナビゲーションの方法でその他のVRコンテンツへ遷移することができます。ovrwebプロトコルはCarmelの中でも使用することができますが、必須ではありません。2DのWebサイトへ遷移することは、現在はサポートされていません。

デバッグする

CarmelはChromiumをベースにしています。なので、Chromeデベロッパーツールを使ってWebVRアプリケーションをデバッグすることができます。USBもしくはWi-Fiで接続できます。

USBデバッグを有効にする

USBデバッグをするために、以下のように端末を設定します:

設定アプリを開きます。
端末情報を選択します。
ビルド番号を7回タップすると開発者向けオプションが現れます。
設定アプリのトップに戻り、開発者向けオプションを選択します。
USBデバッグを有効にします。

Gear VR開発者モードを有効にする

Gear VR開発者モードはGear VRヘッドセットを挿入することなくVRアプリケーションを実行させることによって開発ワークフローを高速化します。

Gear VR開発者モードを有効にするには:

あなたの端末のosigファイルで署名したapkをビルドして端末にインストールします。詳しくは https://dashboard.oculus.com/tools/osig-generator/ を見てください。
設定アプリを開きます。
アプリケーション > アプリケーション管理を選択します。
Gear VR Serviceを選択します。
ストレージ > ストレージを管理を選択します。
VR Service Versionを開発者モードが表示されるまで数回タップします。
開発者モードを有効にします。

Wi-Fiデバッグを有効にする

Gear VRヘッドセットに接続している間にデバッグしたい場合、Wi-Fiデバッグを使用してください。Gear VRに接続している間はUSBデバッグができないため、Wi-Fiは必須です。

Wi-Fiデバッグを有効にするためには:

USBデバッグを有効にするの手順を完了してUSBケーブルでマシンに接続してください。
Android Studioをインストールしてください。
terminal または Windows コマンドプロンプトを開いてください。
PATHが通っていない場合はadbツールのある場所へ移動してください。Windowsでは、通常C:\Users\user\AppData\Local\Android\sdk\platform-toolsです。
ターミナルウィンドウで、adb tcpip 5555と入力してください。
設定アプリを開いてください。
端末情報 > ステータスと移動し、IPアドレスを取得してください。
ターミナルウィンドウで、adb connect x.x.x.x:5555と入力してください。x.x.x.xはIPアドレスです。

Chromeデベロッパーツールでリモートデバッグセッションを開始する

Carmelにアプリケーションを読み込んだあと、Chromeデベロッパーツールを使ってリモートデバッグできます。

リモートデバッグセッションを開始するためには:

Carmelにアプリケーションを読み込んでください。
Chromeを起動してChromeデベロッパーツールを開いてください。
More tools > Remote devicesを選択し、Remote devicesタブを開いてください。
リストからデバイスを選択してください。
com.oculus.carmel.player_apkの次のInspectボタンをクリックしてください。

Chromeデベロッパーツールのリモートデバッグについて詳しくは https://developers.google.com/web/tools/chrome-devtools/remote-debugging/ を見てください。

WebVR APIの紹介

CarmelはW3C WebVR仕様をサポートしており、WebGLを使ってVRコンテンツを表示することができます。あなたのアプリケーションをVR表示モードに対応させるためのいくつかの簡単なステップがあります。

最初のセットアップ

まず、WebGLキャンバスと全てのWebGLシーンレンダリング状態をセットアップします。WebGLキャンバスはVRLayerソースとして表示するために使われます。

var layerSource;

function initWebGLProgram() {
  layerSource = document.getElementById("webgl-canvas");

  // シェーダーをコンパイルする...
  // テクスチャーを読み込む...
  // ジオメトリーを作成する...
  // attributes と uniform ロケーションを保存する
}

次に、window.navigator.getVRDisplaysを使って利用可能なVRDisplaysを取得します。getVRDisplaysメソッドがwindow.navigatorに存在することを検証し、WebVRをサポートしないブラウザーのためにフォールバック処理を実装するべきです。

if (navigator.getVRDisplays) {
  navigator.getVRDisplays().then(function (displays) {
    if (displays.length > 0) {
      // We reuse this every frame to avoid generating garbage
      frameData = new VRFrameData();

      vrDisplay = displays[0];

      // We must adjust the canvas (our VRLayer source) to match the VRDisplay
      var leftEye = vrDisplay.getEyeParameters("left");
      var rightEye = vrDisplay.getEyeParameters("right");

      // canvas の width と height をアイパラメーターを基準に変更する。
      // 単純化のために、両目を同じ解像度で表示する。
      layerSource.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
      layerSource.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);

      vrDisplay.requestPresent([{ source: layerSource }]).then(function () {
        vrDisplay.requestAnimationFrame(onAnimationFrame);
      }).catch(function (err) {
        // requestPresentに失敗した
      });
    } else {
      // VRディスプレイが接続されていない。
    }
  }).catch(function (err) {
    // このコンテキストではVRディスプレイにアクセスできない。
    // おそらく`allowvr`属性の付いていない`iframe`の中で実行している。
  });
} else {
  // このブラウザーではWebVRはサポートされていない。
}

navigator.getVRDisplaysを呼ぶことでPromiseが返却されます。これは利用可能なVRDisplaysでresolveされるか、VRDisplaysへのアクセスが禁止されている場合はrejectされます。ここから取得されるVRDisplaysは、VRデバイスが接続されていない場合は空になります。Carmelでは常に一つのVRDeviceが利用可能です。

VRDisplayはWebGLキャンバスの大きさを知るために両目のパラメーターを取得できます。レンダーループでデバイスの向きを取得するために再利用可能なVRFrameDataを作成することもできます。

VR表示を開始するためには、VRDisplay.requestPresentを呼ばなければいけません。通常これはユーザー入力の結果としてしか呼び出せません(タップや“Enter VR”ボタンのクリック等)。しかしCarmelはVRDisplay.requestPresentをユーザー入力なしに呼び出せます。

最後に、アニメーションフレームをリクエストするためにVRDisplay.requestAnimationFrameを使います。

レンダーループ

VR表示の準備ができてアニメーションフレームを受信するようになったら、VRDisplayのフレームデータを受け取ってシーンをレンダリングし、アニメーションフレームを要求し続ける必要があります。

VRDisplay.getFrameDataを呼ぶことでVRDisplayの向きに基づいた左目と右目のビュー行列とプロジェクション行列を取得します。これらの行列はそれぞれの目にシーンをレンダリングするために使います。

function onAnimationFrame(timestamp) {
  // Continue to request frames to keep the render loop going
  vrDisplay.requestAnimationFrame(onAnimationFrame);

  // Clear the layer source - we do this outside of render to avoid clearing twice
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // Update the scene once per frame
  update(timestamp);

  // Get the current pose data
  vrDisplay.getFrameData(frameData);

  // Render the left eye
  gl.viewport(0, 0, layerSource.width * 0.5, layerSource.height);
  render(frameData.leftProjectionMatrix, frameData.leftViewMatrix);

  // Render the right eye
  gl.viewport(layerSource.width * 0.5, 0, layerSource.width * 0.5, layerSource.height);
  render(frameData.rightProjectionMatrix, frameData.rightViewMatrix);

  // Submit the newly rendered layer to be presented by the VRDisplay
  vrDisplay.submitFrame();
}

function update(timestamp) {
  // Update your scene state
}

// For VR, it's important that your render method is parameterized by the camera
// (projection and view matrices) so that it can be used to render from each
// eye's perspective
function render(projectionMat, viewMat) {
  // Render your scene using the given matrices
}

両目のレンダリングが完了したら、VRDisplay.submitFrameを呼んで新しいフレームを送信します。新しいフレームが利用可能になったら、アニメーションコールバックは再度実行されます。

完全なサンプルはこちら。

OculusのVR Webドキュメント勝手に翻訳してみた

Introduction

WebVR

はじめに

自分のWebVRコンテンツを起動する

デバッグする

次にどうする？

コンテンツを起動する

デバッグする

USBデバッグを有効にする

Gear VR開発者モードを有効にする

Wi-Fiデバッグを有効にする

Chromeデベロッパーツールでリモートデバッグセッションを開始する

WebVR APIの紹介

最初のセットアップ

レンダーループ