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

VRDisplay.requestPresent()

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

requestPresent() は VRDisplay インターフェイスのメソッドで、VRDisplay へのシーン表示を開始します。

Note: このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

構文

requestPresent(layers)

引数

layers

表示したいシーンを表す VRLayerInit オブジェクトの配列です。現時点では、指定できるのは最小 0 要素、最大 1 要素です。

返値

プレゼンテーションが開始されると解決されるプロミスです。プロミスの履行または拒否にはいくつかのルールがあります。

  • VRDisplayCapabilities.canPresent が false の場合、または VRLayer 配列に VRDisplayCapabilities.maxLayers を超えるレイヤーがある場合、プロミスは拒否されます。
  • requestPresent() が呼び出された時、 VRDisplay が既に表示していた場合、 VRDisplay は表示している VRLayer 配列を更新します。
  • もし requestPresent() の呼び出しが VRDisplay が既に表示されている状態で拒否された場合は、その表示を終了します。
  • もし requestPresent() がエンゲージメントジェスチャーの外で呼び出された場合、VRDisplay が既に表示されていない限り、そのプロミスは拒否されます。このエンゲージメントジェスチャーは、プレゼンテーションが終了するまで requestPointerLock() の呼び出しを許可することにも使えます。

例

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() {
        if(btn.textContent === 'Start VR display') {
          vrDisplay.requestPresent([{ source: canvas }]).then(function() {
            console.log('Presenting to WebVR display');

            // Set the canvas size to the size of the vrDisplay viewport

            var leftEye = vrDisplay.getEyeParameters('left');
            var rightEye = vrDisplay.getEyeParameters('right');

            canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
            canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);

            // stop the normal presentation, and start the vr presentation
            window.cancelAnimationFrame(normalSceneFrame);
            drawVRScene();

            btn.textContent = 'Exit VR display';
          });
        } else {
          vrDisplay.exitPresent();
          console.log('Stopped presenting to WebVR display');

          btn.textContent = 'Start VR display';

          // Stop the VR presentation, and start the normal presentation
          vrDisplay.cancelAnimationFrame(vrSceneFrame);
          drawScene();
        }
      });
    }
  });
}

Note: この完全なコードは raw-webgl-example で見ることができます。

仕様書

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

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報