1. 概述

2. Unity WebGL技术方案

2.1. Unity小游戏的两种技术方案

• Native Instant Game
• WebGL

2.2. WebGL方案的限制

2.3. Unity WebGL方案的运行结构

2.4. 方案必要的组件

• webgl Context Canvas，渲染输出
• WebAssembly，加载c/c++库，包括Unity引擎，il2cpp后的c#逻辑，游戏项目的代码库
• VirtualFileSystem，主要是MEMFS
• HTTP fetch，从远端下载资源
• HTTP DOM API，查找元素，事件注册，加载script

2.5. 方案可选组件

• WebSocket，连服务器，单机不用不影响
• IndexedDb，默认缺失相关组件会报错，可以通过初始配置关闭，关闭后相关文件（主要是PlayerPrefs）没有持久化（但不影响HTTP Cache，即通过上面HTTP fetch拿到的资源）。
• WebAudio，默认缺失相关组件会报错，可以在Unity编辑器里关闭。

3. 深入JS源代码

• 各个部分如何初始化
• 怎么启动帧循环
• 事件处理如何触发

3.1. Unity Webgl平台输出文件

• index.html ， 包含Canvas定义，渲染输出；脚本网页入口（相当于main函数入口）。
• TemplateData/，网页模板资源，游戏主要是Canvas，网页上的资源没有也不影响，不重要。
• Build/webgl.loader.js， 加载framework.js, webgl.data。
• Build/webgl.framework.js，加载/桥接wasm，有一js内存文件系统，事件转发，音频 。
• Build/webgl.data，打包Bundle外的数据文件，应该都在这里了。
• Build/webgl.wasm，引擎+C#逻辑, 优化参考微信小游戏和相关文档 https://github.com/wechat-miniprogram/minigame-unity-webgl-transform，太专业了，无出其右，对着做就行。

webgl.data

• data.unity3d
• RuntimeInitializeOnLoads.json
• ScriptingAssemblies.json
• boot.config
• Il2CppData/Metadata/global-metadata.dat
• Resources/unity_default_resources

3.2. 启动流程

3.2.1. index.html

• html元素，定义html页面元素，套模板（TemplateData/）。
• 另一部分是js脚本，完成系统的初始化。

• 配置

    var buildUrl = "Build";
    var loaderUrl = buildUrl + "/webgl.loader.js";
    var config = {
      dataUrl: buildUrl + "/webgl.data",
      frameworkUrl: buildUrl + "/webgl.framework.js",
      codeUrl: buildUrl + "/webgl.wasm",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "DefaultCompany",
      productName: "DefaultProduct",
      productVersion: "0.1",
      showBanner: unityShowBanner,
    };

      // To lower canvas resolution on mobile devices to gain some
      // performance, uncomment the following line:
      // config.devicePixelRatio = 1;

• 加载启动脚本， 构造出unityInstance就ok了。这里的unityInstance是js和Unity c#逻辑层交互的关键，一般一个页面就一个，全局存一下。如果有多个（同个页面同时操控多个游戏实例，实在想不出应用的场景），可以拿key在全局变量存一下。Unity的加载脚本都是createElement的方式加载到全局作用域，import的方式得自己改改。

    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
      createUnityInstance(canvas, config, (progress) => {
        progressBarFull.style.width = 100 * progress + "%";
            }).then((unityInstance) => {
              loadingBar.style.display = "none";
              fullscreenButton.onclick = () => {
                unityInstance.SetFullscreen(1);
              };
            }).catch((message) => {
              alert(message);
            });
          };
    document.body.appendChild(script);

3.2.2. 加载webgl.loader.js

• Module, 后面的framework会以此变量去做初始化，初始化好后，这个变量就是framework。
• config的转移，此前的Module定义的方法，可以在这里直接override，此后Unity也预留了一些判断，可以改变一些行为。

for (var parameter in config)
  Module[parameter] = config[parameter];

• unityInstance本身，常用的主要是给C#发消息的SendMessage，Unity的iOS/Android等各个平台都有，用过的看名字就知道。

var unityInstance = {
  Module: Module,
  SetFullscreen: ...
  SendMessage: ...
  Quit: ...
  GetMemoryInfo: ...
};

• Module.SystemInfo，系统信息。

  return new Promise(function (resolve, reject) {
    if (!Module.SystemInfo.hasWebGL) {
      reject("Your browser does not support WebGL.");
    } else if (!Module.SystemInfo.hasWasm) {
      reject("Your browser does not support WebAssembly.");
    } else {
      Module.startupErrorHandler = reject;
      onProgress(0);
      Module.postRun.push(function () {
        onProgress(1);
        delete Module.startupErrorHandler;
        resolve(unityInstance);
      });
      loadBuild();
    }

  function loadBuild() {
    downloadFramework().then(function (unityFramework) {
      unityFramework(Module);
    });

    var dataPromise = downloadBinary("dataUrl");
    Module.preRun.push(function () {
      Module.addRunDependency("dataUrl");
      dataPromise.then(function (data) {
        var view = new DataView(data.buffer, data.byteOffset, data.byteLength);
        ...
        Module.removeRunDependency("dataUrl");
      });
    });
  }

3.2.3. 加载webgl.framework.js

音频

文件系统

• MEMFS
• IDBFS
• FS
• SOCKFS
• DNS
• Linux C file api

    // Initialize the IndexedDB based file system. Module['unityFileSystemInit'] allows
    // developers to override this with their own function, when they want to do cloud storage
    // instead.
    var unityFileSystemInit = Module['unityFileSystemInit'] || function () {
      FS.mkdir('/idbfs');
      FS.mount(IDBFS, {}, '/idbfs');
      ...
    };
    unityFileSystemInit();

GL

webgl.wasm初始化

Browser及帧循环启动

JSEvents事件处理

4. APP小游戏的接入

• webgl Context Canvas，需要
• WebAssembly，需要。
• VirtualFileSystem，有内存就行。
• HTTP fetch，需要。
• WebSocket，连接服务器需要，如果仅是跑进游戏，是不需要的。
• IndexedDb，用本地文件系统接入，效率更高。
• WebAudio，用app自己的音频系统接入，效率更高。

5. 最后