webgl实现径向模糊

径向模糊简介

径向模糊，是一种从中心向外呈幅射状，逐渐模糊的效果。 因此径向模糊经常会产生一些中心的发散效果，在PS中同样也有径向模糊的滤镜效果。 径向模糊通常也称为变焦模糊。径向模糊（Radial Blur）可以给画面带来很好的速度感，是各类游戏中后处理的常客，也常用于Sun Shaft等后处理特效中作为光线投射（体积光）的模拟。

在游戏中，常常使用径向模糊来模拟一些运动的动感效果。如鬼泣4中的场景切换特效，和一些技能打击特效；赛车游戏也尝用来模拟动感模糊，如狂野飙车，极品飞车等。 径向模糊还是实现体积光照的一种技术手段之一，如下图：

径向模糊的原理

图形学中模糊的大致原理都是一样的：就是从原像素周围去寻找附近像素的颜色，来共同影响当前的像素颜色。如高斯模糊就是将原像素四周像素的颜色加权求和作为原像素的颜色以达到模糊的目的。

不同的模糊就是取周边像素和加权求和的算法不太一样。径向模糊的特点是从某个中心点向外散射扩散，因此其需要采样的像素来自于当前的像素点和中心点的连线上，通过参数可以控制采样的数量和采样步进的距离。像素的颜色是由该像素的点与中心点之间连线上进行采样，然后求将这些采样点颜色的加权平均。根据径向模糊的特性，离目标点越近采样点越密集，反之亦然。

因此，实现径向模糊的大致流程如下：

• 确定径向模糊的中心点，一般为画布的中心点，或这个某个对象的中心点在屏幕投影所在的位置。（注意中心点是2维坐标）
• 计算当前像素和中心点的距离和向量线段。
• 在线段上面进行采样，加权。
• 将模糊的结果和原图进行一个叠加合成（可能需要）

webgl实现径向模糊

径向模糊