cesium 源码分析 worker与webassmbly

        当前cesium的代码有有一部份是关于解压Draco压缩过的gltf/glb文件的过程，这个过程封装在了DracoLoader.js中，这个过程中使用到了worker+webassmbly提高执行效率，现在大致分解一下执行的过程，至于如何编写wasm文件以及如何执行可参考Emscripten官网，使用emsdk工具链处理。

      DracoLoader.js中调用线程的过程代码如下：

// 全局变量
DracoLoader._decoderTaskProcessor = undefined;
// draco解析环境准备就绪的状态
DracoLoader._taskProcessorReady = false;
// 派生Draco环境，派生类与元类参数大致相同
DracoLoader._getDecoderTaskProcessor = function () {
  // 如果全局单例没有创建就创建
  if (!defined(DracoLoader._decoderTaskProcessor)) {
    // 创建任务处理过程
    var processor = new TaskProcessor(
      "decodeDraco",          // Draco解析类
      DracoLoader._maxDecodingConcurrency
    );
    // 初始化webassmbly相关过程，只要是加载wasm文件
    processor
      .initWebAssemblyModule({
        modulePath: "ThirdParty/Workers/draco_wasm_wrapper.js",   //  wasm封装类(js封装wasm接口)
        wasmBinaryFile: "ThirdParty/draco_decoder.wasm",          //  wasm文件
        fallbackModulePath: "ThirdParty/Workers/draco_decoder.js",//  浏览器不支持wasm时的替代类
      })
      .then(function () {
        DracoLoader._taskProcessorReady = true;     // draco解析环境准备就绪的状态
      });
    DracoLoader._decoderTaskProcessor = processor;  // 保存为全局实例
  }

  return DracoLoader._decoderTaskProcessor;         // 返回全局实例
};

          可以看到将这个处理过程封装在了TaskProcessor.js（封装了worker）中，这其中使用了4个文件decodeDraco、draco_wasm_wrapper.js、draco_decoder.wasm、draco_decoder.js。

        decodeDraco文件，这个是接收主线程数据的类,也是线程种真正调用draco_wasm_wrapper接口的类;

        draco_wasm_wrapper.js文件用来封装wasm对js所开放的接口，如果想深入研究可以看看这个文件的源码并结合官网了解；

        draco_decoder.wasm文件就是wasm格式的二进制文件，这个文件很小（-Oz优化后），因为是二进制所以对调试不是很友好，通过C++编译时调试方式大致分为3种，在c++种添加printf控制台信息、通过一种叫做s语言的解析器翻译成s语言（类汇编）可以单步调试、还有一种使用google插件C/C++ devtools support (DWARF)工具调试，可以看c++源码也可以单步调试；

        draco_decoder.js文件，如果当前浏览器环境不支持webassembly时可以将其他语言编译为asm.js的javascript文件。

        下面看看主线承让处理wasm的过程，代码如下：

// 向worker中发送用于加载和使用wasm的配置信息，同时含有对不支持wasm不支持时如何处理的类
TaskProcessor.prototype.initWebAssemblyModule = function (webAssemblyOptions) {
  // 没有定义线程就创建
  if (!defined(this._worker)) {
    this._worker = createWorker(this);
  }

  // 
  var deferred = when.defer();
  var processor = this;
  var worker = this._worker;
  // 获取wasm加载时的相关配置信息
  getWebAssemblyLoaderConfig(this, webAssemblyOptions).then(function (
    // wasm的配置信息（js文件的绝对路径，wasm的二进制文件）
    wasmConfig
  ) {
    // 检查浏览器是否支持内存转移
    return when(canTransferArrayBuffer(), function (canTransferArrayBuffer) {
      var transferableObjects;
      // wasm的二进制文件
      var binary = wasmConfig.wasmBinary;
      // 如果内存可以转移，将wasm二进制文件的内存转移到线程中
      if (defined(binary) && canTransferArrayBuffer) {
        transferableObjects = [binary];
      }
      // 接收子线程的处理结果（线程中的requrejs引导文件加载完成）
      worker.onmessage = function (event) {
        // 重新设置子线程的消息接收函数（数据处理完成时回调）
        worker.onmessage = function (event) {
          // 线程任务完成时调用
          completeTask(processor, event.data);
        };
        // promise返回
        deferred.resolve(event.data);
      };

      // 向线程传送数据
      worker.postMessage(
        { webAssemblyConfig: wasmConfig },  // wasm配置信息
        transferableObjects   //转移的内存
      );
    });
  });

  return deferred;
};

可以看到wasm文件是在主线程中使用xhr下载的，然后将wasm的二进制文件传到子线程中去，线程相关的解析可以查看我之前的cesium源码解析 worker。

        下面看看decodeDraco.js这个类

// wasm模块加载完成后向主线程发送消息
function initWorker(dracoModule) {
  // 解析的接口
  draco = dracoModule;
  // 创建接收主线程数据并解析的函数
  self.onmessage = createTaskProcessorWorker(decode);
  // 通知出现成wasm解析函数准备就绪
  self.postMessage(true);
}

// 配置wasm接口
function decodeDraco(event) {
  var data = event.data;

  // Expect the first message to be to load a web assembly module
  // 主线程中传入的wasm配置信息
  var wasmConfig = data.webAssemblyConfig;
  if (defined(wasmConfig)) {
    // Require and compile WebAssembly module, or use fallback if not supported
    // 通过requirejs方式加载draco_wasm_wrapper.js
    return require([wasmConfig.modulePath], function (dracoModule) {
      // wasm文件存在
      if (defined(wasmConfig.wasmBinaryFile)) {
        // draco_wasm_wrapper.js文件下载完成
        if (!defined(dracoModule)) {
          // 如果draco_wasm_wrapper.js未定义使用默认的
          dracoModule = self.DracoDecoderModule;
        }

        //调用draco_wasm_wrapper.js中的函数，主要是将wasm相关的接口绑定到compiledModule上
        dracoModule(wasmConfig).then(function (compiledModule) {
          // 初始化线程的消息
          initWorker(compiledModule);
        });
      } else {
        initWorker(dracoModule());
      }
    });
  }

用来在线程中准备wasm接口的过程，接口准备就绪后向主线程发送通知之后就等着接收解析数据。