webgl实现径向模糊

径向模糊简介

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

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

径向模糊的原理

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

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

所以，实现径向模糊的大体流程以下：

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

webgl实现径向模糊

径向模糊是一个后处理过程，径向模糊能够对静态的图片施加效果，也能够对动态渲染的图像施加效果。本示例中将对动态的图像施加效果。先上一张图看看效果：

首先绘制的几个圆环对象，而后对绘制的图像施加径向模糊。

渲染到纹理

要施加径向模糊，首先要把圆环绘制到texture对象上面，咱们知道，经过framebuffer的技术，能够实现把绘制效果输出到贴图对象上。
有关framebuffer的技术，不属于本文重点介绍的内容，若是读者不熟悉，能够自行查找相关资料。也能够参考：渲染到纹理。

输入贴图对象

要把贴图对象输出到屏幕上面，咱们须要构造一个矩形对象，该对象正好是webgl坐标系中的四个顶点，代码以下：

function quad() {
  var pos = [-1,1,0, -1,-1,0, 1,-1,0, 1,1,0],
    st = [0,1,0,0,1,0, 1,1],
    idx = [0,1,2,0,2,3];

  return {
    p:pos,
    t:st,
    i:idx,
  }
}

上述对象能够正好把一个贴图对象完整的输出到屏幕上（webgl坐标系）

实现径向模糊

径向模糊的主要在着色器语言中进行实现，并且主要是在片元着色器中，下面是片元着色器的代码：

var ofs = `precision mediump float;
uniform sampler2D texture;
uniform float strength;
varying vec2 vTexCoord;

const float tFrag = 1.0 / 512.0;
const float nFrag = 1.0 / 30.0;
const vec2 centerOffset = vec2(256.0, 256.0);

float rnd(vec3 scale, float seed) {
  return fract(sin(dot(gl_FragCoord.stp + seed, scale)) * 43758.5453 + seed);
}

vec4 fragRadialBlur(){
  vec2 fc = vec2(gl_FragCoord.s, 512.0 - gl_FragCoord.t);
  vec2 fcc = fc - centerOffset;
  vec3 destColor = vec3(0.0);
  float random = rnd(vec3(12.9898, 78.233, 151.7182), 0.0);
  float totalWeight = 0.0;
  for (float i = 0.0; i <= 30.0; i++) {
    float percent = (i + random) * nFrag;
    float weight = percent - percent * percent;
    vec2 t = fc - fcc * percent * strength * nFrag;
    destColor += texture2D(texture, t * tFrag).rgb * weight;
    totalWeight += weight;
  }
  return vec4(destColor / totalWeight, 1.0);
}

void main(void) {
  gl_FragColor =  fragRadialBlur();
  
}`;

随机函数

首先声明了一个rnd函数，此函数是一个简单的随机数生成器，当给定向量和种子值时，将返回0到1范围内的随机数。
使用随机数，是为了让模糊的效果呈现必定的随机状态，而不是按照某种一致性的原则进行模糊。
rnd 在每次片元着色器中都会调用，所以要尽可能使用轻量化的实现，否则可能会形成性能负载。

定义相关变量

const float tFrag = 1.0 / 512.0;
const float nFrag = 1.0 / 30.0;
const vec2  centerOffset = vec2(256.0, 256.0);

而后定义相关变量。在此示例中，缩放的中心点设置为画布的中心。
画布的大小为512像素，所以上面的代码相应地声明了一些常量。
vec2变量centerOffset用于定义中心位置。
floag变量tFrag用于规范化，把二维顶点坐标转换成归一化为uv坐标，以正确引用着色器中的纹理像素。
另外一个float类型常量nFrag用于着色器中for的语句进行迭代处理进行归一化。

径向模糊逻辑

vec4 fragRadialBlur(){
  vec2 fc = vec2(gl_FragCoord.s, 512.0 - gl_FragCoord.t);
  vec2 fcc = fc - centerOffset;
  vec3 destColor = vec3(0.0);
  float random = rnd(vec3(12.9898, 78.233, 151.7182), 0.0);
  float totalWeight = 0.0;
  for (float i = 0.0; i <= 30.0; i++) {
    float percent = (i + random) * nFrag;
    float weight = percent - percent * percent;
    vec2 t = fc - fcc * percent * strength * nFrag;
    destColor += texture2D(texture, t * tFrag).rgb * weight;
    totalWeight += weight;
  }
  return vec4(destColor / totalWeight, 1.0);
}

首先，经过gl_FragCoord计算出变量fc，表示当前像素在canvas画布的坐标。 注意gl_FragCoord坐标的原点是在左下角，而canvas画布的坐标原点在左上角，应此作了一个翻转计算：

512.0 - gl_FragCoord.t

计算变量fcc，表示当前坐标到中心点的向量。

定义变量destColor用于保存最终要输出的像素颜色。 而后计算一个随机值random。totalWeight表示每次迭代时候采样像素所占的比重之和。

而后开始迭代处理。

在片断着色器中经过for语句进行迭代处理，使用i加上随机数之和来计算目标像素的percent（比重），而后经过percent - percent * percent 是为了把线性的比重数据变成非线性的比重weight。
而后经过percent和strength计算出一采样的坐标点t，其中strength表示径向模糊的强度，此值越大，偏离越大，模糊效果越强。并经过texture2D函数获取对应坐标点的颜色值，而后乘以weight并加入到destColor，并最终计算totalWeight。

最后，完成迭代过程后进行归一化destColor： destColor / totalWeight。

说明

此处咱们使用了30次迭代，看起来性能并无太大影响。实际过程当中，能够选择不一样的迭代次数，来达到效果和性能的平衡。

最终效果以下，

本文也发表在个人webgl专栏，完整代码能够在专栏中获取：

https://xiaozhuanlan.com/topic/6480975213

下一篇文章讲述利用径向模糊实现体积光的效果，先上一张图看看效果：

案例视频 能够关注视频号 "ITman彪叔"观看，也欢迎关注公众号。