图像处理之LUT

目录

• LUT原理

• LUT滤镜特效Shader解读

演示demo

前言：

平常我们使用的图片编辑app，一般都有这个最基本的LUT滤镜，都是UI设计师设计好风格后，导出LUT效果图，有了这个LUT效果图，在app端，借助GPUImage库，便可以方便的实现这种特效。

甚至有些开发者，是直接破解别人的app，拿到里面的LUT图，不需要自己专门设计，便能轻易的窃取到别人app里这些好看的风格的滤镜

LUT在图像处理中的位置

先从大方向上看LUT在数字图像处理上处于什么位置

图像处理大致可以分为以下几类：

• 独立像素点运算

包括亮度、对比、饱和度、色调、灰色化等

• 多个像素点运算

一般是进行卷积变换，求均值，求中值，插值等，包括边缘检测、浮雕化、模糊、锐化

• 几何变化

矩阵变换。包括缩放、旋转、倾斜、扭曲、液化等

• 多图像合成

多张图像的处理，包括添加水印，贴纸，美妆等。

LUT归为独立像素点运算这种图像处理

LUT介绍

LUT 是 LookUpTable 的简称，也称作颜色查找表

从名字上看，我们大概可以知道，是用来查找颜色的，他确实就是这样的，是通过一种颜色，查找其映射后的颜色，可以理解为一个函数LUT(R1,G1,B1),带R,G,B三个自变量的函数，输出为其对应映射后的值R2,G2,B2

LUT(R1, G1, B1) = (R2, G2, B2)

对于RGB颜色空间来说，颜色是由RGB三种基色构成，所有像素点的颜色值，都可以通过RGB组合而成，我们量化颜色时，一般使用8bit来表示RGB中的一个分量，所以每一个分量可以表示为2的8次方，即0～255。

那么要建立一个颜色映射表，我们就可以使用255* 255* 255种来表示所有颜色映射后的值

这是非常精准的，每一种颜色都可以查找到

当我们需要把一幅原始图像的颜色风格转换为一种怀旧风格时，

上面的这个需求，我们完全可以搞一个三维数组，数组的大小256 * 256 * 256，数组存储所有怀旧风格颜色映射后的值，直接通过查表，就能转换风格了，确实可以的

但是上面的这种实现存在一些问题：

• 1.数字太难管理，难于保存，难于复用，容易出错，一不小心修改一个数字，因为什么原因丢失，弄错，效果就变了，定位错误非常困难

• 2.颜色查找表格过大

而LUT能很好的解决上面的问题。

首先解决第一个难以管理，容易出错，出错难以排查的问题。

如果我们使用一张图存储上述信息，那么就不会容易出错了，图保存和复用非常方便，也不容易出错，图没错，信息就不会有错误。

没有找到 256 * 256 * 256 的LUT图（即16 * 16个方格的LUT图，每个方格里有16 * 16个小格），因为没有这种设计，所以找不到，但是完全可以使用64 * 64 * 64的图，代替256 * 256 * 256的表格，来保存数据，这样图代替表格完成数据保存，就解决了表格数据容易出错，出错后排查困难的问题。

我们现在使用64 * 64 * 64颗粒度的LUT图保存数据，即将256归化到64而已。

那怎么用一张图来代替数据表来保存信息呢，这是一个巧妙的设计。

下面是一个LUT效果图

image

LUT就是用图代替了表，完美的解决了上面表存在的问题

我们来看下，LUT如何能代替颜色查找表的功能

比如想查找纯蓝色色（0，0，1）对应的映射值

LUT(R1, G1, B1) = (?, ?, ?)

我们先看这个颜色查找表的特征：

粗看的话，我们可以得出一个结论：
8 * 8个方格，总体上，底部越来越蓝；而对于每一个方格，则越往右越红，越往下越绿；

哈哈，没错，我猜你会关联到了我们的RGB颜色了。

这是一个64 * 64 * 64颗粒度的LUT设计，总的方格大小为512 * 512， 8 * 8 64个方格，所以每个方格大小为64 * 64。

64个方格，每个方格大小为 64 * 64 ， 所以叫做64 * 64 * 64颗粒度的设计。因为颜色值的范围为0～255，即256个取值，将256个取值归化到64。

从左上到右下(可以想作z方向），越来越蓝，蓝色值B从0～255，代表用来查找的B，即LUT(R1,G1,B1) = (R2,G2,B2)中的B1，

每一个方格里，从左往右(x方向），红色值R从0～255，代表用来查找的R，即LUT(R1,G1,B1) = (R2,G2,B2)中的R1；

每一个方格里，从上往下（y方向），绿色值G从0～255，代表用来查找的G，即LUT(R1,G1,B1) = (R2,G2,B2)中的G1；

因为一个颜色分量是0～255，所以一个方格表示的蓝色范围为4，比如最左上的方格蓝色为0～4，查找时，如果有某个像素的蓝色值在0～4之间，则一定是在第一个方格里查找其映射后的颜色

通过颜色找位置，找到的位置对应的点的颜色即是这个颜色映射后的颜色，如下图的五角星⭐️的颜色既是某个颜色映射后的颜色

image

这样，我们就完成了使用图代替表格，进行数据的存储，并且对图的数据存储进行了4 * 4 * 4倍的压缩处理

有了这些了解后，我们来尝试查找像素点归一化后的纯蓝色（0，0，1）的映射后的颜色。

需求变为：

我们是想通过颜色S，从LUT图上，查找其映射后的颜色T

思路是，通过颜色S，找到其在LUT上的位置，位置上对应的颜色即是要找的颜色T

• 1.使用蓝色B定位方格n

n =  1（蓝色值） * 63（一共64个方格，从第0个算起） = 63

故要定位的方格n是第63个

• 2.定位在方格里的位置，使用R，G定位位置x,y

x = 0(R值） * 63（每个方格大小为 64 * 64） = 0, y = 0（G值） * 63（每个方格大小为 64 * 64） = 0

所以方格的(0,0)位置为要定位的x，y

• 3.定位在整个图中位置

在512 * 512的大小上，其坐标为：

Py = floor(n/8) * 64 + y = 7 * 64 + 0 = 448;
Px = [n - floor(n/8) * 8] * 64 + x = [63 - 7*8] * 64 + 0 = 448;
P = （448， 448）


其中 floor(n/8)代表位置所在行，每一行的长度为64，y为方格里的G定位的位置；
[n - floor(n/8) * 8]代表位置所在列数，每一列的长度为64，x为方格里的R定位的位置；
floor为向下取整，ceil为向上取整。比如2.3, floor(2.3) = 2; ceil(2.3) = 3;

方格大小为512 * 512， 位置为P = (448, 448), 归一化后为（7/8， 7/8），很明显，颜色值（0，0，1）的位置确实在第63个方格的左上角

4.计算映射后颜色

// 这里使用GPU采样器对纹理采样
 vec4 newColor = texture(sample, texPos);
 
 其中texPos就是第三步的归一化后的P

现在我们已经完成了通过LUT查找颜色的映射值，理解了这个之后，我们后面用代码来实现。

现在，再回到我们说LUT能够解决前面的颜色查找表存在的问题

1.数据大小：这里使用的是 512 * 512大小的尺寸的LUT图，比前面的颜色查找表要小

2.图片很方便存储，移植性非常好，做好一次后，非常方便重复使用

其他的优点：

• 所有的算法计算，都是对LUT进行计算位置，取位置处的颜色值，有助于算法本身的保护

• LUT的设计更容易进行热更新，设计师设计好效果可以动态发布

缺点：

• 1.LUT资源容易被破解、泄密（得到LUT图，就相当于得到一个算子)
• 2.尺寸512 * 512 还是比较大，增加软件包的体积(可以考虑后下发来优化)

思考：

对于缺点2，LUT图大小一定要使用512 * 512吗？是否可以再缩小呢？

我们前面论述的时候，已经将256 * 256 * 256 压缩到了 64 * 64 * 64，完全可以再压缩。

实际上，我们一般设计为方形的，算法也简化，对于R，G，B系数是一样的处理，我们可以将256归化为64，还可以继续归化为16。 即从256 * 256 * 256变为16 * 16 * 16，其对应的LUT如下：

image

这个公司的一个项目里是有使用的

补充

如何查找颜色A(0.4，0.6，0.2）映射的颜色呢？

• 1.使用蓝色B定位方格n

n = b * 63 = 0.2 * 63 = 12.6

要定位的方格n是第12.6个，是个小数，那到底是用第12个，还是用第13个呢？我们采用两个，对两个方格的取色结果进行混合即可,首先使用第12个方格计算，然后再使用第13个方格计算，最后混合两个方格的颜色

• 2.在方格里，使用R，G定位位置x,y

x = 0.4 * 63 = 25.2, y = 0.6 * 63 = 37.8

• 3.定位两个方格对应的位置

在512 * 512的大小上，计算其坐标：

// 先使用第12个方格定位其坐标P1
Py = floor(n/8) * 64 + y = 1 * 64 + 37.8 = 111.8;
Px = [n - floor(n/8) * 8] * 64 + x = [12 - 1*8] * 64 + 25.2 = 281.2;
P1 = （Px， Py）=（281.2， 111.8）;

归一化后为P1 = （281.2， 111.8）/512 = （0.549, 0.2184);

// 先使用第13个方格定位其坐标P2
Py = floor(n/8) * 64 + y = 1 * 64 + 37.8 = 111.8;
Px = [n - floor(n/8) * 8] * 64 + x = [13 - 1*8] * 64 + 25.2 = 345.2;
P2 = （Px， Py）=（345.2, 111.8）;

归一化后为P2 = （345.2, 111.8）/512 = （0.674, 0.2184）;

• 4.计算颜色

// 这里使用GPU采样器对纹理采样
 vec4 newColor1 = texture(sample, texPos1);
 vec4 newColor2 = texture(sample, texPos2);
 
 其中texPos1就是第三步的P1， texPos2是第三步的P2

• 5.混合颜色

resColor = mix(newColor1, newColor2, a);

a =   fract(blueColor);

blueColor 为12.6，小数部分越大，越接近13，所以第13个方格占比越大

ps:
a = fract(blueColor); //fract(x) 获取x的小数部分
mix(x, y, a); //取x,y的线性混合,x(1-a)+ya

了解了这个后，再来看LUT滤镜里glsl代码的shader算法部分，就很容易了

GLSL的LUT滤镜shader解读

fragment half4 lookupFragment(TwoInputVertexIO fragmentInput [[stage_in]],
                              texture2d<half> inputTexture [[texture(0)]],
                              texture2d<half> inputTexture2 [[texture(1)]],
                              constant IntensityUniform& uniform [[ buffer(0) ]])
{
    constexpr sampler quadSampler;
    half4 base = inputTexture.sample(quadSampler, fragmentInput.textureCoordinate);
    
    // 获取蓝色
    half blueColor = base.b * 63.0h;
    
    // 通过蓝色计算两个方格quad1，quad2
    half2 quad1;
    quad1.y = floor(floor(blueColor) / 8.0h); 
    quad1.x = floor(blueColor) - (quad1.y * 8.0h);
    
    half2 quad2;
    quad2.y = floor(ceil(blueColor) / 8.0h); //ceil 向下取整，ceil(12.6) = 13, 解决跨行时计算问题，比如blueColor = 7.6，则取第7，8个方格，他们不在同一行
    quad2.x = ceil(blueColor) - (quad2.y * 8.0h);
    
    // 计算映射后颜色所在两个方格的位置的归一化纹理坐标
    float2 texPos1;
    texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * base.r);
    texPos1.y = (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * base.g);
    
    float2 texPos2;
    texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * base.r);
    texPos2.y = (quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * base.g);
    
    // 取出对应坐标的颜色newColor1，newColor2
    constexpr sampler quadSampler3;
    half4 newColor1 = inputTexture2.sample(quadSampler3, texPos1);
    constexpr sampler quadSampler4;
    half4 newColor2 = inputTexture2.sample(quadSampler4, texPos2);
    
    // 混合颜色newColor1，newColor2，得到查找的颜色color_t
    half4 newColor = mix(newColor1, newColor2, fract(blueColor));
    
    // 调节强度时，将color_t和源色color_s进行混合
    return half4(mix(base, half4(newColor.rgb, base.w), half(uniform.intensity)));
}

• 1.通过B分量确定两个方格

    half2 quad1;
    quad1.y = floor(floor(blueColor) / 8.0h); 
    quad1.x = floor(blueColor) - (quad1.y * 8.0h);
    
    half2 quad2;
    quad2.y = floor(ceil(blueColor) / 8.0h); 
    quad2.x = ceil(blueColor) - (quad2.y * 8.0h);
    
   
    比如 base(0.4，0.6，0.2）, 先确定第一个方格：
    
    base.b = 0.2，blueColor = 0.2 * 63 = 12.6,（即为第12个，第13个方格），但是我们要计算它坐在行和列， floor(12.6) = 12,  floor(12 / 8.0h) = 1,即第一行；
    floor(blueColor) - (quad1.y * 8.0h) = floor(12.6) - (1 * 8) = 4，即第4列；
    
    同理可以算出第二个方格为第1行，第5列
    
    //ceil 向下取整，ceil(12.6) = 13, 解决跨行时计算问题，比如blueColor = 7.6，则取第7，8个方格，他们不在同一行

• 2.确定方格映射后的坐标

    float2 texPos1;
    texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * base.r);
    texPos1.y = (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * base.g);
    
    float2 texPos2;
    texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * base.r);
    texPos2.y = (quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * base.g);
    
   其中 (quad1.x * 0.125) 表示行归一化的坐标，(quad1.y * 0.125)表示列归一化的坐标，一共8行，每一行的长度为1/8 = 0.125，一共8列，每一列的长度为1/8 = 0.125；
   
   0.125 * base.r表示一个方格里红色的位置，因为一个方格长度为0.125，r从0～1；绿色同理；
   
   需要留意的是这里有个0.5/512， 和 1.0/512.
   
   0.5/512 是为了取点的中间值，一个点长度为1，总长度512，取点的中间值，即为0.5/512；
   
   1.0/512， 是因为计算texPos2.x时，单独对于一个方格来说，是从0～63，所以为63/512，即0.125 - 1.0/512；
    

• 3.取出两个方格里对应坐标的颜色newColor1，newColor2

    constexpr sampler quadSampler3;
    half4 newColor1 = inputTexture2.sample(quadSampler3, texPos1);
    constexpr sampler quadSampler4;
    half4 newColor2 = inputTexture2.sample(quadSampler4, texPos2);

• 4.混合颜色newColor1，newColor2，得到查找的颜色color_t

    // 混合颜色newColor1，newColor2，得到查找的颜色color_t
    half4 newColor = mix(newColor1, newColor2, fract(blueColor));

至此，LUT特效滤镜的实现原理，我们就明白了。

参考：

落影大神：https://www.jianshu.com/p/96a61110a5ae

其他：https://www.jianshu.com/p/f39f051595bb