“This is the 12th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

LUT filter principle

LUT LookUpTable is a color LookUpTable that represents the mapping between an array of input pixels and an array of output pixels. In fact, it is a lookup table, replace the original color value with the lookup table color value. For example, a pixel whose values are R1, G1 and B1 is transformed into R2, G2 and B2 after LUT operation.

LUT(R1) = R2
LUT(G1) = G2
LUT(B1) = B2
Copy the code

In general, 3D LUT will be used to store the RGB value of the effect. In the 8-bit RGB gamut space, the value range of each color value component [0,255], a complete gamut space is 256*256*256, requiring 16M storage space. But in fact, it does not need so many colors to be stored. In general, enumeration nodes are used for storage, and the colors between two nodes are obtained through linear interpolation.

1D LUT

1D LUT mapping table is actually a mapping relationship for a single color value channel. For example, when R = 3, the output R = 4; When G = 9, output G = 3; When B = 10, output B = 1; The mapping relationship of each color value channel is completely independent. There is no necessary connection between RGB color value channels, and the change of one color value will not affect other color values. The 1D LUT can adjust picture brightness, contrast, black field, white field and white balance, but not color conversion.

3D LUT

Because of the limitation of 1D LUT mapping table, it is necessary to use 3D LUT to solve the problem. 3D LUT is the superposition of 1D LUT mapping table. Search the mapping relation of RGB three color values at the same time, for example, input RGB(1,2,3) corresponding to find the output value RGB(3,5,3); Or the RGB(1,3,3) after the value of G is transformed corresponds to finding the output value RGB(4,5,6); However, for 3D LUT model mapping, if all the color value change points are recorded, it will be a majority of storage. In general, only a certain number of grid points will be exported for use, and the number of grids will be 64. The intermediate transition or missing points will be calculated by interpolation.

Image color lookup table

Now that you know about the 3D LUT mapping table, take a look at how the mapping table is stored. The LUT color lookup table is essentially a color picture that two-dimensional processing of color squares. For example, a 512×512 color picture is used to make a lookup table. The color picture is divided into 8*8 grids, and each 8*8 grid has 64*64 small grids to store color pixels. The X axis of each cell represents the R color channel, the Y axis represents the G color channel, and the B color channel is placed in an 8*8 cell, so the 512×512 color picture stores 64*64*64 colors.

LUT mapping table search process is to use B value for index, and then find the corresponding cell, and then locate the target pixel in the cell according to R and G, and finally read the mapped RGB and apply it to the target pixel.

LUT filter is used

In GLSL, the calculation method of LUT filter is as follows. It should be noted that 512×512 size filter graph is used, so 512 is used for calculation in function method.

   highp vec4 textureColor = texture(iChannel1, uv);
   highp float blueColor = textureColor.b * 63.0;
   / / B channel
   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);
   // rg channel
   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);
   // select * from the base map of LUT
   lowp vec4 newColor1 = texture(iChannel2, texPos1);
   lowp vec4 newColor2 = texture(iChannel2, texPos2);
   // Linear take an average
   lowp vec4 newColor = mix(newColor1, newColor2, fract(blueColor));
   // Blend effect
   gl_FragColor = mix(textureColor, vec4(newColor.rgb, textureColor.w), 0.3);
Copy the code

Homemade LUT filter

  1. Homemade LUT filters can be made using after Effects software.
  2. Create a new composition in After Effects. The default size is 512×512.

3. Import the original LUT image into the composition.

4. Right click on composition to find Effects -> Color Correction -> Three-tone Adjustment Highlights, intermediate, and Shadows to modify the original LUT image.

  1. Then go to Composition -> Frame Save as -> File. Change the composition name format to “PNG sequence” and click render to export the path.

  1. Finally, you can use a homemade LUT filter image to achieve the image color effect.

reference

# LUT Filter # LUT Filter # LUT filter