{{APIRef("WebVR API")}}{{SeeCompatTable}}
The VRFieldOfView
interface of the WebVR API represents a field of view defined by 4 different degree values describing the view from a center point.
Constructor
- {{domxref("VRFieldOfView.VRFieldOfView","VRFieldOfView()")}}
- Creates a new
VRFieldOFView
object.
Properties
This interface doesn't define any of its own properties; however, it does inherit those of its parent interface, {{domxref("VRFieldOfViewReadOnly")}}.
- {{domxref("VRFieldOfViewReadOnly.upDegrees")}} {{readonlyInline}}
- The number of degrees upwards that the field of view extends in.
- {{domxref("VRFieldOfViewReadOnly.rightDegrees")}} {{readonlyInline}}
- The number of degrees to the right that the field of view extends in.
- {{domxref("VRFieldOfViewReadOnly.downDegrees")}} {{readonlyInline}}
- The number of degrees downwards that the field of view extends in.
- {{domxref("VRFieldOfViewReadOnly.leftDegrees")}} {{readonlyInline}}
- The number of degrees to the left that the field of view extends in.
Examples
The following simple example shows a function that can be used to set a custom field of view with four specified degree values for up, right, down and left. The {{domxref("VRFieldOfView.VRFieldOfView","VRFieldOfView()")}} constructor is used to create a {{domxref("VRFieldOfView")}} object from the supplied values, which is then fed into the setFieldOfView()
method (the default zNear
and zFar
values are always used, in this case.)
function setCustomFOV(up,right,down,left) { var testFOV = new VRFieldOfView(up,right,down,left); gHMD.setFieldOfView(testFOV,testFOV,0.01,10000.0); var lEye = gHMD.getEyeParameters('left'); var rEye = gHMD.getEyeParameters('right'); console.log(lEye.currentFieldOfView); console.log(rEye.currentFieldOfView); }
Note: When testing, setting a weird/tiny field of view can really mess up your view. IT is a good idea to grab the current field of view first (using {{domxref("VREyeParameters.currentFieldOfView")}}) before making any drastic changes, so you can reset it afterwards if needed.
The following example is taken from the Mozilla VR Team's threejs-vr-boilerplate code — to be precise, the VREffect.js file. Early on in the code the {{domxref("HMDVRDevice.getEyeParameters")}}
method is used to access information about each eye, which is then used for rendering calulations later on — including the {{domxref("VREyeParameters.recommendedFieldOfView")}} property, which returns a VRFieldOfView
object.
if ( vrHMD.getEyeParameters !== undefined ) { var eyeParamsL = vrHMD.getEyeParameters( 'left' ); var eyeParamsR = vrHMD.getEyeParameters( 'right' ); eyeTranslationL = eyeParamsL.eyeTranslation; eyeTranslationR = eyeParamsR.eyeTranslation; eyeFOVL = eyeParamsL.recommendedFieldOfView; eyeFOVR = eyeParamsR.recommendedFieldOfView; } else { ... }
The following code snippet — taken from the WebVR spec — creates a WebGL-compatible projection matrix from a VRFieldOfView
.
function fieldOfViewToProjectionMatrix(fov, zNear, zFar) { var upTan = Math.tan(fov.upDegrees * Math.PI/180.0); var downTan = Math.tan(fov.downDegrees * Math.PI/180.0); var leftTan = Math.tan(fov.leftDegrees * Math.PI/180.0); var rightTan = Math.tan(fov.rightDegrees * Math.PI/180.0); var xScale = 2.0 / (leftTan + rightTan); var yScale = 2.0 / (upTan + downTan); var out = new Float32Array(16); out[0] = xScale; out[1] = 0.0; out[2] = 0.0; out[3] = 0.0; out[4] = 0.0; out[5] = yScale; out[6] = 0.0; out[7] = 0.0; out[8] = -((leftTan - rightTan) * xScale * 0.5); out[9] = ((upTan - downTan) * yScale * 0.5); out[10] = -(zNear + zFar) / (zFar - zNear); out[11] = -1.0; out[12] = 0.0; out[13] = 0.0; out[14] = -(2.0 * zFar * zNear) / (zFar - zNear); out[15] = 0.0; return out; }
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('WebVR', '#vrfieldofview0', 'VRFieldOfView')}} | {{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.