安全上下文
此特征只可用于
安全上下文
(HTTPS)，在某些或所有
支持浏览器
.
XRSession
方法
requestAnimationFrame()
, much like the
Window
method of the same name, schedules a callback to be executed the next time the browser is ready to paint the session's virtual environment to the XR display.
The specified callback is executed once before the next repaint; if you wish for it to be executed for the following repaint, you must call
requestAnimationFrame()
again. This can be done from within the callback itself.
The callback takes two parameters as inputs: an
XRFrame
describing the state of all tracked objects for the session, and a time stamp you can use to compute any animation updates needed.
You can cancel a previously scheduled animation by calling
cancelAnimationFrame()
.
注意：
Despite the obvious similarities between these methods and the global
requestAnimationFrame()
function provided by the
Window
interface, you
不必
treat these as interchangeable. There is
no
guarantee that the latter will work at all while an immersive XR session is underway.
requestID = xrSession.requestAnimationFrame(animationFrameCallback);
animationFrameCallback
A function which is called before the next repaint in order to allow you to update and render the XR scene based on elapsed time, animation, user input changes, and so forth. The callback receives as input two parameters:
time
DOMHighResTimeStamp
indicating the time offset at which the updated viewer state was received from the WebXR device.
xrFrame
XRFrame
object describing the state of the objects being tracked by the session. This can be used to obtain the poses of the viewer and the scene itself, as well as other information needed to render a frame of an AR or VR scene.
An integer value which serves as a unique, non-zero ID or handle you may pass to
cancelAnimationFrame()
if you need to remove the pending animation frame request.
The following example requests
XRSession
with "inline" mode so that it can be displayed in an HTML element (without the need for a separate AR or VR device).
注意：
A real application should check that the device and the User Agent support WebXR API at all and then that they both support the desired session type via
XR.isSessionSupported()
.
// Obtain XR object
const XR = navigator.xr
// Request a new XRSession
XR.requestSession("inline").then((xrSession) => {
xrSession.requestAnimationFrame((time, xrFrame) => {
let viewer = xrFrame.getViewerPose(xrReferenceSpace)
gl.bindFramebuffer(xrWebGLLayer.framebuffer)
for (xrView of viewer.views) {
let xrViewport = xrWebGLLayer.getViewport(xrView)
gl.viewport(xrViewport.x, xrViewport.y, xrViewport.width, xrViewport.height)
// WebGL draw calls will now be rendered into the appropriate viewport.
}
})
})
The following example was taken directly from the spec draft. This example demonstrates a design pattern that ensures seamless transition between non-immersive animations created via
Window.requestAnimationFrame
and immersive XR animations.
let xrSession = null
function onWindowAnimationFrame(time) {
window.requestAnimationFrame(onWindowAnimationFrame)
// This may be called while an immersive session is running on some devices,
// such as a desktop with a tethered headset. To prevent two loops from
// rendering in parallel, skip drawing in this one until the session ends.
if (!xrSession) {
renderFrame(time, null)
}
}
// The window animation loop can be started immediately upon the page loading.
window.requestAnimationFrame(onWindowAnimationFrame)
function onXRAnimationFrame(time, xrFrame) {
xrSession.requestAnimationFrame(onXRAnimationFrame)
renderFrame(time, xrFrame)
}
function renderFrame(time, xrFrame) {
// Shared rendering logic.
}
// Assumed to be called by a user gesture event elsewhere in code.
function startXRSession() {
navigator.xr.requestSession('immersive-vr').then((session) => {
xrSession = session
xrSession.addEventListener('end', onXRSessionEnded)
// Do necessary session setup here.
// Begin the session’s animation loop.
xrSession.requestAnimationFrame(onXRAnimationFrame)
})
}
function onXRSessionEnded() {
xrSession = null
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
WebXR 设备 API
The definition of 'XRSession.requestAnimationFrame' in that specification. |
工作草案 | 初始定义。 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
requestAnimationFrame()
|
Chrome 79 | Edge 79 | Firefox 不支持 No | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 79 | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 11.2 |
完整支持
不支持
XRSession
cancelAnimationFrame()
end()
requestAnimationFrame()
requestReferenceSpace()
updateRenderState()