Three.js加载压缩后的GLB模型

前言

在使用Three.js开发网页3D程序时，为了节省带宽提升加载速度，有时候要加载压缩后的GLTF/GLB模型，本文介绍如何用Three.js加载使用Meshoptimizer或Draco压缩算法的模型

代码

首先，要将node_modules/three/examples/jsm/libs/draco复制到项目的public目录下，这是解码Draco需要用到的库

import * as THREE from 'three'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'
import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js'

// 模型路径
const modelPath = '你的模型路径'

// 新建 GLTF 加载器
const gltfLoader = new GLTFLoader()

// Draco解码器设置
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/') // 这里是页面请求路径，就是相对 public 目录中的路径
dracoLoader.setDecoderConfig({ type: 'wasm' })
dracoLoader.preload()
gltfLoader.setDRACOLoader(dracoLoader)

// Meshoptimizer解码器设置
gltfLoader.setMeshoptDecoder(MeshoptDecoder)

// 加载模型
const gltfModel = await gltfLoader.loadAsync(modelPath)

// 将模型放入场景
const gltfScene = gltfModel.scene
scene.add(gltfScene)

两种压缩算法对比

以下是 meshoptimizer 和 Draco 的对比，主要从压缩算法、性能、适用场景等方面进行比较：

Meshoptimizer

• 开发者: Arseny Kapoulkine (zeux)
• 主要功能: 网格优化和压缩
• 优化算法:
  • 顶点缓存优化
  • 过度绘制优化
  • 顶点提取优化
  • 网格简化
• 压缩算法: 提供高效的网格压缩算法，主要针对几何数据。
• glTF 支持: 通过 EXT_meshopt_compression 扩展支持 glTF 格式 5。
• 优点:
  • 综合优化：不仅压缩，还优化网格结构，提高渲染效率 2。
  • 快速解码：通常解码速度较快 3。
• 缺点:
  • 压缩比：在某些情况下，压缩比可能不如 Draco。
• 适用场景:
  • 需要同时优化和压缩网格数据的场景。
  • 对解码速度有较高要求的场景。
  • 希望在 glTF 中使用高效压缩的场景。

Draco

• 开发者: Google
• 主要功能: 几何数据压缩
• 压缩算法: 基于预测编码和量化的几何压缩算法。
• glTF 支持: 广泛支持 glTF 格式，是 glTF 的官方扩展之一。
• 优点:
  • 高压缩比：通常可以实现非常高的压缩比，尤其是在具有大量重复数据的网格上 4。
  • 广泛支持：被许多 3D 引擎和工具广泛支持。
• 缺点:
  • 解码速度：解码速度可能相对较慢，尤其是在 Web 平台上。
  • 优化功能较少：主要关注压缩，网格优化功能相对较少。
• 适用场景:
  • 对文件大小有严格要求的场景，例如移动设备或网络传输。
  • 对压缩比要求较高的场景。
  • 需要广泛兼容性的场景。

对比总结:

如何选择？

• 如果你的主要目标是尽可能减小文件大小，并且对解码速度要求不高，那么 Draco 可能更适合你。
• 如果你的目标是同时优化网格结构和减小文件大小，并且对解码速度有较高要求，那么 Meshoptimizer 可能更适合你。

此外，你还可以根据实际情况进行测试，比较两种压缩算法在你的特定模型上的表现，以便做出最佳选择。