[转]Color Grading

原文：http://hi.baidu.com/lang_fox/blog/item/440a0b82f2b9ad80f603a683.html

 

后期处理中对于颜色的调教很重要，往往可以表现出与众不同的美术风格。最近看CryTek的ppt时有所感，遂整理一下所得，均参考自GPUGems 1&2：

‍http://http.developer.nvidia.com/GPUGems/gpugems_ch22.html

http://http.developer.nvidia.com/GPUGems2/gpugems2_chapter24.html

 

 

1，Grading。

Grading就是根据一个色彩查找表来改变颜色的值。

 

 

【‍‍】

查找表是个256x1的1D贴图，可以在photoshop中用渐淡工具拉出，再用Levels和Curves调整。

 

 

 

‍#version 150
uniform sampler2D g_SamplerSource;
uniform sampler1D g_SamplerGrading;

in vec2 fs_Texcoord;

out vec4 g_FragData0;

void main()
{
vec4 source = texture(g_SamplerSource, fs_Texcoord.st);

vec3 outPixel = vec3(0.0);
outPixel.r = texture(g_SamplerGrading, source.r).r;
outPixel.g = texture(g_SamplerGrading, source.g).g;
outPixel.b = texture(g_SamplerGrading, source.b).b;
    
g_FragData0 = vec4(outPixel, source.a);
}

‍

 

2，Levels。

 

photoshop中的Levels可以直接调整图片的明暗以及对比度，这也可以用shader实现。一般做法是在场景中截取几张图片作为参考图，在photoshop中调整至合适效果，记下参数，输入shader即可。

 

 

 

‍#version 150
uniform sampler2D g_SamplerSource;

in vec2 fs_Texcoord;

out vec4 g_FragData0;

void main()
{
vec4 source = texture(g_SamplerSource, fs_Texcoord.st);

float inBlack = 23.0;
float inWhite = 190.0;
float inGamma = 1.61;
float outBlack = 0.0;
float outWhite = 255.0;
vec3 inPixel = source.rgb;
vec3 outPixel = (pow(((inPixel * 255.0) - vec3(inBlack)) / (inWhite - inBlack), vec3(inGamma)) * (outWhite - outBlack) + outBlack) / 255.0;
    
g_FragData0 = vec4(outPixel, source.a);
}

 

‍

 

 

3，3DLUT。

3DLUT就是用一个3D贴图来做查找表，对比于1D贴图，可以有更丰富的色系。在使用三线性过滤的情况下，16x16x16即可获得全色系无缝过渡的效果。

 

 

1）制作一个标准颜色查找表，为方便美术调整，可以展开为2D图片。

‍

 

‍   static const uint32 s_size = 16;

   uchar data[s_size*s_size*s_size*4]; // ABGR

   for (uint32 y = 0; y < s_size; y++)
   {
    for (uint32 x = 0; x < s_size*s_size; x++)
    {
     uchar r = x % s_size;
     uchar g = y;
     uchar b = x / s_size;

     data[(y*s_size*s_size+x)*4+0] = (uchar)(r * 255.0f / (s_size - 1.0f));
     data[(y*s_size*s_size+x)*4+1] = (uchar)(g * 255.0f / (s_size - 1.0f));
     data[(y*s_size*s_size+x)*4+2] = (uchar)(b * 255.0f / (s_size - 1.0f));
     data[(y*s_size*s_size+x)*4+3] = 255;
    }
   }

 

 

2）美术截取几张场景做为参考图，并在参考图中调整出想要的效果。

 

3）将操作套用到标准表上，得到调整后的查找表。

‍

 

4）在shader中使用查找表替换颜色。

 

 

‍#version 150
uniform sampler2D g_SamplerSource;
uniform sampler3D g_Sampler3DLUT;

const vec3 g_LUTSize = vec3(16.0);

in vec2 fs_Texcoord;

out vec4 g_FragData0;

void main()
{
vec4 rawColor = texture(g_SamplerSource, fs_Texcoord.st);

// Compute the 3D LUT lookup scale/offset factor
vec3 scale = (g_LUTSize - 1.0) / g_LUTSize;
vec3 offset = 1.0 / (2.0 * g_LUTSize);

// ****** Apply 3D LUT color transform! **************
vec3 outPixel = texture(g_Sampler3DLUT, scale * rawColor.rgb + offset).rgb;

g_FragData0 = vec4(outPixel, rawColor.a);
}

‍