VRDisplay: requestPresent() method
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 requestPresent() method of the VRDisplay interface starts the VRDisplay presenting a scene.
Note: This method was part of the old WebVR API. It has been superseded by the WebXR Device API.
Syntax
requestPresent(layers)
Parameters
layers-
An array of
VRLayerInitobjects representing the scene you want to present. At the moment, this can be a minimum of 0 and a maximum of 1.
Return value
A promise that resolves once the presentation has begun. There are a number of rules surrounding the promise's fulfillment or rejection:
- If
VRDisplayCapabilities.canPresentis false, or if the VRLayer array contains more thanVRDisplayCapabilities.maxLayerslayers, the promise will be rejected. - If the
VRDisplayis already presenting whenrequestPresent()is called, theVRDisplaywill update theVRLayerarray being presented. - If a call to
requestPresent()is rejected while theVRDisplayis already presenting it will end its presentation. - If
requestPresent()is called outside of an engagement gesture the promise will be rejected unless theVRDisplaywas already presenting. This engagement gesture is also sufficient to allowrequestPointerLock()calls until presentation has ended.
Examples
if (navigator.getVRDisplays) {
console.log("WebVR 1.1 supported");
// Then get the displays attached to the computer
navigator.getVRDisplays().then((displays) => {
// If a display is available, use it to present the scene
if (displays.length > 0) {
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", () => {
if (btn.textContent === "Start VR display") {
vrDisplay.requestPresent([{ source: canvas }]).then(() => {
console.log("Presenting to WebVR display");
// Set the canvas size to the size of the vrDisplay viewport
const leftEye = vrDisplay.getEyeParameters("left");
const rightEye = vrDisplay.getEyeParameters("right");
canvas.width =
Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
canvas.height = Math.max(
leftEye.renderHeight,
rightEye.renderHeight,
);
// stop the normal presentation, and start the vr presentation
window.cancelAnimationFrame(normalSceneFrame);
drawVRScene();
btn.textContent = "Exit VR display";
});
} else {
vrDisplay.exitPresent();
console.log("Stopped presenting to WebVR display");
btn.textContent = "Start VR display";
// Stop the VR presentation, and start the normal presentation
vrDisplay.cancelAnimationFrame(vrSceneFrame);
drawScene();
}
});
}
});
}
Note: You can see this complete code at raw-webgl-example.
Specifications
This method 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.