VRPose

Experimental

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The VRPose interface of the WebVR API represents the state of a VR sensor at a given timestamp (which includes orientation, position, velocity, and acceleration information.)

This interface is accessible through the VRDisplay.getPose() and VRDisplay.getFrameData() methods. VRDisplay.getPose() is deprecated.

Properties

VRPose.position Read only: Returns the position of the VRDisplay at the current VRPose.timestamp as a 3D vector
VRPose.linearVelocity Read only: Returns the linear velocity of the VRDisplay at the current VRPose.timestamp, in meters per second.
VRPose.linearAcceleration Read only: Returns the linear acceleration of the VRDisplay at the current VRPose.timestamp, in meters per second per second.
VRPose.orientation Read only: Returns the orientation of the sensor at the current VRPose.timestamp, as a quarternion value.
VRPose.angularVelocity Read only: Returns the angular velocity of the VRDisplay at the current VRPose.timestamp, in radians per second.
VRPose.angularAcceleration Read only: Returns the angular acceleration of the VRDisplay at the current VRPose.timestamp, in meters per second per second.

Obsolete properties

VRPose.timeStamp Read only: Returns the current time stamp of the system — a monotonically increasing value useful for determining if position data has been updated, and what order updates have occurred in. This version of timestamp has been removed from the spec — instead, timestamps are now returned when VRDisplay.getFrameData() is called — see VRFrameData.timestamp.

Examples

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.

Specifications

Specification	Status	Comment
WebVR 1.1 The definition of 'VRPose' in that specification.	Draft	Initial definition

Browser compatibility

BCD tables only load in the browser