unit3d 打包成webgl 与移动端android、iso进行交互操作

公司有个新需求，要为现有的android和ios增加3d展示功能。然而公司移动端的小伙伴们并不熟悉3d业务。于是就考虑用unity制作3d程序，然后打包成webgl项目，放到服务器上，移动端通过webview进行访问和交互操作。
由于webview缓存的存在，使位于服务器的webgl不会每次都下载文件。

仅记录重点

1. 尽量不要使用第三方插件和库。防止不支持
2. 在unity->file->build setting中设置导出格式为webgl
   2.1勾选development build、use pre-build engine、auto connect profiler后，会提升打包速度，但只适合测试使用。正式导出需要去掉勾选。
   2.2勾选script only build打包时会自动去掉没有用到的库和文件，大幅缩小打包尺寸。但是有些情况下会导致丢失脚本。
   2.3点击player setting 可以设置webgl的log、模版等信息。
   2.3.1将splash中的logging全都设置为none会有效缩小文件尺寸。
   2.3.2resolution and presentation 设置模版信息。
   在assets文件夹下，创建WbGLTemplates文件夹，然后在该文件夹下创建模版文件夹，该文件夹下的文件在输出webgl项目时复制到目标文件夹下。在resolution and presentation 中会出现该模版文件夹名，选择即可使用。
3. webgl与unity c#交互
   3.1 webgl 调用c#方法 ```gameInstance.SendMessage(“SentMassege”,“MyFunction2”,value);//带一个参数

   3.2 unity c#调用模版中的js方法```Application.ExternalCall("MyFunction1", vaule1，value2);```
   

4. 安卓机型有可能因为webview版本和硬件限制问题无法运行webgl 使用一下方法可以进行 webgl兼容性检测

    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d') && window.WebGLRenderingContext);
   }
   var title = document.getElementById("title");
   function support_canvas(){
    windows.android.support();
   }
   function unSupport_canvas(){
    windows.android.unSupport();
   }
   isSupportWebgl()?support_canvas():dissupport_canvas(); ```
   

5. 去掉移动端浏览器的webgl警告

    用"compatibilityCheck:function(e,t,r){t()},Blobs:{},loadCode"替换
    "compatibilityCheck:function\(e,t,r\)\{.+,Blobs:\{\},loadCode"该写法是c#的正则

6. 有些安卓5.1以上的机型不支持，可以替换android的Webview引擎，使用腾讯x5引擎，可以适配绝大部分手机。
7. 部分使用x5引擎的手机，会在运行webgl时调用摄像头。需要注意。
8. js与android、iso原生程序交互

2.function gotoPlay(info){
      const u = navigator.userAgent;
      if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) {
          //Android
          window.android.click();
      } else {
          //iOS
          window.webkit.messageHandlers.callbackHandler.postMessage("onclick");
      }
    }

10. 设置webgl 自适应屏幕

function ResetSize() {
      var canvas = document.getElementById("#canvas");
      canvas.height = document.documentElement.clientHeight;
      canvas.width = document.documentElement.clientWidth;
    }

11. 根据url get方法获取参数

    {
         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
         var r = window.location.search.substr(1).match(reg);
         return r === null ? "undefined":unescape(r[2]);
    }
    document.getElementById("cover").style.backgroundImage = "url('" + GetQueryString("name") + "_" + GetQueryString("lang") + ".png" + "')" ;