美文网首页
着色器图像处理(高斯模糊)

着色器图像处理(高斯模糊)

作者: 冰三尺 | 来源:发表于2019-12-04 22:28 被阅读0次

模糊滤波器就是对周围像素进行加权平均处理,对于均值模糊算法来讲,周围所有邻域像素点的权值都相同,所以不是很平滑,会显得糊糊的一片。而高斯模糊会把图像的模糊 处理得很平滑,正因为这个优点,所以被广泛用在图像降噪上,特别是在边缘检测之前用来去除视频帧的噪点。

均值模糊

以某个点为中心点, 取出周围四个点的像素值, 然后求平均值


precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;


void main()
{
    lowp vec4 sample0, sample1, sample2, sample3;
    
    float fStep = 0.05;
  
    //分别对应四个像素点
    sample0 = texture2D(colorMap, vec2(varyTextCoord.x - fStep, varyTextCoord.y - fStep));
    sample1 = texture2D(colorMap, vec2(varyTextCoord.x + fStep, varyTextCoord.y + fStep));
    sample2 = texture2D(colorMap, vec2(varyTextCoord.x + fStep, varyTextCoord.y - fStep));
    sample3 = texture2D(colorMap, vec2(varyTextCoord.x - fStep, varyTextCoord.y + fStep));

    //求平均值
    gl_FragColor = (sample0 + sample1 + sample2 + sample3) / 4.0;

}

看起来是真的很模糊啊


截屏2019-12-01下午10.07.20.png

高斯模糊

直接暴力的求平均值显的很不自然, , 因为在这个求平均值的矩阵中, 各个颜色的权重是一样的, 而且是不连续的, 因为只有一个步长fStep, 显的过渡比较生硬, 而高斯模糊的权重是正态分布的权重,正态分布是一种可取的权重分 配模式。正态分布在图形上表示为一种钟形曲线,越接近中心,取值越 大,越远离中心,取值越小。只 需要将中心像素点作为原点,以领域像素点距中心像素点的远近分配合 适的高斯权重,就可以得到一个高斯加权平均值。

二维的高斯分布函数来实现高斯模糊的算法,二维高斯函数如下所示。


正态分布函数

模糊的本质就是让当前的像素值和周围的像素值更接近, 因此,各像素的颜均受到其邻接像素颜色值的影响。可使用下列简单的3x3卷积过滤器或较大尺寸的5x5的卷积过滤器。相比于均值模糊, 这个其实就是一个加权模糊(每个像素点对整天的结果权值是不一样的). 对与3x3的卷积过滤器, 我们是求9个值的加权平均, 对应5x5卷积过滤器, 我们试求25个值的加权平均.
3x3模糊卷积过滤器

{
    1,2,1
    2,4,2
    1,2,1
}

5x5模糊卷积过滤器

 {
      1, 4, 7, 4,1,
      4,16,26,16,4,
      7,26,41,26,7,
      4,16,26,16,4,
      1, 4, 7, 4,1,
 }

何为卷积?
卷积(Convolution) 是一一个很 常见的图像处理操作,它可以用来过滤-幅图像。实现过滤的方法是计算源图像与一幅更小的图像(称为卷积内核( CONVOLUTION KERNEL)或者卷积过滤器(CONVOLUTION FILTER)) 之间的积和。根据在卷积内核中选择的值,卷积操作可以执行模糊、锐化、降噪、边缘检测以及其他有用的图像处理操作。从数学.上说,离散的2D卷积操作定义为:


卷积定义

在这个方程中,函数F代表基础图像,G代表卷积内核。两次求和是基于卷积内核的宽度和高度。计算输出图像中的-个特定像素的值的方法是将卷积内核的中心与基础图像中同--位置的像素对齐,然后将卷积内核覆盖的基础图像像素的值与卷积内核中对应位置的值相乘,并将其结果加到一-起。

简单的说, 卷积可以理解为两个矩阵对应的值相乘求和.

卷积计算 动态卷积动画

动图很清楚的表达了卷积的计算过程, 但是卷积操作还有一个问题是 决定当卷积内核超过了基础图像的边缘时应该怎么办。

  1. 边缘补0, 当我们的卷积核中心点指向的是左上角是, 那我们的卷积核左边和上面是没有对应的值像素值与其做计算, 补0之后, 就满足的计算, 但是0与任何值相乘都为0, 不会影响结果.
  2. 补充中心点的对称值, 以上面动图为例, 如果中线点对应的是左上角的1, 则可以在1左侧补充9, 上面补充4, 以此类推.

3x3卷积着色器


precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
uniform sampler2D texMap;
uniform float stepValue;

// 卷积大小
const int KernelSize = 9;

void main()
{
    
    int i;
    vec4 sum = vec4(0.0);
    
    //用来存储3x3的卷积矩阵
    float Kernel[KernelSize];
    Kernel[6] = 1.0; Kernel[7] = 2.0; Kernel[8] = 1.0;
    Kernel[3] = 2.0; Kernel[4] = 4.0; Kernel[5] = 2.0;
    Kernel[0] = 1.0; Kernel[1] = 2.0; Kernel[2] = 1.0;
    
     
    float fStep = stepValue;
    //像素点偏移位置
    vec2 Offset[KernelSize];
    Offset[0] = vec2(-fStep,-fStep); Offset[1] = vec2(0.0,-fStep); Offset[2] = vec2(fStep,-fStep);
    Offset[3] = vec2(-fStep,0.0);    Offset[4] = vec2(0.0,0.0);    Offset[5] = vec2(fStep,0.0);
    Offset[6] = vec2(-fStep, fStep); Offset[7] = vec2(0.0, fStep); Offset[8] = vec2(fStep, fStep);
    
    for (i = 0; i < KernelSize; i++)
    {
        vec4 tmp = texture2D(texMap, varyTextCoord.xy + Offset[i]);
        sum += tmp * Kernel[i];
    }

    gl_FragColor = sum/16.0;
}

5x5卷积着色器


precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
uniform sampler2D texMap;
uniform float stepValue;

const int KernelSize = 25;

void main()
{
    
    int i;
    vec4 sum = vec4(0.0);
    //用来存储5x5的卷积矩阵,可以放到程序中计算, 节省着色器运行开销
    float Kernel[KernelSize];
    Kernel[0]  = 1.0;  Kernel[1] = 4.0;  Kernel[2]  = 7.0;   Kernel[3]  = 4.0;   Kernel[4]  = 1.0;
    Kernel[5]  = 4.0;  Kernel[6] = 16.0; Kernel[7]  = 26.0;  Kernel[8]  = 16.0;  Kernel[9]  = 4.0;
    Kernel[10] = 7.0; Kernel[11] = 26.0; Kernel[12] = 41.0;  Kernel[13] = 26.0;  Kernel[14] = 7.0;
    Kernel[15] = 4.0; Kernel[16] = 16.0; Kernel[17] = 26.0;  Kernel[18] = 16.0;  Kernel[19] = 4.0;
    Kernel[20] = 1.0; Kernel[21] = 4.0;  Kernel[22] = 7.0;   Kernel[23] = 4.0;   Kernel[24] = 1.0;


    float fStep = stepValue;
     //像素点偏移位置, 可以放到程序中计算, 节省着色器运行开销
    vec2 Offset[KernelSize];
    Offset[0] = vec2(-2.0*fStep,-2.0*fStep);
    Offset[1] = vec2(-fStep,-2.0*fStep);
    Offset[2] = vec2(0,-2.0*fStep);
    Offset[3] = vec2(fStep,-2.0*fStep);
    Offset[4] = vec2(2.0*fStep,-2.0*fStep);
    
    Offset[5] = vec2(-2.0*fStep,-fStep);
    Offset[6] = vec2(-fStep,-fStep);
    Offset[7] = vec2(0.0,-fStep);
    Offset[8] = vec2(fStep, -fStep);
    Offset[9] = vec2(2.0*fStep, -fStep);
    
    Offset[10] = vec2(-2.0*fStep, 0.0);
    Offset[11] = vec2(-fStep, 0.0);
    Offset[12] = vec2(0.0, 0.0);
    Offset[13] = vec2(fStep, 0.0);
    Offset[14] = vec2(2.0*fStep, 0.0);

    Offset[15] = vec2(-2.0*fStep, fStep);
    Offset[16] = vec2(-fStep, fStep);
    Offset[17] = vec2(0.0, fStep);
    Offset[18] = vec2(fStep, fStep);
    Offset[19] = vec2(2.0*fStep, fStep);
    
    Offset[20] = vec2(-2.0*fStep, 2.0*fStep);
    Offset[21] = vec2(-fStep, 2.0*fStep);
    Offset[22] = vec2(0.0, 2.0*fStep);
    Offset[23] = vec2(fStep, 2.0*fStep);
    Offset[24] = vec2(2.0*fStep, 2.0*fStep);
    
    for (i = 0; i < KernelSize; i++)
    {
        vec4 tmp = texture2D(texMap, varyTextCoord.st + Offset[i]);
        sum += tmp * Kernel[i];
    }

    gl_FragColor = sum/273.0;
}
高斯模糊

fStep代表的是偏移量, 理论上来说其中=值应该是1/textureWidth或者1/textureHeight, 按照我的图片尺寸, 1/textureWidth = 0.009, 按照这个值来计算, 效果并不好, 值在0.005左右模糊效果比较好.(不同的纹理偏移量值不一样)
疑问? shader里面怎么使用数组呀, 按照文档使用数组, float Kernel[1] = float[](1.0)报错syntax error: Array size must appear after variable name, 如果可以用数组, 卷积矩阵和偏移量都可以直接一个数组就可以了, 省不少代码量...

相关文章

  • 着色器图像处理(高斯模糊)

    模糊滤波器就是对周围像素进行加权平均处理,对于均值模糊算法来讲,周围所有邻域像素点的权值都相同,所以不是很平滑,会...

  • Android OpenGL ES滤镜开发之美颜效果

    主要是通过对片元着色器的处理来达到美颜的效果 高斯模糊 也叫做高斯平滑,主要是用来降低图像早生以及降低细节层次,是...

  • 图像处理之高斯模糊

    有时候为了美观,背景图片会加上模糊处理。一张图片其实是由若干个像素组成,每个像素都可以用一个矩阵表示,然而,所谓的...

  • 图像处理基础-高斯模糊

    一、高斯函数 一维高斯函数: 二位高斯函数: 二、高斯滤波代码实现 设置参数 r = 1, sigma= 1.0 ...

  • 图像处理之高斯模糊

    高斯模糊是指以中心像素为原点,指定半径(N*N矩形,N为奇数)内的所有像素,根据离中心像素的远近为每个位置分配不同...

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

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

  • css3 滤镜

    原图: a. 图像高斯模糊 b. 图片进行棕褐色处理 c. 图片灰色处理 d. 图片反色处理 e. 图像饱和...

  • Android图片高斯模糊动画

    前言 这里只讲高斯模糊动画的处理,不讨论高斯模糊的处理方式。想看高斯模糊处理的可以参考这个Android 图片高斯...

  • 图像处理算法--高斯模糊

    感谢@阮一峰摘录自原文地址: http://www.ruanyifeng.com/blog/2012/11/gau...

  • 高斯模糊

    前言 通常,图像处理软件会提供"模糊"(blur)滤镜,使图片产生模糊的效果。 “模糊”的算法不只一种,高斯模糊只...

网友评论

      本文标题:着色器图像处理(高斯模糊)

      本文链接:https://www.haomeiwen.com/subject/ciuzwctx.html