Metal与图形渲染六：颜色查找表LUT

2021-07-15 本文已影响0人肠粉白粥_Hoben

零. 前言

票圈里总能看到一些很唯美的滤镜，让我惊叹之余又好奇，这个东西是怎么实现的呢，后面经过一番搜索之后，发现了有LUT这个好东西，自己鼓捣了一番，借鉴了别的APP的滤镜，然后得到了下面的效果：

虽然抄过来的滤镜和原滤镜相比还是有很大区别，原滤镜应该还有自己的算法，但这个效果也还算可以啦，来看看怎么弄的吧~

一. 实现原理

LUT的实现原理其实是基于RGB的映射，由原始的RGB映射到结果的RGB中去，而LUT的作用就是这次映射过程中的查找表。

举个例子，比如你参加一场考试，现在给你一张表和三个数字，第一个数字代表哪栋楼，第二个数字代表哪一层，第三个数字代表哪个房间

现在给个数字345，那你在这张表里面就能找到，你要去科研楼12层的15号房间参加考试，这个原理和LUT的原理非常接近，可以这样初步理解一下。

我们知道，RGB是相互独立的三种颜色通道，其取值范围均为[0, 255]，如果我们需要建立一个映射表，就可以用一个三维的数组来存储，总共有256 * 256 * 256种情况。

但有个问题，256的三次方，实在太大了，相当于我们需要这么多个像素情况进行一一映射，显然，对于一个APP来说，弄这么大的映射表实在浪费性能。

幸好，LUT通过巧妙的设计，用一张图包含了所有的信息，他是怎么做到的呢，可以看下面这张图：

LUT分割成了8 * 8 = 64个方格，每个方格等分成了64 * 64个像素，如果够细心的话，我们可以看到这里可以用64 * 64 * 64来对应RGB值了，和256 * 256 * 256相比，我们按1：4的值进行了压缩，也就是说，LUT里面的每一个像素跨度了4个值的信息。

如上图所示，LUT里，对于不同的小方格，其R、G的分布规律是相同的，而在同一个小方格中，从左到右包含了64个R值，从上到下包含了64个G值，呈现递增关系。

而对于同一个小方格，其B值是相同的，对于不同方格来说，B值随着方格所在的位置变化而变化，从左到右、从上到下递增。

一句话总结就是：根据B值定位到小方格、根据RG值定位到小方格里面的像素点。

知道了上面的原理之后，我们就可以根据原有的RGB映射到新的RGB了

二. 开始实战

我们来举个例子，我们来在LUT表里面找到(R, G, B) = (255, 255, 255)对应的像素。

1. 归一化

首先，将RGB归一化除以255，得到(1,1,1)。

2. 根据B值定位小方格

由于一共有[0, 63]共64个小方格，我们可以根据B * 63得到对应的小方格的位置，所以我们的小方格是第64个小方格，下标n=63。

我们根据n，定位小方格相对于LUT图的quadX、quadY，可以得到

quadY = floor(n / 8) = 7
quadX = n - quadY * 8 = 7

也就是该小方格处于第7行第7列。（下标从0开始算）

3. 根据RG值定位像素位置

首先定位该像素在小方格里面的相对位置，R决定了x坐标，G决定了y坐标：

stepSize = 0.5 // 由于要取中点，所以得到像素的左上角之后再+0.5

squareX = R * 63 + stepSize = 63.5
squareY = G * 63 + stepSize = 63.5

每个小方格大小为64 * 64，再定位到该像素点的位置：

x = quadX * 64 + squareX = 511.5
y = quadY * 64 + squareY = 511.5

最后归一化，得到该像素点对应的坐标

x = 511.5 / 512
y = 511.5 / 512

三. 更复杂的情况

当然，一个像素点很大概率不是整数，而有可能是小数，那就说一下小数的情况，如(0.6, 0.8, 0.2)：

1. 根据B值定位小方格

由于B = 0.2，我们根据n = 63 * 0.2 = 12.6，可以得到两个小方格，n=12、n=13，最终结果由这两个小方格的像素点混合而成

其中：

quad1.y = floor(12.6) / 8 = 1
quad1.x = floor(12.6) - quad1.y * 8 = 4

quad2.y = ceil(12.6) / 8 = 1
quad2.x = ceil(12.6) - quad2.y * 8 = 5

可以看到两个小方格分别分布在第二行（下标为1）的第5个（下标为4）和第6个（下标为5）。

2. 根据RG值定位像素位置

首先定位该像素在小方格里面的相对位置，R决定了x坐标，G决定了y坐标：

stepSize = 0.5 // 由于要取中点，所以得到像素的左上角之后再+0.5

squareX = R * 63 + stepSize = 38.3
squareY = G * 63 + stepSize = 50.9

找到上面两个小方格像素点相对于LUT图的位置：

texPos1.x = (quad1.x * 64 + squareX) / 512 = 294.3 / 512
texPos1.y = (quad1.y * 64 + squareY) / 512 = 306.9 / 512

texPos2.x = (quad2.x * 64 + squareX) / 512 = 294.3 / 512
texPos2.y = (quad2.y * 64 + squareY) / 512 = 370.9 / 512

最后采样、混合即可，值得注意的是，需要根据B值的小数部分决定mix的percent值，小数部分越大，越靠近正方形2

float4 newColor1 = lookupTableTexture.sample(textureSampler, texPos1); // 正方形1的颜色值
float4 newColor2 = lookupTableTexture.sample(textureSampler, texPos2); // 正方形2的颜色值

float4 newColor = mix(newColor1, newColor2, fract(blueColor)); // 根据小数点的部分进行mix

我们还可以根据slideBar值决定最后的颜色更接近哪一边：

return mix(textureColor, float4(newColor.rgb, textureColor.a), intensity);

Shader代码如下：

#include <metal_stdlib>
#include "CCAVPShaderTypes.h"

using namespace metal;

constant float stepSize = 0.5;

fragment float4 lutFragment(SingleInputVertexIO input [[ stage_in ]],
                            texture2d<float> normalTexture [[ texture(0) ]],
                            texture2d<float> lookupTableTexture [[ texture(1) ]],
                            constant float &intensity [[ buffer(0) ]])
{
    constexpr sampler textureSampler (mag_filter::linear,
                                      min_filter::linear);
    float4 textureColor = normalTexture.sample(textureSampler, input.textureCoordinate); //正常的纹理颜色
    
    float blueColor = textureColor.b * 63.0; // 蓝色部分[0, 63] 共64种
    
    float2 quad1; // 第一个正方形的位置, 假如blueColor=22.5，则y=22/8=2，x=22-8*2=6，即是第2行，第6个正方形；（因为y是纵坐标）
    quad1.y = floor(floor(blueColor) * 0.125);
    quad1.x = floor(blueColor) - (quad1.y * 8.0);
    
    float2 quad2; // 第二个正方形的位置，同上。注意x、y坐标的计算，还有这里用int值也可以，但是为了效率使用float
    quad2.y = floor(ceil(blueColor) * 0.125);
    quad2.x = ceil(blueColor) - (quad2.y * 8.0);
    
    // 该像素点相对于小方格的位置（取中间点，所以乘以63再加0.5）
    float squareX = textureColor.r * 63 + stepSize;
    float squareY = textureColor.g * 63 + stepSize;
    
    float2 texPos1; // 正方形1对应像素点相对于LUT图的位置
    texPos1.x = quad1.x * 64 + squareX;
    texPos1.y = quad1.y * 64 + squareY;
    
    float2 texPos2; // 正方形2对应像素点相对于LUT图的位置
    texPos2.x = quad2.x * 64 + squareX;
    texPos2.y = quad2.y * 64 + squareY;
    
    float4 newColor1 = lookupTableTexture.sample(textureSampler, texPos1 / 512); // 正方形1的颜色值
    float4 newColor2 = lookupTableTexture.sample(textureSampler, texPos2 / 512); // 正方形2的颜色值
    
    float4 newColor = mix(newColor1, newColor2, fract(blueColor)); // 根据小数点的部分进行mix
    return mix(textureColor, float4(newColor.rgb, textureColor.a), intensity);
}