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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Canvas绘制圆点线段 思路二 setLineDash方法+lineCap设置扩展

    他自己实现了一种思路,然后咨询我有没有更好的思路。 先看看他的思路是如何实现的,大致代码如下:

    用户3158888
  • WebGL 着色器偏导数dFdx和dFdy介绍

    偏导数函数(HLSL中的ddx和ddy,GLSL中的dFdx和dFdy)是片元着色器中的一个用于计算任何变量基于屏幕空间坐标的变化率的指令(函数)。在WebGL...

    用户3158888
  • canvas可视化效果之内阴影效果

    在之前的一个轨道交通可视化项目中,运用到了很多绘制技巧。 可以参考 之前的一篇文章 《利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果》

    用户3158888
  • jedis操作Lua脚本测试

    stys35
  • 华为可信执行环境评估对象---iTrustee

    上个月,华为可信执行环境操作系统,iTrustee v2.0获得全球信息技术安全性评估标准CC EAL2+级别认证。这是TEE OS目前能够获得的最顶级安全认证...

    安智客
  • 5G边缘计算驱动智能物联新时代

    当前全球正处在5G网络建设的起点上,这也是人联和物联时代分界线的历史起点。理解5G边缘计算从技术到产业的影响,将有助于人们把握未来的产业投资机会。

    边缘计算
  • 为什么TEE会持续受到各方关注?

    2017年12月,国家发布的《移动终端支付可信环境技术规范》明确了TEE相关技术规范。标志着TEE及其技术规范国家标准正式颁发。

    安智客
  • 区块链技术开发公司与互联网相比,数字货币市场还有几万亿的空间?

    比特币的兴起,也带起了整个数字货币市场。虽说这个市场成立没多久,但是俗话说的好,币圈一天,人间一年,市场已经经历好几回大起大落。最近的大跌行情,使得无数韭菜竟折...

    用户2357564
  • 英特尔Movidius推神经计算棒,可在终端运行神经网络

    翻译 | AI科技大本营(rgznai100) 参与 | 周翔 日前,英特尔旗下公司Movidius刚刚推出了一款全新产品:一个能让开发者和研究人员在终端设备部...

    AI科技大本营
  • Notion Edu Bug

    你可以创建多个 Workspace 并将之升级为 Personal Education Plan

    Erwin

扫码关注云+社区

领取腾讯云代金券