终端技术篇
推荐语:今年淘宝在终端技术上做了三个很重要的探索:一、前端和移动端在技术上开始融合,例如技术架 构、工具体系的设计上都进行了贯通设计。二、基于Web的研发模式+增强的跨平台容器/引擎+原子化能力的Native原生架构,使前端和移动端在业务迭代上具备同等交付能力,提升效率。三、前端技术深入到业务领域,打破过去局限于技术本身(多样性和深入度)的探索上,使技术能够真正给业务带来价值。期待 这些尝试能够为终端领域带来新的变化。
—— 阿里巴巴资深技术专家 舒文
推荐语:过去的一年里,淘宝用户时长及浏览深度增长对性能体验的诉求愈发强烈,业务加速创新对交付效 率的要求提升,对既有有研发模式的挑战更大,都推动了淘宝终端技术体系不断演进。本篇重点分享在用户体验改善、研发效能破障、架构体系演进等方面的背后思考与创新实践,希望为大家带来一定启发与帮助。
—— 阿里巴巴资深技术专家 弘禹
内存优化: 纹理压缩技术
作者:楚奕
出品:大淘宝技术
相比普通格式图片,纹理压缩可以节省大量显存和 CPU 解码时间,且对 GPU 友好。
背景
游戏开发中纹理是内存占用大户,移动设备因为内存有限,问题更加明显。据统计,淘宝互动小程序性能卡口 70% 以上都是因为内存超标,而内存超标的主要原因则是图片素材过多、过大等。
我们知道传统的图片文件格式有 PNG 、 JPEG 等,这种类型的图片格式无法直接被 GPU 读取,需要先经过 CPU 解码后再上传到 GPU 使用,解码后的数据以 RGB(A) 形式存储,无压缩。
而纹理压缩顾名思义是一种压缩的纹理格式,它通常会将纹理划分为固定大小的块(block)或者瓦片(til
e),每个块单独进行压缩,整体显存占用更低,并且能直接被 GPU 读取和渲染(无需 CPU 解码),举例来说,一张1024x1024的、JPEG 图片,使用RGBA格式,显存占用在 4M~5.3M 左右,而如果采用 AST_4x4 纹理压缩格式后,理论内存占用约在1.3M左右,相比普通纹理,可以减少70%+内存,具体数据见本文第三部分。
除此之外纹理压缩支持随机访问,随机访问是很重要的特性,因为纹理访问的模式高度随机,只有在渲染时被用到的部分才需要访问到,且无法提前预知其顺序。而且在场景中相邻的像素在纹卫中不一定是相邻的
性能高度依赖于纹理访问的效率。综上,相比普通格式图片,纹理压缩可以节省大量显存和 CPU 解码时间,且对GPU 友好。
在WebGL上,我们可以通过相关 Extension 使用纹理压缩。纹理压缩的格式有很多种(详见下文),并且不同的厂商和机型支持的格式也不完全一致,因此使用压缩纹理前,需要判断设备是否支持。实际开发早,一般不会直接使用WebGL API加载压缩纹理,而是使用游戏引擎,目前主流的游戏引擎如 pixi.js 等均支持纹理压缩,开发者可以不用关心其中细节,只需要跟普通图片一样传入素材地址,剩下的都交给引擎来做。
纹理压缩不是银弹,虽然优势很多,但是其自身也有一些使用限制,主要有:
有损压缩。所有的压缩纹理均为有损压缩,因此需要开发者 or 设计师验证压缩效果是否符合预期:
尺寸要求。部分压缩纹理要求宽高相等(PVRTC),或者宽高必须是2的幂次方,使用有些不便:
体积。压缩纹理虽然显存占用小,但是文件体积通常会比JPEG 更大(看具体压缩格式),IO时问会更长;格式&兼容性问题。压缩纹理格式多样,需要针对不同平台选用不同格式,意味着同一份素材可能需要存储多份格式:
因此,是否需要使用压缩纹理需要开发者进行权衡,比如,游戏首侦资源我们通常希望越快约好,这时可以使用普通纹理,而对于非首顿资源或者出现内存瓶颈时则可以考虑使用纹理压缩。
带你读《2022技术人的百宝黑皮书》——内存优化: 纹理压缩技术(2)https://developer.aliyun.com/article/1340979?groupCode=taobaotech