WebXR application life cycle - Web APIs 编辑

Draft

This page is not complete.

In this guide, we'll get a birds-eye view of what's involved in creating and driving a WebXR application, without diving down to the code level in detail. This serves as preparation for the next few articles in these WebXR guides, which cover starting up and shutting down a WebXR session, geometry, simulating camerasspatial tracking, and more.

Life cycle outline

Most applications using WebXR will follow a similar overall design pattern:

  1. Check to see if the user's device and browser are both capable of presenting the XR experience you want to provide.
    1. Make sure the WebXR API is available; if navigator.xr is undefined, you can assume the user's browser and/or device doesn't support WebXR. If it's not supported, disable any user interface used to activate XR features and abort any attempts to enter XR mode.
    2. Call navigator.xr.isSessionSupported(), specifying the WebXR experience mode you want to provide: inlineimmersive-vr, or immersive-ar, in order to determine whether or not the type of session you wish to provide is available.
    3. If the session type you want to use is available, provide the appropriate interface to the user to allow them to activate it.
  2. When the user requests the activation of WebXR functionality by engaging with the user interface enabled above, request an XRSession using the desired mode. This is done by calling navigator.xr.requestSession(), again specifying the string indicating the mode you want to enable: inlineimmersive-vr, or immersive-ar.
  3. If the promise returned by requestSession() resolves, use the new XRSession to manage the WebXR session for the duration of the WebXR experience. This will involve managing inputs, animations, and rendering.
    1. Call the XRSession method requestAnimationFrame() to schedule the first frame render for the XR device.
    2. If your scene is complex, you should consider creating a Worker—or using one that you've previously created for this purpose—to perform the computations needed for each frame to be rendered. This will reduce the chance that the rendering process will noticeably stall the app.
    3. Each requestAnimationFrame() callback should use the information provided about the objects located in the 3D world to render the frame using WebGL.
    4. Each time the callback is invoked, it should call requestAnimationFrame() again in order to let the browser know that the callback needs to be run again when it's time to render the next frame.
  4. When the time comes  (such as when the user exits your app or navigates away from your site), end the XR session; otherwise, continue the loop until the user chooses to exit XR mode.
    1. To end the XR session yourself, call XRSession.end().
    2. Include a handler for the XRSession event end event to be informed when the session is ending, regardless of whether your code, the user, or the browser initiated the termination of the session.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:73 次

字数:4743

最后编辑:8年前

编辑次数:0 次

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文