Babylon.js 入门实战：Draco 压缩模型的加载与性能优化

1次阅读

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

在 Web3D 应用开发中，模型资源往往成为性能瓶颈。一个未优化的建筑场景 GLTF 模型可能达到 50MB+，导致：

首屏加载时间超过 10 秒（移动端更甚）
内存占用飙升引发页面卡顿
流量消耗影响用户体验

传统解决方案如减面、分块加载往往需要美术人员介入，而 Draco 压缩技术能在不修改原模型的情况下，实现 70%-90% 的压缩率。

维度	标准 GLTF	Draco 压缩版
文件大小	原始大小（如 30MB）	缩减 70%-90%（如 3MB）
解码方式	直接解析	需要运行时解码
CPU 消耗	低	中（依赖设备性能）
适用场景	开发调试	生产环境

关键结论 ：对于需要快速加载的复杂场景（如电商 3D 展示），Draco 是必选项。

确保项目中包含 Babylon.js 核心库和 Draco 解码模块：

npm install @babylonjs/core @babylonjs/serializers

Babylon.js 默认不包含 Draco 解码器，需通过 CDN 或本地引入：

import "@babylonjs/core/Meshes/dracoCompression";
import {DracoCompression} from "@babylonjs/core/Meshes/Compression/dracoCompression";

// 初始化解码器（通常在场景创建后执行）const dracoCompression = new DracoCompression();
await dracoCompression._initDecoder();

使用 AssetManager 实现带进度显示的加载：

const assetsManager = new AssetsManager(scene);
const modelTask = assetsManager.addMeshTask(
  "load-draco-model",
  "","/models/","room.drc"
);

// 进度回调
modelTask.onProgress = (task, progress) => {console.log(` 加载进度: ${progress}%`);
};

// 错误处理
modelTask.onError = (task, message) => {console.error("加载失败:", message);
};

await assetsManager.loadAsync();

通过 dracoCompression 参数控制解码质量：

// 在加载前配置
DracoCompression.Configuration = {
  decoder: {
    wasmUrl: "https://preview.babylonjs.com/draco_wasm.js",
    wasmBinaryUrl: "https://preview.babylonjs.com/draco_wasm.wasm",
  },
  decompressionSpeed: 5, // 1-10，越高解码越快但质量越低
};

import {SceneLoader} from "@babylonjs/core/Loading/sceneLoader";
import {DracoCompression} from "@babylonjs/core/Meshes/Compression/dracoCompression";

async function loadDracoModel(scene: Scene) {
  try {
    // 初始化解码器
    const dracoCompression = new DracoCompression();
    await dracoCompression._initDecoder();

    // 加载模型
    const result = await SceneLoader.ImportMeshAsync(
      "","models/","chair.drc",
      scene,
      null,
      ".drc"
    );

    console.log("模型顶点数:", result.meshes[0].getTotalVertices());
  } catch (err) {console.error("模型加载异常:", err);
  }
}