受UWA这篇文章的启发，我们老大也安排我对原来TrueColor32bit的UI图集进行一次优化。前期准备工作主要是了解了下Floyd的Dither算法，然后继续研究的时候发现大部分UI图片的Dither+A8的效果和ETC1+A8的效果很接近，如下图。ETC也是有损压缩，它的压缩倍率更高(6倍)，为什么能和压缩倍率是(1.5倍)的Dither565效果持平呢。所以我又去了解下了ETC1的原理，特作一篇笔记。另外感谢这篇文章，写得很棒。

UI图集压缩优化，以及对Dither和ETC1算法的深入了解-1.jpg (69.84 KB, 下载次数: 3)

2018-3-25 23:15 上传

一、Floyd-Steinberg Dither算法

将24bit的图片转化成16bit过程中因为精度丢失，产生明显的色阶。而抖动算法，则是把这部分丢失的精度，扩散到周围，使得颜色整体更正确。

丢失的精度，我们将它想象为图片上的一些颜料粉末，抖动算法即是将这些粉末朝着某个方向抖动。

[code][/code]这是Floyd-Steinberg抖动算法的Unity中的实现版本，这个算法我把他分为两步。

UI图集压缩优化，以及对Dither和ETC1算法的深入了解-2.jpg (4.83 KB, 下载次数: 1)

2018-3-25 23:15 上传

把当前位置的像素从RGB8888转化为RGB4444，并把最后的浮点数相减得到丢失的精度。  把丢失的精度按照上面的对照图，按比例叠加到周围的像素中。

二、ETC1算法

ETC1将图片分为4x4的块来压缩，由4x4x24=384bit压缩为64bit，压缩倍率为6。 我们先看一下压缩后的64bit是如何表示，如何解码的。以下是一个4x4块的数据：

UI图集压缩优化，以及对Dither和ETC1算法的深入了解-3.jpg (86 KB, 下载次数: 0)

2018-3-25 23:15 上传

1. ETC64bit内存布局

ETC1算法将4x4的块划分为2个4x2的子块(subblock)。

用0-31位储存了4x4=16个像素的亮度修正下标，其中0-15位表示该下标的低位，16-31表示该下标的高位。32位(flipbit)表示横分或者竖分。0为竖分，1为横分。  33位(diffbit)表示如何表示两个字块的颜色均值，0为individual模式(RGB444/RGB444)，1位differential模式(RGB555/RGB333)。  34-36位储存子块2的亮度修正表索引    37-39位储存子块1的亮度修正表索引  40-63位按照B2->B1->G2->G1->R2->R1的顺序来储存两个色块的平均颜色值。如果是differential模式，则按照3-5-3-5-3-5一共24位的方式划分。2. 像素索引

横分

---- ---- ---- ---

|0   |4   |8   |12  |

|1   |5   |9   |13  |

---- ---- ---- ----

|2   |6   |10 |14  |

|3   |7   |11 |15  |

---- ---- ---- ----

2. 亮度修正映射表

UI图集压缩优化，以及对Dither和ETC1算法的深入了解-4.jpg (46.46 KB, 下载次数: 0)

2018-3-25 23:15 上传

3. 解码示例

32位表示该4x4的色块横分为2个4x2的子块33位表示子块的平均颜色值储存为RGB555(子块1)，RGB333(子块2)。34-36位表示子块2的亮度修正索引为110=6，查表得到修正映射表[-106, -33, 33, 106]。37-39位表示子块1的亮度修正索引为010=2，查表得到修正映射表[-29, -9, 9, 29]。40-42位G2=000=0，43-47位G1=00011=3，48-50位B2=010=2，51-55位B1=00100=4，56-58位R2=100=-4，59-63位R1=11100=28。RGB1=(28, 4, 3)，RGB2=(-4, 2, 0)。Individual模式下，将4bit复制到末尾，扩充为8bit，得到子块的基础颜色。Differential模式下，将5bit的高3位复制到末尾，扩充为8bit。将3bit和对应的5bit相加转为5bit，然后再用一样的方式扩充为8bit。3bit中最高位为符号位，所以3bit的取值范围为[-4, 3]。例如R1=28=11100=111001110 00010 00001 1110=198。所以RGB2=(-4, 2, 0)=(28-4, 4+2, 3+0)=(11000, 00110, 00011)->(1100 00011 00001 1RGB1(231, 33, 24)、RGB2(198, 49, 24)为两个色块的基础颜色，然后每个像素点从0-15位和16-31位中分别取得修正映射表的下标的低位(lsb)和高位(msb)。比如第一个像素对应0bit和16bit=00，得到修正映射表的下标a。然后用这个下标去第三步和第四步的修正映射表中找到修正值，即映射表[-29, -9, 9, 29]中的9。所以第一个像素点的颜色值叠加为(231+9, 33+9, 24+9)=(240, 42, 33)，修正到[0, 255]区间，其他的像素点同理修正。最后得到16个RGB24的颜色值，解码完成。4. 编码过程

将图划分为4x4的子块，如果不够4x4，则将这些像素填充在4x4块的左上角。每个子块尝试以下编码，取解码后和原像素，差值最小的那种编码。是否flip，flip确定以后就能知道两个子块的平均颜色值。如果两个子块的平均颜色值非常接近，则diffbit=1。每个子块使用哪一个修正映射表每个像素使用映射表中的哪个值合并所有子块编码三、总结

虽然了解了这些算法，并没有解决掉实际问题，我们还是决定使用Dither+A8的压缩格式。但是知也无涯，学习的过程就是一种修行。