2023 XRIC丨Felix Zhang张天睿：释放WebXR的未来

2023年5月20日，由中共福州市委宣传部作为指导单位，福州广播电视台、93913-XR信息与产业服务、OmgXR元宇宙兴趣社群主办的“2023 XRIC产业年会暨「金V奖」颁奖盛典”，在福州海峡国际会展中心隆重举行。

XRIC产业年会暨「金V奖」颁奖盛典是目前我国XR产业规格最高、规模最大的年度盛会，大会梳理了元宇宙技术体系与产业链各环节发展情况，涵盖了元宇宙新技术基础设施、虚拟世界建设及内容、虚拟数字人以及元宇宙价值体系等内容。现场菁英齐聚，大咖云集，同时还有数万名观众通过在线直播收看了本场活动。

在大会的主旨演讲环节，来自Meta Reality Labs VR Web Platform的Felix Zhang（张天睿）作了题为「Unleashing The Future of WebXR」的分享。

如今，随着虚拟现实技术的发展，开发者们在互联网中创建出越来越多身临其境、引人入胜的虚拟现实体验，元宇宙的概念也正在成为现实。而WebXR则处于这一趋势的前沿，提供了一种可访问且跨平台的方式来构建虚拟现实和增强现实体验。Felix Zhang（张天睿）在演讲中详细介绍了WebXR平台及其功能，总结了关于WebXR的关键操作步骤，分享了自身的开发经验，以帮助广大开发者更好地了解并着手WebXR开发。

01

WebXR平台及其功能介绍

Felix Zhang（张天睿）首先对WebXR平台及其功能进行了介绍。WebXR平台用于在网络上创建身临其境的增强现实 (AR) 和虚拟现实 (VR) 体验，它建立在开放标准之上，为平台提供了一组统一的API，实现了跨越各种设备和浏览器的跨平台兼容性。作为WebVR的继任者，WebXR现在还加入了MR功能，使其成为面向VR和AR开发者的更加通用的平台。

Felix Zhang（张天睿）表示，广大开发者之所以不开发原生XR应用，而是广泛应用WebXR进行开发，是基于以下几点原因：

1、易于访问。在WebXR平台，用户可以通过网络浏览器直接访问体验，无需下载或安装其他应用程序。

2、跨平台兼容性。开发者只需开发一次，应用程序即可在多个设备上运行，只需进行最少量的平台特定调整。

3、便于更新维护。只需在服务器上更新，用户就能体验到最新版本，无需手动更新。

4、丰富用户体验。WebXR允许开发者使用他们熟悉的网络技术进行开发，例如HTML、CSS和JavaScript，从而进一步组合并丰富用户的体验。

不过Felix Zhang（张天睿）也表示，尽管WebXR平台拥有更强大的功能，但相较于原生XR应用，WebXR目前依然不够流行。他认为，对于开发者而言，这两个平台虽然有所差别，但这些差别目前正在缩小，如果开发者在设计WebXR体验时将性能问题纳入考量，并采用正确的技术来进行构建，完全可以创造出可以媲美原生XR体验的美妙体验。

接下来，Felix Zhang（张天睿）为大家现场演示了两个屡获殊荣的WebXR体验，分别是Project Flowerbed和Spatial Fusion。

Project Flowerbed是一个沉浸式、冥想式的VR园艺体验，旨在展现WebXR的无限可能。该项目去年在Meta Connect大会上公布，今年早些时候Meta已经正式将其开源。在构建Project Flowerbed的过程中，Meta站在WebXR开发人员的立场上，找出了WebXR与原生XR应用的差异并弥合了它们。这个过程还催生了新一代的WebXR模拟器——Immersive Web Emulator。

Spatial Fusion则专为在Meta Quest 2和Meta Quest Pro上获得最佳体验而设计。这也是Meta首次尝试在Quest浏览器平台创建优质的WebXR混合现实体验，并集中展示了Presence Platform上所有Meta认为对WebXR未来十分重要的特性。

Felix Zhang（张天睿）进一步指出了WebXR可支持的Presence Platform的五大特性，即：Passthrough（直通）、Anchors（锚点）、Hit-test（碰撞检测）、Planes（平面识别）和Hands（手部追踪）。

1、Passthrough（直通）。这是WebXR中的一项特性，即允许用户在查看周围的真实环境的同时对其进行增强，将虚拟对象叠加其上。在WebXR平台上，Passthrough使用Meta Quest设备上的摄像头来捕捉用户周围环境的视频，然后将虚拟内容叠加到实时视频流上。这创造了虚拟对象是现实世界的一部分的错觉，并允许用户以更自然的方式与它们交互。WebXR Passthrough是创建沉浸式MR体验的重要功能，可无缝融合虚拟和现实世界的元素。

2、Anchors（锚点）。在WebXR中，Anchor（锚点）是现实世界中被设备追踪的一个点，成为混合现实体验中放置虚拟对象的参考。锚点允许将虚拟对象放置在现实世界中的特定位置并在会话中（Session）持久存在，以便后续重新访问这些虚拟对象并与之交互。锚点一旦被创建，就可以用于在现实世界中放置虚拟物体以及调整虚拟物体的姿态。此外，WebXR平台还支持Persistent Anchors（持久化锚点），可以根据来源保存锚点，并通过JavaScript API 恢复或删除。

3、Hit-test（碰撞检测）。这是一种允许开发人员将虚拟对象准确地放置在现实世界中的功能。它涉及从用户设备投射虚拟光线并检查与现实世界对象的交叉点。这将允许开发人员以与现实世界一致的方式将虚拟对象放置在用户的环境中。

4、Planes（平面识别）。这是一项类似但更强大的功能，它允许MR应用程序检测现实世界中的平面，例如桌子、地板或墙壁，从而帮助 WebXR 应用程序了解用户在现实世界所处的环境。一旦检测到平坦表面，WebXR API就可以返回有关该表面相对于设备坐标系的位置、方向和几何数据的信息。然后用户就可以使用此信息将虚拟对象更逼真、更准确地放置在现实世界中。此外，用户还可以重建WebXR体验中的平面，甚至可以为其添加逼真的物理效果。

5、Hands（手部追踪）。Hand-tracking是一种替代输入方法，用户可以通过手部追踪功能使用自然的手势和动作与虚拟对象进行交互，例如抓取和投掷对象，做出手势来触发动作等等。手部追踪还可用于创造更加身临其境的体验，例如让用户在VR中看到自己的手和手指。

02

如何设置开发环境

接下来，Felix Zhang（张天睿）进一步讲解了在开始构建WebXR前，开发者如何设置开发环境。他表示，开发环境的设置十分重要：目前有多种WebXR框架和引擎供开发者应用，而选择合适的WebXR开发工具则可以让开发者事半功倍。

Felix Zhang（张天睿）首先介绍了一些开发者目前最常用的支持WebXR的框架和引擎。

1、Three.js。这是一个多功能且适应性强的3D库，可以胜任从简单的3D动画到复杂的虚拟现实体验等大量项目。它拥有一个庞大的开发者社区，从而产生了广泛的开发资源，其中包括教程、综合文档和活跃的论坛讨论。

2、Babylon.js。Babylon.js以其易于使用的API和对简单性的高度重视脱颖而出，它特别易于3D或游戏开发的新手上手。Babylon.js还集成了一个物理引擎，简化了开发者在沉浸式体验中实现真实世界物理效果的工作。

3、A-Frame。A-Frame利用Entity-Component-System提供强大、灵活的设计模式，这在专业游戏引擎中很常见。它允许开发人员将基本的Entity（实体）组合在一起，构建复杂的 3D 场景。A-Frame凭借其声明性、类似 HTML 的语法，提供了一种简单直观的开发方法，即使对于3D开发经验有限的开发者也十分友好。

4、Wonderland Engine和PlayCanvas。这两个现代3D引擎适用于喜欢在开发时使用视觉方法与3D场景进行交互的开发者，拥有大量功能，可以使WebXR应用程序的开发更加容易。

Felix Zhang（张天睿）表示，这些框架和引擎都有其独特的功能和优势，适用于有不同需求的开发者。除框架和引擎以外，Felix Zhang（张天睿）还介绍了一些开发者工具和库。

首先是Immersive Web Emulator。这是一个可以帮助创建WebXR内容的浏览器扩展程序，由Felix Zhang（张天睿）和其团队开发。它能够使开发人员响应式地在桌面浏览器上运行WebXR应用程序，而无需XR设备的支持。该扩展程序受Mozilla Reality的WebXR Emulator Extension启发，同时Felix Zhang和团队成员努力对其进行了扩展以实现更好的体验。Immersive Web Emulator的设计和构建重点是实现完整的输入模拟、更高的可用性和更多的功能，例如键盘输入镜像/转发。

Meta于今年2月在Chrome和Edge扩展程序商店正式推出了该工具，此后发布了2次重大更新。最新更新的V1.2版本完全实现了Immersive Web Emulator与Quest头显的功能对等，这意味着Quest头显支持的所有WebXR功能现在也被模拟器所支持。

接下来是Reality Accelerator Toolkit，简称RATK。这是一个WebXR实用程序库，旨在简化混合现实功能在WebXR应用程序中的集成。该程序库目前与Three.js 3D库兼容，旨在弥合底层WebXR API和Three.js提供的高层 API 之间的差距。它能够管理锚点、检测到的平面和现实世界中碰撞检测的目标，并自动将它们转换为Three.js场景中的Object3D实例，使开发者更容易访问和使用它们。

最后是WebXR Samples Repo，这是Felix Zhang（张天睿）一直在从事研发的新项目。这是一个能用于实际生产环境的THREE.js模板应用程序，集成了许多Felix Zhang（张天睿）和团队在开发Project Flowerbed过程中发现的实用库和实用应用。WebXR Samples Repo中包括了：RATK支持、Becsy ECS、其他实用库如对游戏手柄的封装、以及更多示例系统和组件，以便开发者能更快的投入WebXR内容创建工作。

03

测试、调试和优化WebXR体验

在分享的第三个环节中，Felix Zhang（张天睿）介绍了开发者如何测试、调试和优化WebXR应用程序，以确保它按预期工作并且给用户更满意的体验。他分享了自己常用的几种工具和技术。

第一个工具是Chrome DevTools。这是一个用于调试和测试Web应用的程序，其中包括WebXR体验。开发者可以使用Chrome远程调试器在联机设备上调试WebXR页面、获取控制台日志、检查网络流量或捕获准确的性能快照。

将Immersive Web Emulator与Chrome DevTools两个工具相结合，开发者可以在不需要物理设备的情况下调试自己的WebXR体验——开发者可直接从浏览器窗口进入体验，在模拟器的帮助下，无需佩戴XR头显即可完成体验及调试。

但Felix Zhang（张天睿）也指出，这种方法有一个缺点，即由于硬件之间的明显差异，开发者在笔记本电脑/PC上拍摄的性能快照并不代表在Meta Quest头显上运行体验的实际性能。虽然Immersive Web Emulator在调试体验方面效果很好，但Felix Zhang（张天睿）建议开发者仍需定期测试头显端的体验，以更好地了解其实际性能，以便进行相应地调整和更改。

第二个工具是Meta Quest Developer Hub。该开发工具为开发者提供了多种功能来调试和分析其沉浸式体验，其中包括：

1、轻松查看logcat日志；

2、专用的性能分析器选项卡；

3、帮助开发者轻松安装OVR Metrics工具。

第三个工具是Performance Analyzer，这是Meta Quest头显的实时指标监视器。该工具允许开发者查看和自定义利用率图表，包括CPU、GPU、帧速率、内存等图形化参数。

第四个工具是OVR Metrics，这是Meta Quest头显的性能监控工具。它提供各种性能指标，包括帧速率、热量、GPU和CPU统计数据。该工具通过头显中的屏幕图形、正在运行的应用程序或可从设备检索的报告提供这些数据。

第五个工具是用于Quest的RenderDoc。这是一款功能齐全的图形调试工具，可以处理3D WEB内容，开发者可以在GPU上捕获、重放和调试场景。捕获回放会向开发者一步一步展示GPU正在做些什么，帮助了解场景是如何渲染的，并允许检查纹理和绘制缓冲区。

RenderDoc还提供硬件性能指标，让开发者了解GPU性能并找到GPU优化的潜在领域。Meta会维护自己的RenderDoc分支。这个分支可以提供对Quest 芯片组底层GPU分析数据的访问。

在分享的最后，Felix Zhang（张天睿）指出，WebXR为开发者创建出更为优质的沉浸式体验提供了强力的支持，他也呼吁广大XR内容开发者们加入WebXR平台。

开发者如想了解更多关于WebXR的最新功能及更新内容，可关注Oculus开发者网站和Meta的社交媒体。

END

往期精选推荐