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 currentVRPose.timestamp
as a 3D vector VRPose.linearVelocity
Read only- Returns the linear velocity of the
VRDisplay
at the currentVRPose.timestamp
, in meters per second. VRPose.linearAcceleration
Read only- Returns the linear acceleration of the
VRDisplay
at the currentVRPose.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 currentVRPose.timestamp
, in radians per second. VRPose.angularAcceleration
Read only- Returns the angular acceleration of the
VRDisplay
at the currentVRPose.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 occured in. This version of
timestamp
has been removed from the spec — instead, timestamps are now returned whenVRDisplay.getFrameData()
is called — seeVRFrameData.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. |
Editor's Draft | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | Yes1 2 | Yes | 553 584 | No | ? | ? |
angularAcceleration | Yes1 2 | Yes | 553 584 | No | ? | ? |
angularVelocity | Yes1 2 | Yes | 553 584 | No | ? | ? |
hasOrientation | No | No | No | No | ? | ? |
hasPosition | No | No | No | No | ? | ? |
linearAcceleration | Yes1 2 | Yes | 553 584 | No | ? | ? |
linearVelocity | Yes1 2 | Yes | 553 584 | No | ? | ? |
position | Yes1 2 | Yes | 553 584 | No | ? | ? |
orientation | Yes1 2 | Yes | 553 584 | No | ? | ? |
timestamp | No | No | No | No | ? | ? |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | No | Yes5 | ? | ? | No | ? | ? |
angularAcceleration | No | Yes5 | ? | ? | No | ? | ? |
angularVelocity | No | Yes5 | ? | ? | No | ? | ? |
hasOrientation | No | No | No | ? | No | ? | ? |
hasPosition | No | No | No | ? | No | ? | ? |
linearAcceleration | No | Yes5 | ? | ? | No | ? | ? |
linearVelocity | No | Yes5 | ? | ? | No | ? | ? |
position | No | Yes5 | ? | ? | No | ? | ? |
orientation | No | Yes5 | ? | ? | No | ? | ? |
timestamp | No | No | No | ? | No | ? | ? |
1. Only works on desktop in an experimental version of Chrome (other builds won't return any devices when Navigator.getVRDisplays()
is invoked).
2. This feature is behind the WebVR
preference. To change preferences in Chrome, visit chrome://flags.
3. Windows support was enabled in Firefox 55.
4. macOS support was enabled in Firefox 58.
5. Currently supported only by Google Daydream.
See also
- WebVR API homepage
- MozVr.com — demos, downloads, and other resources from the Mozilla VR team.