本案例目的是理解如何用GLSL实现灰度+马赛克滤镜，最终实现效果

准备工作的代码与分屏滤镜一样， 顶点着色器也没有任何变化，主要是片元着色器中的实现滤镜算法

灰度滤镜

实现原理是让 RGB 值保持一个平衡并填充，或者只保留一个亮度值

• 浮点算法：Gray = R0.3 + G0.59 + B*0.11（RGB的权重之和为1）
• 整数算法：Gray = (R30 + G59 + B*11)/100（RGB的权重之和为100）
• 移位算法：Gray = (R76 + G151 + B*28)>>8
• 平均值法：Gray = (R+G+B)/3
• 仅取绿色：Gray = G

浮点算法代码案例

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

//RGB权重值
const highp vec3 W = vec3(0.2125, 0.7154, 0.0721);

void main(){
    //获取对应纹理坐标系下色颜色值
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    
    //将颜色 mask 与 变换因子相乘得到灰度值
    float luminance = dot(mask.rgb, W);
    
    //将灰度值填充到像素中
    gl_FragColor = vec4(vec3(luminance), 1.0);
}

实现效果如下

正方形马赛克

马赛克效果就是将图片中的一个相当大小的区域用同一个点的颜色来填充，可以认为是⼤规模的降低图像的分辨率,⽽让图像的⼀些细节隐藏起来。

• 根据纹理坐标计算实际图像中的位置
• 计算一个小马赛克的坐标
• 将马赛克坐标换算回纹理坐标

代码案例

precision highp float;
//纹理坐标
uniform sampler2D Texture;
//纹理采样器
varying vec2 TextureCoordsVarying;
//纹理图片size
const vec2 TexSize = vec2(400.0, 400.0);
//马赛克size
const vec2 MosaicSize = vec2(16.0, 16.0);

void main(){
    //计算实际图像位置
    vec2 intXY = vec2(TextureCoordsVarying.x * TexSize.x, TextureCoordsVarying.y * TexSize.y);
    
    //floor(x) 内建函数，返回小于/等于x最大的整数，即向下取整
    //floor(intXY.x/mosaicSize.x)*mosaicSize.x 计算出一个小马赛克的坐标
    vec2 XYMosaic = vec2(floor(intXY.x/MosaicSize.x)*MosaicSize.x, floor(intXY.y/MosaicSize.y)*MosaicSize.y);

    //换算回纹理坐标，此时的纹理坐标是小马赛克的部分的纹理坐标，即某一个色块
    vec2 UVMosaic = vec2(XYMosaic.x/TexSize.x, XYMosaic.y/TexSize.y);
    //获取到马赛克后的纹理坐标的颜色值
    vec4 color = texture2D(Texture, UVMosaic);
    //将马赛克颜色值赋值给gl_FragColor
    gl_FragColor = color;
}

六边形马赛克

六边形马赛克效果就是让⼀张图⽚，分割成由六边形组成，让每个六边形中的颜⾊相同（直接取六边形中⼼点像素RGB较⽅便，我们这⾥采⽤的就是这种⽅法)，将它进⾏分割，取每个六边形的中⼼点画出⼀个矩阵，如下

上图中，画出很多长和宽比例为 3:√3的矩形阵。然后我们可以对每个点进行编号，如上图中，采用坐标系标记。假如我们的屏幕的左上点为 (0, 0) 点，则屏幕上的任意点 (x, y) 就可以找到对应的那个矩阵了。假定我们设定的矩阵比例为 3LEN : (√3LEN)（LEN为 六边形的边长），那么屏幕上的任意点 (x, y) 所对应的矩阵坐标为 (int(x/(3 * LEN)), int(y/(√3*LEN)))。

在上面的矩形图中可以看到，一个矩形中只有两个六边形的中心点，而且只有两种情况，即矩形中的样式 ”\“ 和 “/”，在 “/” 矩形中，六边形的中心点 (0, 0) & (1, 1)；在 “\” 矩形中，六边形的中心点 (1, 0) & (0, 1)。如下所示

矩形中的四个点的坐标计算如下

根据距离公式求像素点距离两个中心点的距离s1, s2

s1 = √（（v1.x-x）² + （v1.y-y）²）
s2 = √（（v2.x-x）² + （v2.y-y）²）

根据距离，判断离哪个中心点近，就取哪个六边形的中心点颜色值为六边形的颜色值。

代码案例

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//六边形的边长
const float mosaicSize = 0.03;

void main(){
    
    float length = mosaicSize;
    //矩形的高的比例为√3，取值 √3/2 ，也可以直接取√3
    float TR = 0.866025;
    //矩形的长的比例为3，取值 3/2 = 1.5，也可以直接取3
    float TB = 1.5;
    
    //取出纹理坐标
    float x = TextureCoordsVarying.x;
    float y = TextureCoordsVarying.y;
    
    //根据纹理坐标计算出对应的矩阵坐标 
    //即 矩阵坐标wx = int（纹理坐标x/ 矩阵长），矩阵长 = TB*len
    //即 矩阵坐标wy = int（纹理坐标y/ 矩阵宽），矩阵宽 = TR*len
    int wx = int(x / TB / length);
    int wy = int(y / TR / length);
    vec2 v1, v2, vn;
    
    //判断wx是否为偶数，等价于 wx % 2 == 0
    if (wx/2 * 2 == wx) {
        if (wy/2 * 2 == wy) {//偶行偶列
            //(0,0),(1,1)
            v1 = vec2(length * TB * float(wx), length * TR * float(wy));
            v2 = vec2(length * TB * float(wx+1), length * TR * float(wy+1));
        }else{//偶行奇列
            //(0,1),(1,0)
            v1 = vec2(length * TB * float(wx), length * TR * float(wy+1));
            v2 = vec2(length * TB * float(wx+1), length * TR * float(wy));
        }
    }else{
        if (wy/2 * 2 == wy) {//奇行偶列
            //(0,1),(1,0)
            v1 = vec2(length * TB * float(wx), length * TR * float(wy+1));
            v2 = vec2(length * TB * float(wx+1), length * TR * float(wy));
        }else{//奇行奇列
            //(0,0),(1,1)
            v1 = vec2(length * TB * float(wx), length * TR * float(wy));
            v2 = vec2(length * TB * float(wx+1), length * TR * float(wy+1));
        }
    }
    //利用距离公式，计算中心点与当前像素点的距离
    float s1 = sqrt(pow(v1.x-x, 2.0) + pow(v1.y-y, 2.0));
    float s2 = sqrt(pow(v2.x-x, 2.0) + pow(v2.y-y, 2.0));
    
    //选择距离小的则为六边形的中心点，且获取它的颜色
    vn = (s1 < s2) ? v1 : v2;
    //获取六边形中心点的颜色值
    vec4 color = texture2D(Texture, vn);
    gl_FragColor = color;
}

三角形马赛克

三角形马赛克是由六边形马赛克演变而来，即要先有六边形才有三角形。根据当前六边形的中心点与六个顶点分为六个三角形，根据夹角判断属于哪个三角形，就将该三角形的中心点颜色作为整个三角形的文素。

相对六边型增加的代码案例

    //获取像素点与中心点的角度
   float a = atan((x-vn.x)/(y-vn.y));
    
    //判断夹角，属于哪个三角形，则获取哪个三角形的中心点坐标
    vec2 area1 = vec2(vn.x, vn.y - mosaicSize * TR / 2.0);
    vec2 area2 = vec2(vn.x + mosaicSize / 2.0, vn.y - mosaicSize * TR / 2.0);
    vec2 area3 = vec2(vn.x + mosaicSize / 2.0, vn.y + mosaicSize * TR / 2.0);
    vec2 area4 = vec2(vn.x, vn.y + mosaicSize * TR / 2.0);
    vec2 area5 = vec2(vn.x - mosaicSize / 2.0, vn.y + mosaicSize * TR / 2.0);
    vec2 area6 = vec2(vn.x - mosaicSize / 2.0, vn.y - mosaicSize * TR / 2.0);
    
    if (a >= PI6 && a < PI6 * 3.0) {
        vn = area1;
    }else if (a >= PI6 * 3.0 && a < PI6 * 5.0){
        vn = area2;
    }else if ((a >= PI6 * 5.0 && a <= PI6 * 6.0) || (a < -PI6 * 5.0 && a > -PI6 * 6.0)){
        vn = area3;
    }else if (a < -PI6 * 3.0 && a >= -PI6 * 5.0){
        vn = area4;
    }else if (a <= -PI6 && a > -PI6 * 3.0){
        vn = area5;
    }else if (a > -PI6 && a < PI6){
        vn = area6;
    }
    //获取对应三角形重心的颜色值
    vec4 color = texture2D(Texture, vn);
    // 将颜色值填充到片元着色器内置变量gl_FragColor
    gl_FragColor = color;

完整代码见 GitHub 灰度+马赛克滤镜