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值
最后我的结果。
文章来源:https://www.toymoban.com/news/detail-400079.html
104小引擎中的color grading是post-tonemapping的,根据real-time rendering4th 8.2.3章指出,现在业界更多喜欢使用pre-tonemapping的colorgrading,可以提高更高的画面质量和保真度。
但是我太菜了呜呜,完全不会用vulkan,改了很久pre-tonemapping没有成功。想加一个pass做个描边,加上去才发现不知道怎么给ps传深度。。。学习路任重而道远,后续补上。文章来源地址https://www.toymoban.com/news/detail-400079.html
到了这里,关于GAMES104 作业2-ColorGrading的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!