VRFrameData

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

WebVR APIVRFrameDataインタフェースは、VRシーンの1つのフレームを描画するのに必要となる全ての情報を表現します。

コンストラクタ

VRFrameData.VRFrameData()
VRFrameData オブジェクトインスタンスを作成します。

プロパティ

VRFrameData.leftProjectionMatrix 読取専用
Float32Array型の要素を持つ4行4列の行列であり、左目の描画に利用される射影を表します。
VRFrameData.leftViewMatrix 読取専用
Float32Array型の要素を持つ4行4列の行列であり、左目の描画に利用されるビュー変換を表します。
VRFrameData.pose 読取専用
現在のVRFrameData.timestampの値が示す時刻での、VRDisplayVRPoseです。
VRFrameData.rightProjectionMatrix 読取専用
Float32Array型の要素を持つ4行4列の行列であり、右目の描画に利用される射影を表します。
VRFrameData.rightViewMatrix 読取専用
Float32Array型の要素を持つ4行4列の行列であり、右目の描画に利用されるビュー変換を表します。
VRFrameData.timestamp 読取専用
単調に増加するタイムスタンプ値であり、フレームが更新された時を表します。

var frameData = new VRFrameData();
var vrDisplay;

navigator.getVRDisplays().then(function(displays) {
  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() {        
      drawVRScene();
    });
  });
});

// WebVR: Draw the scene for the WebVR display.
function drawVRScene() {
  // WebVR: Request the next frame of the animation
  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);

  // Populate frameData with the data of the next frame to display
  vrDisplay.getFrameData(frameData);

  // You can get the position, orientation, etc. of the display from the current frame's pose
  // curFramePose is a VRPose object
  var curFramePose = frameData.pose;
  var curPos = curFramePose.position;
  var curOrient = curFramePose.orientation;

  // Clear the canvas before we start drawing on it.

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // WebVR: Create the required projection and view matrix locations needed
  // for passing into the uniformMatrix4fv methods below

  var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
  var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");

  // WebVR: Render the left eye’s view to the left half of the canvas
  gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
  drawGeometry();

  // WebVR: Render the right eye’s view to the right half of the canvas
  gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
  drawGeometry();

  function drawGeometry() {
    // draw the view for each eye 
  }

    ...

  // WebVR: Indicate that we are ready to present the rendered frame to the VR display
  vrDisplay.submitFrame();
}

Note: You can see this complete code at raw-webgl-example.

仕様

仕様 状況 コメント
WebVR 1.1
VRDisplayEvent の定義
ドラフト 初版

ブラウザ互換性

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 なし あり

555

606

なし ? ?
VRFrameData() constructor なし あり

555

606

なし ? ?
leftProjectionMatrix なし15

555

606

なし ? ?
leftViewMatrix なし15

555

606

なし ? ?
pose なし15

555

606

なし ? ?
rightProjectionMatrix なし15

555

606

なし ? ?
rightViewMatrix なし15

555

606

なし ? ?
timestamp なし15

555

606

なし ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし561 2 3 4 ? ? ? ?6.0
VRFrameData() constructor なし561 2 3 4 ? ? ? ?6.0
leftProjectionMatrix なし561 2 3 4 ? ? ? ?6.0
leftViewMatrix なし561 2 3 4 ? ? ? ?6.0
pose なし561 2 3 4 ? ? ? ?6.0
rightProjectionMatrix なし561 2 3 4 ? ? ? ?6.0
rightViewMatrix なし561 2 3 4 ? ? ? ?6.0
timestamp なし561 2 3 4 ? ? ? ?6.0

1. Only works in an experimental version of Chrome. (Other builds won't return any devices when Navigator.getVRDisplays() is invoked.)

2. Daydream View supported in Chrome 56.

3. Google Cardboard supported in Chrome 57.

4. From version 56: this feature is behind the WebVR preference. To change preferences in Chrome, visit chrome://flags.

5. Windows support was enabled in Firefox 55.

6. macOS support was enabled in Firefox 60.

関連項目

ドキュメントのタグと貢献者

 このページの貢献者: e53e04ac
 最終更新者: e53e04ac,