Unity WebGL开发汇总

一、配置

1.BuildSettings

建议使用内置渲染管线，URP和HDRP帧率较低。

2.分辨率根据项目情况设置，Run in Background看需求

3.Color Space和Lightmap Encoding需要设置

4.裁剪未引用的模块，建议开启

注意：

代码裁剪可能引起的问题：

可能会裁剪掉实际用到的类型，比如预制体包含一个类型 A，而将该预制体打包到 AssetBundle 之中，Unity 就可能将 A 类型裁剪掉，运行时将在控制到看到错误 Could not produce class with ID XXX，可以按照下面两步来解决该问题：

根据提示 ID，查找裁剪的类型，查找地址：这里；

将该类型在脚本中引用一下，或者在创建 Assets 目录下 link.xml，格式如下。

Plain Text
<linker>
    <assembly fullname="UnityEngine">
        <type fullname="UnityEngine.Collider" preserve="all"/>
    </assembly>
</liner>

如果想要查看裁剪之后 Unity 包含了内些类型，可以在打包之后，找到文件 Temp/StagingArea/Data/il2cppOutput/UnityClassRegistration.cpp 进行查看，除此之外没有其他更加方便的方法。

另一点需要知道的是 Strip Engine Code选项只是针对 Unity 的本机代码，对于托管代码来说，总是会进行代码裁剪，IL2CPP 通过托管 DLL，以及代码脚本中的静态引用，来进行代码裁剪，如果代码中使用反射来获取类型，那么同样的，该类型有可能被裁剪掉，因此也需要添加到 linker.xml中。

5.发布选项中，Enable Exceptions建议上线时选None，Compression Format我没配置服务器，所以选的Disable。Decompression Fallback建议勾选。

brotli的压缩比最高，gzip次之，无压缩与压缩的体积差距大。

目前主流的浏览器都已经支持了压缩格式，能够在 http(s)传输过程中，将压缩的数据进行解压，这在效率上要比 js 进行解压要快很多。

另外，unity 在发布时也提供了 js 实现的解压器，如果浏览器解压失败的话，将会采用 js 解压的方式，当然这会带来一些性能损失，增长内容加载时间。

为了让浏览器在 http(s)传输过程中进行解压，需要Web 服务器通过 http(s)头来告诉浏览器，传输内容的压缩格式，就需要对 Web 服务器进行相应的设置。

【注】如果服务器不支持压缩，而设置使用了压缩，可能会导致加载失败。此时要么设置压缩为disable，或者配置服务器使之支持压缩格式（如下）。

二、WebGL不支持功能

不支持多线程，因为 JavaScript 不支持多线程，所以 System.Threading 命名空间下的类不要使用；

不能在 VS 中进行断点调试，可以直接网页调试（F12）；

不能直接使用 Socket，包括 System.Net下的任何类型，以及 System.Net.Sockets 下的部分类型，以及 UnityEngine.Network，如果需要在 WebGL 平台使用网络功能，可以使用 WWW或者 UnityWebRequest这些都是基于 Http协议的实现，如要需要高实时性，可以选择 WebSockets或者 WebRTC;

WebGL 1.0是基于 OpenGL ES 2.0，WebGL 2.0基于 OpenGL ES 3.0，所以存在相应的限制；

WebGL 音频是基于自定义的后台，只具备基本的音频功能；

WebGL 是 AOT(ahead of time，即静态编译平台，因此不能使用 System.Reflection.Emit 下的类型进行代码生成，IL2CPP和 iOS 也是如此。

部分浏览器不支持

三、游戏优化

略（看我之前的优化文章，大体通用，主要就是渲染优化和内存

四、页面优化

1.页面启动默认全屏模型。修改index.html文件：

function Reset()
{
  canvas.style.height= document.documentElement.clientHeight+"px";
  canvas.style.width = document.documentElement.clientWidth+"px";
}

2.关闭移动端的提示，同样修改index.html，注释掉那行代码即可。

3.修改Loading进度条样式。修改TemplateData中对应的贴图即可。更多样式需求得重写style.css

布局。

例如（注意对应好文件夹中背景图的名称）：

body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { width: 100%; height:100% }
/* #unity-canvas { background:  url('bk.gif') no-repeat center} */
/* #unity-canvas { background: rgb(0, 0, 0)} */
#unity-canvas {background: url('bk.gif'); background-size:100% auto;background-repeat: no-repeat; }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left:50%; top: 90%; transform: translate(-50%, -50%); display: none }
/* #unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center } */
#unity-progress-bar-empty { width: 550px; height: 3px; margin-top: 10px; margin-left: 6.5px; background: rgba(255, 255, 255, 0.2) }
#unity-progress-bar-full { width: 0%; height: 3px; margin-top: 10px; background: rgba(255, 255, 255, 0.6)}
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

4.修改web页面的title名称。同样修改index.html

五、其他

优化加载时间、压缩、资源管理

（后续再补充）