VRFrameData - 表示渲染 VR 场景的片段帧所需的所有信息

VRFrameData 是 WebVR API 的接口，表示渲染 VR 场景的片段帧所需的所有信息。由 VRDisplay.getFrameData() 构造。

构造函数

VRFrameData.VRFrameData()

创建一个 VRFrameData 对象实例。

属性

VRFrameData.leftProjectionMatrix 只读

一个 Float32Array，表示 4 x 4 的矩阵，该矩阵描述了用于左眼渲染的投影。

VRFrameData.leftViewMatrix 只读

一个 Float32Array，表示 4 x 4 矩阵，该矩阵描述了用于左眼渲染的视图变换。

VRFrameData.pose 只读

当前 VRFrameData.timestamp 的 VRDisplay 的 VRPose。

VRFrameData.rightProjectionMatrix 只读

一个 Float32Array，表示 4 x 4 的矩阵，该矩阵描述了用于右眼渲染的投影。

VRFrameData.rightViewMatrix 只读

一个 Float32Array，表示 4 x 4 矩阵，该矩阵描述了用于右眼渲染的视图变换。

VRFrameData.timestamp 只读

一个不断增加的时间戳值，表示帧更新发生的时间。

实例

var frameData = new VRFrameData();
var vrDisplay;

navigator.getVRDisplays().then(function(displays) {
  vrDisplay = displays[0];
  console.log('发现显示器');
  // 单击该按钮时开始展示：只能响应用户手势来调用它
  btn.addEventListener('click', function() {
    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
      drawVRScene();
    });
  });
});

// WebVR：绘制 WebVR 显示场景。
function drawVRScene() {
  // WebVR：请求动画的下一帧
  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);

  // 用要显示的下一帧数据填充 frameData
  vrDisplay.getFrameData(frameData);

  // 您可以从当前帧的姿势获取显示的位置，方向等
  // curFramePose 是一个 VRPose 对象
  var curFramePose = frameData.pose;
  var curPos = curFramePose.position;
  var curOrient = curFramePose.orientation;

  // 在开始在其上绘制之前，清除画布。
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // WebVR：创建所需的投影并查看传递到下面的 uniformMatrix4fv 方法所需的矩阵位置
  var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
  var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");

  // WebVR：将左眼的视图渲染到画布的左半部分
  gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
  drawGeometry();

  // WebVR：将右眼的视图渲染到画布的右半部分
  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() {
    // 绘制每只眼睛的视图
  }

  // ...

  // WebVR：表示我们已准备好将呈现的帧呈现给VR显示器
  vrDisplay.submitFrame();
}

注意：您可以在 raw-webgl-example 上看到完整的代码。

规范

规范	状态	备注
WebVR 1.1 VRDisplayEvent 的定义	草稿	Initial definition

桌面浏览器兼容性

移动浏览器兼容性

1. 只能在 Chrome 的实验版本中使用。（其他构建在调用 Navigator.getVRDisplays() 时不会返回任何设备。）

2. Chrome 56 支持 Daydream View。

3. Chrome 57 支持 Google Cardboard。

4. 在 Firefox 55 中启用了 Windows 支持。

5. 在 Firefox 64 中启用了 macOS 支持。

6. Samsung Internet 7.0 支持 Google Cardboard。

相关链接

• MozVr.com — Mozilla VR 团队提供的演示，下载和其他资源。