Revision 891149 of VRFieldOfView

<p>{{draft}}{{APIRef("WebVR API")}}{{SeeCompatTable}}</p>

<p>The <strong><code>VRFieldOfView</code></strong> interface of the <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> represents a field of view defined by 4 different degree values describing the view from a center point.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/11017/fov.gif" /></p>

<h2 id="Constructor">Constructor</h2>

<dl>
 <dt>{{domxref("VRFieldOfView.VRFieldOfView","VRFieldOfView()")}}</dt>
 <dd>Creates a new <code>VRFieldOFView</code> object.</dd>
</dl>

<h2 id="Properties">Properties</h2>

<p><em>This interface doesn't define any of its own properties; however, it does inherit those of its parent interface, {{domxref("VRFieldOfViewReadOnly")}}.</em></p>

<dl>
 <dt>{{domxref("VRFieldOfViewReadOnly.upDegrees")}} {{readonlyInline}}</dt>
 <dd>The number of degrees upwards that the field of view extends in.</dd>
 <dt>{{domxref("VRFieldOfViewReadOnly.rightDegrees")}} {{readonlyInline}}</dt>
 <dd>The number of degrees to the right that the field of view extends in.</dd>
 <dt>{{domxref("VRFieldOfViewReadOnly.downDegrees")}} {{readonlyInline}}</dt>
 <dd>The number of degrees downwards that the field of view extends in.</dd>
 <dt>{{domxref("VRFieldOfViewReadOnly.leftDegrees")}} {{readonlyInline}}</dt>
 <dd>The number of degrees to the left that the field of view extends in.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<p>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 <code>setFieldOfView()</code> method (the default <code>zNear</code> and <code>zFar</code> values are always used, in this case.)</p>

<pre class="brush: js">
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);
        }</pre>

<div class="note">
<p><strong>Note</strong>: 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.</p>
</div>

<p>The following example is taken from the Mozilla VR Team's <a class="external external-icon" href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a> code — to be precise, the <a href="https://github.com/MozVR/vr-web-examples/blob/master/threejs-vr-boilerplate/js/VREffect.js#L28-L29">VREffect.js file</a>. Early on in the code the <code>{{domxref("HMDVRDevice.getEyeParameters")}}</code> 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 <code>VRFieldOfView</code> object.</p>

<pre class="brush: js">
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 {

  ...

}</pre>

<p>The following code snippet — taken from the WebVR spec — creates a WebGL-compatible projection matrix from a <code>VRFieldOfView</code>.</p>

<pre class="brush: js">
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;
}</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('WebVR', '#vrfieldofview0', 'VRFieldOfView')}}</td>
   <td>{{Spec2('WebVR')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>{{CompatGeckoDesktop(39)}}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile(39)}}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] The support in Chrome is currently experimental. To find information on Chrome's WebVR implementation status including supporting builds, check out <a href="https://blog.tojicode.com/2014/07/bringing-vr-to-chrome.html">Bringing VR to Chrome</a> by Brandon Jones.</p>

<p>[2] The support for this feature is currently disabled by default in Firefox. To enable WebVR support in Firefox Nightly/Developer Edition, you can go to <code>about:config</code> and enable the <code>dom.vr*</code> prefs. A better option however is to install the <a href="https://www.mozvr.com/downloads/webvr-addon-0.1.0.xpi">WebVR Enabler Add-on</a>, which does this for you and sets up other necessary parts of the <a href="/en-US/docs/Web/API/WebVR_API/WebVR_environment_setup">environment</a>.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li>
 <li><a href="https://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
</ul>