场景优化？先来瓶“雪碧”

作者：天空

UE的黑客帝国案例都不陌生吧！场景中的建筑纹理清晰，城市视角下的建筑更是丰富多样，如果我说这样的一座城建筑只需要一张纹理你信吗？这张纹理就是“雪碧图”。

黑客帝国场景漫游 来源：黑客帝国场景

什么是雪碧图

雪碧图，英文原名叫 CSS sprites，sprite 指的是精灵，我们喝的雪碧，它的英文也是 sprite，应该直译为 “精灵” 的。但要符合中国市场，因为你不能说我喝的饮料叫“精灵”，那特别怪。于是就走音译的路线，翻译成 “雪碧” 了。

来源：微信表情包

雪碧图的诞生与应用

首先，我们先来了解一下，页面接受图片的过程。每张图片的显示是先由浏览器发送请求，然后服务器接受请求，返回请求内容。如果一个页面有上百张图片，哪怕是很小的图标，都需要经历一次这样的过程。那么，毋庸置疑，肯定会由于请求数量的增加让整个页面的加载速度降低，正因为如此，“雪碧图”（sprite）应运而生。

网页加载图片过程示意图 来源：知乎

“雪碧图”技术本质就是多图片拼合技术，以 2D 游戏的开发为例，游戏角色的行为如攻击、跳跃、蹲下等，就是由多张图片组合的结果，表现出来的不同动作其实就是不同图片的切换，状态很多，对应的图片很多，这样的话我们就要保存非常多的图片，不太好维护，同时在网页加载过程中服务器接受请求的次数也多，对加载性能有一定折损。所以通常会将这个角色的所有动作放到一个图片上，当角色行为发生变化时，就通过程序修改位置和宽高信息截取到对应的状态图片，从而减少服务器接收和发送请求的次数，提高页面的加载速度。

动画序列帧 来源：百度

城市场景程序建模

在城市模型的构建中，经常会面临大量纹理资源的管理和加载问题，每栋建筑物可能涉及多种不同的纹理贴图。如果按照传统方式为每种纹理单独加载，会导致服务器接收请求过多，严重影响场景加载速度和运行时的帧率表现。

4公里片区模型场景 图片制作自Mapmost平台测试案例

4公里片区模型纹理 图片制作自Mapmost平台测试案例

“雪碧图”这一概念最初源于网页前端开发中的图像优化技术，在三维城市建模和实时渲染领域中，其核心思想同样可以应用于大型三维场景的纹理管理中，尤其是在游戏开发和虚拟现实应用中，这种思想被延伸为“纹理集”（Texture Atlas）或“材质打包”（Material Packer）的概念，如黑客帝国的案例一样。

黑客帝国场景纹理 来源：黑客帝国案例工程

类似于网页中的“雪碧图”做法，三维建模软件和游戏引擎可以将多个小纹理拼接成一张大的纹理图集，每个小纹理在图集上有自己的坐标位置。当模型需要渲染时，通过UV坐标映射（即纹理坐标），从纹理集中选取并展示相应部分到模型表面上，以此减少纹理切换带来的性能开销，提高渲染效率和整体的交互流畅度。

Mapmost结合“雪碧图”特性自研了三维建筑自动化建模技术，并对比了采用“雪碧图”建模技术与传统平铺纹理建模技术构建相同三维场景模型时，模型体量（包括模型数据量、材质球数量）的具体变化。

 雪碧图”自动化模型，材质球数量：1

平铺纹理自动化模型，材质球数量：60

除了材质球数量大幅减少外，模型数据量也压缩了50%，由此可见“雪碧图”技术方案相较于传统纹理平铺建模在满足同等视觉效果的同时，能有效减少模型体积、提高加载和渲染效率，可进一步推广应用至大规模三维场景构建中。

模型数据量对比

注：以上测试的相同三维场景模型满足以下三个条件

1. 建筑图斑数量相同：确保两种建模方案使用的建筑单元基础数据一致，从而排除因建筑个体数量差异导致的性能影响。
2. 建筑样式数量相同：保证纹理种类和复杂度的一致性，使得性能差异主要来源于纹理映射方式的不同。
3. 建筑结构相同：所有模型在几何形状、层次结构等方面保持一致，以便准确衡量纹理映射技术对于模型性能的影响程度。

当然,这种策略不仅适用于建筑细节纹理，还可能用于大规模地形纹理、角色动画纹理序列等场景，都是为了优化资源管理和提升渲染性能。具体实施时还需结合硬件限制、内存占用、LOD（Level of Detail）策略等多种因素综合考虑。

总结

城市模型的场景搭建过程中遇到的问题远不止这一种，如：模型细节层次管理（Lod）、资产优化、数据校准与更新、模型兼容与跨平台部署等，因此，不断探索和利用新型图形学技术、并行计算技术、大数据处理技术、云计算技术等，都是解决城市模型场景搭建中各类问题的重要手段。同时，结合艺术设计和工程实践，才能创造出既美观又实用的城市虚拟环境。

最后为什么只有一个“雪碧图”呢？多来点“可乐图”、“芬达图”、“王老吉图”不行吗？

来源：微信表情包

参考文献

1. 简书：https://www.jianshu.com/p/0950bc9ed208
2. 知乎：天津WEB前端培训-CSS Sprites（css精灵图）
3. 黑客帝国案例场景：https://www.unrealengine.com/marketplace/en-US/product/city-

 关注Mapmost，持续更新GIS、三维美术、计算机技术干货

Mapmost是一套以三维地图和时空计算为特色的数字孪生底座平台,包含了空间数据管理工具(Studio)、应用开发工具(SDK)、应用创作工具（Alpha）。平台能力已覆盖城市时空数据的集成、多源数据资源的发布管理，以及数字孪生应用开发工具链，满足企业开发者用户快速搭建数字孪生场景的切实需求，助力实现行业领先。

欢迎进入官网体验使用：Mapmost——让人与机器联合创作成为新常态

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。微信公众号：Mapmost