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. |
Draft | Initial definition |
Browser compatibility
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
VRPose | Chrome No support No | Edge Full support Yes | Firefox
Full support
55
| IE No support No | Opera ? | Safari ? | WebView Android No support No | Chrome Android
Full support
56
| Firefox Android Full support 55 | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support 6.0 |
angularAcceleration | Chrome No support No | Edge Full support 15 | Firefox
Full support
55
| IE No support No | Opera ? | Safari ? | WebView Android No support No | Chrome Android
Full support
56
| Firefox Android Full support 55 | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support 6.0 |
angularVelocity | Chrome No support No | Edge Full support 15 | Firefox
Full support
55
| IE No support No | Opera ? | Safari ? | WebView Android No support No | Chrome Android
Full support
56
| Firefox Android Full support 55 | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support 6.0 |
hasOrientation | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera ? | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android No support No |
hasPosition | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera ? | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android No support No |
linearAcceleration | Chrome No support No | Edge Full support 15 | Firefox
Full support
55
| IE No support No | Opera ? | Safari ? | WebView Android No support No | Chrome Android
Full support
56
| Firefox Android Full support 55 | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support 6.0 |
linearVelocity | Chrome No support No | Edge Full support 15 | Firefox
Full support
55
| IE No support No | Opera ? | Safari ? | WebView Android No support No | Chrome Android
Full support
56
| Firefox Android Full support 55 | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support 6.0 |
orientation | Chrome No support No | Edge Full support 15 | Firefox
Full support
55
| IE No support No | Opera ? | Safari ? | WebView Android No support No | Chrome Android
Full support
56
| Firefox Android Full support 55 | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support 6.0 |
position | Chrome No support No | Edge Full support 15 | Firefox
Full support
55
| IE No support No | Opera ? | Safari ? | WebView Android No support No | Chrome Android
Full support
56
| Firefox Android Full support 55 | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support 6.0 |
timestamp | Chrome No support No | Edge Full support 15 | Firefox No support No | IE No support No | Opera ? | Safari ? | 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.