webgl智慧楼宇发光系列之线性采样下高斯模糊

2022-04-24 202

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： webgl智慧楼宇发光系列之线性采样下高斯模糊效率问题线性采样代码讲解总结参考文档

webgl智慧楼宇发光系列之线性采样下高斯模糊

前面一篇文章 <webgl智慧楼宇发光效果算法系列之高斯模糊>, 我们知道了高斯模糊的本质原理，就是对每个像素，按照正态分布的权重去获取周边像素的值进行平均，是一种卷积操作。

同时我们可以指定周边像素的数量，比如可以是3X3，或者5X5，通用的表达就是N X N，数字N通常称之为模糊半径，这在之前的文章的代码中有体现（uRadius）：

1uniform float uRadius;
 2float gaussianPdf(in float x, in float sigma) {
 3  return 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma;
 4}
 5void main() {
 6  for( int i = 1; i < MAX_KERNEL_RADIUS; i ++ ) {
 7    float x = float(i);
 8    if(x > radius){
 9      break;
10    }
11    ...
12  }
13  vec4 result = vec4(1.0) - exp(-diffuseSum/weightSum * uExposure);
14  gl_FragColor = result;
15}
16`

效率问题

通常，我们希望模糊的效果越强烈，模糊半径就会要求越大。所谓的半径就是上面的数字N。

我们知道，要实现一个NxN大小的高斯模糊，在纹理的每个像素点，都需要去获取周边N个像素点。因为1024_1024大小的纹理，要实现33 _ 33 大小的高斯模糊，需要访问大概1024 _ 1024 _ 33 * 33≈11.4亿个纹理像素，才能应用整个图像的模糊效果。

为了获得更有效的算法，我们来看看高斯函数的一些特性：

二维高斯函数可以通过将两个一维高斯函数相加来计算。
分布为2σ的高斯函数等于分布为σ的两个高斯函数的乘积。

高斯函数的这两个属性为我们提供了进行大量优化的空间。

基于第一个属性，我们可以将二维高斯函数分成两个一维函数。在使用片段着色器的情况下，我们可以将高斯滤镜分为水平模糊滤镜和垂直模糊滤镜，在渲染后仍可获得准确的结果。这个时候，1024_1024大小的纹理，要实现33 _ 33 大小的高斯模糊，需要访问大概1024 _ 1024 _ 33*2≈6,900万个纹理提取。这种优化明细减少了一个量级。文章《webgl智慧楼宇发光效果算法系列之高斯模糊》已经实现了这一优化。

第二个属性可用于绕过平台上的硬件限制，这些平台仅在一次pass中仅支持有限数量的纹理提取。

线性采样

到此，我们知道了把一个二维的高斯模糊分离成两个一维的高斯模糊。效率上也有了大幅度的提高。但是实际上，我们还可以通过线性采样的特性进一步提高效率。

我们知道，要获取一个像素信息，就要做一次贴图的读取。这就意味33个像素信息，就需要做33次贴图的读取操作。但是由于在GPU上面可以随意进行双线线性插值，而没有额外的性能消耗。这就意味着，如果我们不再像素的中心点读取贴图，就可以获得多个像素的信息。如下图所示：

微信图片_20220425133327.png

假设两个像素，我们在像素1中心点读取贴图就是获取像素1的颜色，在像素2中心点读取贴图就是获取像素2的颜色；而在像素1中心点和像素2中心点的某个位置读取贴图，则会获取像素1和像素2的颜色的加权平均的效果。

因为我们做高斯模糊的时候，本身就是获取周边相邻元素的加权平均值，因此利用线性采样的这个特性，可以把原本2个像素的采样，减少为一次采样。如果原本33次采样，则可以减少到17次。

对于两个纹素的采样，需要调整坐标使其与纹素#1中心的距离等于纹素#2的权重除以两个权重之和。同样的，坐标与纹素#2中心的距离应该等于纹素#1的权重除以两个权重之和。

然后我们就有了计算线性采样高斯滤波的权重和位移公式：

微信图片_20220425133331.png

代码讲解

首先定义一个uniform变量，该变量表示是否启用线性采样的方法：

1uniform bool uUseLinear;

然后如果使用线性采样，就把原本的采样次数减少一半：

1 if(uUseLinear){
2    radius = uRadius / 2.0;
3  }

再然后，如果使用线性采样，就使用上述的公式进行像素提取:

1if(uUseLinear){
 2      // http://rastergrid.com/blog/2010/09/efficient-gaussian-blur-with-linear-sampling/
 3      float t1 = 2.0 * x - 1.0,t2 = 2.0 * x ;
 4      float w1 = gaussianPdf(t1,fSigma);
 5      float w2 = gaussianPdf(t2,fSigma);
 6      w = w1 + w2;
 7      t = (t1 * w1 + t2 * w2) / w;
 8    }
 9
10    vec2 uvOffset = uDirection * invSize * t;
11    vec4 sample1 = texture2D( uColorTexture, vUv + uvOffset).rgba;
12    vec4 sample2 = texture2D( uColorTexture, vUv - uvOffset).rgba;
13    diffuseSum += (sample1 + sample2) * w;
14    weightSum += 2.0 * w;