Get the App
SLTechnology News&Howtos  ›  Internet Technology  › 

How to realize the blurring effect of FaceU frame by github

Shulou Source: shulou.com Published: 2022-05-31 14:33:01 10月01日 Update

This article introduces the relevant knowledge of "github how to realize FaceU border blur effect". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

Frame blur effect in FaceU

Analysis of Frame Blur Effect

Let's split it into two parts: the inner display and the outer border blur.

The internal display content is compared with the Full mode, and it can be obtained that the internal image is a complete display image, which is a scaled original input image.

The outer border, we can see by careful comparison, is also obtained by blurring the input image.

Implementation of border and content bar

The implemented fragment shader is as follows:

precision mediump float;

uniform sampler2D inputTexture; //original image

uniform sampler2D blurTexture; //Gaussian blurred image

varying vec2 textureCoordinate;

uniform float blurOffsetX; // x axis border blur offset value

uniform float blurOffsetY; //y-axis border blur offset value

void main() {

// uv coordinates

vec2 uv = textureCoordinate.xy;

vec4 color;

//The middle is the original image, which needs to be reduced.

if (uv.x >= blurOffsetX && uv.x = blurOffsetY && uv.y

Tags: Borders effects content images parts Gauss processing original pictures coordinates more knowledge offset input practical learned and then two content bar Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Microsoft macOS Shulou Tech Info Xiaomi NVidia