cesium 源码分析 worker与webassmbly

Cesium中Draco压缩gltf/glb文件的解码流程解析

最新推荐文章于 2025-10-24 11:30:00 发布

原创

最新推荐文章于 2025-10-24 11:30:00 发布 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #es6

本文详细介绍了Cesium中使用DracoLoader.js解压Draco压缩的gltf/glb文件的过程，涉及worker线程、WebAssembly的运用。DracoLoader首先初始化解码环境，加载wasm模块，然后在worker中进行解码操作。解码过程包括加载draco_wasm_wrapper.js、draco_decoder.wasm和draco_decoder.js，确保在浏览器支持或不支持WebAssembly的情况下都能运行。此外，文章还提到了解码Draco.js文件在子线程中的作用，等待主线程的数据进行解码。

当前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_de

最低0.47元/天解锁文章