android opengl滤镜,Android OpenGL ES滤镜开发之美颜效果

野性酷女 2022-10-05 13:57 340阅读 0赞

主要是通过对片元着色器的处理来达到美颜的效果

高斯模糊

也叫做高斯平滑，主要是用来降低图像早生以及降低细节层次，是的图像看起来更加的平滑。

在片云着色器中，取当前数据周边的20个点的颜色通道的值，进行相加然后得出平均值，这就是模糊后的采样点的颜色。

![cf048347095d][]

高反差保留

在经过高斯模糊之后的图像，也会把需要突出的五管等也模糊掉，这显然不符合我们的要求，所以这里需要高反差保留。高反差保留有两个公式，这里我只用简单的这一种公式：高反差保留 = 原图 - 高斯模糊图，然后将原图和高反差保留图进行叠加，可以得到锐化的图像。

//高反差保留算法

// 原图 - 高斯模糊图

![cf048347095d][]

出来的效果图是这样

![cf048347095d][]

强光处理

经过高反差以后，图像比较暗淡，所以这里进行一个强光操作

![cf048347095d][]

效果图：

![cf048347095d][]

融合

![cf048347095d][]

效果图：

![cf048347095d][]

完整的片元着色器代码如下

precision mediump float;

//当前要采集像素的点

varying mediump vec2 aCoord;

//纹理

uniform sampler2D vTexture;

//输出的宽与高

uniform int width;

uniform int height;

vec2 blurCoordinates\[20\];

void main()\{

//1、 模糊 ： 平滑处理 降噪

//singleStepOffset：步长

vec2 singleStepOffset =vec2(1.0/float(width),1.0/float(height));

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++) \{

//采集20个点 的像素值 相加 得到总和

rgb += texture2D(vTexture, blurCoordinates\[i\].xy).rgb;

// rgb：21个点的像素和

//平均值 模糊效果

// rgba

vec4 blur =vec4(rgb \*1.0 /21.0, currentColor.a);

//gl\_FragColor = blur;

//高反差

//https://www.jianshu.com/p/bb702124d2ad

//https://blog.csdn.net/matrix\_space/article/details/22426633

// 强光处理: color = 2 \* color1 \* color2

//  24.0 强光程度

// clamp:获得三个参数中大小处在中间的那个值

vec4 highPassColor = currentColor - blur;

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);

//3、融合 -> 磨皮

//蓝色通道值

float b = min(currentColor.b, blur.b);

float value = clamp((b -0.2) \*5.0, 0.0, 1.0);

// RGB的最大值

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

// 磨皮程度

float intensity =1.0; // 0.0 - 1.0f 再大会很模糊

float currentIntensity = (1.0 - maxChannelColor / (maxChannelColor +0.2)) \* value \* intensity;

//gl\_FragColor = highPassBlur;

// 一个滤镜

//opengl 内置函数 线性融合

//混合 x\*(1−a)+y⋅a

// 第三个值越大，在这里融合的图像 越模糊

vec3 r = mix(currentColor.rgb,blur.rgb,currentIntensity);

gl\_FragColor =vec4(r,1.0);

参考资料

https://blog.csdn.net/oShunz/article/details/50536031

https://www.jianshu.com/p/a76a1201ae53

https://blog.csdn.net/matrix\_space/article/details/22426633

https://www.jianshu.com/p/bb702124d2ad

[cf048347095d]: /images/20221005/c0128ca596124d268056d68ddab49c90.png

android opengl滤镜,Android OpenGL ES滤镜开发之美颜效果

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关使用 OpenGL SL 来实现实时滤镜的效果

相关 CSS滤镜filter，让页面加上滤镜效果

相关【OpenGL学习】3DLUT颜色滤镜

相关 android glide滤镜,GitHub - h79314711/glide-transformations: 图片裁剪滤镜等

相关 android opengl滤镜,Android OpenGL ES滤镜开发之美颜效果

相关 android opengl滤镜,Android OpenGL ES滤镜开发设计

相关 ffmpeg 滤镜及其效果

相关 [OpenGL]未来视觉5-抖音滤镜

相关滤镜之投影效果

相关图像滤镜艺术---水彩画滤镜