OpenGL ES 实现多种“马赛克滤镜”效果

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;
}

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;
}