为什么 3D 模型在浏览器里加载很慢?
3D 模型在浏览器里加载慢时,大家最先看到的是文件大小。文件大小确实重要,但它不是全部。一个较小的文件也可能解码很慢、占用过多 GPU 内存,或者在移动设备上渲染卡顿。一个较大的文件,如果结构简单、贴图合理,也可能加载得比较稳定。
真正要问的是:成本发生在哪里?下载、解析、压缩解码、贴图上传、shader 编译、相机适配、首帧渲染,都可能让用户觉得“模型很慢”。
排查时,先不要直接怪查看工具。可以按下面的顺序看。
1. 先看模型本身
把文件放进本地或浏览器本地的 3D 模型查看,先记录这些信息:
- 文件大小
- 文件格式
- 网格数量
- 顶点数量
- 三角面数量
- 边界尺寸
- 是否依赖外部文件
如果模型有几百万面、边界异常大、网格拆得很碎,浏览器加载慢并不奇怪。如果模型看起来很简单,但文件很大,问题可能主要在贴图或嵌入数据。
2. 贴图经常比几何更贵
很多模型看起来不复杂,但里面可能包含多张 4K 或 8K 贴图,比如 base color、normal、roughness、metalness、emission、occlusion。
大贴图有两层成本:
- 下载体积变大。
- 上传到 GPU 后占用显存。
在低性能设备上,贴图上传可能造成明显停顿。商品缩略图、小画布预览、文档截图通常不需要最高贴图分辨率。先缩贴图,往往比一上来调几何压缩更有效。
3. 几何面数仍然会拖慢交互
用户旋转、缩放、检查模型时,三角面数量会直接影响渲染压力。CAD 导出、3D 扫描、雕刻模型和没有清理过的素材包,常常包含远超网页预览需求的几何细节。
重点检查:
- 三角面数量是否过高。
- 是否有重复网格。
- 隐藏对象是否也被导出。
- 细小倒角在当前视距下是否有意义。
- CAD 零件是否保留了过多内部细节。
几何简化可以帮忙,但要做前后视觉对比。商品边缘、logo、孔洞、机械结构很容易被过度简化破坏。
4. 压缩会转移成本
Draco 和 meshopt 可以减少下载体积,但它们需要解码。也就是说,一部分成本会从网络传输转移到 CPU。大模型通常值得这样做;小模型不一定。
压缩模型仍然慢,常见原因包括:
- 查看器需要先加载 decoder。
- decoder 没有缓存。
- 用户设备 CPU 较弱。
- 模型用了查看器未配置的扩展。
- 文件变小了,但贴图仍然过大。
如果压缩后的 GLB 更小,但首帧没有更快,就要把网络时间和解码时间分开看,不能只看压缩率。
5. 网格拆分和材质数量也重要
一个模型如果由几百个小网格组成,即使每个网格不大,也可能很贵。每个网格、材质、节点边界都可能带来额外开销。对静态商品预览来说,合并兼容网格、移除未用材质、实例化重复零件,通常会让浏览器更轻松。
但不要盲目把所有节点拍平。动画、可选零件、材质分区、节点命名都可能有业务意义。优化前先判断模型最终要不要被拆分、选择或动画控制。
6. 用户设备限制是真实存在的
你的工作站能顺畅加载 150 MB 模型,不代表所有用户都可以。学生电脑、旧 Android 手机、低内存浏览器标签页、显卡驱动问题、浏览器插件,都会影响 WebGL 表现。
所以浏览器本地工具设置文件大小上限是合理的。文件没有上传,但浏览器仍然要解析文件、分配数组、上传贴图并持续渲染。
如果目标用户包括移动端或普通办公电脑,测试时不要只用自己的高配机器。至少用一个更接近真实用户的浏览器环境看首屏、旋转和截图导出是否稳定。
实用排查顺序
- 先本地预览,记录模型统计。
- 如果贴图占主要体积,先缩贴图。
- 移除未使用节点、网格、材质和动画。
- 只在视觉质量可接受时减少几何。
- 目标查看器支持时再用 Draco 或 meshopt。
- 至少在一台较弱设备上测试。
- 比较首帧时间,而不是只看最终文件大小。
一句话总结
浏览器里的 3D 模型加载慢,通常来自大贴图、高面数、压缩解码、网格和材质过碎、设备内存不足等因素。先检查模型统计,再处理最大的成本。文件大小很重要,但它只是网页 3D 性能的一部分。