在不同分辨率下，如何把控线上云展厅的素材压缩？

一个让不少企业吃过大亏的真相是：花了几十万制作的3D展厅，上线后因为素材太大、加载太慢，相当比例的访客在首页还没完全渲染完就关掉了页面。

这不是设备的问题，是线上云展厅的素材压缩从一开始就没考虑过多屏适配。

下面，由专业从事线上云展厅设计与制作多年的【VR云展科技平台】为大家介绍一下：

一、为什么分辨率成了压缩的拦路虎

1、屏幕尺寸越杂，素材压力越大

我们服务的项目里，同一个线上云展厅可能同时在手机端、平板端、电脑端和VR头显里打开。

拿一张4K分辨率的贴图来说，它在27寸显示器上看着很舒服，但在手机上不仅浪费带宽，还会触发内存溢出导致闪退。

反过来，如果为了照顾移动端把所有素材压到1080P，大屏端就会出现明显的像素颗粒感。

2、压缩不是一刀切，而是分层处理

从我们过往项目经验来看，可行的做法是把素材拆成三层：基础层（640px宽）、标准层（1920px宽）、高精层（4096px宽）。

系统根据访问设备的屏幕宽度自动匹配对应层级。

这个逻辑听起来简单，但真正执行起来，需要建模师在导出时就按三个分辨率分别输出，工作量是翻倍的。

不少团队嫌麻烦，只用一套素材走天下，结果两头不讨好。

3、纹理格式的选择比压缩率更关键

在《虚拟现实技术应用指南》中提到，WebGL环境下不同纹理格式的解码效率差异可以达到3倍以上。

具体数据请以原书版本和原文为准。

我们实测下来，ASTC格式在移动端的表现优于传统的JPEG或PNG，而桌面端更适合BC7格式。

这意味着同一个线上云展厅里的墙面材质，需要根据终端设备动态切换纹理格式，而不是固守一种格式到底。

二、图片压缩的具体操作路径

1、区分静态背景与动态交互物的压缩策略

静态背景（如展厅墙壁、地面、天花板）占画面面积大，但视角相对固定，这类素材可以用较高的压缩率，质量参数设置在70%—80%即可。

而动态交互物（如展品模型、可点击的按钮、弹出面板）需要保持清晰度，压缩率控制在50%—60%比较稳妥。

我们在一次汽车展项目中吃过亏：车漆反射贴图压得太狠，结果用户在旋转查看车辆时，光斑出现了明显的色阶断层，客户当场要求重做。

案例发布前需取得客户授权。

2、利用Mipmap技术缓解远处模糊

Mipmap的原理是预先生成一组从小到大的纹理副本，当物体离镜头远时自动调用小尺寸版本，节省显存和带宽。

不少建模师会忽略这一步，认为“反正远景看不清，不用管”。

但实际上，如果不生成Mipmap，GPU在渲染远处物体时会强行拉伸小纹理，产生摩尔纹和闪烁，视觉体验大打折扣。

这个步骤虽然增加了一些存储空间（约33%），但换来的性能提升是值得的。

3、压缩前的色彩空间转换

RGB转YCbCr后再压缩，可以在相同码率下保留更多亮度细节，因为人眼对亮度的敏感度远高于色度。

线上云展厅里的文字标签、产品说明等需要清晰显示的内容，尤其适合这种处理方式。

我们通常在Photoshop或Substance Painter里完成转换，导出时选择YCbCr编码的DDS或KTX格式，而不是默认的RGB。

三、三维模型减面与LOD联动

1、LOD级别不是越多越好

《中国会展业发展研究报告》指出，超过90%的线上展会用户不会在单个展位停留超过45秒。

具体数据请以报告原文为准。

这意味着大部分情况下，模型只需要两个LOD级别就够了：一个是近距离精细版（三角面数约10万），一个是中远距离精简版（三角面数约2万）。

第三个LOD（极远距离）在很多场景下其实用不到，反而增加了导出和加载的复杂度。

2、减面的优先级：轮廓 > 细节

在减面时，保留外轮廓的顶点，去掉内部凹槽和微小起伏。

举个例子，一辆汽车的模型，车身弧线需要保留足够多的分段来维持平滑感，但车门把手上的防滑纹路可以合并成平面。

我们用这种方法把一个原本25万面的机械臂模型压到了4万面，肉眼几乎看不出区别，但加载速度提升了近一倍。

具体数据以项目记录为准。

3、实例化复用代替重复加载

同一个展台里如果有多个相同的椅子、灯具或装饰物，不要复制模型文件，而是用实例化（Instancing）的方式引用同一个模型。

这样在内存里只存一份几何数据，渲染时通过矩阵变换摆放到不同位置。

我们在做一个家具展项目时，用这个方法把总三角面数从800万降到了120万，帧率从15fps提升到了55fps。

具体数据以项目记录为准，案例发布前需取得客户授权。

四、视频与全景图的压缩取舍

1、全景图的分辨率阈值

360°全景背景图的分辨率并不是越高越好。

经过多次测试，我们发现8192×4096（8K）的全景图在VR头显里的画质提升相比6144×3072（6K）只有约10%，但文件体积却大了近一倍。

综合考虑加载速度和画质，6K是一个比较实用的平衡点。

如果是用在手机端，4K甚至2K就已经足够了。

具体数据以项目记录为准。

2、视频压缩的码率分配

线上云展厅里嵌入的产品演示视频，建议使用H.265编码，码率控制在8—12Mbps（1080P）或15—20Mbps（4K）。

同时开启自适应码率流，根据用户网速动态调整画质。

这里有一个常见的误区：很多人以为视频分辨率越高越好，实际上在窄带环境下，4K视频如果频繁缓冲卡顿，体验远不如流畅播放的720P。

3、缩略图预加载策略

展厅入口处的预览缩略图，尺寸控制在320×180像素，文件大小不超过50KB。

这些缩略图会在用户进入展厅前提前加载完毕，给用户一个“已经准备好了”的心理暗示。

真正的全尺寸素材则在后台异步加载，不影响首屏展示。

五、互动元素与UI资源的轻量化

1、图标字体代替图片按钮

按钮、导航箭头、关闭符号等UI元素，尽量使用SVG矢量图或图标字体（如Font Awesome），而不是PNG图片。

SVG的体积通常只有PNG的十分之一，而且缩放不失真。

我们曾经把一个展厅的UI从PNG换成SVG后，总资源体积减少了约3MB，对于移动端来说这个差距比较明显。

具体数据以项目记录为准。

2、动画序列帧改CSS实现

一些简单的旋转、闪烁、位移动画，用CSS3动画或WebGL Shader来实现，不要用GIF或视频序列帧。

CSS动画不消耗额外的网络带宽，而且响应更快。

只有那些复杂的粒子效果（如灯光闪烁、烟雾飘散）才需要用Canvas或WebGL渲染。

3、字体文件裁剪

如果展厅里有较多的中英文混排文本，字体文件可能会达到几MB甚至十几MB。

使用Font Subset工具只保留实际用到的字符，可以把字体文件压缩到原来的10%左右。

比如一个只用到500个常用汉字的展厅，字体文件可以从8MB降到0.8MB。

具体数据以项目记录为准。

六、压缩效果的验证与迭代

1、用真实设备测，别信模拟器

模拟器里的加载时间和帧率跟真实设备完全是两回事。

我们有一个项目在Chrome开发者工具的模拟模式下跑得很顺畅，结果在小米11上一测，页面直接崩溃——原因是模拟器忽略了内存限制。

从那以后，我们把测试设备清单固定为：iPhone SE（较低配置）、iPad Pro（中等配置）、Windows台式机（较高配置）、Quest 2（VR端），四个设备各跑一遍才算过关。

2、关注FCP和LCP指标

First Contentful Paint（首次内容绘制）应该控制在2秒以内，Largest Contentful Paint（较大内容绘制）控制在4秒以内。

如果超过这个阈值，用户流失率会明显上升。

我们会在每个展厅上线前用Lighthouse跑一轮性能审计，重点关注这两个指标。

3、建立素材压缩规范文档

把每次项目的压缩参数、测试结果、踩坑记录整理成文档，形成团队的内部知识库。

比如“金属材质贴图压缩率不能低于75%”“透明玻璃材质不能用JPEG只能用PNG”之类的经验，写下来之后新同事上手快得多，也不会重复犯同样的错误。

结语：差异化压缩策略是关键

线上云展厅的素材压缩，核心在于根据不同分辨率、不同终端特性、不同内容类型，制定差异化的压缩策略，而非追求单一维度的压缩率。

从纹理格式的选择到LOD级别的设置，从图片压缩的色域转换到视频码率的动态调整，每一步都需要结合真实的使用场景来做决策。

如果你也在做类似的展厅项目，不妨从今天提到的几个方向入手试试看，尤其是那个容易被忽视的纹理格式切换——往往就是那一步影响了用户的去留。

你在实际项目中遇到过哪些素材压缩的难题？

欢迎一起交流探讨。