three.js模仿PS高斯模糊效果

发表于2021-12-02更新于2022-06-29字数统计753阅读次数阅读次数

three.js模仿PS高斯模糊效果

通常情况下，图像处理软件会提供”模糊”（blur）滤镜，使图片产生模糊的效果。模糊的方法有很多种，高斯模糊，线性模糊等，这里介绍并实现了高斯模糊，它可以适用于很多种场景。

高斯模糊（英语：Gaussian Blur），也叫高斯平滑，是在Adobe Photoshop、GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果，通常用它来减少图像噪声以及降低细节层次。这种模糊技术生成的图像，其视觉效果就像是经过一个半透明屏幕在观察图像，这与镜头焦外成像效果散景以及普通照明阴影中的效果都明显不同。高斯平滑也用于计算机视觉算法中的预先处理阶段，以增强图像在不同比例大小下的图像效果（参见尺度空间表示以及尺度空间实现）。 从数学的角度来看，图像的高斯模糊过程就是图像与正态分布做卷积。由于正态分布又叫作“高斯分布”，所以这项技术就叫作高斯模糊。图像与圆形方框模糊做卷积将会生成更加精确的焦外成像效果。由于高斯函数的傅立叶变换是另外一个高斯函数，所以高斯模糊对于图像来说就是一个低通滤波器。

实现的效果

在实现的效果中可以调整原图模糊半径来查看实时模糊的效果，对于实时的模糊来说，性能占用是比较高的。它适用于一些实时的效果，比如转场，炫目的效果，在这种情况下做模糊效果时，可以先降低输出内容的分辨率，再进行模糊，但有时候只需要对计算生成的结果进行模糊，这个时候就可以将其渲染出来作为贴图贴在模型上。

本次案例中使用到的高斯函数如下，相关效果你也可以在shaderToy上看到，他的运行效率并不是很高，但是它可以实现极其夸张的模糊效果，这里我的经验还比较有限，不知道有没有更高效果和高性能的实现方法,如果以后对性能有要求，可以换用其他高性能的方法。

1
2
3
4
float gaussianExpression(float sigma, float xy)
{
    return exp(-(xy * xy) / (2.0 * sigma * sigma));
}

而对于循环部分，因为要动态调整的原因，这里没有展开循环，当然也可以写成由js动态展开循环的，看实际需求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
vec4 blurColor (vec2 uv) {
    vec4 color = vec4(0.0);
    float sum = 0.0;
    for (float r = -RADIUS; r <= RADIUS; r++) {
        for (float c = -RADIUS; c <= RADIUS; c++) {
            vec2 target = uv + vec2(r / size, c / size);
            float gauss = gaussianBlur(1.5, target.x, target.y);
            color += gauss * texture(iChannel0, target);
            sum += gauss;
        }
    }
    color /= sum;
    return color;
}