VRPose.orientation

The orientation read-only property of the VRPositionState interface returns the orientation of the sensor at the current VRPose.timestamp, as a quarternion value.

The value is a Float32Array, made up of the following values:

• pitch — rotation around the X axis.
• yaw — rotation around the Y axis.
• roll — rotation around the Z axis.
• w — the fourth dimension (usually 1).

The orientation yaw (rotation around the y axis) is relative to the initial yaw of the sensor when it was first read or the yaw of the sensor at the point that VRDisplay.resetPose() was last called.

Syntax

var myOrientation = VRPose.orientation;

Value

A Float32Array, or null if the VR sensor is not able to provide orientation data.

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();
}

Specifications

Browser compatibility

[1] API Available on all platforms behind a flag, but currently only works on desktop in an experimental version of Chrome (other builds won't return any devices when Navigator.getVRDisplays() is invoked).

[2] Currently only Windows support is enabled by default. Mac support is available in Firefox Nightly.

[3] Currently supported only by Google Daydream.

See also

• WebVR API homepage
• MozVr.com — demos, downloads, and other resources from the Mozilla VR team.