音视频系列--OpenGL美颜特效

美颜分两种 ，高斯模糊美颜 需要手动保留细节部分，不适合，但是高斯模糊美颜效果比较好。再就是通道磨皮美颜，这里主要是通过这种方式来达到美颜效果，美颜本质就是去痘。

本次技术大概实现的思路就是先用高斯算法进行模糊，然后再用通道磨皮美颜。只是记录下实现思路。

关于详细的解释可以参考最后面的参考文章

一、高斯模糊

---

高斯模糊后的美颜效果比较好，这里第一步先进行高斯模糊美颜

precision mediump float;
//顶点着色器传递过来的坐标
varying mediump vec2 aCoord;

//采样
uniform sampler2D vTexture;

//cpu传值width, height
uniform int width;
uniform int height;

vec2 blurCoordinates[20];

void main(){

    //步长
    vec2 singleStepOffset=vec2(1.0/float(width),1.0/float(height));
    //计算均值，20个值  先进行高斯模糊，效果会更好些
    blurCoordinates[0] =aCoord.xy+singleStepOffset* vec2(0.0, -10.0);
    blurCoordinates[1] = aCoord.xy + singleStepOffset * vec2(0.0, 10.0);
    blurCoordinates[2] = aCoord.xy + singleStepOffset * vec2(-10.0, 0.0);
    blurCoordinates[3] = aCoord.xy + singleStepOffset * vec2(10.0, 0.0);
    blurCoordinates[4] = aCoord.xy + singleStepOffset * vec2(5.0, -8.0);
    blurCoordinates[5] = aCoord.xy + singleStepOffset * vec2(5.0, 8.0);
    blurCoordinates[6] = aCoord.xy + singleStepOffset * vec2(-5.0, 8.0);
    blurCoordinates[7] = aCoord.xy + singleStepOffset * vec2(-5.0, -8.0);
    blurCoordinates[8] = aCoord.xy + singleStepOffset * vec2(8.0, -5.0);
    blurCoordinates[9] = aCoord.xy + singleStepOffset * vec2(8.0, 5.0);
    blurCoordinates[10] = aCoord.xy + singleStepOffset * vec2(-8.0, 5.0);
    blurCoordinates[11] = aCoord.xy + singleStepOffset * vec2(-8.0, -5.0);
    blurCoordinates[12] = aCoord.xy + singleStepOffset * vec2(0.0, -6.0);
    blurCoordinates[13] = aCoord.xy + singleStepOffset * vec2(0.0, 6.0);
    blurCoordinates[14] = aCoord.xy + singleStepOffset * vec2(6.0, 0.0);
    blurCoordinates[15] = aCoord.xy + singleStepOffset * vec2(-6.0, 0.0);
    blurCoordinates[16] = aCoord.xy + singleStepOffset * vec2(-4.0, -4.0);
    blurCoordinates[17] = aCoord.xy + singleStepOffset * vec2(-4.0, 4.0);
    blurCoordinates[18] = aCoord.xy + singleStepOffset * vec2(4.0, -4.0);
    blurCoordinates[19] = aCoord.xy + singleStepOffset * vec2(4.0, 4.0);

    //科学的取法  正态分布
    vec4 currentColor=texture2D(vTexture,aCoord);
    vec3 rgb=currentColor.rgb;
    for (int i = 0; i < 20; i++) {
        rgb+=texture2D(vTexture,blurCoordinates[i].xy).rgb;
    }
    //  取平均值
    vec4 blur = vec4(rgb*1.0/21.0,currentColor.a);

    gl_FragColor=blur;
}

上面取着色点周围20个点加自身21个点的color平均值，大概是这样的算法

二、对像素进行高反差处理

---

 //  一个完整的图片相减  差异部分显示出来  高反差
 vec4 highPassColor=currentColor-blur;

这个高反差是为了保留图像的细节部分

接下来通过进一步调优显示更多的细节信息

//高反差结果进一步调优  clamp内置函数使结果在0-1之间 2.0 * highPassColor.r * highPassColor.r * 24.0
highPassColor.r = clamp(2.0 * highPassColor.r * highPassColor.r * 24.0,0.0,1.0);
highPassColor.g = clamp(2.0 * highPassColor.g * highPassColor.g * 24.0, 0.0, 1.0);
highPassColor.b = clamp(2.0 * highPassColor.b * highPassColor.b * 24.0, 0.0, 1.0);

vec4 highPassBlur=vec4(highPassColor.rgb,1.0);

三、取蓝色通道

---

蓝色通道保留细节更多

float b =min(currentColor.b,blur.b);
float maxChannelColor = max(max(highPassBlur.r, highPassBlur.g), highPassBlur.b);

取蓝色通道作为后面像素融合使用

四、线性融合

---

//b是上面蓝色通道取值
float value = clamp((b - 0.2) * 5.0, 0.0, 1.0);
//磨皮程度
float intensity = 1.0; // 0.0 - 1.0f 再大会很模糊
//细节的地方，不融合，痘印的地方，融合程度越深，计算系数
//细节的地方，值越小，黑色的地方，值越大
float currentIntensity = (1.0 - maxChannelColor / (maxChannelColor + 0.2)) * value * intensity;
//线性融合， 细节的地方不融合，其他地方融合
//x⋅(1−a)+y⋅a
vec3 r =mix(currentColor.rgb,blur.rgb,currentIntensity);

五、完整片元着色器代码

---

precision mediump float;
//顶点着色器传递过来的坐标
varying mediump vec2 aCoord;

//采样
uniform sampler2D vTexture;

//cpu传值width, height
uniform int width;
uniform int height;

vec2 blurCoordinates[20];

void main(){

    //步长
    vec2 singleStepOffset=vec2(1.0/float(width),1.0/float(height));
    //计算均值，20个值  先进行高斯模糊，效果会更好些
    blurCoordinates[0] =aCoord.xy+singleStepOffset* vec2(0.0, -10.0);
    blurCoordinates[1] = aCoord.xy + singleStepOffset * vec2(0.0, 10.0);
    blurCoordinates[2] = aCoord.xy + singleStepOffset * vec2(-10.0, 0.0);
    blurCoordinates[3] = aCoord.xy + singleStepOffset * vec2(10.0, 0.0);
    blurCoordinates[4] = aCoord.xy + singleStepOffset * vec2(5.0, -8.0);
    blurCoordinates[5] = aCoord.xy + singleStepOffset * vec2(5.0, 8.0);
    blurCoordinates[6] = aCoord.xy + singleStepOffset * vec2(-5.0, 8.0);
    blurCoordinates[7] = aCoord.xy + singleStepOffset * vec2(-5.0, -8.0);
    blurCoordinates[8] = aCoord.xy + singleStepOffset * vec2(8.0, -5.0);
    blurCoordinates[9] = aCoord.xy + singleStepOffset * vec2(8.0, 5.0);
    blurCoordinates[10] = aCoord.xy + singleStepOffset * vec2(-8.0, 5.0);
    blurCoordinates[11] = aCoord.xy + singleStepOffset * vec2(-8.0, -5.0);
    blurCoordinates[12] = aCoord.xy + singleStepOffset * vec2(0.0, -6.0);
    blurCoordinates[13] = aCoord.xy + singleStepOffset * vec2(0.0, 6.0);
    blurCoordinates[14] = aCoord.xy + singleStepOffset * vec2(6.0, 0.0);
    blurCoordinates[15] = aCoord.xy + singleStepOffset * vec2(-6.0, 0.0);
    blurCoordinates[16] = aCoord.xy + singleStepOffset * vec2(-4.0, -4.0);
    blurCoordinates[17] = aCoord.xy + singleStepOffset * vec2(-4.0, 4.0);
    blurCoordinates[18] = aCoord.xy + singleStepOffset * vec2(4.0, -4.0);
    blurCoordinates[19] = aCoord.xy + singleStepOffset * vec2(4.0, 4.0);

    //    科学的取法  正态分布
    vec4 currentColor=texture2D(vTexture,aCoord);
    vec3 rgb=currentColor.rgb;
    for (int i = 0; i < 20; i++) {
        rgb+=texture2D(vTexture,blurCoordinates[i].xy).rgb;
    }
    //  取平均值
    vec4 blur = vec4(rgb*1.0/21.0,currentColor.a);

    //  一个完整的图片相减  差异部分显示出来  高反差
    vec4 highPassColor=currentColor-blur;

    //高反差结果进一步调优  clamp内置函数使结果在0-1之间 2.0 * highPassColor.r * highPassColor.r * 24.0
    highPassColor.r = clamp(2.0 * highPassColor.r * highPassColor.r * 24.0,0.0,1.0);
    highPassColor.g = clamp(2.0 * highPassColor.g * highPassColor.g * 24.0, 0.0, 1.0);
    highPassColor.b = clamp(2.0 * highPassColor.b * highPassColor.b * 24.0, 0.0, 1.0);

    vec4 highPassBlur=vec4(highPassColor.rgb,1.0);

    float b =min(currentColor.b,blur.b);
    float maxChannelColor = max(max(highPassBlur.r, highPassBlur.g), highPassBlur.b);

    //b是上面蓝色通道取值
    float value = clamp((b - 0.2) * 5.0, 0.0, 1.0);
    //磨皮程度
    float intensity = 1.0; // 0.0 - 1.0f 再大会很模糊
    //细节的地方，不融合，痘印的地方，融合程度越深
    //细节的地方，值越小，黑色的地方，值越大，计算系数
    float currentIntensity = (1.0 - maxChannelColor / (maxChannelColor + 0.2)) * value * intensity;
    //线性融合， 细节的地方不融合，其他地方融合
    //x⋅(1−a)+y⋅a
    vec3 r =mix(currentColor.rgb,blur.rgb,currentIntensity);

    gl_FragColor=vec4(r,1.0);
}

详细代码位置

六、参考

---

1、图像技术在直播中的应用（上）——美颜技术
2、gpuimage