温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

github怎么实现FaceU边框模糊效果

发布时间:2022-03-16 14:19:36 来源:亿速云 阅读:193 作者:iii 栏目:大数据

本篇内容介绍了“github怎么实现FaceU边框模糊效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

FaceU激萌相机中的边框模糊效果

github怎么实现FaceU边框模糊效果

边框模糊效果分析

我们来拆分成以下两个部分:内部显示和外部边框模糊部分。

内部的显示内容是跟Full模式比较,可以得到,内部图是一个完整的显示图片,是一张原始输入图进行缩放得到的。

外部边框,我们仔细对比可以发现,也是由输入图像经过模糊处理之后得到。

边框和内容栏的实现

实现的fragment shader 如下:

precision mediump float;
uniform sampler2D inputTexture; // 原始图像
uniform sampler2D blurTexture;  // 经过高斯模糊的图像
varying vec2 textureCoordinate;

uniform float blurOffsetX;  // x轴边框模糊偏移值
uniform float blurOffsetY;  // y轴边框模糊偏移值

void main() {
   // uv坐标
   vec2 uv = textureCoordinate.xy;
   vec4 color;
   // 中间为原图,需要缩小
   if (uv.x >= blurOffsetX && uv.x <= 1.0 - blurOffsetX
       && uv.y >= blurOffsetY && uv.y <= 1.0 - blurOffsetY) {
       // 内部UV缩放值
       float scaleX = 1.0 / (1.0 - 2.0 * blurOffsetX);
       float scaleY = 1.0 / (1.0 - 2.0 * blurOffsetY);
       // 计算出内部新的UV坐标
       vec2 newUV = vec2((uv.x - blurOffsetX) * scaleX, (uv.y - blurOffsetY) * scaleY);
       color = texture2D(inputTexture, newUV);
   } else { // 边框部分使用高斯模糊的图像
       color = texture2D(blurTexture, uv);
   }
   gl_FragColor = color;
}

我们将需要处理的原图和经过高斯模糊处理的图片传进来,就可以得到以下的效果:

github怎么实现FaceU边框模糊效果

“github怎么实现FaceU边框模糊效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI