untiy发布webgl开发记录

安装Unity3d并导入unitypackage

版本选择：

untiy发布webgl经测试

       2020版本系列的PC端网页打开都会报错，不正正常打开；

       2019系列的发布后PC端可以正常打开并运行，一切正常；但手机端除了火狐浏览器其他浏览器和直接从微信打开链接都会出现黑屏，无法正常进入体验。

       2018系列的可以正常发布PC端和手机端，运行也一切正常。

安装：安装的时候要把WebGL选上。

开发注意事项：

1、刚开始的build and run默认是不能选的，要先按Switch settings，然后再选。新建一个项目后，默认平台是PC，要想开发其他平台的项目最好一开始就选择自己想要的平台点击Switch settings进行平台的转化，否则如果项目过大到后期开发完成后再进行转化会非常耗时；

2、webgl不支持Arial字体，开发中所有文字均需开发者自己导入unity字体，选择导入字体；

3、发布了WebGL之后，网页运行有时候发现灯光会变暗，因为WebGL不支持实时光照的问题；所以我们将光照可以做成LightingMap 使用，可以缓 解这一问题。

4、WebGL的渲染和Unity的渲染差异，部分材质是不可以用的；开发时多做测试，对于显示不出来的材质进行更换&修改Shader。

5、一些图片UI会在打包webGL之后在网页中会显示模糊；美术制作UI时候分辨率&比例调整好。

6、尽量避免使用第三方插件（有些插件可以解决Bug或者大大提高效率，我们视情况而定）。

7、Unity自带的视频播放器在开发webGL时候是不能用的；用AVpro视频插件来代替Unity自带播放器。

8、场景加载实现异步加载PC端适用的webgl不适用；通过协程方法来实现异步加载；

 IEnumerator Start() 
{

        AsyncOperation scene = Application.LoadLevelAsync("");

        yield return scene;

        Debug.Log("加载完毕");

    }

9、对于场景中不同距离的模型我们采用LOD进行场景优化；LOD：Level Of Details多层次细节，unity中自带的一个组件，在场景中添加&设置即可。

10、在开发过程中由于WebGL的资源限制，我们要和数据库进行数据传输时候不能直接访问数据库；通过JS作为中转站来访问，我们可以使用Application.ExternalCall()来调用，可以传递一些参数和信息。

11、Getcomponent  Gameobject.find（）等这些方法尽量少用，而且千万不要放在Update中循环执行

12、Update里面的逻辑尽量不要太复杂

13、WebGL 端无法支持任何多线程代码，因为 JavaScript 没有多线程的实现，C# 端使用的类似 System.Threading 等库最终都不会被编译成相应的 js 代码。

发布设置：

1、Development Build不要选，下面两个选项选上（先选了Development Build，把下面两个选项选上，再剔除Development Build）。

发布：

弄好之后发布，打包的每一级目录必须为全英文，不能出现中文；项目的路径和名字也为全英文；

发布了之后，文件夹中会有三样东西：

 

IIS部署

部署参考链接完整流程；创建完网站后本地就可以访问了，内网访问，不能外网访问；

MIME类型添加：  .json     text/json  、  .unity3d    application/octet-stream、.unityweb   application/binary

外网访问：不懂网络服务器这块，我是直接把打包出来的项目交给服务器这边的技术人员上传的，等他们传完给我链接，就可以直接访问了

win10安装IIs：应用和功能-程序和功能-启用或关闭Windows功能-Internet Information Services（在Windows 7为Internet信息服务，下同）-选项框打勾-应用程序开发功能全选

win10安装好IIS后http://localhost界面如下图所示

unity webgl发布使用tomcat服务器流程参考链接（未测试，记录备用）：

unity3d发布webgl手机测试流程

Webgl发布流程，及任意用户通过链接访问，发布官方平台（不需要自己设置服务，借用Unity Play网站官方的服务器，只支持PC端，不支持手机端，当然我没改UnityLoader文件）：

webgl发布游戏到unity content ，可让其他人通过链接访问发布的游戏，不需要额外的服务器

将上图中小箭头列表打开，将 show preview package勾选上，在右边搜索框中搜索webgl，列表中筛选出webgl publisher包，将此包安装到unity中，unity菜单编辑器上方出现Publish菜单；（有的版本改名为Share WebGL Game）

使用unity 2019.4.24f1c1版本，安装webgl publisher后，出现报错信息：

SerializationException: Unable to find assembly 'UnityEditor.CoreModule, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null'.
System.Runtime.Serialization.Formatters.Binary.BinaryAssemblyInfo.GetAssembly () (at :0)
System.Runtime.Serialization.Formatters.Binary.ObjectReader.GetType (System.Runtime.Serialization.Formatters.Binary.BinaryAssemblyInfo assemblyInfo, System.String name) (at :0)
System.Runtime.Serialization.Formatters.Binary.ObjectMap..ctor (System.String objectName, System.String[] memberNames, System.Runtime.Serialization.Formatters.Binary.BinaryTypeEnum[] binaryTypeEnumA, System.Object[] typeInformationA, System.Int32[] memberAssemIds, System.Runtime.Serialization.Formatters.Binary.ObjectReader objectReader, System.Int32 objectId, System.Runtime.Serialization.Formatters.Binary.BinaryAssemblyInfo assemblyInfo, System.Runtime.Serialization.Formatters.Binary.SizedArray assemIdToAssemblyTable) (at :0)
System.Runtime.Serialization.Formatters.Binary.ObjectMap.Create (System.String name, System.String[] memberNames, System.Runtime.Serialization.Formatters.Binary.BinaryTypeEnum[] binaryTypeEnumA, System.Object[] typeInformationA, System.Int32[] memberAssemIds, System.Runtime.Serialization.Formatters.Binary.ObjectReader objectReader, System.Int32 objectId, System.Runtime.Serialization.Formatters.Binary.BinaryAssemblyInfo assemblyInfo, System.Runtime.Serialization.Formatters.Binary.SizedArray assemIdToAssemblyTable) (at :0)
System.Runtime.Serialization.Formatters.Binary.__BinaryParser.ReadObjectWithMapTyped (System.Runtime.Serialization.Formatters.Binary.BinaryObjectWithMapTyped record) (at :0)
System.Runtime.Serialization.Formatters.Binary.__BinaryParser.ReadObjectWithMapTyped (System.Runtime.Serialization.Formatters.Binary.BinaryHeaderEnum binaryHeaderEnum) (at :0)
System.Runtime.Serialization.Formatters.Binary.__BinaryParser.Run () (at :0)
System.Runtime.Serialization.Formatters.Binary.ObjectReader.Deserialize (System.Runtime.Remoting.Messaging.HeaderHandler handler, System.Runtime.Serialization.Formatters.Binary.__BinaryParser serParser, System.Boolean fCheck, System.Boolean isCrossAppDomain, System.Runtime.Remoting.Messaging.IMethodCallMessage methodCallMessage) (at :0)
System.Runtime.Serialization.Formatters.Binary.BinaryFormatter.Deserialize (System.IO.Stream serializationStream, System.Runtime.Remoting.Messaging.HeaderHandler handler, System.Boolean fCheck, System.Boolean isCrossAppDomain, System.Runtime.Remoting.Messaging.IMethodCallMessage methodCallMessage) (at :0)
System.Runtime.Serialization.Formatters.Binary.BinaryFormatter.Deserialize (System.IO.Stream serializationStream, System.Runtime.Remoting.Messaging.HeaderHandler handler, System.Boolean fCheck, System.Runtime.Remoting.Messaging.IMethodCallMessage methodCallMessage) (at :0)
System.Runtime.Serialization.Formatters.Binary.BinaryFormatter.Deserialize (System.IO.Stream serializationStream, System.Runtime.Remoting.Messaging.HeaderHandler handler, System.Boolean fCheck) (at :0)
System.Runtime.Serialization.Formatters.Binary.BinaryFormatter.Deserialize (System.IO.Stream serializationStream, System.Runtime.Remoting.Messaging.HeaderHandler handler) (at :0)
System.Runtime.Serialization.Formatters.Binary.BinaryFormatter.Deserialize (System.IO.Stream serializationStream) (at :0)
UnityEditor.Scripting.APIUpdater.AssemblyDependencyGraph.LoadFrom (System.IO.Stream stream) (at :0)
UnityEditorInternal.APIUpdating.APIUpdaterManager.ReadOrCreateAssemblyDependencyGraph (System.String assemblyDependencyGraphFilePath) (at :0)
UnityEditorInternal.APIUpdating.APIUpdaterManager.UpdateDependencyGraph (System.Collections.Generic.IEnumerable`1[T] addedAssemblyPaths) (at :0)
UnityEditorInternal.APIUpdating.APIUpdaterManager.ProcessImportedAssemblies (System.String[] assemblies) (at :0)

额。。。好的吧，直接清掉就好了；（unity中有时候就会报一些错，就报错先清一次剩下的才是需要真正解决的错误）

下一步就是直接打包发布要发布的项目，发布完成后，在unity中重新打开publish，打开后界面是下方有一个Get Start按钮，点击以后就会出现以下界面：

然后点击publish按钮将项目上传发布到unity的connect上，从2021年2月份开始，connect下架了，现在发布上去平台是Unity Play；且平台需要访问，否则是纯文字乱码，

打包报错：

Exception: Failed running D:\Softwares\Unity\2020.3.4f1c1\Editor\Data\il2cpp/build/BeeSettings/offline/bee.exe --useprebuiltbuildprogram --no-colors

解决办法：工程路径名字中不能含中文，打包路径不含中文

网页加载打不开报错：

1、：出现下图错误解决方案参考链接（错误翻译：未捕获范围错误:未定义的起始偏移量在缓冲区的边界之外。）：https://blog.csdn.net/weixin_37231922/article/details/108999398?ops_request_misc=&request_id=&biz_id=102&utm_term=unity%20webgl%20uncaught%20rangeerro&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-108999398.pc_search_result_before_js&spm=1018.2226.3001.4187

2、解决上方问题加上"TOTAL_MEMORY":268435456后，内存设置为256M/32M，重新加载显示如下错误（offset is outside the bounds of the dataview 错误翻译：偏移量超出了数据视图的边界）：

猜测是由于请求服务器，模型较大（13M）后，请求没有完成就开始解析导致的。

3、解决上方问题后，内存直接加大到5g之后报如下错误（webassembly.memory():property 'initial': value 81920 is above the upper bound 65536错误翻译：webassembly.memory():属性“initial”:值81920高于65536的上限）：

查找到内存边界限制：WebGL Memory Size的最大值是2032MB最小值是16MB，建议设置为512，内存设置过大可能引起浏览器崩溃。

将内存设置为16M后，打开一直在加载进度条70/80左右的样子不动，也不报错；

但以上问题是我第一次打包测试的时候碰到的，使用的版本是2019，想法并不成熟，后来又看到其他的博客，大概就是：webgl发布出来的项目肯定是越小越好，内存设置一般也是默认的256，不建议设置过大；所以优化方面等后期项目数据大了以后优化有结论了再补充。

问题（版本：2019）：Uncaught SyntaxError: Invalid or unexpected token     

解决方案：去除页面上中文符号，改成英文符号

问题：Unity 2020.2.2f1c1 编译WebGL版本后 浏览器运行卡住.
Console 里 有报错 Uncaught ReferenceError: unityFramework is not defined

解决方案：在玩家设置 - 发布设置中 , 将压缩格式 改为 已禁用, 再次发布即可（打包时不压缩）

问题（版本：2019）：

both async and sync fetching of the wasm failed   异步和同步抓取wasm失败

failed to asynchronously prepare wasm: TypeError: WebAssembly.instantiate(): Argument 0 must be a buffer source or a WebAssembly.Module object    参数0必须是缓冲区源或WebAssembly。模块对象

问题（版本：2018）：Unity _WebGL_Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH

这是服务器文件请求超时的错误，有可能是服务器设置了时间限制，时间过了网站这边还没下完，就会报错，导致项目再也不能运行。
网络博客解决方案：找到服务器的一个配置表，httpd.conf文件，里面有个TimeOut的属性，修改大一点，改成600秒或者更大，这样就能顺利加载完了。

据说IIs服务器默认是不限制时间的，所以部署在IIs服务器上，应该不会碰到此类错误。

没有解决根本问题的我的方案：我这边暂时的话是加大了带宽加载速度快了。涉及到BIM模型，打包出来很大50M左右，正常不切出网页的话是可以下载完成正常运行的。加大带宽后，速度加快概率就比较小了。

 

网页正常打开运行后运行中问题：

问题：WebGL打包出来的字体显示不了中文

解决方案：可能是选择了Arial字体 这个字体在浏览器的WebGL里面是显示不出来中文的

 

webgl在移动端应用：

截止2021年5月8号，经测试unity2020版本系列发布出的webgl项目在网页运行会报错，可在浏览器开发者工具查看；unity2019版本系列发布出的webgl项目在PC端浏览器运行正常，但到移动端使用微信或一些其他的浏览器打开时，程序运行后会一直处于黑屏状态；

最后使用了unity2018版本发布出来后才能在微信正常打开；

打开移动端权限：

Unity发布webGL后，很多时候我们需要在移动端展示，此时找到UnityLoader.js文件，做下面的修改即可在手机端打开：

compatibilityCheck:function(e,t,r){
    UnityLoader.SystemInfo.hasWebGL?

        UnityLoader.SystemInfo.mobile?

            t()

           :["Firefox","Chrome","Safari"].indexOf(UnityLoader.SystemInfo.browser)==-1?

        :e.popup("Yourbrowse does not support WebGL",[{text:"OK",callback:r}])    },

或者直接改成可以避险很多不必要的麻烦（平台，浏览器等）

compatibilityCheck:function(e,t,r){t();},

 

设置webGL自适应屏幕：

Unity WEBGL设置浏览器全屏    亲测有效

webgl优化：

内存优化：unity发布工程的执行经常会报内存不足的异常，通过查找资料，可以通过以下操作减小内存的使用：

1、减少Unity Heap的大小

尽可能保持“WebGL Memory Size”够小，在大多数情况下会需要用到256MB或386MB，新版的（目前测试版本是unity2019.4.24）已经没有这个设置，发布以后默认就是256

2、减少包里程序代码量
1）启用Strip Engine Code

这样发布的版本不包含那些不必要的原生引擎代码（如不需要2D模块，它将会剥离）
2）关闭异常检测(Disable Exceptions)，新版的如下图：

3）避免使用第三方插件
上面两个也会增加代码的大小。
3、减少数据大小
1）使用Asset Bundle
千万不要将所有资源打包到一个单独的AssetBundle，即使这样会减少网页加载期间的压力，但是需要下载一个很大的 AssetBundle，导致内存使用高峰。
最后，资源使用完毕使用AssetBundle.Unload卸载AssetBundle

如果有 AssetBoudle的使用，保证在发布时，不勾选“Strip Engine Code*”，但是无用代码一定清理干净。

2）压缩材质
推荐使用Crunch纹理压缩
参考链接：http://forum.china.unity3d.com/thread-21217-1-1.html

如果贴图格式时2048，在不影响画面效果的情况下，改成1024或者512，还可以缩小包体。

3）导入图片设置

图片导入unity，选择图片类型，取消Generate Mip Maps勾选（如果勾选，unity会根据相机距离对象距离，生成8个Mip，该做法在3D场景UI是很好的做法，如果UI都在平面就暴露出了它的弊端，因为都在平面，所以不会有距离相机距离的变化，勾选会增加一倍内存）

还要提醒的就是，图片的的大小一定要是2的幂次方，这样unity才能压缩成比较小的图片格式，如：etc、pvrtc等。

如果原图不是2的幂次方，可以在advance设置Non Power of 2值，

ToNearest ：转换成距离该图片最近的2的幂次方值。
ToLarger ： 转换成比该图片大的2的幂次方值。

Advanced->Non-Power of 2时，会将导入图片资源的大小改成最接近的2的n次幂（图片格式为Default时，才有此选项）

Format 格式设置（压缩格式）

Compressed 压缩格式，如果纹理没有透明通道，一般使用该项，优化内存量，如果有透明通道，显示原图片有可能出现问题。4位
16bit 低质量真彩格式。16位
TrueColor 真彩模式。质量最高，是压缩格式的8倍，但也更消耗内存，32位
Crunched 这种类型将会根据显卡的GPU来选择合适的压缩格式进行压缩然后会选用一种CPU上就能处理的压缩格式再压缩一遍。如果在制作供人下载的资源包的时候这种类型非常的合适。这个类型的压缩需要很长时间，但在运行时解压是非常快的。

图片根据情况使用Mip但是一定选择RGBA Crunched DXT5 格式很大程度减小贴图资源包

4）尽量删掉Packages里面不使用的package它会影响 Included DLLs  的大小

删除Resource和StreamingAssets他们都会打包进去

删除物体身上不需要的组件比如Collider

Camera尽量不使用HDR场景尽量是不用阴影Quality->Anti Aliasing 选择2X或者4X就可以了多重采样虽然能抗锯齿但是降低速度

5）WebGL打包的时候分三种压缩情况：
gzip：比Brotli文件大，但打包快，http和https都支持
Brotli：压缩格式最小，打包慢，只有谷歌和火狐支持。
Disabled：不压缩。

优化方面参考链接：Unity发布WebGL减小内存的使用

图片设置参考链接：unity 导入图片设置

内存优化参考链接：

UnityWebGL启动加载优化

Unity打包WebGL，html加载速度优化

unity webgl启动时间优化

Unity发布WEBGL优化

webgl unity_在WebGL中对Unity性能进行基准测试

Unity WebGL 发布内存优化