相机之LUT滤镜

相机之使用OpenGL预览
 相机之使用OpenGL拍照
 相机之使用OpenGL录像
 相机之为录像添加音频
 相机之大眼
 相机之贴纸
 相机之口红
 相机之美颜磨皮

LUT 滤镜

LUT 是 Look Up Table 的简称，即颜色查找表，也就是输入一个颜色，返回另一个颜色的映射表，LUT 滤镜实质上就是独立像素点替换，即根据 OpenGL 采样器对纹理进行采样得到的像素点，再基于像素点的（R，G，B）分量查表，获得 LUT 映射的（R1，G1，B1），替换原来的输出

RGB 的每个颜色分量均有 256 中可能，因此 RGB 完整的颜色就有 256 * 256 * 256 种颜色，而每个颜色占用 3 个字节，也就有 256 * 256 * 256 * 3 个字节，即 48M 内存空间

为了降低内存占用，LUT 以一定的采样间隔，将相近的 n (采样步长，通常为 4 ) 种颜色采样使用一条映射记录并存储，这样只需要 64 * 64 * 64 * 3 个字节，对于忽略的颜色值可以进行插值获得其相似结果

LUT 通常是用一张分辨率为 512 X 512 的图片

Look Up Table.png

LUT 图在横竖方向上被分成了 8 X 8 一共 64 个小方格，每一个小方格内的 B（Blue）分量为一个定值，64 个小方格一共表示了 B 分量的 64 种取值，对于每一个小方格，横竖方向又各自分为 64 个小格，以左上角为原点，横向小格的 R（Red）分量依次增加，纵向小格的 G（Green）分量依次增加

LUT滤镜优缺点

LUT可以应用于Camera实时预览和视频实时处理，速度快，效果稳定，更容易进行资源化配置，由于LUT是以图像资源的方式存在，随着LUT数量的增多，会增加软件包体积的大小，主流的优化方式是将资源线上化

片段着色器

precision mediump float;

uniform sampler2D vTexture;
uniform sampler2D s_LutTexture;
varying vec2 v_TextureCoord;
uniform float filterRatio;

void main(){
    // 首先原始采样像素的 RGBA 值
    vec4 textureColor =texture2D(vTexture, v_TextureCoord);
    // textureColor.b是一个0-1之间的浮点数，乘以63确定B分量所在位置（0-63）
    float blueColor = textureColor.b * 63.0;

    // 因为会出现浮点误差，所以取与B分量值最接近的2个小方格的坐标，之后根据小数点进行插值运算
    vec2 quad1;
    // floor 向下取整
    quad1.y = floor(floor(blueColor) / 8.0);
    quad1.x = floor(blueColor) - (quad1.y * 8.0);
    vec2 quad2;
    quad2.y = floor(ceil(blueColor) / 7.9999);
    quad2.x = ceil(blueColor) - (quad2.y * 8.0);

    // 计算R分量和G分量
    vec2 texPos1;
    // 每个小格子代表的纹理坐标长度是1/8=0.125
    // ((0.125-1.0/512.0)*textureColor.r) 也就是 ((64-1)*textureColor.r)/512
    // (64-1)*textureColor.r 将当前实际像素的r值映射到0-63，除以512是转化为纹理坐标中实际的点，LUT图的分辨率为512*512
    //  0.5/512.0 表示每个小格子中，R分再为64个，G分再为64个，形成的最小的小方格的一半
    texPos1.x = (quad1.x * 0.125) + ((0.125 - 1.0/512.0) * textureColor.r) + 0.5/512.0;
    texPos1.y = (quad1.y * 0.125) + ((0.125 - 1.0/512.0) * textureColor.g) + 0.5/512.0;
    vec2 texPos2;
    texPos2.x = (quad2.x * 0.125) + ((0.125 - 1.0/512.0) * textureColor.r) + 0.5/512.0;
    texPos2.y = (quad2.y * 0.125) + ((0.125 - 1.0/512.0) * textureColor.g) + 0.5/512.0;

    // 取目标映射对应的像素值
    vec4 newColor1 = texture2D(s_LutTexture, texPos1);
    vec4 newColor2 = texture2D(s_LutTexture, texPos2);

    // 使用mix方法对2个边界像素值进行插值混合，fract函数是指取小数部分
    vec4 newColor = mix(newColor1, newColor2, fract(blueColor));

    // 将原图与映射后的图进行插值混合，adjust调节范围为(0-1)，取0时完全使用原图，取1时完全取映射后的滤镜图
    gl_FragColor = mix(textureColor, vec4(newColor.rgb, textureColor.w), filterRatio);
}

着色器程序

class LutFilter(context: Context, width: Int, height: Int) :
    FboFilter(context, R.raw.base_vertex, R.raw.lut_frag, width, height) {

    var filterRatio = 0.0f
    private val lutTextureId = TextureUtil.loadTexture(context, R.drawable.lut)
    private val s_LutTexture = GLES20.glGetUniformLocation(mProgram, "s_LutTexture")
    private val filterRatioLocation = GLES20.glGetUniformLocation(mProgram, "filterRatio")
    
    override fun onDrawInFBO(textureId: Int) {

        // 先将textureId的图像画到这一个FBO中
        //激活纹理单元0
        GLES20.glActiveTexture(GLES20.GL_TEXTURE0)
        //将textureId纹理绑定到纹理单元0
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId)
        //将纹理单元0传给vTexture，告诉vTexture采样器从纹理单元0读取数据
        GLES20.glUniform1i(vTexture, 0)

        // 传递LUT图的采样器
        GLES20.glActiveTexture(GLES20.GL_TEXTURE1)
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, lutTextureId)
        GLES20.glUniform1i(s_LutTexture, 1)
        GLES20.glUniform1f(filterRatioLocation, filterRatio)

        //在textureId纹理上画出图像
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4)

        //解除绑定
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0)
    }
}