The VRPositionState
interface of the WebVR API represents the position state at a given timestamp (which includes orientation, position, velocity, and acceleration information.)
This interface is accessible through the {{domxref("PositionSensorVRDevice.getState()")}} method.
Properties
- {{domxref("VRPositionState.timeStamp")}} {{readonlyInline}}
- 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.
- {{domxref("VRPositionState.hasPosition")}} {{readonlyInline}}
- A boolean indicating whether the {{domxref("VRPositionState.position")}} property is valid (i.e. if the hardware is currently registering a valid position). If it is
false
, the position property will returnnull
. - {{domxref("VRPositionState.position")}} {{readonlyInline}}
- Returns the current position of the sensor relative to the head mounted display, as a 3D vector ({{domxref("DOMPoint")}} value.)
- {{domxref("VRPositionState.linearVelocity")}} {{readonlyInline}}
- Returns the current linear velocity of the sensor.
- {{domxref("VRPositionState.linearAcceleration")}} {{readonlyInline}}
- Returns the current linear acceleration of the sensor.
- {{domxref("VRPositionState.hasOrientation")}} {{readonlyInline}}
- A boolean indicating whether the {{domxref("VRPositionState.orientation")}} property is valid (i.e. if the hardware is currently registering a valid orientation). If it is
false
, the orientation property will returnnull
. - {{domxref("VRPositionState.orientation")}} {{readonlyInline}}
- Returns the current orientation of the sensor relative to the head mounted display, as a quarternion value (currently represented by a {{domxref("DOMPoint")}} value, but will be updated when
DOMQuarternion
is implemented.) - {{domxref("VRPositionState.angularVelocity")}} {{readonlyInline}}
- Returns the current angular velocity of the sensor.
- {{domxref("VRPositionState.angularAcceleration")}} {{readonlyInline}}
- Returns the current angular acceleration of the sensor.
Examples
The following example is taken from our positionsensorvrdevice demo, which uses the WebVR API to update the view of a simple {{domxref("CanvasRenderingContext2D","2D canvas")}} scene on each frame of a {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} loop.
function setView() { var posState = gPositionSensor.getState(); if(posState.hasPosition) { posPara.textContent = 'Position: x' + roundToTwo(posState.position.x) + " y" + roundToTwo(posState.position.y) + " z" + roundToTwo(posState.position.z); xPos = -posState.position.x * WIDTH * 2; yPos = posState.position.y * HEIGHT * 2; if(-posState.position.z > 0.01) { zPos = -posState.position.z; } else { zPos = 0.01; } } if(posState.hasOrientation) { orientPara.textContent = 'Orientation: x' + roundToTwo(posState.orientation.x) + " y" + roundToTwo(posState.orientation.y) + " z" + roundToTwo(posState.orientation.z); xOrient = posState.orientation.x * WIDTH; yOrient = -posState.orientation.y * HEIGHT * 2; zOrient = posState.orientation.z * 180; } }
Here we are grabbing a {{domxref("VRPositionState")}} object using {{domxref("PositionSensorVRDevice.getState()")}} and storing it in posState
. We then check to make sure that position and orientation info is present in the current frame using {{domxref("VRPositionState.hasPosition")}} and {{domxref("VRPositionState.hasOrientation")}} (these return null
if, for example the head mounted display is turned off or not pointing at the position sensor, which would cause an error.)
We then output the x, y and z position and orientation values for informational purposes, and use those values to update the xPos
, yPos
, and zPos
variables, which are used to update the scene rendering on each frame.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('WebVR', '#vrpositionstate', 'VRPositionState')}} | {{Spec2('WebVR')}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}}[1] | {{CompatGeckoDesktop(46)}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatGeckoMobile(46)}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
- [1] The support in Chrome is currently experimental. To find information on Chrome's WebVR implementation status including supporting builds, check out Bringing VR to Chrome by Brandon Jones.
See also
- WebVR API homepage.
- MozVr.com — demos, downloads, and other resources from the Mozilla VR team.