效果图:
首先请阅读上一篇文章:https://blog.csdn.net/zhang1461376499/article/details/111948781
模糊背景通常用于弹窗图层的虚化效果。
核心是高斯核的使用,文中使用3X3的高斯核。
上图是3X3的高斯核,当前像素的颜色由附近9个格子按权重混合而成,所有格子权重之和等于1。
- 原理:创建一张渲染纹理(RenderTexture),将本场景屏幕上图像渲染到此纹理。然后对此纹理做高斯模糊。代码如下:
//顶点着色器代码vert
attribute vec4 a_position;
attribute vec2 a_texCoord;
#ifdef GL_ES
varying mediump vec2 v_texCoord;
varying mediump vec2 v_position;//将顶点的位置传给ps,用于计算该顶点与灯的距离
#else
varying vec2 v_texCoord;
varying vec2 v_position;
#endif
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201230174002498.gif)
void main()
{
v_position = a_position.xy;
gl_Position = CC_PMatrix * a_position;
v_texCoord = a_texCoord;
}
<