研发实战：40小时内构建Quest WebXR高尔夫游戏Demo

　　WebXR正在扩展我们与网络交互的多种方式，允许开发者创建可在各种设备访问的体验。随着工具的增多和优化，以及社区经验的分享，现在构建WebXR体验越来越轻松。

　　日前，专注于为品牌构建沉浸式体验的Paradowski Creative就撰文介绍了他们是如何在短短40小时内构建一款WebXR迷你高尔夫原型《Above Par adowski》。下面是具体的整理：

　　这只是一个洞，但在第一次公开测试中，它受到了大家的欢迎。对于新人VR用户来说，推杆是一个可以很容易地掌握和执行的概念。当完成一次艰难的入洞时，大家会欢呼雀跃，而当球掉进河里，大家又会开怀大笑。

　　尽管《Above Par adowski》的第一次迭代遇到了用户体验和性能问题，但我们看到了道路，并决定继续工作。本文将从我们的专家设计、美术和开发团队的角度记录并开源相关过程。

　　为何选择3D Open Web

　　尽管元宇宙可能存在多种形式，但Paradowski Creative认为沉浸式网络是元宇宙的最佳实现：可访问、跨平台、沉浸但具有多模式、并且以互联网作为基础，可用于即时全球分发。现代浏览器可以比任何其他渠道做得更好更快。

　　《Above Par adowski》的最终源代码和asset总计仅14MB。我们希望玩家只需几秒钟就可以从自己的家庭环境切换到游戏环境，无需任何存储或安装。这是基于WebXR构建的元宇宙。我们不仅可以实现与MetaQuestStore中的游戏相同的质量，而且可以在分发、加载时间和入门用户体验等重要方面超越它们。

　　我们这个项目的堆栈基于成熟的Web技术。工具箱中的每一个都是免费使用，而且大多数开源：three.js：沉浸式Web的事实上的WebGL库 A-Frame：基于 three.js的entity-component系统 NVIDIA PhysX：与Unity使用的物理引擎相同，通过WebAssembly在浏览器中运行，可实现超精确、快速的碰撞 Blender：具有业界领先的glTF导出工具和改进的光烘焙工具，一个完全开源3D asset创建套件 Glitch.com：免费托管开源项目，并支持本地开发和基于团队的版本控制流程 WebXR Emulator Browser Extension：允许你在桌面端使用模拟的WebXR设备进行开发 Meta Quest Developer Hub：轻松调试本地和WebXR应用程序的渲染性能 Discord：m2的WebXR Discord将我们与优秀的开源WebXR创建者联系起来

　　通过开源，我们能够利用令人难以置信的社区支持。WebXR社区的优秀开发人员(如Noeri Huisman、Diarmid MacKenzie，甚至Meta自己的浏览器团队成员)为项目创建或更新了关键组件，包括用于轨迹、遮挡高光和粒子系统的VFX，甚至物理引擎本身。

　　在大多数情况下，在WebXR Discord提出的开发问题直接带来了新组件的创建。更重要的是，开源功能中的每一个都保持完全可延展性和可定制性，满足了严格的设计标准。

　　设计和创意指导

　　Paradowski的工作都是由具有数十年经验的专业创意团队推动，他们将全球品牌和顶级平台的设计和技术融为一体。不过，尽管我们的众多项目都是由客户的要求和反馈决定，但对于《Above Par adowski》，我们的团队能够遵循自己的直觉，并承担比以往更大的风险。

　　我们在开始时想象了一系列引人注目的，适合经典迷你高尔夫主题的概念。利用人工智能生成的美术和参考摄影，我们选择了一个视觉方向：70年代的西部路边景点，9个主题洞，规模达数公里。

　　一旦确定了设置和风格，团队就开始使用Blender和VR设计软件Gravity Sketch构建洞和环境布局。

　　创意技术安迪·怀斯(Andy Wise)描述了这一多视角流程：“我们的第一个创意挑战是将推杆等没有故事的活动变成一种充满惊讶和惊奇的隐含叙事。因为这种项目的设计决策是如此相互关联，所以我们的过程不断跳跃。”

　　我们知道这款游戏本质上会作为我们代理商的广告，所以我们考虑了在标记、徽标、2D UI和游戏内道具方面打造品牌影响。音效、触觉和音乐同样融入了我们对用户体验的思考，采用了由金·弗朗明哥(King Flamingo)创作的完美萨尔萨舞曲和波萨诺瓦舞曲主题。

　　技术美术与照明

　　Paradowski的技术美术与设计团队密切合作，为我们的实时3D应用程序制作出漂亮的、高性能的asset。在这个项目中，他们首先尝试了一种“unlit vertex color”管道。通过最近发布的Blender功能，这允许美术将照明信息存储在模型的顶点颜色数据中，并避免了成本高昂的实时照明，以及占用内存的基于图像的烘焙照明。

　　首席技术美术科林·弗里曼(Colin Freeman)解释道：“自《超级马里奥64》以来，使用顶点颜色的技术就一直存在。这种传统的方法可以获得大量多边形纹理和实时渲染。光烘焙部分相对较新，但它与纹理投影和其他投影到材质的技术相同。通过以顶点颜色存储照明，我们可以避免任何复杂的碎片着色器计算。这带给我们的预算大约是我们通常塞进复杂项目的10倍，所以我们觉得非常舒服。”

　　即便在大型户外环境中，最终的美术都约为310000个三角形，并以90hz的平滑最大帧速率渲染，由此产生的“unlit”材质会非常出色。

　　弗里曼和技术美术阿尤什曼·乔里(Ayushman Johri)和诺亚·伊尔贝里(Noah Ilbery)利用这套管道从零开始模拟我们的所有道具，并对设计进行了数十次迭代，同时将物理对撞机精确地安装到不断变化的环境网格中。

　　乔里表示，他喜欢融入自己独特的风格：“我更喜欢制作风格化的asset，而我能够在这个项目中将其融入其中。创意团队对整体美学有着独到的见解，因此只要我遵循指示，我基本上就能自由地制作符合我风格的asset。”

　　游戏和物理

　　一个真实的迷你高尔夫游戏依赖于简单的物理交互，所以《Above Par adowski》要求我们对计算的性能进行微调。

　　我们最初的原型使用A-Frame内置的amm.js实现进行物理模拟，但WebXR社区越来越倾向于PhysX引擎。通过对静态和动态碰撞器的适当调整，所述引擎在移动VR硬件的速度都非常快速，Meta Quest 2平均每物理帧只有0.25毫秒。对于我们90hz时的每帧11.1ms处理预算，我们非常乐意支付这个成本。

　　但有另一个挑战需要克服：即便在每秒90帧的速度下，只需手腕轻轻一挥，杆头依然可以在两帧之间移动2米。这使得快速挥杆中的失误非常普遍。

　　我们通过PhysX的“speculative continuous collision detection”解决了这个问题。当运动对象在帧之间移动时，不仅检查了最终碰撞边界，同时检查了从上一帧到下一帧的路径上的碰撞。

　　不过，游戏不仅只有物理。我们投入了大量的精力来确保《Above Par adowski》能够与原生Meta Quest 2游戏相媲美，因为Paradowski的一个重要文化是我们愿意竭尽全力再让体验多酷1%。

　　以阴影为例。尽管高质量的实时阴影贴图对我们的移动CPU预算而言过于高昂，但我们为球杆和高尔夫球实现了一个高性能的“blob shadow”系统。原始阴影在物理上并不精确，但它们依然可以帮助玩家在VR中获得更大的深度感和球杆定位，从而提高沉浸感。

　　社区的收获

　　在2022年11月1日之后的前三个月里，《Above Par adowski》记录了以下分析结果，同时营销或托管成本为零： 来自168个国家的10万多名独特访客，其中7万多名是VR用户 50万次以上的推杆 在我们网站的平均停留时间为6分30秒 63%的回头用户 荣获Glitch颁发的2022年度最酷WebXR体验 WebXR Awards提名为2022年年度游戏

　　在Connect 202大会，Meta表示Meta Quest Browser是Meta Quest2使用最多的应用之一，类似这样的指标说明了世界各地的用户对高质量WebXR内容的渴望。尽管目前的游戏范围有限，但不难想象创作者会开发出更多的WebXR游戏和应用，而无论是通过品牌赞助、广告植入还是应用内购，开发者都可以通过平台(包括VR以外的平台)盈利，尤其是随着设备的激增和受众的增长。

　　在Paradowski，我们致力于在WebXR中打造最佳品牌和赞助体验，并通过开源贡献推动这项媒介向前发展。所以，我们在Glitch开源了我们的游戏代码，以便大家可以从中学习，并创建自己的WebXR项目。

　　我们希望这能够给你带来帮助。请关注我们的第二个WebXR项目，即将于2023年3月推出的《Escape Artist》。