精华内容
下载资源
问答
  • 今天我要给大家分享一个用WebGL开发的网站,感兴趣的朋友可以在Chrome开发者工具里调试它的源码来学习WebGL。 WebGL(Web Graphics Library)是3D绘图协议的一种,该技术的特色是将万能的JavaScr...

    这张图每位程序员应该都深有感触。

    人民心目中的程序员是这样的:坐在电脑面前噼里啪啦敲着键盘,运键如飞。

    现实中程序员是这样的:编码5分钟,调试两小时。

    今天我要给大家分享一个用WebGL开发的网站,感兴趣的朋友可以在Chrome开发者工具里调试它的源码来学习WebGL。

    WebGL(Web Graphics Library)是3D绘图协议的一种,该技术的特色是将万能的JavaScript和OpenGL ES 2.0结合在一起,为HTML5的 Canvas提供硬件3D加速渲染。借助WebGL,前端开发人员可以开发出非常专业的3D场景和模型。

    今天我要介绍的网站:Legacy Encom Boardroom Visualization就是一个采取JavaScript 加上WebGL开发3D场景和模型的一个典型例子。

    网站地址:https://www.robscanlon.com/encom-boardroom/

    进入之后,会看到一个炫目的控制台。左下角的动画效果很像电影《生化危机》里的DNA双螺旋模型。屏幕右边是一个控制台,你在键盘上输入的字符会有个酷炫的动画效果:

    您可以手动在控制台里输入shell命令,比如:

    cd wikipedia

    ls

    以此来浏览wikipedia文件夹下的所有内容。或者直接用鼠标左键点击wikipedia这个文件夹:

    然后就能进入wikipedia这个文件夹,看到几个酷炫的3D模型,一个是正在旋转的地球的3D模型,另一个是不同维度展示的长方体模型。

    在Chrome开发者工具的console页面能看到WebGL相关的输出。

    这个网站的源码在github:http://github.com/arscan/encom-boardroom

    如果大家对WebGL技术感兴趣的,不妨去细读下源代码:

    要获取更多Jerry的原创技术文章,请关注公众号”汪子熙”或者扫描下面二维码:

    展开全文
  • Unity WebGL开发

    千次阅读 2020-05-12 09:40:09
    hi,WebGL

    一.WebGL不能干的那些事

    1.内置的video player 无法播放。(可以使用AVPro 播放)
    2.多线程
    3.socket(可以用UnityWebRequest或websocket)
    4.不支持dynamic类型,可以使用object。
    在这里插入图片描述

    二.注意事项

    1.播放声音

    要去掉AutoPlay

    2.跨域

    参考1
    参考2
    官网
    web.config添加

    		<httpProtocol>
    			<customHeaders>
    				<add name="Access-Control-Allow-Origin" value="*" />
    				<add name="Access-Control-Allow-Methods" value="GET, PUT, POST, DELETE, HEAD, OPTIONS" />
    				<add name="Access-Control-Allow-Credentials" value="true"/>
    				<add name="Access-Control-Allow-Headers" value="X-Requested-With, origin, content-type,Accept, X-Access-Token, X-Application-Name, X-Request-Sent-Time" />
    			</customHeaders>
    		</httpProtocol>
    

    在这里插入图片描述

    3.发布http or https?

    当发布到https上时程序中访问http的都会被改成https,这时候一般就报错了。。。

    4.包体大小

    注意工程中尽量不用Resources文件夹,不然打包的时候会导致包体过大。因为放在该文件夹下的东西都会被打包。

    是否包含Resourcesbuild包体大小
    包含Resources14M
    无Resources12.7M
    无Resource+Assembly Definitions8.93M

    5.Odin

    有的类型在WebGL平台并不支持序列化,如果你使用了Odin就需要在打包前生成AOT:
    在这里插入图片描述
    在这里插入图片描述

    6.T序列化失败

    T序列化失败,System.Reflection.Emit.DynamicMethod::.ctor
    

    把序列化工具换成Json .Net For Unity

    三.参考资料

    hi,WebGL
    Unity 发布WebGL注意事项
    Unity WebGL 官方教程
    Unity WebGL官方教程翻译
    发布后打不开
    Unity WebGL游戏
    官方WebGL Tiny
    IIS的搭建
    别个的笔记
    问题总结

    四.Build

    空场景build耗时~142s
    测试demo

    主要步骤

    Build后目录配置
    配置并Build
    web.config
    手机端去掉提示框
    勾选WebAssembly Streaming
    选择模板
    自定义模板

    web.config

    需要在index.html同级目录下添加web.config配置文件。
    需要根据部署的服务器决定:

    Apache

    web.config后缀改成.htaccess
    Gzip版本:

    <IfModule mod_mime.c>
      AddType application/octet-stream .unityweb
      AddEncoding gzip .unityweb
      AddType application/wasm .wasm
      AddEncoding gzip .wasm
      AddOutputFilterByType DEFLATE application/wasm
    </IfModule>
    
    

    Brotli版本

    <IfModule mod_mime.c>
      AddEncoding br .unityweb
      RemoveType .wasm
      AddType application/wasm .wasm
      RemoveType .unityweb
      AddType application/octet-stream .unityweb
    </IfModule>
    

    IIS

    首先安装URL Rewrite

    <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
      <system.webServer>
        <staticContent>
          <remove fileExtension=".unityweb" />
          <mimeMap fileExtension=".unityweb" mimeType="application/octet-stream" />
          <remove fileExtension=".wasm" />
          <mimeMap fileExtension=".wasm" mimeType="application/wasm" />
        </staticContent>
        <rewrite>
          <outboundRules>
            <rule name="Append gzip Content-Encoding header">
              <match serverVariable="RESPONSE_Content-Encoding" pattern=".*" />
              <conditions>
                <add input="{REQUEST_FILENAME}" pattern="\.(unityweb|wasm)$" />
              </conditions>
              <action type="Rewrite" value="gzip" />
            </rule>
          </outboundRules>
        </rewrite>
      </system.webServer>
    </configuration>
    

    手机端去掉提示框

    在手机端打开wegl项目会弹出不支持webgl的提示框,不想要的话可以把UnityLoader.js文件内的提示框代码改下(line:2041):
    修改前代码

    compatibilityCheck: function(e, t, r) {
        UnityLoader.SystemInfo.hasWebGL ? UnityLoader.SystemInfo.mobile ? e.popup("Please note that Unity WebGL is not currently supported on mobiles. Press OK if you wish to continue anyway.", [{
          text: "OK",
          callback: t
        }]) : ["Edge", "Firefox", "Chrome", "Safari"].indexOf(UnityLoader.SystemInfo.browser) == -1 ? e.popup("Please note that your browser is not currently supported for this Unity WebGL content. Press OK if you wish to continue anyway.", [{
          text: "OK",
          callback: t
        }]) : t() : e.popup("Your browser does not support WebGL", [{
          text: "OK",
          callback: r
        }])
      },
    

    修改后

    compatibilityCheck: function(e, t, r) {
        UnityLoader.SystemInfo.hasWebGL ?  ["Edge", "Firefox", "Chrome", "Safari"].indexOf(UnityLoader.SystemInfo.browser) == -1 ? e.popup("Please note that your browser is not currently supported for this Unity WebGL content. Press OK if you wish to continue anyway.", [{
          text: "OK",
          callback: t
        }]) : t() : e.popup("Your browser does not support WebGL", [{
          text: "OK",
          callback: r
        }])
      },
    

    全屏

    index.html 修改如下:
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en-us">
    
    <head>
      <meta charset="utf-8">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Unity WebGL Player | Pudong</title>
      <link rel="shortcut icon" href="TemplateData/favicon.ico">
      <link rel="stylesheet" href="TemplateData/style.css">
      <script src="TemplateData/UnityProgress.js"></script>
      <script src="Build/UnityLoader.js"></script>
      <script>
        var gameInstance = UnityLoader.instantiate("gameContainer", "Build/build.json", {
          onProgress: UnityProgress
        });
      </script>
      <!-- 滚动条隐藏 -->
      <style type="text/css">
        body {
          overflow: scroll;
          overflow-x: hidden;
          overflow-y: hidden;
        }
      </style>
    
      <!-- 窗口自适应 -->
      <script type="text/javascript">
        function ChangeCanvas() {
          document.getElementById("gameContainer").style.width = window.innerWidth + "px";
          document.getElementById("gameContainer").style.height = window.innerHeight + "px";
          document.getElementById("#canvas").style.width = window.innerWidth + "px";
          document.getElementById("#canvas").style.height = window.innerHeight + "px";
        }
      </script>
    </head>
    
    <body onResize="ChangeCanvas()">
      <div class="webgl-content" style="position:absolute;width: 100%; height: 100%;z-index:1" id="gameContainer"></div>
      <div style="position:absolute;z-index:2">
    
      </div>
    </body>
    
    </html>
    
    

    以上修改只能做到页面最大化,如果要全屏可以手动F11或者添加其他代码
    在这里插入图片描述

    加载时间过长

    1.使用Gzip压缩格式
    在这里插入图片描述
    在这里插入图片描述

    页面模板

    模板demo
    在这里插入图片描述

    只要进度条不要Logo

    用以下内容替换UnityProgress.js

    function UnityProgress(gameInstance, progress) {
      if (!gameInstance.Module)
        return;
    
      if (!gameInstance.progress) {
        gameInstance.progress = document.createElement("div");
        gameInstance.progress.className = "progress " + gameInstance.Module.splashScreenStyle;
        gameInstance.progress.empty = document.createElement("div");
        gameInstance.progress.empty.className = "empty";
        gameInstance.progress.appendChild(gameInstance.progress.empty);
        gameInstance.progress.full = document.createElement("div");
        gameInstance.progress.full.className = "full";
        gameInstance.progress.appendChild(gameInstance.progress.full);
        gameInstance.container.appendChild(gameInstance.progress);
      }
      gameInstance.progress.full.style.width = (100 * progress) + "%";
      gameInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
      if (progress == 1)
        gameInstance.progress.style.display = "none";
    }
    

    Unity发布WebGL时如何修改、删除默认的载入进度条

    自定义加载背景图

    如下所示把黑色的背景换成了图片!!!
    在这里插入图片描述
    方法概况:直接把Logo换成想要的背景图,然后在css中修改尺寸即可{(>A<)}〃≈≈大罗法咒
    详细步骤:
    1.TemplateData/progressLogo.Dark.png替换成需要的背景图片。(ps:进度条是progressFull.Dark.png
    2.打开style.css修改logo的宽高.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 100%; height: 100%;}
    3.(ノ・_・)ノ去!卍卍卍

    激活嵌入资源

    介绍

    using UnityEditor;
    namespace ZYF
    {
    
        public class ZYF_WebGLEditorScript
        {
            [MenuItem("WebGL/Enable Embedded Resources")]
            [System.Obsolete]
            public static void EnableErrorMessageTesting()
            {
                PlayerSettings.SetPropertyBool("useEmbeddedResources", true, BuildTargetGroup.WebGL);
            }
        }
    }
    

    五.IIS 部署

    启用Internet Infomation Services

    在这里插入图片描述

    添加程序到IIS

    1.把build目录添加到IIS
    在这里插入图片描述
    2.通过浏览器打开(http://localhost/webgl/ )
    当然也可以用ip打开,笔者本地ip为:192.168.10.215,所以地址为:http://192.168.10.215:80/webgl/

    在这里插入图片描述
    报错了就说明需要添加web.config文件!
    重新打开页面就正常了

    在这里插入图片描述

    六.浏览器设置

    Chrome 快捷方式右键属性在目标内添加--enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files即可(注意第一个的空格)
    示例:“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” --enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files
    在这里插入图片描述
    Firefox:

    地址栏输入:about:config
    找webgl.disabled  false
    找webgl.force-enabled true
    

    七.UnityScript与JavaScript通信

    ┏ (゜ω゜)=👉

    展开全文
  • untiy发布webgl开发记录

    2021-04-08 19:44:59
    在unity官网下载最新版本,虽然下载速度巨慢,安装的时候要把WebGL选上。 打开之后新建一个project,在Asset中点击右键import package将项目素材导入。弄好之后发布,选择File–>Build Settings–>选择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作为中转站来访问(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、:出现下图错误解决方案参考链接(错误翻译:未捕获范围错误:未定义的起始偏移量在缓冲区的边界之外。):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 发布内存优化

    展开全文
  • 印刷媒体工具(页面布局,PDF输出,更好的文本布局工具) 3D(将模型和纹理加载到场景中) 远程/流媒体/网络工具 附加系统允许使用特殊的非着色器节点。 用户界面功能 camogen的用户界面可以通过上的
  • HTML5原生WebGL开发系列教程

    千次阅读 2017-05-02 12:20:56
    原生WebGL简单Demo4. 在WebGL中使用drawElements绘图5. WebGL不同几何图形的渲染方式6. 使用自定义glTranslate与glRotate7. 原生WebGL+ArcGIS JS API绘制旋转的地球8. WebGL矩阵、Camera基础操作9. WebGL使用一张...

    1. OpenGL中的坐标变换、矩阵变换

    2. OpenGL ES 2.0编程基础

    3. 原生WebGL简单Demo

    4. 在WebGL中使用drawElements绘图

    5. WebGL不同几何图形的渲染方式

    6. 使用自定义glTranslate与glRotate

    7. 原生WebGL绘制旋转的地球

    8. WebGL矩阵、Camera基础操作

    9. WebGL使用一张贴图纹理绘制地球

    10. WebGL加载跨域纹理出错Uncaught Error: SECURITY_ERR: DOM Exception 18

    11. WebGL加载跨域纹理出错Cross-origin image load denied by Cross-Origin Resource Sharing policy.

    12. 使用WebGL绘制三维地形图

    13. 自己实现WebGL框架World.js(0.3.5版本)

    14. 通过OpenStreetMap获取数据绘制三维地球

    15. ELSL着色器编程中内置的运算符与函数

    16. WebGL光照模型与渲染方式

    17. 获取WebGL三维拾取向量

    18. 在WebGL中使用Mipmap纹理

    19. WebGL在WebGIS上的应用——WebGlobe

    20. WebGlobe实现的基本算法原理

    21. [GitHub开源]基于HTML5实现的轻量级Google Earth三维地图引擎,带你畅游世界

    22. 使用WebGL实现Web城市地下管线三维场景浏览

    欢迎大家关注我的WebGL开源项目WebGlobe,WebGlobe是一个基于HTML5原生WebGL实现的轻量级Google Earth三维地图引擎,支持以下特性:

    1. 没有使用第三方框架,无需插件,所有支持WebGL的浏览器均可使用。

    2. 支持Google、高德、微软Bing、腾讯、360、OpenStreetMap等底图服务。

    3. 支持影像图、行政图以及实施交通图。

    4. 支持搜索服务,既可以按照POI类型搜索,也可以按照POI名称搜索。

    5. 支持路线规划服务,支持自驾车、公交、步行三种出行方式,自驾车和公交出行均提供多种出行方案。

    6. 支持移动浏览器并对移动浏览器做了优化,并针对移动端做了一个WebApp,能够实现常用的地图功能,具有实用性。

    GitHub项目地址:https://github.com/iSpring/WebGlobe

    桌面版在线访问地址: https://ispring.github.io/WebGlobe/index.html

    移动版二维码访问(小米系统中的微信、小米默认浏览器在某些情况下存在已知bug):

    如果觉得不错,欢迎Star和Fork!

    展开全文
  • 实验WebGL音乐可视化工具
  • 对比了WebGL及其它平台内存的工作方式。我们给出的建议是Unity堆应越小越好,同时也强调了一个事实,即浏览器中还存在其他类型的内存开销。 本文将深入探讨Unity堆,并根据实际数据来减少Unity堆的大小,而不再是...
  • Geppetto是用于定义WebGL动画的工作室工具。 该项目是通过引导的。 可用脚本 在项目目录中,可以运行: yarn electron-dev 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载...
  • 用于打包WebGL的插件,下载之后默认安装即可,很好用。
  • 一些WebGL的资源

    2015-02-21 01:48:00
    1http://threejs.org/ ... ... 4Sencha的PhiloGL是首个WebGL开发工具之一,提供了高水准的功能,来构建WebGL应用。Sencha创建了几个演示,来描述框架交互式3D虚拟化的能力。项目主页:http://www.senchalabs.org/philo...
  • 以下内容工具包使用此功能集合: 性能警告 为实时图形编写JavaScript与典型JavaScript往往会有一些不同。 在一个更静态的应用程序中,内存分配和垃圾回收通常并不重要,但是WebGL可视化通常以每秒60帧的速度更新。 ...
  • Insight是一个WebGL调试工具包,提供多种功能,可实现更高效的WebGL开发和更高效的WebGL应用程序。 功能:Mipmap检查器深度检查器透支检查器调用堆栈时间轴和统计信息程序使用计数重复的程序使用检测器程序查看器...
  • WebGL Animator入门 该项目是通过。 可用脚本 在项目目录中,可以运行: yarn electron-dev 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑,页面将重新加载。 您还将在控制台中看到任何棉绒错误...
  • webgl

    2018-09-17 10:43:18
    最近项目开发任务告一段落,刚好有时间整理这大半年的一些成果。使用html5时间还不久,对js的认识还不够深入。没办法,以前一直搞java,对js的一些语言特性和概念一时还转换不过来。 上一篇大数据呈现第一弹介绍了...
  • 使用TypeScript 和 webgl 开发 第一步:实现了SpriteBatcher 例子如下 http://oak2x0a9v.bkt.clouddn.com/test/index.html 源码(要用svn抓) ...
  • webgl(一):开发环境配置

    千次阅读 2020-04-24 22:47:15
    1、开发工具 浏览器采用google浏览器 编译器采用webstorm软件 Google浏览器设置支持webgl : . 1: 打开浏览器并输入 about:flags 2:把第一个选项修改为 Enabled ...
  • 目前Web实现矢量渲染的主流技术包括SVG、VML和WebGL。相对而言,VML是一种较古老的技术,虽然未成为W3C标准,但被早期的IE浏览器(IE9以下)和微软Office广泛使用,目前已经远离了浏览器战场。所以可供选择的仅剩SVG...
  • 自加入unity WebGL平台以来,Unity的开发团队就一直致力于优化WebGL的内存消耗。我们已经在Unity使用手册上有对于WebGL内存管理的详尽分析,甚至在Unite Europe 2015与Unite Boston 2015两届大会上,也有专题对其...
  • WebGL-Inspector, 高级web调试工具WebGL是由 gDEBugger 和 PIX inspired的工具,目的是使高级web应用程序的开发更加容易。 Firebug和开发者工具对于 html/js来说是什么,web检查器是。特性在现有应用程序中嵌入...
  • luma.gl | luma.gl:用于基于WebGL的数据可视化的高性能工具包 总览 luma.gl是一个WebGL工具箱,主要致力于数据可视化用例。...但是,与许多其他WebGL API不同,开发人员可以选择使用luma.gl中支持其用例的部分,而将
  • WebGL Insight-crx插件

    2021-04-01 20:21:02
    Insight是一个WebGL调试工具包,提供多种功能,可实现更高效的WebGL开发和更高效的WebGL应用程序。 功能:Mipmap检查器深度检查器透支检查器调用堆栈时间轴和统计信息程序使用计数重复的程序使用检测器程序查看器...
  • 开发手札:unity手机端webgl运行

    千次阅读 2020-08-13 22:52:42
    最近学车一个月了,每周... 其实unity的webgl很早就支持手机端运行了,只是unity官方觉得webgl版本在性能和易用性上并不完善,所以一直屏蔽webgl在手机端运行而已,对于这种屏蔽我们随意修改一个函数即可。 我们现...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,046
精华内容 3,218
关键字:

webgl开发工具