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"); // 关联最新改变的高}@Overridepublic 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);// 片元 vTextureglActiveTexture(GL_TEXTURE0); // 激活图层glBindTexture(GL_TEXTURE_2D, textureId); // 绑定glUniform1i(vTexture, 0); // 传递参数glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); // 通知opengl绘制// 解绑FBOglBindTexture(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代表rgbavec3 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⋅avec3 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代表rgbavec3 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⋅avec3 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() {@Overridepublic 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层将数据存储到mtxmSurfaceTexture.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 == 最终成果的纹理IDmMediaRecorder.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);// 片元 vTextureglActiveTexture(GL_TEXTURE0); // 激活图层glBindTexture(GL_TEXTURE_2D, textureId); // 绑定glUniform1i(vTexture, 0); // 传递参数glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); // 通知opengl绘制// 解绑FBOglBindTexture(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渲染画面效果
