VRDisplay: requestAnimationFrame() method
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see thecompatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
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.
TherequestAnimationFrame() method of theVRDisplay interface is a special implementation ofWindow.requestAnimationFrame containing a callback function that will be called every time a new frame of theVRDisplay presentation is rendered:
Note:This method was part of the oldWebVR API. It has been superseded by theWebXR Device API.
- When the
VRDisplayis not presenting a scene, this is functionally equivalent toWindow.requestAnimationFrame. - When the
VRDisplayis presenting, the callback is called at its native refresh rate.
Syntax
requestAnimationFrame(callback)Parameters
callbackA callback function that will be called every time a new frame of the
VRDisplaypresentation is rendered.
Return value
A long representing the handle of therequestAnimationFrame() call. This can then be passed to aVRDisplay.cancelAnimationFrame() call to unregister the callback.
Examples
const frameData = new VRFrameData();let vrDisplay;navigator.getVRDisplays().then((displays) => { 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", () => { vrDisplay.requestPresent([{ source: canvas }]).then(() => { drawVRScene(); }); });});// WebVR: Draw the scene for the WebVR display.function drawVRScene() { // WebVR: Request the next frame of the animation vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene); // Populate frameData with the data of the next frame to display vrDisplay.getFrameData(frameData); // You can get the position, orientation, etc. of the display from the current frame's pose const curFramePose = frameData.pose; const curPos = curFramePose.position; const curOrient = curFramePose.orientation; // Clear the canvas before we start drawing on it. gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // WebVR: Create the required projection and view matrix locations needed // for passing into the uniformMatrix4fv methods below const projectionMatrixLocation = gl.getUniformLocation( shaderProgram, "projMatrix", ); const viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix"); // WebVR: Render the left eye's view to the left half of the canvas gl.viewport(0, 0, canvas.width * 0.5, canvas.height); gl.uniformMatrix4fv( projectionMatrixLocation, false, frameData.leftProjectionMatrix, ); gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix); drawGeometry(); // WebVR: Render the right eye's view to the right half of the canvas gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height); gl.uniformMatrix4fv( projectionMatrixLocation, false, frameData.rightProjectionMatrix, ); gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix); drawGeometry(); function drawGeometry() { // draw the view for each eye } // … // WebVR: Indicate that we are ready to present the rendered frame to the VR display vrDisplay.submitFrame();}Note:You can see this complete code atraw-webgl-example.
Specifications
This method was part of the oldWebVR API that has been superseded by theWebXR Device API. It is no longer on track to becoming a standard.
Until all browsers have implemented the newWebXR APIs, it is recommended to rely on frameworks, likeA-Frame,Babylon.js, orThree.js, or apolyfill, to develop WebXR applications that will work across all browsers. ReadMeta's Porting from WebVR to WebXR guide for more information.