WebXR开发简介

网页上的AR和VR是令人惊叹的技术。它允许你构建和发布你的创意，而无需通过策划的商店，并且可以像分享网站一样轻松分享。

自2016年Chrome和Firefox首次推出WebVR 1.0以来，网页上的VR就已经存在。这个实验如今已被WebXR Device API取代，该API最终也将支持增强现实（自2020年11月起可在Android的Chrome上使用），而不仅仅是虚拟现实。现在这项新技术已经达到足够稳定的程度，以至于开发人员可以真正依赖它，那么你如何入门呢？

框架 

阅读我们的最新博客文章以获取如何选择框架的指导。

3个网页特有的挑战 

网页和原生XR开发在三个大方面有所不同：

加载时间 

在网页上等待游戏加载是不可接受的。用户每多等待一秒，退出率就增加。

保持游戏资源小，使用压缩，并确保快速加载时间是让用户满意的关键。

性能 

网络在浏览器的沙盒中运行。这意味着它与运行的设备隔离，以免对设备造成损害。

沙盒带来了性能开销，因为网站想要做的事情需要进行双重检查。加上JavaScript相比于原生应用程序所带来的开销，使得VR和AR在性能上更具挑战性。

可扩展的质量 

如果发布VR的原生应用程序，你通常会针对一些非常具体的设备。因为你了解它们的性能指标，并可以为每个平台调整每个版本。

网页的美妙之处在于它在跨平台方面非常激进，任何设备都可以运行你的WebXR应用。这意味着你需要考虑从一个简单设备到桌面PC之间的所有情况，并找到适当的折中。

在VR中，不同设备也带来了不同的输入方式：从简单的注视控制（Google Cardboard），到3-dof，6-dof控制器，手部追踪（Quest 2）和眼动追踪（Quest Pro，Apple Vision Pro）。

你需要决定最低的通用标准以确保你的应用程序可以运行。

解决方案 

重要的是从设计阶段就面对这些网站特有的挑战：它们会影响你的艺术风格选择、交互体验选择，并可能成就或破坏你的应用。

加载更快 

一般来说，文件越小，游戏下载就越快。在Web上，最佳实践是仅加载最初所需的资源，并在运行时懒加载更多资源。

基于文本的格式通常需要更长的解析时间，所以考虑使用二进制资产格式。像WebP和Basis Universal这样的图像格式可以在CPU和GPU上比传统的PNG和JPEG图像更好地优化文件大小。

性能 

确保你关注性能并根据范围进行优化。保持资源小，并根据离用户的距离来“消耗”重要资源的分辨率。

特殊的浏览器扩展如OCULUS_multiview2可以帮助提高GPU渲染性能。其他的，比如即将推出的WEBGL_multi_draw，将有助于提高CPU性能。

大多数框架都有性能指南或技巧文档。检查以了解如果你正在承担一个较大的项目，从一开始可以做些什么。

扩展性 

为了更好的扩展性，你可以根据头戴设备输入类型或用户代理字符串加载资源。基于注视的系统通常比支持手部追踪的6-dof设备更低端。

Wonderland Engine 

Wonderland引擎旨在为你处理这些优化任务。我们的目标是让你专注于应用程序的功能，而无需担心运行顺畅的技术挑战。

Wonderland引擎最近达到了1.0版本。我们欢迎你加入我们的Discord社区!