Games104 operation 2-colorgrading

ColorGrading There are so many online materials that I won't introduce them , To put it simply, I will ps One pixel in r-g-b Value to x-y-z Coordinates are mapped to a three-dimensional color table （LUT） Get a new color , So as to make the scene more cinematic and good-looking .

With 104 Color chain in LUT For example （ps The LUT It's a rectangle , But the principle is the same ）

Alignment chain LUT The simple diagram is shown in the figure above , By color RG by xy Values form a 2d Mapping , A series of such 2d Map to B Values are linked together as indexes , Become a usable RGB As XYZ Coordinates are indexed to find color values 3 Dimension group , Note that there B Values are not continuous （ In order to reduce LUT Memory footprint , Compress ）, Subsequent specific color values are obtained by interpolation .

Points in the above figure p For example , Now a pixel in the scene p The color value of is （r, g, b）, Go to the lookup table and find b Values in the b2 and b3 Between , Then take b2 Mapping and b3 In the map （r,g） The corresponding two points L,R Do linear lerp You can get p Mapped value .

Find out first 2d Number of maps
blockNum = lut.width / lut.height

Find out b Value position
blockPLeft = floor(blockNum * p.r)
blockPRight = ceil(blockNum * p.r)

Find the corresponding pixels in the left map and the right map （L、R） Of u value . Divide lut The length is normalized to 0-1 Range
uL = （blockPLeft * lut.height + p.r * lut.height) / lut.width
uR= （blockPRight * lut.height + p.r * lut.height) / lut.width

Find out v value , Pay attention to the calculation method and lut The format of
v = p.g

according to uv It's worth it lut sampling
pixelL = texture(lut, vec2(uL, v))
pixelR = texture(lut, vec2(uR, v))

according to b Value to interpolate the sampling results
weight = fract(blockNum * p.r)
outColor = pixelL * weight + pixelR * (1 - weight)

about 104 The homework , Just change color_grading.frag that will do , It's a little bit easier

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);

Note that this pattern may not be mixed correctly b value

My final result .

104 Small engine color grading yes post-tonemapping Of , according to real-time rendering4th 8.2.3 The chapter points out , Now the industry likes to use pre-tonemapping Of colorgrading, It can improve the picture quality and fidelity .
But I'm too good , Not at all vulkan, It's changed for a long time pre-tonemapping No success . I want to add one pass Make a stroke , I didn't know how to give it until I added it ps Transmission depth ... There is a long way to go in learning , Subsequent patch .