目录

相关文章

OpenGL系列之一：OpenGL第一个程序
OpenGL系列之二：绘制三角形
OpenGL系列之三：三角形顶点增加颜色
OpenGL系列之四：绘制四边形
OpenGL系列之五：绘制点和线
OpenGL系列之六：绘制立方体
OpenGL系列之七：纹理贴图
OpenGL系列之八：立方体纹理贴图
OpenGL系列之九：glsl着色器语言
OpenGL系列之十：VAO、VBO、EBO的应用
OpenGL系列之十一：Shader图片转场切换动画
OpenGL系列之十二：Shader燃烧动画
OpenGL系列之十三：实现Shader绚丽动画
OpenGL系列之十四：实现相机抖音特效

效果展示

实现步骤

这里我是以第十四个程序的代码（OpenGL系列之十四：实现相机抖音特效）为基础编写的

1.编写片元着色器

这里主要是修改片元着色器代码，代码如下，这里参考了这篇文章：Android OpenGLES 实时美颜(磨皮)的优化

meiyan.frag

#version 300 es
#extension GL_OES_EGL_image_external_essl3 : require
//高精度绘制，否则会模糊
precision highp float;
//precision mediump float;
uniform samplerExternalOES utexture0;
uniform float uValue;
in vec2 o_uv;
out vec4 fragColor;

// 磨皮程度(由低到高: 0.5 ~ 0.99)
uniform float opacity;
void main()
{
    int width = 1080;
    int height = 2090;
    vec3 centralColor = texture(utexture0, o_uv).rgb;
    if(opacity < 0.01) {
        fragColor = vec4(centralColor, 1.0);
    } else {
        float x_a = float(width);
        float y_a = float(height);

        float mul_x = 2.0 / x_a;
        float mul_y = 2.0 / y_a;
        vec2 blurCoordinates0 = o_uv + vec2(0.0 * mul_x, -10.0 * mul_y);
        vec2 blurCoordinates2 = o_uv + vec2(8.0 * mul_x, -5.0 * mul_y);
        vec2 blurCoordinates4 = o_uv + vec2(8.0 * mul_x, 5.0 * mul_y);
        vec2 blurCoordinates6 = o_uv + vec2(0.0 * mul_x, 10.0 * mul_y);
        vec2 blurCoordinates8 = o_uv + vec2(-8.0 * mul_x, 5.0 * mul_y);
        vec2 blurCoordinates10 = o_uv + vec2(-8.0 * mul_x, -5.0 * mul_y);

        mul_x = 1.8 / x_a;
        mul_y = 1.8 / y_a;
        vec2 blurCoordinates1 = o_uv + vec2(5.0 * mul_x, -8.0 * mul_y);
        vec2 blurCoordinates3 = o_uv + vec2(10.0 * mul_x, 0.0 * mul_y);
        vec2 blurCoordinates5 = o_uv + vec2(5.0 * mul_x, 8.0 * mul_y);
        vec2 blurCoordinates7 = o_uv + vec2(-5.0 * mul_x, 8.0 * mul_y);
        vec2 blurCoordinates9 = o_uv + vec2(-10.0 * mul_x, 0.0 * mul_y);
        vec2 blurCoordinates11 = o_uv + vec2(-5.0 * mul_x, -8.0 * mul_y);

        mul_x = 1.6 / x_a;
        mul_y = 1.6 / y_a;
        vec2 blurCoordinates12 = o_uv + vec2(0.0 * mul_x,-6.0 * mul_y);
        vec2 blurCoordinates14 = o_uv + vec2(-6.0 * mul_x,0.0 * mul_y);
        vec2 blurCoordinates16 = o_uv + vec2(0.0 * mul_x,6.0 * mul_y);
        vec2 blurCoordinates18 = o_uv + vec2(6.0 * mul_x,0.0 * mul_y);

        mul_x = 1.4 / x_a;
        mul_y = 1.4 / y_a;
        vec2 blurCoordinates13 = o_uv + vec2(-4.0 * mul_x,-4.0 * mul_y);
        vec2 blurCoordinates15 = o_uv + vec2(-4.0 * mul_x,4.0 * mul_y);
        vec2 blurCoordinates17 = o_uv + vec2(4.0 * mul_x,4.0 * mul_y);
        vec2 blurCoordinates19 = o_uv + vec2(4.0 * mul_x,-4.0 * mul_y);

        float central;
        float gaussianWeightTotal;
        float sum;
        float sampler;
        float distanceFromCentralColor;
        float gaussianWeight;

        float distanceNormalizationFactor = 3.6;

        central = texture(utexture0, o_uv).g;
        gaussianWeightTotal = 0.2;
        sum = central * 0.2;

        sampler = texture(utexture0, blurCoordinates0).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.09 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates1).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.09 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates2).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.09 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates3).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.09 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates4).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.09 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates5).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.09 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates6).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.09 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates7).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.09 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates8).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.09 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates9).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.09 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates10).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.09 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates11).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.09 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates12).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.1 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates13).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.1 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates14).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.1 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates15).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.1 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates16).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.1 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates17).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.1 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates18).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.1 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sampler = texture(utexture0, blurCoordinates19).g;
        distanceFromCentralColor = min(abs(central - sampler) * distanceNormalizationFactor, 1.0);
        gaussianWeight = 0.1 * (1.0 - distanceFromCentralColor);
        gaussianWeightTotal += gaussianWeight;
        sum += sampler * gaussianWeight;

        sum = sum/gaussianWeightTotal;

        sampler = centralColor.g - sum + 0.5;

        // 高反差保留
        for(int i = 0; i < 5; ++i) {
        if(sampler <= 0.5) {
        sampler = sampler * sampler * 2.0;
        } else {
        sampler = 1.0 - ((1.0 - sampler)*(1.0 - sampler) * 2.0);
        }
        }

        float aa = 1.0 + pow(sum, 0.3) * 0.09;
        vec3 smoothColor = centralColor * aa - vec3(sampler) * (aa - 1.0);
        smoothColor = clamp(smoothColor, vec3(0.0), vec3(1.0));

        smoothColor = mix(centralColor, smoothColor, pow(centralColor.g, 0.33));
        smoothColor = mix(centralColor, smoothColor, pow(centralColor.g, 0.39));

        smoothColor = mix(centralColor, smoothColor, opacity);

        fragColor = vec4(pow(smoothColor, vec3(0.96)), 1.0);
    }
}

2.增加美颜强度控制条

这里我使用了SeekBar进行控制

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.itfitness.openglcamera.widget.CameraView
        android:id="@+id/gl_surface"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <SeekBar
        android:id="@+id/sb_beauty"
        android:layout_margin="30dp"
        android:max="200"
        android:progress="50"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</RelativeLayout>

然后把SeekBar的值传给NDK层

sbBeauty.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener{
            override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) {
                cameraView.setBeautyVal(p1)
            }

            override fun onStartTrackingTouch(p0: SeekBar?) {

            }

            override fun onStopTrackingTouch(p0: SeekBar?) {

            }
        })

CameraView中增加方法

fun setBeautyVal(beauty:Int){
        glRender.setBeautyVal(beauty)
    }

GLRender中增加方法

fun setBeautyVal(beauty:Int){
        beautyVal = beauty
    }

调整JNI函数ndkPaintGL为如下

private external fun ndkPaintGL(textureId:Int,beautyVal:Int)

CCRender中的paintGL函数也增加美颜强度参数

extern "C"
JNIEXPORT void JNICALL
Java_com_itfitness_openglcamera_render_GLRender_ndkPaintGL(JNIEnv *env, jobject thiz,
                                                           jint texture_id,jint beautyVal) {
    ccRender->paintGL(texture_id,beautyVal);
}

然后给着色器传值的代码，这里我们转换为float类型，SeekBar设置的最大值为200因此这里的opacity取值范围为0~2

//设置美颜强度
    float opacity = beautyVal / 100.0f;
    ccOpenGlShader.SetUniformValue("opacity",opacity);

案例源码

https://gitee.com/itfitness/opengl-camera-beauty