模型压缩优化

打开软件默认就在这个页面。支持单文件和批量两种模式。

压缩流程

① 导入模型 — 点击"选择文件"或拖入 .glb / .gltf 文件

导入后软件自动显示模型统计和体检诊断（重复顶点、超规格纹理、缺失法线等），并给出压缩参数建议。

只支持 glTF / GLB 格式输入

压缩功能仅接受 .glb 和 .gltf 文件。FBX、OBJ 等其他格式需先通过格式转换转为 GLB，再进行压缩。

② 选择引擎

	Draco	Meshopt（推荐）
压缩率	高	更高
加载速度	快	更快（WebGPU 友好）
纹理压缩	JPEG / WebP / KTX2	BasisU（ETC1S / UASTC）
框架兼容	Three.js / Babylon.js / model-viewer 原生支持	仅 Three.js（需配置解码器）
适合场景	旧项目、需要广泛兼容	新项目、追求极致性能

不确定选哪个？选 Meshopt

Meshopt 不可用时软件会自动降级到 Draco 并提示，不会中断处理。

Meshopt 格式的加载限制

使用 Meshopt 引擎压缩后的模型不能被 Babylon.js 和 model-viewer 直接加载，只支持 Three.js（r136+）。如果你的项目使用这两个框架，请选择 Draco 引擎。

③ 设置压缩级别

默认 7，适合绝大多数场景。

级别	场景
1–3	工程 / 医疗模型，精度优先
4–6	产品展示、建筑可视化
7（默认）	Web3D 通用，最佳起点
8–9	移动端、低带宽，可接受轻微失真
10	远景装饰，几何失真明显

级别越高不等于越好

压缩级别 10 可能导致顶点位置偏移、曲面变形，在模型外观上产生明显的"锯齿"或"破面"。建议先用 7，出现问题时再向下调整，不要一开始就设最高。

④ 开始压缩 — 点击"开始优化"，右侧实时显示进度

⑤ 确认结果 — 压缩完成后查看对比窗口，建议每次都点"预览效果"确认外观，因为压缩参数不合适在视觉上才能直接看出来

批量压缩

打开"批量模式"→ 选择文件夹 → 开始。软件自动递归扫描子文件夹中所有 .glb / .gltf，支持暂停 / 继续 / 取消。

批量模式下纹理设置

批量模式与单文件模式共用同一套参数，包括引擎选择、压缩级别和纹理设置。开始批量处理前请先确认参数。

纹理设置

点击"纹理设置"按钮配置纹理处理。

Draco 引擎：JPEG（兼容最佳）/ WebP（体积小 30%）/ KTX2（GPU 原生，性能最优）

Meshopt 引擎：BasisU 内置，选 ETC1S（小体积）或 UASTC（高质量）

颜色贴图用 ETC1S，法线/高光贴图用 UASTC

ETC1S 压缩率更高但有损失；UASTC 质量接近无损但体积更大，适合对细节要求高的纹理（如法线贴图、高光贴图）。

纹理优化仅对 GLB 格式有效

如果目标格式选择的是 glTF（贴图独立存放），纹理设置中的 KTX2 / WebP 转换选项不会生效。需要纹理压缩时请将目标格式设为 GLB。

压缩后如何在项目中加载

为什么压缩后需要配置加载器？

Draco 和 Meshopt 都是有损几何压缩算法，浏览器本身不能直接解码这种格式，需要由加载器在运行时完成解码。下面的代码是必须的。

Draco：

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'

const dracoLoader = new DRACOLoader()
// 推荐：将解码器文件复制到项目 public 目录（避免依赖外部 CDN）
// cp node_modules/three/examples/jsm/libs/draco public/draco -r
dracoLoader.setDecoderPath('/draco/')

const loader = new GLTFLoader()
loader.setDRACOLoader(dracoLoader)
loader.load('model_optimized.glb', gltf => scene.add(gltf.scene))

Meshopt：

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js'

const loader = new GLTFLoader()
loader.setMeshoptDecoder(MeshoptDecoder)
loader.load('model_optimized.glb', gltf => scene.add(gltf.scene))

Meshopt + KTX2 纹理（同时配置两个）：

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js'
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js'

// renderer 是你的 THREE.WebGLRenderer 实例
const ktx2Loader = new KTX2Loader()
// 推荐：将转码器复制到项目 public 目录（避免依赖外部 CDN）
// cp node_modules/three/examples/jsm/libs/basis public/basis -r
ktx2Loader.setTranscoderPath('/basis/')
ktx2Loader.detectSupport(renderer) // 检测当前 GPU 支持的 KTX2 子格式

const loader = new GLTFLoader()
loader.setMeshoptDecoder(MeshoptDecoder)
loader.setKTX2Loader(ktx2Loader)
loader.load('model_optimized.glb', gltf => scene.add(gltf.scene))

Babylon.js 和 model-viewer 用户

这两个框架内置 Draco 支持，不需要额外配置，直接加载即可。但它们不支持 Meshopt 格式，请使用 Draco 引擎压缩。

高级量化参数（仅 Draco）

点击"高级参数"可单独调节精度，普通用户保持默认即可。

参数	说明	推荐范围
位置精度 qp	顶点坐标精度，值越高精度越高体积越大	8–12
法线精度 qn	影响光照效果细腻程度	6–10
UV 精度 qt	影响贴图映射准确度	6–10

量化参数与压缩级别的关系

量化参数是独立控制的，不受压缩级别影响。如果降低了压缩级别但模型仍然失真，可能是量化精度过低导致的，需要单独提高 qp 值。