3D-Tiles-Renderer加载Draco压缩模型文件的性能优化实践

1次阅读

没有评论

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

在三维地理信息系统中，加载大规模 3D 模型文件时常常面临两个主要问题：网络传输带宽限制和客户端内存消耗。特别是在使用 3D-Tiles-Renderer 加载 Draco 压缩的模型时，我们发现：

整体加载时间过长，导致用户体验不佳
内存占用峰值高，可能引起浏览器崩溃
主线程阻塞明显，界面出现卡顿

这些问题在大规模城市级 3D 场景中尤为突出。传统的一次性加载解压方式虽然实现简单，但无法满足实际生产需求。

常见的 3D 模型压缩方案主要有以下几种：

Draco 压缩 ：Google 开发的开源几何压缩库，压缩率高 (可达 90%)，但解压需要额外计算
Meshopt：基于顶点的压缩方案，解压速度快但压缩率较低
Gzip/Brotli：通用压缩算法，对二进制 glTF 效果有限

经过对比测试，我们最终选择 Draco 作为主要压缩方案，原因包括：

对顶点属性的压缩效果极佳
支持灵活的压缩级别设置
有成熟的 WebAssembly 实现
Three.js 原生集成支持

Draco 通过以下方式实现高效压缩：

几何量化 ：将浮点坐标转换为整数表示
预测编码 ：利用相邻顶点的相关性减少数据冗余
熵编码 ：应用变长编码进一步压缩数据
拓扑优化 ：对网格连接信息进行特殊编码

标准加载流程包含以下阶段：

请求 tileset.json 元数据文件
解析空间索引结构
按需请求 b3dm/pnts 等瓦片文件
解析瓦片头部信息
解压 Draco 压缩的几何数据
创建 Three.js 网格对象

我们改进后的方案采用分阶段处理：

元数据预加载 ：提前加载空间索引结构
视锥裁剪 ：只请求可视范围内的瓦片
优先级队列 ：按距相机距离排序加载任务
渐进解压 ：分块处理 Draco 压缩数据

// Draco 解压工作器封装
class DracoWorker {
  private worker: Worker;
  private taskQueue = new Map<number, (data: any) => void>();
  private nextTaskId = 0;

  constructor() {this.worker = new Worker('draco-worker.js');
    this.worker.onmessage = (e) => {const { taskId, data} = e.data;
      const resolver = this.taskQueue.get(taskId);
      if (resolver) {resolver(data);
        this.taskQueue.delete(taskId);
      }
    };
  }

  async decode(buffer: ArrayBuffer): Promise<THREE.BufferGeometry> {
    const taskId = this.nextTaskId++;
    return new Promise((resolve) => {this.taskQueue.set(taskId, resolve);
      this.worker.postMessage({taskId, buffer}, [buffer]);
    });
  }
}

// 3D-Tiles 加载器改造
class OptimizedTilesRenderer extends TilesRendererBase {private dracoWorker = new DracoWorker();

  protected async parseTileContent(buffer: ArrayBuffer): Promise<THREE.Object3D> {const tileContent = parseTileHeader(buffer);

    if (tileContent.isDracoCompressed) {
      // 使用工作线程异步解压
      const geometry = await this.dracoWorker.decode(tileContent.dracoData);
      return createMeshFromGeometry(geometry, tileContent.material);
    }

    // 常规处理流程...
  }
}

测试场景：包含 50 万建筑物的城市模型