Unity Web开发

以下介绍一些Web技术,以及Unity开发Web的技术方案和一些需要注意的地方。

WebGL

WebGL是一种用于在Web浏览器中渲染图形的API,基于OpenGL ES图形库的功能。不过通常也指基于WebGL的Unity Web开发技术方案。

对应的,在Unity支持WebGL之前的方案是Web Player。

”The Web Player feature was removed from 5.4. It is no longer supported“

主要是以浏览器插件为主导的网页生态圈不可行,由于Google放弃了对NPAPI插件的支持,可以说和FlashPlayer殊途同归。与Web Player不同的是,WebGL使用的是浏览器给出的标准API而并非插件。

WebGL图形API有两个版本:1.0大致与OpenGL ES 2.0功能相匹配,2.0大致与OpenGL ES 3.0功能相匹配。目前国外的Web平台已经主要支持WebGL2.0,但是国内还是处于兼容WebGL1.0的阶段,比如微信小游戏,需要对下沉市场友好。

WebGL1.0和WebGL2.0的一些限制和比较优势可以参考:WebGL graphics – Unity 手册

因为有些Feature必须使用WebGL2.0的API,且无法Fallback到1.0的版本,所以必须在Player设置的Other Settings面板中禁用Automatic Graphics API设置,并删除WebGL1.0 API。

可以在运行时使用 SystemInfo.graphicsDeviceType来确定Unity实例是使用OpenGLES3(WebGL2.0)还是 OpenGLES2(WebGL1.0)进行渲染。枚举值参考:GraphicsDeviceType – Unity 脚本 API

但是,WebGL并不能很好地处理通用GPU(GPGPU)的计算,新一代的原生 GPU API DX12、Metal 以及Vulkan提供了大量新特性,但是并没有任何计划对OpenGL(以及WebGL)进行更新,这部分工作将交给WebGPU来实现,下面会提到。

编译模式:关于Webassembly(Wasm)

WebAssetmbly简称Wasm, 是一种以安全有效的方式运行可移植程序的新技术,主要针对Web平台。与 asm.js类似,Wasm的目标是对高级程序中间表示的适当低级抽象,即WebAssembly代码旨在由编译器生成而不是由人来写。

Unity从5.6版本开始支持Webassembly代码的的生成,但从Unity2021开始,Unity转换Web游戏的功能才相对稳定。Unity利用IL2CPP机制把C#脚本编译为高效的WebAssembly,从2017年开始主流浏览器基本都支持WebAssetmbly了。2019年12月5日,WebAssembly正式加入HTML、CSS和JavaScript的Web标准大家庭。

介绍下asm.js

是Wasm的前身,asm.js比传统的JavaScript增加了静态类型,解决了因为动态类型而导致Just-In-Time(JIT) Compiler优化失去作用的问题。asm.js是一个编译目标,但仍然还是Javascript代码。

Unity WebAssembly编译过程

WebAssembly为什么快?

首先复习一下类似Javascript这种动态语言的解释执行过程。以Microsoft Edge浏览器的JavaScript引擎(ChakraCore)为例:

  1. 首先JavaScript文件会被下载下来。
  2. 然后进入Parser,Parser会把代码转化成AST(抽象语法树).
  3. 然后根据抽象语法树,Bytecode Compiler字节码编译器会生成引擎能够直接阅读、执行的字节码。
  4. 字节码进入翻译器,将字节码一行一行的翻译成效率十分高的Machine Code.

原因分析

Parser和ByteCode Compiler,这两步是JavaScript/asm.js代码在引擎执行过程当中消耗时间最多的两步。而WebAssembly不用经过这两步。这就是WebAssembly比JavaScript/asm.js更快的原因。

性能对比(Wasm vs asm.js)

开发注意事项

1,网络通信:需要将Socket修改为WebSocket来进行网络通讯。游戏服务器需要修改以支持WebSocket。

2,多线程:多线程代码可以修改或移除,JobSystem除外,只不过C# Job和Engine Job都将跑在主线程上,而不是Web Worker上。

不过原生方式不支持Web Worker,但仍然可以通过Jslib的方式来实现(WebGL:与浏览器脚本交互 – Unity 手册 (unity3d.com))。

Job System + WebGL – Unity Forum

you should be calling JobHandle.ScheduleBatchedJobs on all platforms, not just WebGL.

AFAIK we do not currently support WebWorkers, and all jobs run on the main thread (including engine jobs, not just C# jobs).

If the WebGL team add WebWorkers later then I imagine that your jobs will Just Work, though looking at the WebWorkers documentation it looks like using them efficiently for the jobsystem will be a pretty difficult task, what with all the isolated context stuff.

3,内存:最大内存能控制到1G以内。

4,热更:比如是否支持Lua脚本更新,视发布平台的政策。

5,资源加载:AssetBundle的资源更改为异步加载方式。

6,版本:推荐Unity2021之后。可以考虑下载支持开发InstantGame的编辑器来获得一些能力,比如对于那些尚未健全按需下载机制的项目来说,可以采用Auto Streaming的方案来做补充。

Unity InstantGame版本获取
基于2021.2.5
2021.2.5f1c301 (a19), 版本日期:2023/03/22
Windows平台:
Editor_2021.2.5f1c301_a20
UnitySetup-WebGL-Support-for-Editor-2021.2.5f1c301.exe
MacOS平台:
Editor_2021.2.5f1c301_a20
UnitySetup-WebGL-Support-for-Editor-2021.2.5f1c301.pkg
InstantGame Package:
com.unity.instantgame.zip

7,Demo测试


以官方Demo BoatAttack(URP)为例,升级引擎为2021LTS版本,发布WebGL2.0版本,效果相当不错。

发布平台:微信小游戏

转换工具:安装package地址 – https://github.com/wechat-miniprogram/minigame-unity-webgl-transform

特性:以微信平台为例,微信提供了Touch、输入法、playerprefs、video、audio等多种API,用户可以阅读微信转换工具的文档,学习和接入这些API。

更多详细细节参考:Unity游戏如何转为微信小游戏

WebGPU

未来Unity还将支持WebGPU,作为 WebGL 的继承者,WebGPU 允许使用更高级的现代 GPU 特性,WebGPU 直接支持普通 GPU 计算,将更好地支持多线程以及GPU Driven Pipeline。

2023进展

4月份,谷歌正式发布WebGPU。用于在网络上进行高性能 3D 图形与数据并行计算。WebGPU 现已在 Beta 测试阶段的 Chrome 113 中默认启用。

WebGPU与WebGL性能对比
GMTC全球大前端技术大会上分享了两者的性能对比。

其他

Project Tiny

提一下这个Unity曾经开发过的基于ECS架构的Web开发解决方案(高性能编程的初衷很好),不过结合当时DOTS还很不稳定的情况,而且这套技术本身对于普通开发者不大友好,现在项目已经中止了。有句经典的评论很适合这个项目:“我需要的是一个打包工具,而你却决定重写一整套底层架构”,这真的很程序员!

参考