GLB模型文件在线压缩实战：基于Draco与WebAssembly的高效解决方案

1次阅读

没有评论

共计 2410 个字符，预计需要花费 7 分钟才能阅读完成。

在 WebGL 项目中，GLB 作为 glTF 的二进制格式，虽然比 OBJ/FBX 等传统格式更轻量，但复杂模型仍可能达到数十 MB。我们曾遇到一个家具展示项目：

原始 GLB 文件：48MB
首次加载时间：12 秒（4G 网络）
移动端崩溃率：23%（低端 Android 设备）

传统服务端压缩方案存在两个致命缺陷：

上传 - 压缩 - 下载的往返延迟（即使 1MB 模型也要增加 1.5 秒以上等待）
需要维护额外的压缩服务器（AWS Lambda 成本约 $0.02/ 千次调用）

我们对比了三种主流算法：

算法	压缩率	解码速度	浏览器支持
Draco	75%	快	需 WASM
Meshopt	50%	极快	纯 JS
BasisU	80%	慢	需扩展

选择 Draco 的核心原因：

three.js 官方维护 DRACOLoader
Google 长期支持（Android ARCore 底层使用）
支持顶点属性分离压缩（可只压缩法线 /UV）

import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader.js';

const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');
loader.setDRACOLoader(dracoLoader);

关键配置项：

decoderPath必须指向正确版本（v1.5.6 后 API 有变动）
建议预加载 decoder：dracoLoader.preload()

实测发现：iPhone 12 上超过 50MB 的模型解码会崩溃。解决方案：

const decoderConfig = {
  type: 'js',
  wasmUrl: 'draco_decoder.wasm',
  memoryInitializerPrefixURL: 'decoder/'
};

dracoLoader.getDecoderModule().then(module => {module.dracoDecoder.setWorkerLimit(1); // iOS 限制线程数
  module.dracoDecoder.setFreeUnusedMemory(true); // 主动释放内存
});

const encoder = new DracoEncoderModule.DracoEncoder();
encoder.SetSpeedOptions(5, 5); // 压缩速度 vs 质量（0-10）encoder.SetAttributeQuantization(DracoEncoderModule.POSITION, 14 // 14 位精度 =0.01mm 级误差);

<!DOCTYPE html>
<script type="module">
  import {GLTFLoader} from 'https://cdn.jsdelivr.net/npm/three@0.132.2/examples/jsm/loaders/GLTFLoader.js';
  import {DRACOLoader} from 'https://cdn.jsdelivr.net/npm/three@0.132.2/examples/jsm/loaders/DRACOLoader.js';

  const modelInput = document.getElementById('model-upload');
  modelInput.addEventListener('change', async (e) => {const file = e.target.files[0];
    const arrayBuffer = await file.arrayBuffer();

    // 初始化压缩器
    const encoderModule = await new Promise(resolve => {DracoEncoderModule().then(module => resolve(module));
    });

    const encoder = new encoderModule.DracoEncoder();
    encoder.SetSpeedOptions(7, 7);

    // 执行压缩（伪代码，实际需处理几何数据）const compressedData = encoder.EncodeMeshToDracoBuffer(
      geometry.vertices,
      geometry.indices
    );

    // 生成新 GLB
    rebuildGLB(compressedData).then(glb => {console.log(` 压缩完成：${file.size}→${glb.size} bytes`);
    });
  });
</script>

测试设备：MacBook Pro M1 vs Redmi Note 10