VRLayer

この記事は翻訳が完了していません。 この記事の翻訳にご協力ください

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

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

プロパティ

VRLayer.leftBounds
VRDisplay に表示されるキャンバスの左側テクスチャ境界を定義します。
VRLayer.rightBounds
VRDisplay に表示されるキャンバスの右側テクスチャ境界を定義します。
VRLayer.source
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();

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

VRLayerInit objects look something like this:

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

Note: The canvasReference refers to the <canvas> element itself, not the WebGL context associated with the canvas. The other two members are arrays

仕様

仕様 ステータス 備考
Unknown
VRLayer の定義
不明 初回定義

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
VRLayerInit
実験的非推奨
Chrome 未対応 なしEdge 未対応 ≤18 — 79Firefox 完全対応 55
補足
完全対応 55
補足
補足 Windows support was enabled in Firefox 55.
完全対応 64
補足
補足 macOS support was enabled in Firefox 64.
IE 未対応 なしOpera ? Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 56 — 80
補足 無効
未対応 56 — 80
補足 無効
補足 Only works in an experimental version of Chrome. (Other builds won't return any devices when Navigator.getVRDisplays() is invoked.)
補足 Daydream View supported in Chrome 56.
補足 Google Cardboard supported in Chrome 57.
無効 From version 56 until version 80 (exclusive): this feature is behind the WebVR preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 55Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 6.0
補足
完全対応 6.0
補足
補足 Google Cardboard supported in Samsung Internet 7.0.
leftBounds
実験的非推奨
Chrome 未対応 なしEdge 未対応 ≤18 — 79Firefox 完全対応 55
補足
完全対応 55
補足
補足 Windows support was enabled in Firefox 55.
完全対応 64
補足
補足 macOS support was enabled in Firefox 64.
IE 未対応 なしOpera ? Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 56 — 80
補足 無効
未対応 56 — 80
補足 無効
補足 Only works in an experimental version of Chrome. (Other builds won't return any devices when Navigator.getVRDisplays() is invoked.)
補足 Daydream View supported in Chrome 56.
補足 Google Cardboard supported in Chrome 57.
無効 From version 56 until version 80 (exclusive): this feature is behind the WebVR preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 55Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 6.0
補足
完全対応 6.0
補足
補足 Google Cardboard supported in Samsung Internet 7.0.
rightBounds
実験的非推奨
Chrome 未対応 なしEdge 未対応 ≤18 — 79Firefox 完全対応 55
補足
完全対応 55
補足
補足 Windows support was enabled in Firefox 55.
完全対応 64
補足
補足 macOS support was enabled in Firefox 64.
IE 未対応 なしOpera ? Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 56 — 80
補足 無効
未対応 56 — 80
補足 無効
補足 Only works in an experimental version of Chrome. (Other builds won't return any devices when Navigator.getVRDisplays() is invoked.)
補足 Daydream View supported in Chrome 56.
補足 Google Cardboard supported in Chrome 57.
無効 From version 56 until version 80 (exclusive): this feature is behind the WebVR preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 55Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 6.0
補足
完全対応 6.0
補足
補足 Google Cardboard supported in Samsung Internet 7.0.
source
実験的非推奨
Chrome 未対応 なしEdge 未対応 ≤18 — 79Firefox 完全対応 55
補足
完全対応 55
補足
補足 Windows support was enabled in Firefox 55.
完全対応 64
補足
補足 macOS support was enabled in Firefox 64.
IE 未対応 なしOpera ? Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 56 — 80
補足 無効
未対応 56 — 80
補足 無効
補足 Only works in an experimental version of Chrome. (Other builds won't return any devices when Navigator.getVRDisplays() is invoked.)
補足 Daydream View supported in Chrome 56.
補足 Google Cardboard supported in Chrome 57.
無効 From version 56 until version 80 (exclusive): this feature is behind the WebVR preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 55Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 6.0
補足
完全対応 6.0
補足
補足 Google Cardboard supported in Samsung Internet 7.0.

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

参照