This is an experimental technologyCheck 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.1The definition of 'VRPose' in that specification. | Draft | Initial definition |
Browser compatibility
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
No support No |
Edge
No support ≤18 — 79 |
Firefox Full support 55 Full support 55 Notes' Windows support was enabled in Firefox 55. Full support 64 Notes' macOS support was enabled in Firefox 64. |
IE
No support No |
Opera
? |
Safari
No support No |
WebView Android
No support No |
Chrome Android No support 56 — 80 No support 56 — 80 Notes' Only works in an experimental version of Chrome. (Other builds won't return any devices when |
Firefox Android
Full support 55 |
Opera Android
? |
Safari iOS
? |
Samsung Internet Android Full support 6.0 Full support 6.0 Notes' Google Cardboard supported in Samsung Internet 7.0. |
Chrome
No support No |
Edge
No support 15 — 79 |
Firefox Full support 55 Full support 55 Notes' Windows support was enabled in Firefox 55. Full support 64 Notes' macOS support was enabled in Firefox 64. |
IE
No support No |
Opera
? |
Safari
No support No |
WebView Android
No support No |
Chrome Android No support 56 — 80 No support 56 — 80 Notes' Only works in an experimental version of Chrome. (Other builds won't return any devices when |
Firefox Android
Full support 55 |
Opera Android
? |
Safari iOS
? |
Samsung Internet Android Full support 6.0 Full support 6.0 Notes' Google Cardboard supported in Samsung Internet 7.0. | |
Chrome
No support No |
Edge
No support 15 — 79 |
Firefox Full support 55 Full support 55 Notes' Windows support was enabled in Firefox 55. Full support 64 Notes' macOS support was enabled in Firefox 64. |
IE
No support No |
Opera
? |
Safari
No support No |
WebView Android
No support No |
Chrome Android No support 56 — 80 No support 56 — 80 Notes' Only works in an experimental version of Chrome. (Other builds won't return any devices when |
Firefox Android
Full support 55 |
Opera Android
? |
Safari iOS
? |
Samsung Internet Android Full support 6.0 Full support 6.0 Notes' Google Cardboard supported in Samsung Internet 7.0. | |
Chrome
No support No |
Edge
No support No |
Firefox
No support No |
IE
No support No |
Opera
? |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
? |
Opera Android
? |
Safari iOS
? |
Samsung Internet Android
No support No | |
Chrome
No support No |
Edge
No support No |
Firefox
No support No |
IE
No support No |
Opera
? |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
? |
Opera Android
? |
Safari iOS
? |
Samsung Internet Android
No support No | |
Chrome
No support No |
Edge
No support 15 — 79 |
Firefox Full support 55 Full support 55 Notes' Windows support was enabled in Firefox 55. Full support 64 Notes' macOS support was enabled in Firefox 64. |
IE
No support No |
Opera
? |
Safari
No support No |
WebView Android
No support No |
Chrome Android No support 56 — 80 No support 56 — 80 Notes' Only works in an experimental version of Chrome. (Other builds won't return any devices when |
Firefox Android
Full support 55 |
Opera Android
? |
Safari iOS
? |
Samsung Internet Android Full support 6.0 Full support 6.0 Notes' Google Cardboard supported in Samsung Internet 7.0. | |
Chrome
No support No |
Edge
No support 15 — 79 |
Firefox Full support 55 Full support 55 Notes' Windows support was enabled in Firefox 55. Full support 64 Notes' macOS support was enabled in Firefox 64. |
IE
No support No |
Opera
? |
Safari
No support No |
WebView Android
No support No |
Chrome Android No support 56 — 80 No support 56 — 80 Notes' Only works in an experimental version of Chrome. (Other builds won't return any devices when |
Firefox Android
Full support 55 |
Opera Android
? |
Safari iOS
? |
Samsung Internet Android Full support 6.0 Full support 6.0 Notes' Google Cardboard supported in Samsung Internet 7.0. | |
Chrome
No support No |
Edge
No support 15 — 79 |
Firefox Full support 55 Full support 55 Notes' Windows support was enabled in Firefox 55. Full support 64 Notes' macOS support was enabled in Firefox 64. |
IE
No support No |
Opera
? |
Safari
No support No |
WebView Android
No support No |
Chrome Android No support 56 — 80 No support 56 — 80 Notes' Only works in an experimental version of Chrome. (Other builds won't return any devices when |
Firefox Android
Full support 55 |
Opera Android
? |
Safari iOS
? |
Samsung Internet Android Full support 6.0 Full support 6.0 Notes' Google Cardboard supported in Samsung Internet 7.0. | |
Chrome
No support No |
Edge
No support 15 — 79 |
Firefox Full support 55 Full support 55 Notes' Windows support was enabled in Firefox 55. Full support 64 Notes' macOS support was enabled in Firefox 64. |
IE
No support No |
Opera
? |
Safari
No support No |
WebView Android
No support No |
Chrome Android No support 56 — 80 No support 56 — 80 Notes' Only works in an experimental version of Chrome. (Other builds won't return any devices when |
Firefox Android
Full support 55 |
Opera Android
? |
Safari iOS
? |
Samsung Internet Android Full support 6.0 Full support 6.0 Notes' Google Cardboard supported in Samsung Internet 7.0. | |
Chrome
No support No |
Edge
No support 15 — 79 |
Firefox
No support No |
IE
No support No |
Opera
? |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
? |
Opera Android
? |
Safari iOS
? |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
- Non-standard. Expect poor cross-browser support.'
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.'
- Deprecated. Not for use in new websites.
- See implementation notes.'
- See implementation notes.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
See also
- WebVR API homepage
- MozVr.com — demos, downloads, and other resources from the Mozilla VR team.
VRPose by Mozilla Contributors is licensed under CC-BY-SA 2.5.