目录

• 前言
• unity webgl的一些注意点
• • videoplayer修改
  • text修改——解决不能显示汉字问题
  • 制作、读取ab包
  • unity audioclip减小建议
  • 减小包体 全过程记录
  • webgl的build
  • webgl部署到本地、云（IIS）
  • webgl部署云如何提升加载速度
• 总结
• 参考

前言

又是一个阳光明媚的早上，突然老板召集开会说要将一个android项目适配webgl，没办法赶紧用unity改一下踩踩坑；这里记录一下这些天的踩坑过程。

unity webgl的一些注意点

videoplayer修改

（1）使用url读取播放，不能直接引用，否则播放不了

text修改——解决不能显示汉字问题

不能使用默认字体，要下载个TTF字体来使用

制作、读取ab包

（1）这里有个坑，因为楼主使用的是URP，所以在编辑器中读取AB包时会变成粉色，需要调用脚本，脚本来源自文章最下面的参考部分：

#if UNITY_EDITORpublic static class AssetBundleEditorUtil{public static void FixShadersForEditor(GameObject prefab){var renderers = prefab.GetComponentsInChildren(true);foreach (var renderer in renderers){ReplaceShaderForEditor(renderer.sharedMaterials);}var tmps = prefab.GetComponentsInChildren(true);foreach (var tmp in tmps){ReplaceShaderForEditor(tmp.material);ReplaceShaderForEditor(tmp.materialForRendering);}var spritesRenderers = prefab.GetComponentsInChildren(true);foreach (var spriteRenderer in spritesRenderers){ReplaceShaderForEditor(spriteRenderer.sharedMaterials);}var images = prefab.GetComponentsInChildren(true);foreach (var image in images){ReplaceShaderForEditor(image.material);}var particleSystemRenderers = prefab.GetComponentsInChildren(true);foreach (var particleSystemRenderer in particleSystemRenderers){ReplaceShaderForEditor(particleSystemRenderer.sharedMaterials);}var particles = prefab.GetComponentsInChildren(true);foreach (var particle in particles){var renderer = particle.GetComponent();if (renderer != null) ReplaceShaderForEditor(renderer.sharedMaterials);}}public static void ReplaceShaderForEditor(Material[] materials){for (int i = 0; i < materials.Length; i++){ReplaceShaderForEditor(materials[i]);}}public static void ReplaceShaderForEditor(Material material){if (material == null) return;var shaderName = material.shader.name;var shader = Shader.Find(shaderName);if (shader != null) material.shader = shader;}}
#endif

修改一下即可；
（2）坑二：发布时勾选enable exception---------explicitly thrown exceptions only，否则加载ab包报错，目前原因不明
（3）读取需要使用unitywebrequest

unity audioclip减小建议

如果在移动端观看，240P都蛮清晰的（看个人）

减小包体 全过程记录

1、一开始有207MB
2、压缩纹理、将TextMeshProUGUI改为Text后，剩下111MB
3、删除Resources文件夹中无用的东西，将预制体、场景中隐藏的模型删除，剩下101MB
4、将每个场景中的环境模型做成预制体，然后打AB包，剩下64MB
5、将场景中videoplayer的直接对videoclip引用移除，改为读取url，剩下16MB

webgl的build

过程各位应该很熟悉了我就不多说了，关键的地方截图几张好了

webgl部署到本地、云（IIS）

具体过程可以看下面的参考，主要注意几个点：
（1）最好新建站点来搞，楼主有试过将webgl部署在有.NET CORE API站点的wwwroot上，结果发现一直报404，填了MIME也没用，目前暂不知道什么问题，欢迎各位大佬评论！


（2）经常说的Mime添加一下：.unityweb、.data、.unity3d
（3）测试用的免费云我也放一下这里: uniCloud

webgl部署云如何提升加载速度

使用公司的云，带宽3M，结果加载1个10几M的unityweb文件都要接近1分钟，这种情况可能要考虑加带宽或者使用CDN服务比较好。先开个章节后续补充。如果有同样经历的大佬也欢迎评论！
顺便一提，免费云有CDN，加载时间差不多7、8秒，快的离谱。。

总结

总的来说，这次还是学了不少东西，踩坑也踩麻了 也欢迎各位朋友多评论。那么我们下一篇文章再见吧！

参考

unity官方-webgl发布的基本设置
unity官方-webgl包体减小的基本措施
unity官方-各平台纹理压缩建议
梵佬的读写AB包文章
外网大佬的关于URP编辑器中读取AB包粉色的应对脚本
关于webgl包体减小的尝试
水光大佬的webgl发布到阿里云
知乎大佬-webgl一篇比较全面的指南