基于webgl的高斯模糊

模糊有很多种,这里说高斯模糊,高斯模糊会给人一种毛玻璃的感觉.

以上三图分别为原图,高斯半径为1.5,高斯半径4.5

 

高斯模糊怎么模糊呢?

主要取决于一个函数:高斯函数,或者正态分布;

 

对于一个点,要对他进行模糊,就要选取周围的点的颜色值,然后将周围的点按权值相加,就得到了模糊后的点的颜色,

而这个权值,就是按照高斯函数来选取

 

下面的是一个高斯函数在(-1,-1)(-1,0).....这些点上的值

0.0453	0.0566	0.0453
0.0566	0.0707	0.0566
0.0453	0.0566	0.0453

这里,他的总和不是1,需要将每个位置的值除以总和,

得到下面的权重矩阵

0.0947	0.1183	0.0947
0.1183	0.1477	0.1183
0.0947	0.1183	0.0947

 

我们可以用js算出权重矩阵,然后传到着色器中

 

在片元着色器里,设置uniform float u_gaussRect[1020];

 

用来接收权重矩阵,然后接受数组大小.

权重矩阵怎么保存在数组里呢

我是保存为以下格式

[x偏移,y偏移,权重,x偏移,y偏移,权重,x偏移,y偏移,权重,.....]

比如上面的矩阵

[-1,-1,0.0947,-1,0,0.1183,.....]

    for(int i=0;i<1020;i++){

      if(i<u_gaussnum){

        total+=texture2D(u_Sampler, 

    vec2(v_TexCoord.x+u_gaussrect[i*3]*dv,v_TexCoord.y+u_gaussrect[i*3+1]*dv))*u_gaussrect[i*3+2];

      }

    }

数组定义了1020个,我们还需要使用u_gaussnum来保证循环次数少于矩阵的大小

为什么不是在for循环中的条件判断,因为GL不能这样做,光栅化的时候,循环是需要被进行内联展开(网上没搜到多少说明,我想的是估计像光栅化一样的吧)的,这样就必须确保循环的次数是一定的,

 

这里使用取色器选取的位置还需要×一定的dv,dv是偏移,如果没有偏移,选区的周围的点就会离中心点太近,产生不了效果

 

 

代码没有帖,有需要的评论哦