← 全部概念
性能优化 / 33
纹理图集
一张纹理,一次绘制调用
交互演示
交互演示 · 移动指针或点击画面,观察变化
纹理图集会把多张小图打包成一张大纹理,每个精灵保存自己所在区域的 UV 矩形。每次更换绑定的纹理,GPU 都需要开始一个新批次,因此当 6 类精灵各自使用独立纹理时,这 24 个精灵需要 22 次绘制调用。打包成同一张图集后,以同样顺序绘制相同的 24 个精灵,只需 1 次调用。
适用场景
使用图集,让精灵共享同一次纹理绑定。每个精灵保存一个 UV 空间中的矩形区域,但材质与绘制顺序仍会决定它们能否合并到同一个批次。
实现示例
不依赖特定引擎的伪代码。请根据你使用的引擎调整函数和坐标约定。
uvMin = sprite.pixelMin / atlasSize
uvMax = sprite.pixelMax / atlasSize
uv = mix(uvMin, uvMax, quadUV)
color = sample(atlas, uv)常见错误
纹理过滤与 mipmap 可能采样到相邻精灵。应向外扩展边缘像素,并为所使用的 mip 层级预留足够间距;2 像素并不能保证在所有情况下都足够。
内容原作 Nicolas Zullo · 中文整理与交互改编