--- title: VRLayer slug: Web/API/VRLayerInit translation_of: Web/API/VRLayerInit original_slug: Web/API/VRLayer ---
{{APIRef("WebVR API")}}{{SeeCompatTable}}

WebVR API の VRLayer インターフェイス (ディクショナリ)は，VRHMDへ表示したいコンテンツレイヤー( {{domxref("HTMLCanvasElement")}} または {{domxref("OffscreenCanvas")}})を表します。

{{domxref("VRDisplay.requestPresent()")}} メソッドを使うことでレイヤーを表示することができます。

プロパティ

{{domxref("VRLayer.leftBounds")}}
{{domxref("VRDisplay")}} に表示されるキャンバスの左側テクスチャ境界を定義します。
{{domxref("VRLayer.rightBounds")}}
{{domxref("VRDisplay")}} に表示されるキャンバスの右側テクスチャ境界を定義します。
{{domxref("VRLayer.source")}}
{{domxref("VRDisplay")}} に表示されるコンテンツの対象となるキャンバスを定義します。

例

// 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();

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

{{domxref("VRLayerInit")}} objects look something like this:

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

Note: The canvasReference refers to the {{htmlelement("canvas")}} element itself, not the WebGL context associated with the canvas. The other two members are arrays

仕様

仕様 ステータス 備考
{{SpecName('WebVR', '#interface-vrlayer', 'VRLayer')}} {{Spec2('WebVR')}} 初回定義

ブラウザの互換性

{{Compat("api.VRLayerInit")}}

参照