简单滤镜效果

1.大部分滤镜是通过基础的“曝光、对比度、色温等”配合滤镜算法生成的一种色彩模式
2.上述算法在游戏处理中复杂度很高，所以我们一些简单的色彩滤镜效果可以使用lut的方式
 

LUT What?

LUT（Look Up Table）指的是“颜色查找表”，是原始颜色通过LUT的颜色查找表映射到新的色彩上去。是单独针对色彩空间的一种管理和转换。
 

与滤镜的一些区别

1.两者虽然都能让图片的色彩发生变化，但是工作原理不同。lut只能针对色彩路径转换，滤镜可以通过算法针对图片进行更多特征性改变。
2.比如一些颗粒化，模糊等不是简单处理像素颜色，所以不能通过lut实现
3.Lut的优点是把复杂的计算公式放入了图片的前期处理，后期使用只需要查找对应颜色即可。
 

原始lut图片格式

512*16格式贴图

LUT实现简单滤镜效果_Lut



1024*32格式贴图

LUT实现简单滤镜效果_2d_02


 

Lut贴图设置的注意事项

1.取消Mipmap设置
2.Format格式要改为RGB24
3.2D方式 贴图要把 anisolevel 等级设置为0
4.3D方式 打开Read/Write enabled
5.贴图的sRGB关闭，否则线性空间会有问题
 

Lut在手游中的应用场景

1.屏幕后处理中使用
2.游戏中部分功能的使用，比如眼睛的色彩空间贴图更换
 

PS中修改贴图

1.本文使用的是 512*16的贴图格式
2.在ps中进行了“色相/饱和度”“曲线”“照片滤镜”“渐变映射”等操作
 

对游戏屏幕截图进行的PS操作

LUT实现简单滤镜效果_3d_03


 

操作后的原图效果

LUT实现简单滤镜效果_贴图_04


 

对lut原图进行操作

1.把上述步骤使用了PS中“色相/饱和度”“曲线”“照片滤镜”“渐变映射” ，在lut原图上进行操作

2.在游戏中使用操作后的贴图

LUT实现简单滤镜效果_2d_05

Lut贴图使用方式

1.Lut有2D和3D贴图两种方式使用
2.由于部分机型和unity的版本原因，不支持3DShader贴图，只能使用2D贴图传入方式
3.2D方式兼容性好，但2D方式要消耗更多的GPU算力
 

2D代码

 

half3 ApplyLut2D(sampler2D tex, half3 color, half3 offset)

{

    color.z *= offset.z;

    half shift = floor(color.z);

    color.xy = (color.xy * offset.z + 0.5) * offset.xy;

    color.x += shift * offset.y;

    color.xyz = lerp(tex2D(tex, color.xy).rgb, tex2D(tex, color.xy + half2(offset.y, 0)).rgb, color.z - shift);

    return color;

}

 

2D代码参数含义

sampler2D   tex   为PS修改后的标准2D贴图
half3     color   为原始采样值
half3    offset   计算的偏移值，
offset 计算方式如下：
Vector3(1f /贴图宽度 , 1f /贴图高度, 贴图高度 - 1f)
 

3D代码

 

public void SetTexture3D(Texture2D temp2DTex)
    {
        if (temp2DTex)
        {
            int dim = temp2DTex.width * temp2DTex.height;
            dim = temp2DTex.height;

            var c = temp2DTex.GetPixels();
            var newC = new Color[c.Length];

            for (int i = 0; i < dim; i++)
            {
                for (int j = 0; j < dim; j++)
                {
                    for (int k = 0; k < dim; k++)
                    {
                        newC[i + (j * dim) + (k * dim * dim)] = c[k * dim + i + j * dim * dim];
                    }
                }
            }

            if (m_Texture3D)
                DestroyImmediate(m_Texture3D);
            m_Texture3D = new Texture3D(dim, dim, dim, TextureFormat.ARGB32, false);
            m_Texture3D.SetPixels(newC);
            m_Texture3D.Apply();
        }
    }

逻辑代码中生成一张3D贴图
 

3D shader语句

主要语句如下:
tex3D(_LutTex3D, tex.rgb * _Scale + _Offset).rgb

参数含义如下:
_LutTex3D   为生成的3D贴图
_Scale    (贴图宽度 - 1) / (1.0f *贴图宽度 )
_Offset    1.0f / (2.0f *贴图宽度 )