unity发布webgl开发记录

Hedy-田

已于 2024-06-15 07:57:34 修改

阅读量8.1k

点赞数 38

分类专栏： # Unity 各平台开发文章标签： unity webgl 内存优化 iis 移动开发

于 2021-05-06 09:56:50 首次发布

本文链接：https://blog.csdn.net/qq_36258029/article/details/115529461

版权

Unity 各平台开发专栏收录该内容

3 篇文章 1 订阅

订阅专栏

安装Unity3d并导入unitypackage

版本选择：

unity发布webgl经测试

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

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

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

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

开发注意事项：

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

2、webgl不支持Arial字体，开发中所有文字均需开发者自己导入一个字体库，并选择已导入的字体库；

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作为中转站来访问（JS页面），我们可以使用Application.ExternalCall()来调用，可以传递一些参数和信息。

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

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

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

14、WebGL 端无法支持using System.IO;

15、WebGL是一个AOT(静态编译)平台，所以它不允许动态生成的代码中使用system.reflection.emit。这是对所有其他il2cpp平台，如iOS，和大多数控制台是相同的。

发布设置：

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 <eae584ce26bc40229c1b1aa476bfa589>:0)
System.Runtime.Serialization.Formatters.Binary.ObjectReader.GetType (System.Runtime.Serialization.Formatters.Binary.BinaryAssemblyInfo assemblyInfo, System.String name) (at <eae584ce26bc40229c1b1aa476bfa589>: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 <eae584ce26bc40229c1b1aa476bfa589>: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 <eae584ce26bc40229c1b1aa476bfa589>:0)
System.Runtime.Serialization.Formatters.Binary.__BinaryParser.ReadObjectWithMapTyped (System.Runtime.Serialization.Formatters.Binary.BinaryObjectWithMapTyped record) (at <eae584ce26bc40229c1b1aa476bfa589>:0)
System.Runtime.Serialization.Formatters.Binary.__BinaryParser.ReadObjectWithMapTyped (System.Runtime.Serialization.Formatters.Binary.BinaryHeaderEnum binaryHeaderEnum) (at <eae584ce26bc40229c1b1aa476bfa589>:0)
System.Runtime.Serialization.Formatters.Binary.__BinaryParser.Run () (at <eae584ce26bc40229c1b1aa476bfa589>: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 <eae584ce26bc40229c1b1aa476bfa589>: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 <eae584ce26bc40229c1b1aa476bfa589>: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 <eae584ce26bc40229c1b1aa476bfa589>:0)
System.Runtime.Serialization.Formatters.Binary.BinaryFormatter.Deserialize (System.IO.Stream serializationStream, System.Runtime.Remoting.Messaging.HeaderHandler handler, System.Boolean fCheck) (at <eae584ce26bc40229c1b1aa476bfa589>:0)
System.Runtime.Serialization.Formatters.Binary.BinaryFormatter.Deserialize (System.IO.Stream serializationStream, System.Runtime.Remoting.Messaging.HeaderHandler handler) (at <eae584ce26bc40229c1b1aa476bfa589>:0)
System.Runtime.Serialization.Formatters.Binary.BinaryFormatter.Deserialize (System.IO.Stream serializationStream) (at <eae584ce26bc40229c1b1aa476bfa589>:0)
UnityEditor.Scripting.APIUpdater.AssemblyDependencyGraph.LoadFrom (System.IO.Stream stream) (at <f316889b06af447f98efd87de466a809>:0)
UnityEditorInternal.APIUpdating.APIUpdaterManager.ReadOrCreateAssemblyDependencyGraph (System.String assemblyDependencyGraphFilePath) (at <f316889b06af447f98efd87de466a809>:0)
UnityEditorInternal.APIUpdating.APIUpdaterManager.UpdateDependencyGraph (System.Collections.Generic.IEnumerable`1[T] addedAssemblyPaths) (at <f316889b06af447f98efd87de466a809>:0)
UnityEditorInternal.APIUpdating.APIUpdaterManager.ProcessImportedAssemblies (System.String[] assemblies) (at <f316889b06af447f98efd87de466a809>: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、：出现下图错误解决方案参考链接（错误翻译：未捕获范围错误:未定义的起始偏移量在缓冲区的边界之外。）：Unity-WebGL遇到的各种坑（一）_unity 导出webgl 元素尺寸不对_浮生浅雨的博客-CSDN博客

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 发布内存优化

Hedy-田

关注

38
点赞
踩
75

收藏

觉得还不错? 一键收藏
4
评论
unity发布webgl开发记录

安装Unity3d并导入unitypackage在unity官网下载最新版本，虽然下载速度巨慢，安装的时候要把WebGL选上。打开之后新建一个project，在Asset中点击右键import package将项目素材导入。弄好之后发布，选择File–>Build Settings–>选择WebGL，Development Build不要选，下面两个选项选上（先选了Development Build，把下面两个选项选上，再剔除Development Build）。刚开始的build a
复制链接

扫一扫