OpenGL ES 常见马赛克shader编写

1.正方形马赛克，

1.原理

划分的小格内部到底取哪个点的文素也就是颜色值
规则都是按照指定纹理坐标的百分比作为小格子的边长，比如宽分为50个小格子，那么每个小格子的对应纹理坐标的宽度为 1.0 / 50.0 = 0.02，高度与宽度一样的道理，再通过floor向下取整的方式确定这个小格子整体对应的纹理坐标都是哪个一个值，也就是都填充哪个颜色值，这样就达到了马赛克的目的

2.先给出假定纹理的宽度高度和马赛克的宽度高度，然后再除以对应的值，其实还是对应的纹理坐标和颜色

precision mediump float;

varying vec2 TextureCoordsVarying;
uniform sampler2D Texture;
const vec2 TexSize = vec2(400.0, 400.0);
const vec2 mosaicSize = vec2(16.0, 16.0);

void main()
{
    //mosaic
    vec2 intXY = vec2(TextureCoordsVarying.x*TexSize.x, TextureCoordsVarying.y*TexSize.y);
    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 = color;
}

3.直接取纹理坐标，原理与结果与上面完全一致

precision mediump float;

varying vec2 TextureCoordsVarying;
uniform sampler2D Texture;
const vec2 mosaicSizeRatio = vec2(0.05, 0.05);
void main()
{  
    // mosaic 2
    vec2 eachXY = vec2(floor(TextureCoordsVarying.x / mosaicSizeRatio.x), floor(TextureCoordsVarying.y / mosaicSizeRatio.y));
    vec2 totalXY = vec2(floor(1.0 / mosaicSizeRatio.x), floor(1.0 / mosaicSizeRatio.y));
    vec2 UVMosaic = vec2(eachXY.x / totalXY.x, eachXY.y / totalXY.y);
    vec4 color = texture2D(Texture, UVMosaic);
    gl_FragColor = color;
}

2.六边形马赛克

1.原理

原理都是类似的，就是计算某个六边形，被x轴和y周所分的四个梯形到底取哪个六边形中心点颜色的值或者所使用其纹理坐标，那么就会出现四种情况，分为偶数行偶数列，偶数行奇数列，奇数行奇数列，奇数行偶数列，然后每一个梯形内部像素点的颜色对应关系就会有两个六边形的中心点与之对应，即总共8个点，外围4个，自己1个，然后再计算梯形内每一个像素点距离预期对应的两个重心点到底哪个距离近，近则取之

// 几个关键值，mosaicSize马赛克六边形一个边的长度，也就是整体马赛克的大小
// int wx = int(x / 1.5 / length);
// int wy = int(y / TR / length);
// 一个6个边都相等的六边形也就是正六边形，任意3个连续顶点与中心点连接成的平行四边形的宽高比是 3:根号3， -> 1.5: 0.866025
当然这三个值都可以随意改动，只不过会影响六边形的大小和形状

######2.代码
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

const float mosaicSize = 0.03;

void main (void)
{
    float length = mosaicSize;
    float TR = 0.866025;

    float x = TextureCoordsVarying.x;
    float y = TextureCoordsVarying.y;

    int wx = int(x / 1.5 / length);
    int wy = int(y / TR / length);
    vec2 v1, v2, vn;
    
    // 四种情况判断
    // 偶数行
    if (wx/2 * 2 == wx) {
        // 偶数列
        if (wy/2 * 2 == wy) {
            //(0,0),(1,1)
            v1 = vec2(length * 1.5 * float(wx), length * TR * float(wy));
            v2 = vec2(length * 1.5 * float(wx + 1), length * TR * float(wy + 1));
        } else {
            //(0,1),(1,0)
            v1 = vec2(length * 1.5 * float(wx), length * TR * float(wy + 1));
            v2 = vec2(length * 1.5 * float(wx + 1), length * TR * float(wy));
        }
    }else {
        if (wy/2 * 2 == wy) {
            //(0,1),(1,0)
            v1 = vec2(length * 1.5 * float(wx), length * TR * float(wy + 1));
            v2 = vec2(length * 1.5 * float(wx + 1), length * TR * float(wy));
        } else {
            //(0,0),(1,1)
            v1 = vec2(length * 1.5 * float(wx), length * TR * float(wy));
            v2 = vec2(length * 1.5 * float(wx + 1), length * TR * float(wy + 1));
        }
    }
    // 每一个梯形都得到v1和v2两个六边形的中心点，
    // 计算距离，近则取之
    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));
    if (s1 < s2) {
        vn = v1;
    } else {
        vn = v2;
    }
    vec4 color = texture2D(Texture, vn);

    gl_FragColor = color;

3.三角形马赛克

1.原理

原理都是类似的，就是计算某个六边形，被x轴和y周所分的四个梯形到底取哪个六边形中心点颜色的值或者所使用其纹理坐标，那么就会出现四种情况，分为偶数行偶数列，偶数行奇数列，奇数行奇数列，奇数行偶数列，然后每一个梯形内部像素点的颜色对应关系就会有两个六边形的中心点与之对应，即总共8个点，外围4个，自己1个，然后再计算梯形内每一个像素点距离预期对应的两个重心点到底哪个距离近，近则取之，再六边形马赛克的基础上，再分出6个三角形，然后以三角形中心点颜色为准填充真个三角形，只不过获取是哪个三角形的中心点是通过角度而不是距离比较

2.代码

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

float mosaicSize = 0.03;

void main (void){
    const float TR = 0.866025;
    const float PI6 = 0.523599;
    
    float x = TextureCoordsVarying.x;
    float y = TextureCoordsVarying.y;
    
 
    int wx = int(x/(1.5 * mosaicSize));
    int wy = int(y/(TR * mosaicSize));
    
    vec2 v1, v2, vn;
    
    if (wx / 2 * 2 == wx) {
        if (wy/2 * 2 == wy) {
            v1 = vec2(mosaicSize * 1.5 * float(wx), mosaicSize * TR * float(wy));
            v2 = vec2(mosaicSize * 1.5 * float(wx + 1), mosaicSize * TR * float(wy + 1));
        } else {
            v1 = vec2(mosaicSize * 1.5 * float(wx), mosaicSize * TR * float(wy + 1));
            v2 = vec2(mosaicSize * 1.5 * float(wx + 1), mosaicSize * TR * float(wy));
        }
    } else {
        if (wy/2 * 2 == wy) {
            v1 = vec2(mosaicSize * 1.5 * float(wx), mosaicSize * TR * float(wy + 1));
            v2 = vec2(mosaicSize * 1.5 * float(wx+1), mosaicSize * TR * float(wy));
        } else {
            v1 = vec2(mosaicSize * 1.5 * float(wx), mosaicSize * TR * float(wy));
            v2 = vec2(mosaicSize * 1.5 * float(wx + 1), mosaicSize * 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));

    if (s1 < s2) {
        vn = v1;
    } else {
        vn = v2;
    }
    
    vec4 mid = texture2D(Texture, vn);
    float a = atan((x - vn.x)/(y - vn.y));
//    float a = atan((y - vn.y)/(x - vn.x));


    //1
    vec2 area1 = vec2(vn.x, vn.y - mosaicSize * TR / 2.0);
    // 2
    vec2 area2 = vec2(vn.x + mosaicSize / 2.0, vn.y - mosaicSize * TR / 2.0);
    //3
    vec2 area3 = vec2(vn.x + mosaicSize / 2.0, vn.y + mosaicSize * TR / 2.0);
    //4
    vec2 area4 = vec2(vn.x, vn.y + mosaicSize * TR / 2.0);
    // 5
    vec2 area5 = vec2(vn.x - mosaicSize / 2.0, vn.y + mosaicSize * TR / 2.0);
    // 6
    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 = color;
}

4.总结，

可以看出，正方形马赛克实际上是每个小正方形左上角的像素颜色填充整个正方形，判断方式是是否在这个小正方形内部

六边形的中心点颜色填充整个六边形，判断的意见是4个梯形内部的点与所在六边形和相邻六边形中心的距离远近而取舍，

三角形中心点的颜色填充整个三角形，判断通过角度直接确定