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渲染画面效果