GAMES104 作业2-ColorGrading

ColorGrading网上资料很就多就不介绍了，简单来说就是将ps中一个像素的r-g-b值转换成x-y-z坐标映射到一个三维的颜色的颜色表（LUT）得到新的颜色，从而使场景更具电影感和好看。

以104中的色链LUT为例（ps中导出的LUT为矩形，但原理相同）

对色链LUT简单图解就如上图所示，以颜色RG为xy值形成一个2d贴图，将一系列这样的2d贴图以B值作为索引连接在一起，成为一个可以使用RGB作为XYZ坐标进行索引查找颜色值的3维数组，注意这里B值不是连续的（为了降低LUT内存占用，压缩），后续具体颜色值通过插值获得。

以上图的点p为例，现在场景中一个像素点p的颜色值为（r， g， b），去查找表中发现b值位于b2和b3之间，则取b2贴图和b3贴图中（r，g）对应的两个点L，R做线性lerp即可得到p映射后的值。

先求出2d贴图数量
blockNum = lut.width / lut.height

求出b值位置
blockPLeft = floor(blockNum * p.r)
blockPRight = ceil(blockNum * p.r)

求出左贴图和右贴图中对应像素（L、R）的u值。除以lut长度归一化到0-1范围
uL = （blockPLeft * lut.height + p.r * lut.height) / lut.width
uR= （blockPRight * lut.height + p.r * lut.height) / lut.width

求出v值，注意计算方式和lut的格式有关系
v = p.g

根据uv值对lut进行采样
pixelL = texture(lut, vec2(uL, v))
pixelR = texture(lut, vec2(uR, v))

根据b值对采样结果进行插值
weight = fract(blockNum * p.r)
outColor = pixelL * weight + pixelR * (1 - weight)

对于104的作业，只需要改color_grading.frag即可，还是比较简单的

highp ivec2 lut_tex_size = textureSize(color_grading_lut_texture_sampler, 0);

highp vec4 color       = subpassLoad(in_color).rgba;

highp vec2 lutSize = vec2(lut_tex_size.x, lut_tex_size.y);

highp float blockNum = lutSize.x / lutSize.y;

highp float blockIndexL = floor(color.b * blockNum);
highp float blockIndexR = ceil(color.b * blockNum);

highp float lutCoordXL = (blockIndexL * lutSize.y + color.r * lutSize.y) / lutSize.x;
highp float lutCoordXR = (blockIndexR * lutSize.y + color.r * lutSize.y) / lutSize.x;

highp float lutCoorY = color.g;

highp vec2 lutCoordL = vec2(lutCoordXL, lutCoorY);
highp vec2 lutCoordR = vec2(lutCoordXR, lutCoorY);

highp vec4 lutcolorL = texture(color_grading_lut_texture_sampler, lutCoordL);
highp vec4 lutcolorR = texture(color_grading_lut_texture_sampler, lutCoordR);

highp float weight = fract(color.b * lutSize.y);

out_color = mix(lutcolorL, lutcolorR, weight);

注意出现这种花纹可能是没有正确混合b值

最后我的结果。

104小引擎中的color grading是post-tonemapping的，根据real-time rendering4th 8.2.3章指出，现在业界更多喜欢使用pre-tonemapping的colorgrading，可以提高更高的画面质量和保真度。
但是我太菜了呜呜，完全不会用vulkan，改了很久pre-tonemapping没有成功。想加一个pass做个描边，加上去才发现不知道怎么给ps传深度。。。学习路任重而道远，后续补上。