NDK OpenGL实现美颜功能

sziitjin

已于 2023-07-16 15:56:35 修改

阅读量458

点赞数

分类专栏： NDK 文章标签： OpenGL

于 2023-07-16 15:47:59 首次发布

本文链接：https://blog.csdn.net/sziitjin/article/details/131750827

版权

NDK 专栏收录该内容

48 篇文章 3 订阅

订阅专栏

NDK系列之OpenGL实现美颜特效，本节主要是在上一节大眼萌的特效视上增加美颜特效。

OpenGL视频特效系列：

NDK OpenGL渲染画面效果

NDK OpenGL离屏渲染与工程代码整合

NDK OpenGL仿抖音极快极慢录制特效视频

NDK OpenGL与OpenCV实现大眼萌特效

NDK OpenGL实现美颜功能

实现效果：

实现逻辑：

1.增加美颜过滤器；

2.编写美颜片元着色器代码；

3.开启美颜效果。

一、美颜过滤器

美颜过滤器BeautyFilter的写法跟其他过滤器基本是差不多的，在初始化构造方法的时候，调用父类进行初始化顶点着色器代码和片元着色器代码；

public class BeautyFilter extends BaseFrameFilter {

    private final int width; // 最新改变的宽
    private final int height; // 最新改变的高

    public BeautyFilter(Context context) {
        super(context, R.raw.base_vertex, R.raw.beauty_fragment); // beauty_fragment片元着色器:专门用来做 模糊/高反差/磨皮
        width = glGetUniformLocation(mProgramId, "width"); // 关联最新改变的宽
        height = glGetUniformLocation(mProgramId, "height"); // 关联最新改变的高
    }

    @Override
    public int onDrawFrame(int textureId) {
        // 1：设置视窗
        glViewport(0, 0, mWidth, mHeight);
        // 这里是因为要渲染到FBO缓存中，而不是直接显示到屏幕上
        glBindFramebuffer(GL_FRAMEBUFFER, mFrameBuffers[0]);

        // 2：使用着色器程序
        glUseProgram(mProgramId);

        // 渲染 传值
        // 1：顶点数据
        mVertexBuffer.position(0);
        glVertexAttribPointer(vPosition, 2, GL_FLOAT, false, 0, mVertexBuffer); // 传值
        glEnableVertexAttribArray(vPosition); // 传值后激活

        // 2：纹理坐标
        mTextureBuffer.position(0);
        glVertexAttribPointer(vCoord, 2, GL_FLOAT, false, 0, mTextureBuffer); // 传值
        glEnableVertexAttribArray(vCoord); // 传值后激活

        // TODO 给纹理宽高 赋值  只有这个点和以前不同，其他的 全部都是模板代码 都是之前的
        glUniform1i(width, mWidth);
        glUniform1i(height, mHeight);

        // 片元 vTexture
        glActiveTexture(GL_TEXTURE0); // 激活图层
        glBindTexture(GL_TEXTURE_2D, textureId); // 绑定
        glUniform1i(vTexture, 0); // 传递参数

        glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); // 通知opengl绘制

        // 解绑FBO
        glBindTexture(GL_TEXTURE_2D, 0);
        glBindFramebuffer(GL_FRAMEBUFFER, 0);

        return mFrameBufferTextures[0]; // 同学们注意：返回fbo的纹理id
    }
}

二、美颜片元着色器

要实现美颜效果需要进行一下三步：

1）模糊

// TODO 1: 高斯模糊处理（参考代码是对绿色通道做了高斯模糊， 而我们这里对所有通道做了高斯模糊）
    vec2 singleStepOffset = vec2(1.0/float(width), 1.0/float(height));

    /** 高斯模糊原理：所谓"模糊"，可以理解成每一个像素都取周边像素的平均值
         1 中间像素点 是根据周边像素的平均值来进行高斯模糊的
         2 360度 / 20度 = 18度 每隔18度就取像素值，然后再去映射下面的坐标值
    */
    // 下面是为了去 采集20个点 （对green通道进行高斯模糊） 我们等下使用rgb通道进行高斯模糊经验值（取周边 平均值）
    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.00, 8.0);
    blurCoordinates[7] = aCoord.xy + singleStepOffset * vec2(-5.0, 8.0);
    blurCoordinates[6] = aCoord.xy + singleStepOffset * vec2(-5., -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);  // 当前采样点的像素值 vec4代表rgba
    vec3 rgb = currentColor.rgb;

    for (int i = 0; i < 20; i++){ // 计算坐标颜色值的总和
        rgb += texture2D(vTexture, blurCoordinates[i].xy).rgb; // 采集20个点的像素
    }

    // rgb： 21个点的总和
    vec4 blur = vec4(rgb *1.0/21.0, currentColor.a);

2）高反差

// TODO 2：高反差
    vec4 highPassColor = currentColor - blur; // 高反差公式：原图 - 高斯模糊 = 高反差
    // 强度系数 - TODO 强光模式(手电筒照上去)
    // clamp（夹具函数） glsl着色器语音的内置函数 ：取三个参数的中间值
    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); // 可以去痘印，疤痕 等
    // highPassBlur == rgba 经过了 高斯模糊 高反差 强光模式
    gl_FragColor = highPassBlur; // TODO 2：高反差，先不磨皮，先运行看看效果了【只能看到五官轮廓黑边边了】

3）磨皮

// TODO 3：磨皮
    // 蓝色分量  min glsl着色器语音的内置函数：取两个参数的最小值
    float blue = min(currentColor.b, blur.b); // 取两个参数的最小值
    float value = clamp((blue - 0.2) * 5.0, 0.0, 1.0); // 【同学们注意：需要反复去调】 经验值  最开始做美颜功能前辈

    // 取r, g, b 三个分量中最大的值   max glsl着色器语音的内置函数：取三个参数的最大值
    float maxChannelColor = max(max(highPassColor.r, highPassColor.g), highPassColor.b);
    float intensity = 1.0; // 磨皮强度，磨皮强度 不能太强，例如:3.0 那就看起来有斑纹了
    float currentIntensity = (1.0 - maxChannelColor / (maxChannelColor + 0.2)) * value * intensity; // 【同学们注意：需要反复去调】 经验值  最开始做美颜功能前辈

    // 线性混合
    // mix: 返回线性混合的x和y，如：x⋅(1−a)+y⋅a
    vec3 rgb_value = mix(currentColor.rgb, blur.rgb, currentIntensity);

    // 把rgb的vec3 变成 vec4，所以增加1.0 透明通道， 因为gl_FragColor内置变量就是rgba的vec4类型
    gl_FragColor = vec4(rgb_value, 1.0); // gl_FragColor: rgb不支持 yuv   TODO 3：磨皮，看看效果

完整美颜片元着色器代码：

// TODO 美颜的片元着色器代码
// 既然是美颜，肯定是美颜整个屏幕，所以不需要顶点着色器 直接用base的顶点着色器，只需要美颜的片元着色器

precision mediump float; // 中精度

varying vec2 aCoord; // 纹理坐标

uniform sampler2D vTexture; // 采样器

uniform int width; // 纹理的宽

uniform int height; // 纹理的高

vec2 blurCoordinates[20];

// 大问题思考：我们做美颜，难道要自己写吗？ 不需要自己写美颜功能
// 美颜功能是基础功能-很复杂的   小米手机  华为手机  xxx手机

// 美颜三部曲：1.高斯模糊，  2.高反差     3.磨皮
// 官方源码 高斯模糊：采样点 绿色 基本上就可以做高斯模糊了，  我们等下要高rgb，我们会更丰富

void main() {
    // TODO 1: 高斯模糊处理（参考代码是对绿色通道做了高斯模糊， 而我们这里对所有通道做了高斯模糊）
    vec2 singleStepOffset = vec2(1.0/float(width), 1.0/float(height));

    /** 高斯模糊原理：所谓"模糊"，可以理解成每一个像素都取周边像素的平均值
         1 中间像素点 是根据周边像素的平均值来进行高斯模糊的
         2 360度 / 20度 = 18度 每隔18度就取像素值，然后再去映射下面的坐标值
    */
    // 下面是为了去 采集20个点 （对green通道进行高斯模糊） 我们等下使用rgb通道进行高斯模糊经验值（取周边 平均值）
    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.00, 8.0);
    blurCoordinates[7] = aCoord.xy + singleStepOffset * vec2(-5.0, 8.0);
    blurCoordinates[6] = aCoord.xy + singleStepOffset * vec2(-5., -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);  // 当前采样点的像素值 vec4代表rgba
    vec3 rgb = currentColor.rgb;

    for (int i = 0; i < 20; i++){ // 计算坐标颜色值的总和
        rgb += texture2D(vTexture, blurCoordinates[i].xy).rgb; // 采集20个点的像素
    }

    // rgb： 21个点的总和
    vec4 blur = vec4(rgb *1.0/21.0, currentColor.a);

    // gl_FragColor = blur; // TODO 1: 高斯模糊处理 看看效果 【画面模糊了，看不清楚细节了】

    // TODO 2：高反差
    vec4 highPassColor = currentColor - blur; // 高反差公式：原图 - 高斯模糊 = 高反差
    // 强度系数 - TODO 强光模式(手电筒照上去)
    // clamp（夹具函数） glsl着色器语音的内置函数 ：取三个参数的中间值
    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); // 可以去痘印，疤痕 等
    // highPassBlur == rgba 经过了 高斯模糊 高反差 强光模式
    gl_FragColor = highPassBlur; // TODO 2：高反差，先不磨皮，先运行看看效果了【只能看到五官轮廓黑边边了】

    // TODO 3：磨皮
    // 蓝色分量  min glsl着色器语音的内置函数：取两个参数的最小值
    float blue = min(currentColor.b, blur.b); // 取两个参数的最小值
    float value = clamp((blue - 0.2) * 5.0, 0.0, 1.0); // 【同学们注意：需要反复去调】 经验值  最开始做美颜功能前辈

    // 取r, g, b 三个分量中最大的值   max glsl着色器语音的内置函数：取三个参数的最大值
    float maxChannelColor = max(max(highPassColor.r, highPassColor.g), highPassColor.b);
    float intensity = 1.0; // 磨皮强度，磨皮强度 不能太强，例如:3.0 那就看起来有斑纹了
    float currentIntensity = (1.0 - maxChannelColor / (maxChannelColor + 0.2)) * value * intensity; // 【同学们注意：需要反复去调】 经验值  最开始做美颜功能前辈

    // 线性混合
    // mix: 返回线性混合的x和y，如：x⋅(1−a)+y⋅a
    vec3 rgb_value = mix(currentColor.rgb, blur.rgb, currentIntensity);

    // 把rgb的vec3 变成 vec4，所以增加1.0 透明通道， 因为gl_FragColor内置变量就是rgba的vec4类型
    gl_FragColor = vec4(rgb_value, 1.0); // gl_FragColor: rgb不支持 yuv   TODO 3：磨皮，看看效果

    // gl_FragColor 必须是接收 rgba，所以没有办法，手动组装  1.0 == a 透明值

    // 美白的代码：color.r=max(min(color.r, 1.0), 0.0);
    // 改装后代码：clamp(color.r, 1.0, 0.0);
}

三、开启美颜效果

1）用户点击开启美颜

((CheckBox)findViewById(R.id.chk_beauty)).setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
	@Override
	public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
		mGLSurfaceView.enableBeauty(isChecked);
	}
});

2）将事件分发到自定义渲染器MyGlRendere，在渲染器统一处理效果，开启美颜特效

public void enableBeauty(final boolean isChecked) {
	myGLSurfaceView.queueEvent(new Runnable() {
		public void run() {
			if (isChecked) {
				mBeautyFilter = new BeautyFilter(myGLSurfaceView.getContext());
				mBeautyFilter.onReady(mWidth, mHeight);
			} else {
				mBeautyFilter.release();
				mBeautyFilter = null;
			}
		}
	});
}

3）相机绘制一帧图像时，会回调到自定义渲染器MyGlRendere的onDrawFrame()函数，获取纹理对象的图像数据，先通过CamreaFilter相机过滤器，实现相关效果，再将其FBO的纹理ID传递给大眼过滤器BigEyeFilter，大眼过滤器增加完特效后，再将包含大眼特效的纹理ID传递给美颜过滤器BeautyFilter，美颜过滤器增加完特效后，将包含美颜特效的纹理ID，传递给ScreenFilter屏幕过滤器，将最终成果的纹理ID通过OpenGL渲染到屏幕；

@Override
public void onDrawFrame(GL10 gl) {
	Log.i(TAG, "onDrawFrame");
	// 每次清空之前的：例子：上课擦黑白 是一个道理
	glClearColor(255, 0, 0, 0); // 屏幕清理成颜色 红色，清理成红色的黑板一样
	// mask 细节看看此文章：https://blog.csdn.net/z136411501/article/details/83273874
	// GL_COLOR_BUFFER_BIT 颜色缓冲区
	// GL_DEPTH_BUFFER_BIT 深度缓冲区
	// GL_STENCIL_BUFFER_BIT 模型缓冲区
	glClear(GL_COLOR_BUFFER_BIT);

	// 绘制摄像头数据
	mSurfaceTexture.updateTexImage();  // 将纹理图像更新为图像流中最新的帧数据【刷新一下】
	// 画布，矩阵数据，通过Native层将数据存储到mtx
	mSurfaceTexture.getTransformMatrix(mtx);
	// 相机过滤器，绘制一帧图像，不可见
	mCameraFilter.setMatrix(mtx);
	int textureId = mCameraFilter.onDrawFrame(mTextureID[0]); // 摄像头，矩阵，都已经做了
	// 增加其他特效
	/*textureId = 美白.onDrawFrame(textureId);
	textureId = 大眼.onDrawFrame(textureId);
	textureId = xxx.onDrawFrame(textureId);*/
	// TODO 【大眼相关代码】 textureId = 大眼Filter.onDrawFrame(textureId);
	if (null != mBigEyeFilter) {
		mBigEyeFilter.setFace(mFaceTrack.getFace());
		textureId = mBigEyeFilter.onDrawFrame(textureId);
	}

	// TODO 【美颜相关代码】
	if (null != mBeautyFilter) { // 没有不需要 人脸追踪/人脸关键点，整个屏幕美颜
		textureId = mBeautyFilter.onDrawFrame(textureId);
	}

	// 屏幕过滤器，绘制一帧图像，屏幕显示
	mScreenFilter.onDrawFrame(textureId); // textureId == 最终成果的纹理ID

	mMediaRecorder.encodeFrame(textureId, mSurfaceTexture.getTimestamp());
}

4）美颜过滤器BeautyFilter绘制美颜效果

@Override
public int onDrawFrame(int textureId) {
	// 1：设置视窗
	glViewport(0, 0, mWidth, mHeight);
	// 这里是因为要渲染到FBO缓存中，而不是直接显示到屏幕上
	glBindFramebuffer(GL_FRAMEBUFFER, mFrameBuffers[0]);

	// 2：使用着色器程序
	glUseProgram(mProgramId);

	// 渲染 传值
	// 1：顶点数据
	mVertexBuffer.position(0);
	glVertexAttribPointer(vPosition, 2, GL_FLOAT, false, 0, mVertexBuffer); // 传值
	glEnableVertexAttribArray(vPosition); // 传值后激活

	// 2：纹理坐标
	mTextureBuffer.position(0);
	glVertexAttribPointer(vCoord, 2, GL_FLOAT, false, 0, mTextureBuffer); // 传值
	glEnableVertexAttribArray(vCoord); // 传值后激活

	// TODO 给纹理宽高 赋值  只有这个点和以前不同，其他的 全部都是模板代码 都是之前的
	glUniform1i(width, mWidth);
	glUniform1i(height, mHeight);

	// 片元 vTexture
	glActiveTexture(GL_TEXTURE0); // 激活图层
	glBindTexture(GL_TEXTURE_2D, textureId); // 绑定
	glUniform1i(vTexture, 0); // 传递参数

	glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); // 通知opengl绘制

	// 解绑FBO
	glBindTexture(GL_TEXTURE_2D, 0);
	glBindFramebuffer(GL_FRAMEBUFFER, 0);

	return mFrameBufferTextures[0]; // 同学们注意：返回fbo的纹理id
}

至此，OpenGL实现美颜特效已完成，后续再增加其他特效也是这个套路。

开源的特效有很多：

美颜开源的着色器代码：https://github.com/wuhaoyu1990/MagicCamera/blob/master/Project-AndroidStudio/magicfilter/src/main/res/raw/beauty.glsl
美白开源的着色器代码：
https://github.com/smzhldr/AGLFramework/blob/master/aglframework/src/main/res/raw/light_f.
glsl

源码：

NdkOpenGLPlay: NDK OpenGL渲染画面效果