您想找什么?
Engine & platform

Web 运行时更新如下:让您的浏览器更上一层楼

BEN CRAVEN, MATTHEW BUSCEMI, ANTHONY BOWKER / UNITY TECHNOLOGIESContributor
Nov 30, 2023|15 Min
Web 运行时更新如下:让您的浏览器更上一层楼
为方便起见,此网页已进行机器翻译。我们无法保证翻译内容的准确性或可靠性。如果您对翻译内容的准确性有疑问,请参阅此网页的官方英文版本。

Unite 2023 上,我们推出了 最新的 Web 运行时产品。其中包括有关备受期待的移动浏览器支持的更多细节、对 WebGPU 如何在桌面浏览器上实现高级图形和渲染的早期了解,以及与 Meta 的合作伙伴共同宣布将Unity游戏引入 Facebook 和 Messenger 上的 Instant Games 平台。继续阅读,深入了解您的下一个基于 Web 的项目即将发生什么。

使用准备:网页游戏

Unity在 Web 运行时领域有着悠久的历史。2006 年, Unity网络播放器作为网络浏览器的插件首次亮相。随着 HTML5 的出现,浏览器开始取消对插件的支持,Unity 的网络播放器也于 2015 年被弃用。接下来,我们采用 WebGL 和 asm.js 直接在浏览器中运行游戏。Unity在 WebAssembly (WASM) 设计过程开始时就已存在,从那时起我们就一直与 WASM 一起发展。这为网络带来了Unity引擎近乎原生的性能。在2018.2中,我们的WebAssembly解决方案取代了asm.js成为默认解决方案。

您已经有一段时间没有收到我们的消息了,但我们相信,我们现在正处于网络上Unity内容的转折点。

除了技术进步之外,我们还更新了平台的命名方案。WebGL 现在被称为Unity Web,以便将 WebGL 技术与 Unity 的 Web 平台分开。我们还希望为未来出现多种渲染标准做好准备。最终,您将能够使用 WebGL 创建构建、使用 WebGPU 创建构建或同时使用两者创建单个构建。

网络平台游戏的优势

以这种方式提供内容使游戏玩家只需单击链接或扫描二维码即可立即获得体验,而无需在其设备上安装任何东西。此外,当您将内容带入浏览器的安全环境时,您就可以直接与游戏玩家建立联系,而不会受到其他在线商店的干扰。

Web 没有像其他平台那样的安装步骤,这保证了低摩擦和即时参与。然而,这意味着用户需要在第一次加载时下载运行时和启动资产。这意味着对于我们、对于您以及对于所有最终用户来说,加载时间就是一切。为了减少加载时间,我们已经做了大量工作,您将在本文后面了解更多相关内容。

考虑网络内容

与其他 Web 技术相比,该引擎的深度和广度使开发人员能够处理更复杂的模拟和交互元素。也就是说,由于用户会预先下载运行时和启动资产,所以在 Web 环境中,越小就越好 - 至少目前如此。

考虑到这些权衡,某些类型的游戏在网络上的效果肯定优于其他游戏,例如休闲游戏和超休闲游戏,它们的游戏时间短且机制易于掌握。

此外,您可以利用网络的低摩擦特性,从大型游戏中选取一小部分,比如您的教程级别,并将其自己的网络构建与游戏的其余部分分开并供所有人使用。这样,玩家首次使用时无需在设备上安装任何东西,即可获得顺畅的体验,并且您有机会在玩家熟悉游戏机制后将其转换为完整的原生应用。

美国宇航局和阿尔忒弥斯一号

Artemis 实时轨道网站 (AROW) 是 Artemis I 任务的交互式实时追踪器,于去年 11 月启动,使用Unity构建。

在神话中,阿尔忒弥斯是阿波罗的孪生姐妹,因此美国宇航局以这位希腊人物的名字命名了重返月球表面的一系列任务。

全球各地的太空爱好者都可以通过桌面网络浏览器追踪猎户座太空舱的轨道位置,以及看到它最终在太平洋的溅落地点。美国宇航局计划在未来所有的阿尔特弥斯任务中都使用这一工具,并将其扩展到不仅可以追踪猎户座太空舱,还可以追踪所有任务部件。

AROW 是由实习生塞思·兰伯特 (Seth Lambert) 创建的,他后来成为 NASA 通讯团队的全职成员。

Unity 6 中的移动浏览器支持

在 Unite 上,我们很自豪地宣布Unity 6 将支持 Android 和 iOS 浏览器。您很快就能在网络上的任何地方运行您的Unity游戏,包括在 iOS 或 Android 浏览器上。您还可以将您的游戏嵌入到本机应用程序的 Web 视图中,或者使用我们的渐进式 Web 应用程序模板使您的游戏表现得更像本机应用程序,具有自己的快捷方式和离线功能。我们相信,如果您一直以移动设备为目标使用Unity Web,您很可能在过去两三年内发布的高端移动设备上取得成功,但您的结果可能会因您的内容而异。当我们发布Unity 6 时,我们将对移动设备上Unity Web 的最低硬件要求提供更清晰的指导。

在这里您可以看到我们最近的 2D 示例项目Happy Harvest 在 iPhone 15 Pro 上的 Safari 中运行。

Unity 2D 示例项目 Happy Harvest 在 Apple iPhone 15 Pro 上的移动网络浏览器 Safari 中运行。
完美时机

Safari 已经开始支持 WebGL2,允许Unity Web 可以在 iOS 和 Android 设备上运行。我们看到移动网络速度和可靠性不断进步,CPU 和 GPU 性能也不断增强。由于现代观众渴望获得具有极低摩擦的即时体验,我们相信玩家现在已经准备好接受简短的互动内容。

Unity x Meta 建立即时游戏战略合作伙伴关系

正如在 Unite Keynote中所宣布的那样, Unity已与 Meta 合作,为其 即时游戏平台提供支持。通过为创作者解锁这个生态系统,玩家将能够在 Facebook 和 Messenger 对话中即时找到并玩游戏。由于游戏玩家数量 已达数亿,因此对于您将内容的覆盖范围拓展至全新群体而言,这是一个绝佳的机会。

Meta 的 Facebook Gaming 产品负责人 Andrew Mo 表示:“Meta 和Unity之间的密切合作已经在使用Unity构建的 HTML5 游戏的性能提升方面取得了一些有希望的早期成果。”“我们很高兴在新的一年继续保持这种势头,并期待让游戏开发者更轻松地将他们的内容带到 Facebook 和 Messenger。”

他补充道:“我们相信,让游戏即时可玩具有很大的潜力,尤其是当游戏设计为可以与朋友和社区一起玩时。我们很高兴与Unity合作,释放我们平台的潜力。”

“让游戏即时可访问具有很大的潜力,尤其是当游戏设计为与朋友和社区一起玩时 [...] 我们很高兴与Unity合作,在我们的平台上释放这种潜力。” – Andrew Mo,Meta Facebook 游戏产品负责人

Unity Web 平台团队正在开展多项工作以促进这种合作关系,其中包括专门的构建目标,以便您可以按照针对即时游戏量身定制的简化流程来测试、优化和发布游戏。将会有一个 C# SDK 来与即时游戏 API 交互,并进行大量的网络新优化,以确保玩家可以在几秒钟内进入游戏。

我们还与游戏工作室合作来验证这个新工具。启动合作伙伴包括 Coatsink,他们在 Meta 平台上有几款游戏,包括 Ready, Set, Cook!在 Coatsink 签约成为发行合作伙伴后不久, Unity团队就对这款游戏进行了一些早期优化,结果非常令人满意。

Coatsink 创作的《Ready, Set, Cook!》关键艺术作品

加载时间仅下降了 25%,活跃会话就增长了 50%,点击播放率从 35% 跃升至 58%。这意味着,在优化工作一开始,《Ready, Set, Cook!》 就从大多数玩家从未见过游戏玩法变成了大多数玩家与朋友一起玩游戏。这只是我们优化的冰山一角,但您可以看到,加载时间的相对较小的减少可以对参与度产生巨大的影响。

该图表显示了 Coatsink 提供的原始版本与应用了我们最新的 Instant Games 工具的优化版本之间的比较。正如您所见,我们已经将 Ready, Set, Cook! 的交互时间减少了 50% 以上。此特定测试在速度限制为 48 Mbps 的 Pixel 5 上运行。

条形图显示了 Ready, Set, Cook! 的原始版本和优化版本之间的加载时间差异(以秒为单位)。适用于 48 Mbps(12 至 5.5)、86 Mbps(8.2 至 3.7)和 176 Mbsp(6.1 至 3.6)

在上面的图表中,您可以看到优化之前的加载时间,以及我们目前使用 Ready, Set, Cook! 作为测试平台标题。首先,限制为 48 Mbps——这是 Ookla 报告的全球平均移动网络速度,甚至不是 5G。以全球平均宽带速度 86 Mbps 来看,我们的速度甚至更快。在 176 Mbps 的稳定 5G 连接上,我们看到了更快的速度,但我们也遇到了收益递减的情况,因为网络带宽不再是主要限制因素。

如何实现闪电般的速度

为了实现快速的加载时间,必须查看网络浏览器中游戏下载和初始化的所有方面。

网站构建剖析

Web 构建由几个文件组成:

  • WebAssembly(.wasm)文件:这是包括Unity引擎和游戏逻辑的二进制可执行文件。
  • 大型资源文件(.data):这包括构建中包含的场景的全局元数据和资产资源。
  • 可能有资源包或Addressables。
  • 您的 WebGL 模板(HTML 和 CSS)以及一些Unity Framework JavaScript文件,以使一切正常运行。
移动 Web 开发的最佳实践

首先,您应该遵循一些初步的最佳实践来创建良好的发布版本,其中包括:

  • 告诉编译器和链接器构建最佳代码大小
  • 使用 Brotli 压缩
  • 将 HTTP 预加载标签添加到您的 Web 模板,以预先加载第一个场景所需的任何资产包和Addressables。

我们将在即将推出的 Instant Games 构建目标中将它们设为默认设置。

此外,请考虑如何通过在Unity引擎加载和初始化时显示启动画面或动画来减少玩家感知到的加载时间。

减少资源文件

根据您的游戏,资产可能比 WebAssembly 更大或更小。

首先,考虑一些最佳实践。由于加载第一个场景所需的时间至关重要,请考虑使用Unity Addressables System 将每个资产分成单独的下载。然后,添加 HTTP 预加载标签来预加载第一个场景所需的Addressables 。后续场景将根据需求从Addressables系统加载资产。

如果您的游戏大量使用音频,请务必使用压缩音频,并考虑强制将其转为单声道并降低音频质量。

其次,让我们看看所使用的图形设置。选择 ETC Crunch 压缩纹理可以提供最小的下载大小并保持移动设备上的 GPU 内存使用率较低。如果您使用 ASTC 压缩纹理,请仔细查看块大小,为较小的纹理选择较大的块大小。同样,在项目的播放器设置中配置着色器剥离。

下一代 WebAssembly

WebAssembly 技术并未停滞不前,我们正在为Unity带来更新。我们非常感谢 Web W3C 社区为支持这些先进技术所做的工作。如果没有所有浏览器开发商的投入和支持,网络游戏就不可能实现。我们特别感谢与 Google Chrome 团队的合作。我们共同致力于加强 WebAssembly 的游戏用例和复杂游戏工作负载的图形性能。

Emscripten 编译器将您的Unity il2cpp 构建带至 WebAssembly。随着每个新的长期支持 (LTS) 版本的发布,我们都会包含最新版本的 Emscripten,以实现更快的开发构建和更小、更优化的发布构建(可能需要一段时间才能构建)。

在Unity 6 中,您将能够启用 4GB 内存支持。这使得网络上更大的实时3D体验成为可能,并利用了桌面浏览器可用的更大内存。将来,一旦所有浏览器都发布对 64 位内存的支持,这将为 64 位内存支持铺平道路。

目前,当您为 Web 构建启用异常支持时,会产生一些开销,例如当向所有函数添加代码以支持 try/catch 时。借助 WebAssembly 原生异常处理(将作为Unity 6 中的一个选项提供),处理异常所需的开销很小。

另外,在Unity 6 中,您可以启用 WebAssembly SIMD 支持。这可以通过矢量化指令加速 CPU 的数学计算。它可以在 x64 和 Arm 设备上运行,在网页加载时将 WebAssembly SIMD 指令映射到 SSE 或 Arm NEON。这里的改进因设备和浏览器而异,但它们是显而易见的。

这些功能是可选的,并且仅在较新版本的 Web 浏览器上可用。

从 WebGL 到 WebGPU

全新 WebGPU 后端的推出标志着基于 Web 的图形加速的一个重要里程碑,为Unity Web 游戏的图形渲染保真度实现前所未有的飞跃铺平了道路。

WebGPU 的设计目标是利用和向网络展示现代 GPU 功能。这个新的 Web API通过提供现代图形加速接口来实现这一点,该接口通过本机 GPU API(例如 DirectX 12、Vulkan 或Metal)在内部实现,具体取决于您使用的桌面设备。

WebGPU 将解锁对全新且令人兴奋的渲染功能的支持,实现桌面网络上前所未有的图形保真度水平。与其他现代图形 API 一样,对渲染设置和 GPU 执行的低级控制带来了新的优化机会,从而可以减少 CPU 和 GPU 开销并提高吞吐量和延迟。

WebGPU 还首次将计算着色器引入网络。GPU 计算蒙皮从根本上提高了渲染蒙皮网格角色的性能。现在,顶点转换全部被卸载到 GPU。上面的演示利用 GPU Skinning 将这些机器人的皮肤与下面的骨架结合起来,同时保持相对较高的帧速率。如果在 CPU 上完成此操作,它将以个位数FPS运行。

使用 WebGPU 进行角色 Adam 的交互式计算蒙皮演示

另一个例子是 Unity 的 VFX Graph,它直接在计算着色器中程序化地生成几何体。在下面的粒子模拟中,我们有超过五十万个粒子被动画化,它们都通过 GPU 上的计算着色器移动。

交互式 VFX Graph 演示,包含 Google Chrome 徽标、 Unity立方体图标和 WebGPU 徽标。

您可能以前看过上面的 船只攻击 演示。现在,您可以看到它完全在 WebGPU 上运行。WebGPU 现已在 macOS 和 Windows 上的 Google Chrome 和 Microsoft Edge 上启用。在最后一个例子中,我们展示了在 WebGPU 中呈现的交互式 船舶攻击

WebGPU Boat Attack 演示的屏幕截图

在开发 Unity WebGPU 后端的过程中, Unity图形工程师一直与 Chrome 团队密切合作,对大型场景和复杂着色器进行 WebGPU 压力测试,并取得了出色的成果。

WebGPU 图形后端仍在开发中,我们不建议将其用于生产用例。不过,它目前处于早期试用阶段。关于如何开始的详细信息可以在 图形论坛中找到。

让我们回顾一下

网络具有令人难以置信的强大功能,因为它具有实现无摩擦参与和与玩家直接联系的潜力。因为他们预先下载了 WASM 和启动资产,所以减少加载时间对于 Web 项目来说至关重要。由于这些权衡,较小的内容片段通常最适合网络。

到 2024 年末,您可以构建并部署您的即时游戏到 Facebook 和 Messenger,以吸引全新的受众。如果您想直接与Unity和 Meta 合作,尽早获得使即时游戏取得成功的工具和资源,或者想及时了解这一新的平台支持计划, 请立即注册您的兴趣

移动网络支持从Unity 6 开始。从 Unite Keynote了解有关Unity 6 的更多信息。

如果您喜欢动手,请阅读我们关于 WebGPU(即将在Unity 6 中推出)的 论坛帖子 ,以获取有关早期访问 WebGPU 后端的信息。然后,从现已推出的、可按需参加的 Unite 2023 会议中了解更多最新的引擎开发内容,包括 Unite 会议“立即让您的Unity游戏在网络上吸引更多玩家”(嵌入下方)。