3D-Tiles-Renderer加载Draco压缩模型实战：性能优化与避坑指南

1次阅读

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

在 WebGL 应用中加载 3D-Tiles 时，使用 Draco 压缩的模型经常遇到三个典型问题：

解码耗时：浏览器主线程阻塞导致界面卡顿
内存激增：解压后的几何数据占用内存翻倍
纹理丢失：压缩后的材质路径引用异常

需要先加载 WASM 解码模块，推荐使用静态文件托管以避免 CDN 延迟问题：

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

const initDecoder = async () => {const dracoLoader = new DRACOLoader();
  // 建议将 decoder 文件放在 public 目录下
  dracoLoader.setDecoderPath('/draco/');
  dracoLoader.setWorkerLimit(4); // 根据 CPU 核心数调整
  await dracoLoader.preload();
  return dracoLoader;
};

批量表 (batchTable) 需要单独解压处理，特征表 (featureTable) 的二进制数据可能包含 Draco 压缩标识：

const parseCompressedTile = (tile) => {if (tile.featureTable.json.extensions?.DRACO) {
    // 获取 Draco 压缩的 bufferView 索引
    const bufferViewIndex = tile.featureTable.json.extensions.DRACO.bufferView;
    const compressedData = tile.featureTable.binary[bufferViewIndex];
    return decompressInWorker(compressedData);
  }
  return tile;
};

主线程与 Worker 的通信示例（包含错误重试机制）：

// worker.js
self.onmessage = async (e) => {
  try {const { id, dracoData} = e.data;
    const {decompress} = await import('draco-decoder');
    const geometry = decompress(dracoData);
    self.postMessage({id, geometry}, [geometry.attributes.position.buffer]);
  } catch (err) {self.postMessage({ id, error: err.message});
  }
};

// 主线程
const workerPool = new Map();
const decompressInWorker = (data) => {return new Promise((resolve) => {
    const workerId = workerPool.size % MAX_WORKERS;
    const worker = workerPool.get(workerId) || new Worker('worker.js');

    const onMessage = ({data}) => {if (data.id === workerId) {worker.removeEventListener('message', onMessage);
        data.error ? retryDecompress(data) : resolve(data.geometry);
      }
    };

    worker.addEventListener('message', onMessage);
    worker.postMessage({id: workerId, dracoData: data}, [data]);
  });
};

测试模型：城市建筑白模（顶点数 120 万）

指标	原始 GLB	Draco 压缩(7 级)	优化幅度
文件大小	48MB	6.2MB	-87%
解码时间	–	680ms	–
内存占用	310MB	190MB	-38%
首帧渲染时间	1.2s	0.9s	-25%

需要特别注意 Safari 的 WASM 内存限制：

// 检测 iOS 设备
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);

if (isIOS) {
  // 降低解码精度
  dracoLoader.setDecoderConfig({ 
    type: 'js', // 强制使用 JS 解码器
    attributeOptions: {POSITION: { quantizationBits: 14} // 默认 16 位会溢出
    }
  });
}

// 分块加载大模型
const CHUNK_SIZE = 50000; // 每批顶点数

for (let i = 0; i < totalVertices; i += CHUNK_SIZE) {const chunkData = await fetchChunk(i, CHUNK_SIZE);
  const geometry = await decompressInWorker(chunkData);
  scene.add(new Mesh(geometry, material));
  await nextFrame(); // 每帧处理一批}

通过实验得出的质量与性能平衡点：