181  
查询码:00000036
Unity发布WebGl注意事项
作者: 李群超 于 2020年08月07日 发布在分类 / BIM组 / BIM视图 下,并于 2020年08月07日 编辑
Unity WebGL

1:对webgl发布的工程文件说明

    
在release文件夹中,如果你使用了gzip压缩,那么你的文件后面会有个.gz
2:如何在pc上面运行webgl

 

   (1):发布webgl之后不能直接点(index.html)打开查看工程(火狐 和win10 Edge浏览器可以直接打开),需要建立服务器通过服务器地址来访问。
    (2):但是在chrome浏览器中可以使用命令行启动来打开,然后在打开的浏览器网页中通过地址来打开webgl
 

3:other settings设置

    和其他平台有些不一样,值得注意的是这个"Strip Engine Code",剥离引擎代码的选项。选中此选项后,Unity不包括不使用的任何类的代码。例如,如果您不使用任何物理组件或功能,整个物理引擎将从您的构建中删除。没有音频功能,unity会在封装的时候去掉这部分代码以减少大小。

如果你的项目中使用到了资源包"AssetBundles"进行动态加载,要注意。如果你不想某些被剥离,请使用link.xml具体百度unity link.xml

如果在项目之后,发现有如下错误 Could not produce class with ID XXX 说明有代码被分离

文档:https://docs.unity3d.com/Manual/IL2CPP-BytecodeStripping.html  https://docs.unity3d.com/Manual/iphone-playerSizeOptimization.html

       

 第二个方法是干脆去掉剥离代码的选项,但是构建体积会有所增大

 

4:publishing settings设置

(1):是webgl可用内存大小的分配,单位是MB,

   建议在"64-512"之间,默认的是256,,这里设置的值在封装以后也可以在发布后index.html文件中修改,具体位置位于页面底部的<script>标签中

(2):参数"Enable Exceptions",用来异常捕获开关,调试期间可以打开,产品发布的时候需要去掉。

        共有三个选项

        none:关闭

        Explicitly Thrown Exceptions Only:默认选项,只处理脚本中throw部分的代码,同时也会增大代码体积。

        Full:会捕获所有的调试信息,除了代码中的throw,还会将空的引用,非法索引数组,堆栈信息一同捕获。

 

(3):压缩方式 默认是gzip, 更佳的是Brotli但是需要更多的时间压缩,这个方式只支持火狐和谷歌浏览器

5:注意方面

(1):

(2):使用assetBundle的一些贴士
(3):如果要修改发布的文件相对于index.html的位置,要打开index.html修改相应Uri的路径,也可以放在相应的uri网络地址
        
 
(4):WebGL无法使用monodevelop 或者vs来调试 但是可以使用debug来打印到的浏览器的控制台
6:WebGL图形方面

 


         WebGL图形 是一种用于在Web浏览器中渲染图形的API,它基于OpenGL ES图形库的功能。 WebGL 1.0大致匹配OpenGL ES 2.0功能,WebGL 2.0大致匹配OpenGL ES 3.0功能。
(1):Unity WebGL仅支持烘焙GI。 WebGL目前不支持实时GI。此外,仅支持非定向光照贴图。
(2):WebGL运行时不支持 Procedural Materials,在运行是会变成普通的材质(Procedural Materials好像是substance的一种材质,具体可以查看文档)
(3):不支持MovieTextures
     官方有个Simple MovieTexture for Unity WebGL demo但是已经不见了,可以用这个插件播放视频,也可以用avpro插件播放视频
      http://renderheads.com/product/avpro-video/ 里面有个demo和unitypackage
(4):WebGL不支持线性色彩空间渲染(WebGL does not support linear color space rendering)
(5):对shader也有限制(具体查看文档)
(6):无法访问用户机器上安装的字体,所有在使用字体的时候要放到assets里面
(7):支持抗锯齿,在Quality Setting中启用抗锯齿功能
(8):反射探针在WebGL中得到支持,但由于WebGL规范中有关渲染到特定mipmap的限制,不支持平滑的实时反射探测器(因此实时反射探测器将始终产生尖锐的反射,这可能会显示非常低的分辨率)
 
7:网络方面

 

(1):由于安全隐患,JavaScript代码不能直接访问IP套接字来实现网络连接。因此,.NET网络类(即System.Net命名空间中的所有内容,特别是System.Net.Sockets)在WebGL中是不起作用的。这同样适用于Unity的旧UnityEngine.Network *类,这些类在构建WebGL时不可用    目前可以选择使用Unity中的WWW或UnityWebRequest类,或支持WebGL的新的UnityNetworking,或者使用JavaScript中的WebSockets或WebRTC实现您自己的网络AssetsStore有个官方的WebSockets Demo
 
(2):使用WWW or WebRequest的访问跨域资源施安全限制,使用WWW或UnityWebReqest访问内容,并且远程服务器没有正确设置CORS,则在浏览器控制台中将会看到如下错误信息:Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://myserver.com/. This can be fixed by moving the resource to the same domain or enabling CORS. 查看 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
 
(3):不要阻止www或者unitywwwrequest的下载,比如:while(!www.isDone) {}都是不被允许的 note:webgl是单线程 ,也就是说下载的时候你什么都别动
 
(4):使用Networking.NetworkManager.useWebSockets.具体查看文档
 
(5):在webgl中要使用使用套接字 需要使用webscoket和webRTC。webscoket官网有个简单的例子
使用webRTC要注意有些局限 文档:both networking protocols supported by browsers. Web Sockets has wider support, but WebRTC allows p2p connections between browsers and unreliable connections. Neither of these protocols are exposed through built-in APIs in Unity yet, but it is possible to use a  JavaScript plugin to implement this.
 
8:Audio方面

 

 
9:性能方面

 

(1):在质量设置中设置为fastest捕捉异常设置为none
 
(2):可以设置为Application.runInBackground However, it should be noted that browsers may throttle content running in background tabs. If thetab with your content is not visible, your content will only be updated once a second in most browsers. Note that this will cause Time.time toprogress slower than usual with the default settings, as the default value of Time.maximumDeltaTime is lower than one second.
 
(3):可以使用Application.targetFrameRate API来限制帧速率。
 
10:内存方面

 

 
11:与网页js代码交互

 

 
 (1):webgl调用js代码可以使用  Application.ExternalCall() and  Application.ExternalEval()
         在js中调用untiy代码使用SendMessage ('MyGameObject', 'MyFunction', 'foobar');(物体,函数,参数)
 
 (2):使用js插件,在你的unity中(跟其他自己编写插件一样)Assets/Plugins/WebGL/MyPlugin.jslib,注意后缀名是jslib
        http://blog.csdn.net/llddyy123wq/article/details/5620466 
 
12:网页模板

 

 
13: input方面的支持

 

   (1):Gamepad and Joystick support
   (2):Touch support
   (3):Keyboard input
 说一下关于有些碰到 unity InputFiled不能输入中文的问题 可以在AssetsStore有个官方的IME Input for Unity Demo 
 
最后附上一张WebGL Browser Compatibility图片

14:使用字体

不能使用unity默认的字体 ,必须在项目文件中包含一个字体文件

15,解决Unity的Webgl中InputField无法输入中文字符的问题

https://connect.unity.com/p/jie-jue-unityde-webglzhong-inputfieldwu-fa-shu-ru-zhong-wen-zi-fu-de-wen-ti

16,缓存清不掉的问题。这个插件可以自动缓存WWW或者WebRequest(不用版本控制API),这个方案优于用额外加版本控制的API的默认缓存方式。

https://github.com/kongregate/Unity-WebGL-Utilities

17,移动端去除不支持提示(Build/UnityLoader.js替换下面这里的代码)

compatibilityCheck: function (e, t, r) {

        UnityLoader.SystemInfo.hasWebGL ?

            UnityLoader.SystemInfo.mobile ?

                t()

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

                    t()

                    : t()

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

    },

    Blobs: {},

粘贴图片

18,添加滚动条加载模板

新建目录Assets/WebGLTemplates,在其下的文件夹中新建Index.html就能作为模板了。(可以直接拷贝安装目录里的文件,再修改)

19,项目不要存在任何中文目录,不然发布失败,还找不到原因

20,屏幕自适应

index.html文件,修改width: 99vw; height: 95vh即可

粘贴图片



 推荐知识

 历史版本

修改日期 修改人 备注
2020-08-07 16:45:41[当前版本] 李群超 2020.0807
2020-08-07 16:42:06 李群超 2020.0807
2020-08-07 15:47:53 李群超 2020.0807

 附件
知识分享平台 -V 4.8.7 -wcp