VRPose - 表示给定时间戳下 VR 传感器的状态

VRPose 是 WebVR API 的接口，表示给定时间戳下 VR 传感器的状态（包括方向，位置，速度和 加速信息。）

可通过 VRDisplay.getPose() 和 VRDisplay.getFrameData() 方法访问此接口。VRDisplay.getPose() 方法已弃用。

属性

VRPose.position 只读

返回 VRDisplay 在当前 VRPose.timestamp 时的位置，以 3D 向量的形式表示。

VRPose.linearVelocity 只读

返回 VRDisplay 在当前 VRPose.timestamp 时的线速度，以米 / 秒为单位。

VRPose.linearAcceleration 只读

返回 VRDisplay 在当前 VRPose.timestamp 时的线性加速度，以米 / 秒为单位。

VRPose.orientation 只读

返回传感器在当前 VRPose.timestamp 的方向，以四分之一度值表示。

VRPose.angularVelocity 只读

返回 VRDisplay 在当前 VRPose.timestamp 时角速度，以弧度每秒为单位表示。

VRPose.angularAcceleration 只读

返回 VRDisplay 在当前 VRPose.timestamp 的角加速度，以每秒米 / 秒为单位。

过时的属性

VRPose.timeStamp 只读

返回系统的当前时间戳 - 一个单调递增的值，用于确定位置数据是否已更新以及发生了什么顺序更新。此版本的时间戳已从规格中删除 - 现在改为在调用 VRDisplay.getFrameData() 中返回时间戳 - 请参见 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 VRPose 的定义	草稿	初始定义

桌面浏览器兼容性

移动浏览器兼容性

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 团队提供的演示，下载和其他资源。