OpenGL LUT滤镜算法解析

1. 简介

滤镜：一些图像处理软件针对性地提供了一些对传统滤镜效果的模拟功能，使图像达到一种特殊效果。滤镜通常需要同通道、图层、色阶等联合使用，才能使图像取得最佳艺术效果。在软件界面中也直接以“滤镜”（Filter）称呼；日久便约定俗成，软件中将一些特定效果（effect）或预设（preset）以‘滤镜’统一称呼。
计算机图形学中的滤镜，常用于处理图像(调色，改变风格等)。

1.1 什么是LUT

LUT全称LookUpTable，也称为颜色查找表，它代表的是一种映射关系，通过LUT可以将输入的像素数组通过映射关系转换输出成另外的像素数组。比如一个像素的颜色值分别是 R1 G1 B1，经过一次LUT操作后变为R2 G2 B2：

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

通过这个映射关系就可以将一个像素的颜色转换为另外一种颜色。

1.2 为什么要使用LUT滤镜

在正常情况下，8位的RGB颜色模式可以表示的颜色数量为256X256X256种，如果要完全记录这种映射关系，设备需要耗费大量的内存，并且可能在计算时因为计算量大而产生性能问题， 为了简化计算量，降低内存占用，可以将相近的n种颜色采用一条映射记录并存储，(n通常为4)这样只需要64X64X64种就可以表示原来256X256X256的颜色数量，我们也将4称为采样步长。

1.2.1 1D LUT

1D LUT映射表其实就是对单个色值通道做映射关系，例如当R = 3时，输出R = 4；当G = 9时，输出G = 3；当B = 10时，输出B = 1；每个色值通道映射关系是完全独立的，RGB每个色值通道没有必然联系，一个色值变化并不会影响到其他色值。1D LUT可以实现画面亮度、对比度、黑场、白场、白平衡的调整,但不能实现色彩转换。

1.2.2 3D LUT

因为1D LUT映射表的限制，这就需要使用3D LUT来解决了，3D LUT算是1D LUT映射表叠加作用。对RGB三个色值同时做映射关系查找，例如输入RGB(1,2,3)则对应找到输出值RGB(3,5,3)；又或者值变换了G的值后RGB(1,3,3)对应找到输出值RGB(4,5,6)；但是对于3D LUT模型映射如果记录下所有色值变化点会是一个居多的存储量，一般情况下只会导出一定数量网格点来使用，网格数会选择64的，中间过渡或是缺失点使用插值计算来得出结果。

1.3 LUT 颜色查找表存储 (以3D LUT为例)

了解了3D LUT映射表之后，再来了解一下映射表是如何存储的。LUT颜色查找表本质上就是颜色图片，将颜色方块进行二维化处理。
这里以512x512尺寸查找表为例：

如上图所示，颜色图片分割成88格子，每个88格子当中有分别存有6464个小格子存储色彩像素点。每个小格子X轴表示R色值通道，Y轴表示G色值通道，B色值通道放置在88格子中，因此512x512尺寸颜色图片存储了646464种色彩。
LUT映射表查找过程就是先使用B值进行索引，然后找到对应小格子，接着根据R和G在小格子中定位到目标像素，最后读取映射的RGB应用到目标像素上。

2. 示例代码 (GLSL、Python)

2.1 OpenGL(GLSL)

# 读取原始图片像素值
highp vec4 textureColor = texture(iChannel1, uv);
highp float blueColor = textureColor.b * 63.0;
// B通道 
highp vec2 quad1;
quad1.y = floor(floor(blueColor) / 8.0);
quad1.x = floor(blueColor) - (quad1.y * 8.0);
highp vec2 quad2;
quad2.y = floor(ceil(blueColor) / 8.0);
quad2.x = ceil(blueColor) - (quad2.y * 8.0);
// R G 通道
highp vec2 texPos1;
texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
texPos1.y = (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);
highp vec2 texPos2;
texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
texPos2.y = (quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);
// 取出LUT基准图上对于的 R G色值
lowp vec4 newColor1 = texture(iChannel2, texPos1);
lowp vec4 newColor2 = texture(iChannel2, texPos2);
// 线性取一个平均值
lowp vec4 newColor = mix(newColor1, newColor2, fract(blueColor));
// 混合效果
gl_FragColor = mix(textureColor, vec4(newColor.rgb, textureColor.w), 0.3);

2.2 Python

import numpy as np
import cv2
import timedef get_lut(lut_img):"""将LUT图片转换为LUT查找表:param lut_img: (512, 512, 3) uint8:return: LUT查找表"""cube64rows = 8cube64size = 64# cube256rows = 16cube256size = 256cubescale = cube256size // cube64size  # 4reshapelut = np.zeros((cube256size, cube256size, cube256size, 3))for i in range(cube64size):cx = (i % cube64rows) * cube64sizecy = (i // cube64rows) * cube64sizecube64 = lut_img[cy:cy + cube64size, cx:cx + cube64size]_rows, _cols, _ = cube64.shapeif _rows == 0 or _cols == 0:continuecube256 = cv2.resize(cube64, (cube256size, cube256size))i = i * cubescalefor k in range(cubescale):reshapelut[i + k] = cube256return reshapelutdef doLut(src, lut):"""使用LUT查找表处理原始图像:param src: 待处理图像:param lut: LUT查找表:return: 应用LUT滤镜后的图像"""arr = src.copy()bs = arr[:, :, 0]gs = arr[:, :, 1]rs = arr[:, :, 2]arr[:, :] = lut[bs, gs, rs]return arrif __name__ == "__main__":# 读取待处理图片和LUT滤镜图片img = cv2.imread('need_environment/images/star_man_HD.png')lut_img = cv2.imread("need_environment/lut/ly1.png")# 将LUT滤镜图片转化为LUT查找表lut = get_lut(lut_img)t1 = time.time()dst = doLut(img, lut)t2 = time.time()print("run time: %.2f s" % (t2 - t1))output_img = cv2.hconcat([img, dst])h, w, _ = output_img.shapeif w >= 1024:scale = 1024 / woutput_img = cv2.resize(output_img, (0, 0), fx=scale, fy=scale)cv2.imshow("img", output_img)cv2.waitKey(0)cv2.destroyAllWindows()

3. LUT滤镜效果

4. 如何制作LUT滤镜

1. 自制LUT滤镜可以通过AE软件制作

2. 在AE中创建新建合成，预设尺寸为512x512大小
   

3. 将原始标准LUT图片导入到合成中
   

4. 在合成上右击找到效果 -> 颜色校正 -> 三色调 调整高光、中间调、阴影 修改原LUT图片。
   

5. 然后在 合成-> 帧另存为 -> 文件。修改合成名称 格式改为"png序列" 最后点击 渲染 导出路径。
   

5. 参考

https://www.nxrte.com/jishu/20962.html
https://juejin.cn/post/7059182367088312357
https://cloud.tencent.com/developer/article/1697293
https://www.jianshu.com/p/f054464e1b40
https://www.jianshu.com/p/d09aeea3b732