VRFieldOfView
Deprecated
Avoid using this feature in new projects. Development of the WebVR API halted in favor of WebXR. This feature may be a candidate for removal from web standards or browsers.
Consider using the following features instead: WebXR.
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
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.
Note: This interface was part of the old WebVR API. It has been superseded by the WebXR Device API.
Instance properties
VRFieldOfView.upDegreesRead only-
The number of degrees upwards that the field of view extends in.
VRFieldOfView.rightDegreesRead only-
The number of degrees to the right that the field of view extends in.
VRFieldOfView.downDegreesRead only-
The number of degrees downwards that the field of view extends in.
VRFieldOfView.leftDegreesRead only-
The number of degrees to the left that the field of view extends in.
Examples
const info = document.querySelector("p");
const list = document.querySelector("ul");
let vrDisplay;
if (navigator.getVRDisplays) {
reportFieldOfView();
} else {
info.textContent = "WebVR API not supported by this browser.";
}
function reportFieldOfView() {
navigator.getVRDisplays().then((displays) => {
vrDisplay = displays[0];
const lEye = vrDisplay.getEyeParameters("left");
const rEye = vrDisplay.getEyeParameters("right");
// lEye and rEye are VREyeParameters objects
const lFOV = lEye.fieldOfView;
const rFOV = rEye.fieldOfView;
// lFOV and rFOV are VRFieldOfView objects
const listitem1 = document.createElement("li");
const listitem2 = document.createElement("li");
listitem1.innerText = `
Offset: ${lEye.offset}
Render width: ${lEye.renderWidth}
Render height: ${lEye.renderHeight}
Up degrees: ${lFOV.upDegrees}
Right degrees: ${lFOV.rightDegrees}
Down degrees: ${lFOV.downDegrees}
Left degrees: ${lFOV.leftDegrees}`;
listitem1.insertBefore(
document.createElement("strong"),
listitem1.firstChild,
).textContent = "Left eye parameters";
listitem2.innerText = `
Offset: ${rEye.offset}
Render width: ${rEye.renderWidth}
Render height: ${rEye.renderHeight}
Up degrees: ${rFOV.upDegrees}
Right degrees: ${rFOV.rightDegrees}
Down degrees: ${rFOV.downDegrees}
Left degrees: ${rFOV.leftDegrees}`;
listitem2.insertBefore(
document.createElement("strong"),
listitem2.firstChild,
).textContent = "Right eye parameters";
list.appendChild(listitem1);
list.appendChild(listitem2);
});
}
Specifications
This interface was part of the old WebVR API that has been superseded by the WebXR Device API. It is no longer on track to becoming a standard.
Until all browsers have implemented the new WebXR APIs, it is recommended to rely on frameworks, like A-Frame, Babylon.js, or Three.js, or a polyfill, to develop WebXR applications that will work across all browsers. Read Meta's Porting from WebVR to WebXR guide for more information.