专栏首页计算机图形学 前端可视化 WebGLwebgl智慧楼宇发光系列之线性采样下高斯模糊
原创

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

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

前面一篇文章 [webgl智慧楼宇发光效果算法系列之高斯模糊](https://mp.weixin.qq.com/s/LZ_M51nDHfAPlcmwWglp_A),   我们知道了 高斯模糊的本质原理,就是对每个像素,按照正态分布的权重去获取周边像素的值进行平均,是一种卷积操作。

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

uniform float uRadius;
float gaussianPdf(in float x, in float sigma) {
  return 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma;
}
void main() {
  for( int i = 1; i < MAX_KERNEL_RADIUS; i ++ ) {
    float x = float(i);
    if(x > radius){
      break;
    }
    ...
  }
  vec4 result = vec4(1.0) - exp(-diffuseSum/weightSum * uExposure);
  gl_FragColor = result;
}
`

效率问题

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

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

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

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

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

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

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

线性采样

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

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

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

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

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

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

代码讲解

  • 首先定义一个uniform变量,该变量表示是否启用线性采样的方法:
uniform bool uUseLinear;
  • 然后如果使用线性采样,就把原本的采样次数减少一半:
 if(uUseLinear){
    radius = uRadius / 2.0;
  }
  • 再然后,如果使用线性采样,就使用上述的公式进行像素提取:
if(uUseLinear){
      // http://rastergrid.com/blog/2010/09/efficient-gaussian-blur-with-linear-sampling/
      float t1 = 2.0 * x - 1.0,t2 = 2.0 * x ;
      float w1 = gaussianPdf(t1,fSigma);
      float w2 = gaussianPdf(t2,fSigma);
      w = w1 + w2;
      t = (t1 * w1 + t2 * w2) / w;
    }

    vec2 uvOffset = uDirection * invSize * t;
    vec4 sample1 = texture2D( uColorTexture, vUv + uvOffset).rgba;
    vec4 sample2 = texture2D( uColorTexture, vUv - uvOffset).rgba;
    diffuseSum += (sample1 + sample2) * w;
    weightSum += 2.0 * w;

最终的绘制效果如下:

其中左边的未使用线性采样的机制,而右边的使用了线性采样,可以看出右边再减少了一半的采样的情况下,效果和左边的基本没有差别。

而效率上,通过测试,右边比左边大概提高了40%的渲染效率。

总结

通过线性采样的机制,我们可以看到效率提高了近一倍。这在一些对性能要求高得场景或者移动终端是很有意义。

其实要做出一个好的发光效果,涉及到相关算法是很多了,而且细节之处都需要关注。

先看看我们已经做了得一些发光楼宇得案例吧, 以下都是再简单模型(立方体) + 贴图 + 光照 + 发光 出来得效果,如果模型层面在优化,应该还可以有更酷效果:

如果对可视化感兴趣,可以和我交流,微信541002349. 另外关注公众号“ITMan彪叔” 可以及时收到更多有价值的文章。

参考文档

参考文档:http://rastergrid.com/blog/2010/09/efficient-gaussian-blur-with-linear-sampling/

本文部分素材使用了参考文档中的内容。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    用户3158888
  • webgl智慧楼宇发光效果算法系列之高斯模糊

    如果使用过PS之类的图像处理软件,相信对于模糊滤镜不会陌生,图像处理软件提供了众多的模糊算法。高斯模糊是其中的一种。

    用户3158888
  • WebGL 单通道wireframe渲染

    如果要把一个对象的线框绘制出来,一般的方法是先绘制实体对象,然后通过gl.LINES的模式再绘制一遍模型,此时模型的线框就会被绘制出来。

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

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

    用户3158888
  • openstack 无法连接 Connection aborted , BadStatusLine

    tanmx
  • 一个奇怪的SQL问题

    (d_tinyint int not null default 1 comment "a",

    AsiaYe
  • 小甲鱼《零基础学习Python》课后笔记(二十五):字典——当索引不好用时1

    测试题 0.当你听到小伙伴在讨论“映射”、“哈希”、“散列”或者“关系数列”的时候,事实上他们就是在讨论什么呢? 事实上是在讨论字典,字典是python中的...

    小火柴棒
  • 直播带货软件开发完成后,平台运营需要做哪些准备工作?

    上一篇文章中,小编讲到了软件商在进行直播带货软件开发时,也要优化和改进软件的运营逻辑。那么作为客户(通常是运营一方),在得到成品后,按道理来说就可以开始试运营了...

    万岳教育系统
  • iOS开发 ——全机型适配思路

    最近一直在研究学习ReactiveCocoa,并且在给项目转型到MVVM模式打基础,所以博客也很久没有更新了。

    Originalee
  • 本体技术视点 | 我们与社区聊聊大家最关心的区块链话题(三)

    上一期我们回答了来自社区的提问,涉及到数字身份、区块链游戏、防止作恶和线下支付等诸多话题。同时又有很多小伙伴产生了新的疑问,带来了新的观点。作为社区互动的第三期...

    本体Ontology

扫码关注云+社区

领取腾讯云代金券