このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

VRLayerInit

Deprecated

Avoid using this feature in new projects. Development of the WebVR API halted in favor of WebXR. This feature may be a candidate for removal from web standards or browsers.

Consider using the following features instead: WebXR.

VRLayerInit 辞書は WebVR API の辞書で、 VR ディスプレイに表示したいコンテンツレイヤー (HTMLCanvasElement または OffscreenCanvas) を表します。

メモ: このインターフェイスは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

VRLayerInit オブジェクトは VRDisplay.getLayers() メソッドを使用して受ける取り、 VRDisplay.requestPresent() メソッドを使用して表示することができます。

プロパティ

VRLayerInit.leftBounds

VRDisplay によって内容が表示されるキャンバスの左側のテクスチャ境界を定義します。

VRLayerInit.rightBounds

VRDisplay によって内容が表示されるキャンバスの右側のテクスチャ境界を定義します。

VRLayerInit.source

VRDisplay.submitFrame() が呼び出されたときに、 VRDisplay が表示するコンテンツを持つキャンバスを定義します。

js
// currently returns an empty array
var layers = vrDisplay.getLayers();

if(navigator.getVRDisplays) {
  console.log('WebVR 1.1 supported');
  // Then get the displays attached to the computer
  navigator.getVRDisplays().then(function(displays) {
    // If a display is available, use it to present the scene
    if(displays.length > 0) {
      vrDisplay = displays[0];
      console.log('Display found');
      // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
      btn.addEventListener('click', function() {
        vrDisplay.requestPresent([{ source: canvas }]).then(function() {
          console.log('Presenting to WebVR display');

          // Here it returns an array of VRLayerInit objects
          var layers = vrDisplay.getLayers();

          ...
        });
      });
    }
  });
}

VRLayerInit オブジェクトは下記のように見えます。

js
{
  leftBounds : [ ... ],
  rightBounds: [ ... ],
  source: canvasReference
}

メモ: canvasReference<canvas> 要素そのものを指すものであり、キャンバスに関連付けられた WebGL コンテキストを指すわけではありません。他の 2 つのメンバーは配列です。

仕様書

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-FrameBabylon.jsThree.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]

関連情報