第十四章 OpenGL ES-方框模糊（均值模糊）

第十四章 OpenGL ES-方框模糊（均值模糊）

第一章 OpenGL ES 基础-屏幕、纹理、顶点坐标
第二章 OpenGL ES 基础-GLSL语法简单总结
第三章 OpenGL ES 基础-GLSL渲染纹理
第四章 OpenGL ES 基础-位移、缩放、旋转原理
第五章 OpenGL ES 基础-透视投影矩阵与正交投影矩阵
第六章 OpenGL ES 基础-FBO、VBO理解与运用
第七章 OpenGL ES 基础-输入输出框架思维
第八章 OpenGL ES 基础-MVP矩阵理解
第九章 OpenGL ES 基础-高斯模糊原理
第十章 OpenGL ES 基础-图像USM锐化
第十一章 OpenGL ES 基础-基础光照
第十二章 OpenGL ES 基础-色温、色调、亮度、对比度、饱和度、高光
第十三章 OpenGL ES-RGB、HSV、HSL模型介绍
第十四章 OpenGL ES-方框模糊（均值模糊）
第十五章 OpenGL ES-VR 全景模式原理
第十六章 OpenGL ES-桶形畸变算法-常用VR

方框模糊（Box Blur）原理

方框模糊（Box Blur）是一种基本的图像模糊算法，其原理比较简单。在应用方框模糊时，对于每个像素，取周围一个固定大小的区域（比如3x3或5x5），然后计算该区域内所有像素的平均值，并将这个平均值赋给当前像素。这样做会使图像中的细节减少，从而产生一种模糊效果。

方框模糊的原理并不复杂，但由于对每个像素都要进行计算，因此它可能会导致图像处理速度变慢。虽然方框模糊效果比较简单，但在某些场景下，它仍然可以被用来减轻图像噪点或者增加视觉效果。

下图按3x3为例子进行说明

使用3x3采样方法遍历每一个像素点，以左上角的像素块为例，它的RGB色值为（75,75,194）,因为是边缘色块，相对它（左上角）只有右下角色值为RGB（153，75，194）一个色块，那模糊后的色值计算方法（四舍五入取整数值）为：
R = (75+75+75+153)/ 9 = 42

G = (75+117+194+75)/9 = 51

B = (194+194+125+194)/9 = 79

它模糊后的最终色值为RGB（67，18，48）

如果以左上图的中心颜色块为像素点（153,75,194），以改点中心周围的8个像素按3x3的进行每个点像素颜色相加取均值，那模糊后的色值计算方法（四舍五入取整数值）为：

R = (75+75+75+75+153+194+190+194+78)/ 9

G = (75+117+173+194+75+75+194+75+194)/9

B = (194+194+194+125+194+145+75+106+75)/9 = 79

GLSL的实现-竖直和水平的均值模糊

texture是图片的纹理，vTexCoord图片的纹理坐标，texelWidthOffse、texelHeightOffsett对应图片的宽比的1/width和高比的1/texelHeightOffset，BlurKernelSize对应模糊做均值的数量，BlurDirection判断做水平模糊、还是竖直模糊，下面的代码分开竖直和水平的均值模糊

uniform sampler2D texture;
varying vec2 vTexCoord;
uniform float texelWidthOffset;
uniform float texelHeightOffset;

uniform float BlurKernelSize;// = 3.0;//3.0 or 5
uniform int   BlurDirection;// = 1;// 1.0 or 0
vec4 BoxBlur(int blurKernelSize, vec2 blurRadius, sampler2D texSampler, vec2 texCoord)
{
      vec4 sumValue = vec4(0.0);
      vec2 texCoord2;
      float count = 0.0;

      for (int i = -blurKernelSize; i <= blurKernelSize; i++) {
            texCoord2 = texCoord + blurRadius * float(i);
            
            sumValue += texture2D(texSampler, texCoord2);
            count += 1.0;
      }
      sumValue = sumValue / count;
      return sumValue;
}

void main()
{
    vec2 blurDir = vec2(1.0,0.0);
    if(BlurDirection!=0) blurDir = vec2(0.0,1.0);
    vec2 invSize = vec2(texelWidthOffset,texelHeightOffset);
    vec2 blurRadius = invSize * blurDir;
    gl_FragColor = BoxBlur(int(BlurKernelSize), blurRadius, texture, vTexCoord);
}


attribute vec4 position;
attribute vec2 texCoord;
varying vec2 vTexCoord;

void main()
{
    gl_Position = position;
    vTexCoord = texCoord.xy;
}

按上面的GLSL进行OpenGL实现，出来效果