要实现一个什么样的效果
来自剪影app画布模糊的效果：
IMG20201215_094116.png
思路：怎么做
先画背景再画原始视频帧。
高斯模糊背景怎么画？
本方案参考基于exoplayer播放器的高斯模糊视频滤镜，用这个方案实现了视频流的背景铺满播放（用在信息流播放视频，还没有做视频编辑的幕布）。
glsl 如下，三个参数我调了好久，另外注意“vTextureCoord”等名称要和顶点shader中一致
private final static float radius = 5.0f;//偏移量
private final static int blurX = 5, blurY = 5;//X方向, Y方向
private final static double trans = 0.005d;//透明度
private String GAUSSIAN_BLUR_SHADER = "#extension GL_OES_EGL_image_external : require\n" +
"precision mediump float;\n" +
"varying vec2 vTextureCoord;\n" +
"uniform samplerExternalOES sTexture;\n" +
"const float resolution = 1024.0;\n" +
"const float radius = "+radius+";\n" +
"vec2 dir = vec2(1.0,1.0);\n" +
"void main() {\n" +
" highp vec4 centralColor = vec4(0.0);\n" +
" float blur = radius/resolution;\n" +
" float hstep = dir.x;\n" +
" float vstep = dir.y;\n" +
" int x = "+blurX+";int y = "+blurY+";\n" +
" for(int i = x; i > 0; i--){\n" +
" for(int j = y; j > 0; j--){\n" +
" centralColor += texture2D(sTexture, vec2(vTextureCoord.x + float(i)*blur*hstep, vTextureCoord.y +float(j)*blur*vstep))*"+trans+";" +
" centralColor += texture2D(sTexture, vec2(vTextureCoord.x - float(i)*blur*hstep, vTextureCoord.y +float(j)*blur*vstep))*"+trans+";" +
" centralColor += texture2D(sTexture, vec2(vTextureCoord.x - float(i)*blur*hstep, vTextureCoord.y -float(j)*blur*vstep))*"+trans+";" +
" centralColor += texture2D(sTexture, vec2(vTextureCoord.x + float(i)*blur*hstep, vTextureCoord.y -float(j)*blur*vstep))*"+trans+";" +
" }\n" +
" }\n" +
" gl_FragColor = vec4(centralColor);\n" +
"}";
实践：做产品需求中遇到的问题
将上述方案移植到视频编辑模块实现后，发现其模糊程度不可调参，....因为产品要求用户可以设置4档模糊程度。也不是不可调，调了不对劲啊...
radius ？发现调大了之后有重影，越调大，重影越多...
blurX 、blurY？越调怎么锯齿越严重呢,竞品不是这样啊...
仔细看上述算法，这几个参数无论怎么调，它只用了4个像素去做平滑啊，难怪效果不对...代码不能乱抄，所谓的高斯模糊到底是怎么一回事呢
用大白话来解释高斯模糊，就是采集当前像素一定范围内的颜色，将采集到的颜色按比例进行合成（越靠近当前像素的颜色比例越高，也就是正态分布的体现），得到一个比较均匀的颜色。
将图像中的每个像素都按照上面的流程进行处理，最后就可以得到更为平滑（模糊）的图像。
采集的范围越大，得到的图像就会越模糊。
方案1 https://www.shadertoy.com/view/XdfGDH （这个网站是个神奇的工具，就是打开太慢了）
可行，现在就是这样做的
public static String getFragmentShader(int width,int height,boolean isOES) {
float hStep = 1.0f / width;
float vStep = 1.0f / height;
String header=isOES?"#extension GL_OES_EGL_image_external : require\n":"";
String sTextureDeclare=isOES?"uniform samplerExternalOES sTexture;\n": "uniform lowp sampler2D sTexture;\n";
return header +
"precision mediump float;\n" +
"varying vec2 vTextureCoord;\n" +
//声明可变参数 radius
sTextureDeclare +
"uniform int radius;\n" +
"float normpdf(in float x, in float sigma) {\n" +
" return 0.39894 * exp(-0.5 * x * x / (sigma * sigma)) / sigma;\n" +
"}\n" +
"void main() {\n" +
" vec3 c = texture2D(sTexture, vTextureCoord).rgb;\n" +
//与中心像素的距离半径，即核的大小
" int kSize = (radius - 1) / 2;\n" +
//15为核最大的半径值
" float kernel[15];\n" +
" vec3 final_colour = vec3(0.0);\n" +
//取方差为7，按高斯函数计算核中各个像素的权值
" float sigma = 7.0;\n" +
" float Z = 0.0;\n" +
" for (int j = 0; j <= kSize; ++j) {\n" +
" kernel[kSize + j] = kernel[kSize - j] = normpdf(float(j), sigma);\n" +
" }\n" +
//计算高斯核卷积
" for (int j = 0; j < radius; ++j) {\n" +
" Z += kernel[j];\n" +
" }\n" +
" for (int i = -kSize; i <= kSize; ++i) {\n" +
" for (int j = -kSize; j <= kSize; ++j) {\n" +
" final_colour += kernel[kSize + j] * kernel[kSize + i] * texture2D(sTexture, (vTextureCoord.xy + vec2(float(i)*" + hStep + ", float(j)*" + vStep + "))).rgb;\n" +
" }\n" +
" }\n" +
" gl_FragColor = vec4(final_colour / (Z * Z), 1.0);\n" +
"}";
}
方案2：https://github.com/Jam3/glsl-fast-gaussian-blur
方案3：https://www.shadertoy.com/view/Xltfzj
拓展：纯色幕布的实现
private static String getFragmentShader(boolean isOES){
String header=isOES?"#extension GL_OES_EGL_image_external : require\n":"";
return header +
"precision mediump float;\n" +
"uniform float redF;\n" +
"uniform float greenF;\n" +
"uniform float blueF;\n" +
"uniform float alphaF;\n" +
"vec2 dir = vec2(1.0,1.0);\n" +
"void main() {\n" +
" gl_FragColor = vec4(redF,greenF,blueF,alphaF);\n" +
"}";
}
网友评论