GLB格式解析与3D模型压缩实战：从原理到最佳实践

1次阅读

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

3D 模型在现代 Web 和移动应用中扮演着越来越重要的角色，从电子商务的产品展示到游戏开发，再到 AR/VR 体验，都离不开高质量的 3D 内容。GLB 格式作为 glTF 的二进制版本，因其自包含、高效和广泛兼容的特性，已成为 3D 模型传输和渲染的首选格式。

然而，未经优化的 GLB 模型往往会带来一系列性能问题：

文件体积庞大导致加载时间延长，影响用户体验
高精度网格数据造成内存占用过高，在移动设备上容易引发崩溃
未压缩的纹理资源占据大量带宽，增加用户流量消耗
复杂的动画数据难以在性能有限的设备上流畅播放

这些痛点在实际项目中尤为明显。例如，一个包含 10 万面的建筑模型，未经压缩的 GLB 文件可能达到 50MB 以上，即使是在高速网络环境下，加载也需要数秒时间。而在移动设备上，这样的模型很容易耗尽可用内存，导致应用闪退。

针对 GLB 模型压缩，目前主流有几种技术方案，各有其特点和适用场景：

Draco 压缩
优势：Google 开发的专有算法，压缩率高（通常可达 50-70%），支持顶点位置、法线、UV 等属性的压缩
劣势：需要运行时解码，增加 CPU 开销；部分老旧设备可能不支持
Meshopt
优势：开源算法，解码速度快，特别适合 Web 环境；支持几何和动画数据的压缩
劣势：压缩率略低于 Draco（通常在 30-50% 之间）
纹理压缩
优势：可大幅减少纹理数据体积（JPEG/PNG → Basis Universal）
劣势：需要 GPU 支持特定纹理格式
量化处理
优势：简单有效，通过降低数据精度减少体积
劣势：过度量化可能导致模型质量下降

对于大多数应用场景，推荐组合使用这些技术：用 Draco 处理几何数据，Basis 压缩纹理，再配合适当的量化，可以在质量和性能间取得良好平衡。

GLB 文件本质上是一个包含 JSON 和二进制数据的容器格式。其结构如下：

12 字节的头部（包含 magic、版本和长度信息）
JSON 块（包含场景结构、材质定义等）
二进制块（包含顶点数据、索引、纹理等）

理解这个结构对有效压缩至关重要，因为我们需要针对不同类型的数据采用不同的压缩策略。

几何数据（顶点位置、法线等）通常占据模型体积的很大部分。压缩步骤包括：

顶点属性重组：将分散的属性数据重新排列以提高压缩效率
量化：将 32 位浮点转换为 16 位或 8 位整数
应用压缩算法（如 Draco）

纹理压缩通常能带来最显著的体积缩减：

分辨率调整：根据目标显示尺寸降低纹理尺寸
格式转换：使用 Basis Universal 等支持 GPU 加速的纹理格式
质量设置：调整压缩参数平衡质量和体积

对于包含动画的模型，可以：

减少关键帧数量
量化动画数据
使用 Meshopt 压缩

import {NodeIO, Texture, Document} from '@gltf-transform/core';
import {draco, textureCompress, quantize} from '@gltf-transform/functions';

async function compressGLB(inputPath, outputPath) {
  // 初始化 IO
  const io = new NodeIO();

  // 读取 GLB 文件
  const document = await io.read(inputPath);

  // 应用压缩流程
  await document.transform(
    // Draco 压缩几何数据
    draco(),

    // 量化顶点数据
    quantize(),

    // 压缩纹理
    textureCompress({
      targetFormat: 'webp',
      quality: 80,
    })
  );

  // 写入压缩后的文件
  await io.write(outputPath, document);
}

// 使用示例
compressGLB('model.glb', 'model-compressed.glb')
  .then(() => console.log('压缩完成'))
  .catch(console.error);

def quantize_glb(glb_path, output_path, position_bits=14, texcoord_bits=12):
    """
    自定义量化处理 GLB 文件
    :param glb_path: 输入 GLB 文件路径
    :param output_path: 输出路径
    :param position_bits: 位置属性量化位数
    :param texcoord_bits: UV 坐标量化位数
    """
    import pygltflib

    # 加载 GLB 文件
    gltf = pygltflib.GLTF2().load(glb_path)

    # 处理每个 mesh
    for mesh in gltf.meshes:
        for primitive in mesh.primitives:
            # 获取访问器
            position_acc = gltf.accessors[primitive.attributes.POSITION]
            normal_acc = gltf.accessors[primitive.attributes.NORMAL]
            texcoord_acc = gltf.accessors[primitive.attributes.TEXCOORD_0]

            # 应用量化
            position_acc.normalized = False
            position_acc.componentType = 5126  # FLOAT -> 5123 (SHORT)
            position_acc.quantize(position_bits)

            normal_acc.normalized = True
            normal_acc.componentType = 5123  # SHORT

            texcoord_acc.normalized = True
            texcoord_acc.componentType = 5123  # SHORT
            texcoord_acc.quantize(texcoord_bits)

    # 保存量化后的文件
    gltf.save(output_path)

我们对一个典型的 3D 角色模型进行了压缩测试，结果如下：