Babylon.js实战元宇宙/WebXR
最新回答
鲜奶千层雪
2022-04-09 21:25:39
Babylon.js是一个免费的开源3D引擎，基于WebGL和WebGPU构建。它开箱即用地支持Web音频和WebXR，这意味着您可以专注于构建体验或游戏，而无需担心许多Web API的复杂性。
WebXR是一种支持虚拟现实和增强现实场景的Web API，作者期待它在构建网络元宇宙时成为主要构建块。要使用WebXR，您需要一个兼容的设备，如Valve Index、Oculus Quest 2、Windows Mixed Reality头戴式设备、HoloLens 2或任何与SteamVR兼容的VR头戴式设备，以及用于AR的Android智能手机或HoloLens 2。对于浏览器，您需要基于Chromium的浏览器，如Google Chrome、Microsoft Edge、Opera、Samsung Internet、Chrome for Android或Oculus浏览器。
Babylon.js提供了一行代码即可提供完整的VR体验，它将转换现有的场景VR兼容，提供远传（teleport）能力（您需要提供充当地板的网格的名称）并将显示当前使用的控制器的正确模型。例如，要沉浸在著名的《回到未来》序列中，请导航至特定URL并查看代码。由于这行代码，您会发现奇迹发生了：其中2个对象可以支持传送目标：“Road1”和“Herbe1”。如果您连接了兼容的浏览器和WebXR兼容设备，您会在右下角看到一个VR图标。
如果您没有兼容的设备，可以尝试安装名为“WebXR API Emulator”的Chrome扩展程序，它将模拟WebXR设备。打开开发者工具，您就可以模拟某人使用VR头戴式设备。下面的视频展示了在Windows 11上使用Valve Index的完整体验。
在VR街机中，作者喜欢制作小型视频游戏，喜欢街机，也喜欢虚拟现实，因此将所有这些元素混合在一起。首先，您可以查看多年前移植的原始2D Canvas游戏。然后，作者简单地使用这个2D画布在Babylon.js的3D画布中的2D平面上渲染它。事实上，您必须在WebGL画布中渲染所有内容，以便在VR中查看元素并与之交互。经典HTML元素不会投影到VR中的3D画布中。Babylon.js通过动态纹理支持2D画布。然后，只需要将飞机放在街机模型的顶部。作者从Sketchfab下载了模型。如果需要帮助定位场景中的对象，强烈建议使用检查器工具。
虚拟360 VR钢琴是另一个例子，作者喜欢作曲，也喜欢虚拟现实，因此将两者结合起来。您可以尝试使用平面2D屏幕，但要使其在VR中运行，只需取消第12行和第11行的注释。然后，相机将位于360钢琴的中心。当然，WebXR不仅仅是为了娱乐和游戏体验。今天，它可能更多地用于“严肃”场景，尽管对于作者来说，游戏是一项严肃的业务。
WebXR及其AR功能对于电子商务场景非常有趣。作者鼓励您阅读Babylon.js博客上的一篇文章：WebXR、AR和电子商务：初学者指南。它包含一个演示，您可以在Android智能手机（或HoloLens 2）上试用。视频可以在这里观看。
作者最近还致力于构建一个“元宇宙”演示，在演示中，他们能够使用Azure通信服务（一种运行在WebRTC之上的CPaaS）从VR场景中使用Microsoft Teams呼叫某人。这个想法是为了试验一个概念，例如，您可以在Microsoft Teams连接的销售代表的帮助下参观房屋。下面是使用Valve Index设备的演示视频。
作者首先在Babylon.js Playground中构建了一个原型，您可以在其中导航到场景，按下“呼叫”按钮并体验一段假视频，还可以单击Oculus控制器的“A”按钮，将视频放在左侧控制器的顶部。然后，作者集成了ACS JavaScript SDK，以通过Microsoft Teams的ACS基础设施流式传输视频。您可以通过示例尝试并阅读作者GitHub仓库中的代码。在不到10分钟的时间内部署一个Azure通信服务示例，以便与您的同事和朋友共享和测试。完整的设置说明可以在自述文件中找到。
热门标签
