十五、利用GLSL实现马赛克滤镜

工程是在另一文：[利用GLSL实现分屏滤镜] 基础上增加滤镜功能；核心是在着色器程序的编写。

马赛克

马赛克的原理就是在一张图片中，被马赛克区域要取自图片某个点的颜色值（纹素）。
规则都是按照指定纹理坐标的百分比作为小格子的边长，比如宽分为50个小格子，那么每个小格子的对应纹理坐标的宽度为 1.0 / 50.0 = 0.02，高度同理亦为0.02；再通过floor()--内建函数向下取整的方式确定这个小格子整体对应的纹理坐标是填充哪个颜色值，这样就达到了马赛克的目的。
常见的有：

• 矩形马赛克
• 正六边形马赛克
• 三角形马赛克

矩形马赛克
字面意思即为马赛克的变现行驶为矩形的一个方格子。方格子的大小由片元着色程序按需初始化决定。马赛克的颜色值

precision highp float;
// 定义纹理采样器
uniform sampler2D un_texture;
// 纹理坐标
varying vec2 var_textureCoords;
// 纹理图片的大小
const vec2 TextureSize = vec2(414.0,414.0);
// 方格马赛克的大小
const vec2 MosaicSize = vec2(8.0,8.0);

void main()
{
    //计算实际图像位置
    vec2 TexCoords_XY = vec2(var_textureCoords.x * TextureSize.x,var_textureCoords.y * TextureSize.y);
    // floor 向下取整，获取图片 马赛克的坐标比
    int sigleMosaicX = floor(TexCoords_XY.x / MosaicSize.x);
    int sigleMosaicY = floor(TexCoords_XY.y / MosaicSize.y);
    // floor (TexCoords_XY.x / MosaicSize.x) * MosaicSize.x 计算出⼀个⼩⻢赛克 的坐标
    vec2 MosaicXY = vec2(sigleMosaicX * MosaicSize.x,sigleMosaicY * MosaicSize.y);
    // 再计算出纹理坐标
    vec2 TextureForMosic = vec2(MosaicXY.x / TextureSize.x, MosaicXY.y / TextureSize.y);
    // 通过纹理坐标，获得颜色值
    vec4 TextureForMosicColor = texture2D(un_texture,TextureForMosic);
    // 赋值给内建变量 gl_FragColor
    gl_FragColor = TextureForMosicColor;
    
}

矩形马赛克

正六边形马赛克
正六边形马赛克的整块小方格中的像素点的颜色值取的是该正六边形方格中心点的颜色值，然后以此颜色值填充整个正六边形的所以像素区域，这一点是与矩形马赛克是想通的。难点在于如何计算当前像素点距离哪一个正六边形更近。

正六边形马赛克

在上图中，A、B、C、D、O 5个点，分别代表相近的五个六边形，而图中的红点位于A、O两个相邻六边形组成的矩形之中，每两个相邻六边形都能拆解出如下图：矩阵1 、矩阵2.

矩阵1
矩阵2
矩阵的长宽比未3 : √3，将矩阵对应到坐标系中，左上角点为（0，0）点，则屏幕上任一点都能匹配一个对应的矩形。设定一个权重Len ，则矩阵的比例为3 * Len : √3 * Len, 矩阵中的某一点坐标（x，y）对应到矩阵中就是：(int (x / (3 * Len)),int (y / (√3 * Len)))。设定六边形边长为length，每个六边形的内角是120°，则矩阵的高 Height = sin60° * length = √3 /2 * length = 0.866025 * length,长宽比为 3 : √3，则其长为：Width = 3/2 * length = 1.5 * length.

float length = MosaicSize;
    //  TR = sqrt(3)/2 = 0.866025;  TB = 3/2 = 1.5;
    float TR = 0.866025;
    float TB = 1.5;
    // 纹理坐标，(0,0)(0,1)(1,0)(1,1)
    float texCoordX = var_textureCoords.x;
    float texCoordY = var_textureCoords.y;
    // 纹理坐标对应的矩阵坐标
    int matrix_X = int( texCoordX / (TB * length));
    int matrix_Y = int( texCoordY / (TR * length));

假定矩阵坐标的四个点为对应到矩阵的四个单位

1单位的纹理矩阵
则换算到矩阵1的纹理坐标为：
左上： vec2(length * TB * float(matrix_X),length * TR * float(matrix_Y));
右上：vec2(length * TB * float(matrix_X + 1),length * TR * float(matrix_Y));
左下： vec2(length * TB * float(matrix_X),length * TR * float(matrix_Y+1));
右下：vec2(length * TB * float(matrix_X + 1),length * TR * float(matrix_Y+1));

在第一张「六边形马赛克」图中，观察到偶数行偶数列的两六边形分割的矩形和奇数行奇数列的矩形是同样的，而偶数行奇数列 余 奇数行偶数列对应的矩形也是相同的，不同之处在于其坐标不一。则要获取某一点的颜色值，则可以通过以下代码去实现：

    // 定义两个当前纹素+最终当前纹素所要取的纹素值
    vec2 curTexelCoord1, curTexelCoord2, curTexelCoordReslut;
    // x方向 偶数行 — matrix_X / 2 取整，得 1 or 2，乘以2等于自身即为偶数，反之为奇数。
    if (matrix_X / 2 * 2 == matrix_X) { 
        // y方向 偶数列
        if (matrix_Y /2  * 2 == matrix_Y) {
            curTexelCoord1 = vec2(length * TB * float(matrix_X),length * TR * float(matrix_Y));
            
            curTexelCoord2 = vec2(length * TB * float(matrix_X + 1),length * TR * float(matrix_Y + 1));
        }else{ 
         // y方向 奇数列
            curTexelCoord1 = vec2(length * TB * float(matrix_X),length * TR * float(matrix_Y + 1));
            
            curTexelCoord2 = vec2(length * TB * float(matrix_X + 1),length * TR * float(matrix_Y));
        }
        
    }else{  // x方向 奇数列
        // y方向 偶数列
        if (matrix_Y /2  * 2 == matrix_Y) {
            curTexelCoord1 = vec2(length * TB * float(matrix_X),length * TR * float(matrix_Y + 1));
            
            curTexelCoord2 = vec2(length * TB * float(matrix_X + 1),length * TR * float(matrix_Y ));
        }else{
             // y方向 奇数列
            curTexelCoord1 = vec2(length * TB * float(matrix_X),length * TR * float(matrix_Y));
            
            curTexelCoord2 = vec2(length * TB * float(matrix_X + 1),length * TR * float(matrix_Y + 1));
        }
    }

获得邻近两个六边形中心点的颜色值之后，计算最近六边形中心点到矩阵坐中某点坐标（matrix_X，matrix_Y）的距离，距离最近的则就让该点的颜色值等于最近六边形中心点颜色值curTexelCoord1 或者 curTexelCoord2.
将颜色值填充到内建变量

gl_FragColor  = texture2D(un_texture,curTexelCoordReslut);

以下是完整的六边形片元着色程序代码：

/**
  * 工程中着色器程序不能有注释行，编译器会报错
  */
precision highp float;
uniform sampler2D un_texture;
varying vec2 var_textureCoords;
// 六变形的边长
const float MosaicSize = 0.02;

void main()
{
    float length = MosaicSize;
    //  TR = sqrt(3)/2 = 0.866025;  TB = 3/2 = 1.5;
    float TR = 0.866025;
    float TB = 1.5;
    // 纹理坐标，(0,0)(0,1)(1,0)(1,1)
    float texCoordX = var_textureCoords.x;
    float texCoordY = var_textureCoords.y;
    // 纹理坐标对应的矩阵坐标
    int matrix_X = int( texCoordX / (TB * length));
    int matrix_Y = int( texCoordY / (TR * length));
    // 定义两个当前纹素+最终当前纹素所要取的纹素值
    vec2 curTexelCoord1, curTexelCoord2, curTexelCoordReslut;
    // x方向 偶数行 — matrix_X / 2 取整，得 1 or 2，乘以2等于自身即为偶数，反之为奇数。
    if (matrix_X / 2 * 2 == matrix_X) { 
        // y方向 偶数列
        if (matrix_Y /2  * 2 == matrix_Y) {
            curTexelCoord1 = vec2(length * TB * float(matrix_X),length * TR * float(matrix_Y));
            
            curTexelCoord2 = vec2(length * TB * float(matrix_X + 1),length * TR * float(matrix_Y + 1));
        }else{ 
         // y方向 奇数列
            curTexelCoord1 = vec2(length * TB * float(matrix_X),length * TR * float(matrix_Y + 1));
            
            curTexelCoord2 = vec2(length * TB * float(matrix_X + 1),length * TR * float(matrix_Y));
        }
        
    }else{  // x方向 奇数列
        // y方向 偶数列
        if (matrix_Y /2  * 2 == matrix_Y) {
            curTexelCoord1 = vec2(length * TB * float(matrix_X),length * TR * float(matrix_Y + 1));
            
            curTexelCoord2 = vec2(length * TB * float(matrix_X + 1),length * TR * float(matrix_Y ));
        }else{
             // y方向 奇数列
            curTexelCoord1 = vec2(length * TB * float(matrix_X),length * TR * float(matrix_Y));
            
            curTexelCoord2 = vec2(length * TB * float(matrix_X + 1),length * TR * float(matrix_Y + 1));
        }
    }
    // 计算当前纹素到参考纹素值的距离，就近取值
    float distance1 = sqrt(pow(curTexelCoord1.x - matrix_X, 2) + pow(curTexelCoord1.y - matrix_Y, 2));
    float distance2 = sqrt(pow(curTexelCoord2.x - matrix_X, 2) + pow(curTexelCoord2.y - matrix_Y, 2));
    //  距离六边形中心点更小的就取值为该参考点的纹素（颜色值）
    if (distance1 < distance2) {
        curTexelCoordReslut = curTexelCoord1;
    }else{
        curTexelCoordReslut = curTexelCoord2;
    }
    // 将颜色值填充到内建变量
    gl_FragColor = texture2D(un_texture,curTexelCoordReslut);  
}

六边形马赛克

三角形马赛克
三角形马赛克则是在六边形马赛克基础上进行变换，将六边形分为6个三角形，某一点分布在某一个三角形区域，则将该点的颜色值取自于该三角形中心点颜色值，如下是三角形坐标计算：

6三角形中心点坐标

/**
  * 工程中着色器程序不能有注释行，编译器会报错
  */
precision highp float;
uniform sampler2D un_texture;
varying vec2 var_textureCoords;
// 六变形的边长
const float MosaicSize = 0.02;

void main()
{
    float length = MosaicSize;
    // Pi = π ，PI6 = π / 6;
    const float PI6 = 0.523599;
    //  TR = sqrt(3)/2 = 0.866025;  TB = 3/2 = 1.5;
    float TR = 0.866025;
    float TB = 1.5;
    // 纹理坐标，(0,0)(0,1)(1,0)(1,1)
    float texCoordX = var_textureCoords.x;
    float texCoordY = var_textureCoords.y;
    // 纹理坐标对应的矩阵坐标
    int matrix_X = int( texCoordX / (TB * length));
    int matrix_Y = int( texCoordY / (TR * length));
    // 定义两个当前纹素+最终当前纹素所要取的纹素值
    vec2 curTexelCoord1, curTexelCoord2, curTexelCoordReslut;
    // x方向 偶数行 — matrix_X / 2 取整，得 1 or 2，乘以2等于自身即为偶数，反之为奇数。
    if (matrix_X / 2 * 2 == matrix_X) { 
        // y方向 偶数列
        if (matrix_Y /2  * 2 == matrix_Y) {
            curTexelCoord1 = vec2(length * TB * float(matrix_X),length * TR * float(matrix_Y));
            
            curTexelCoord2 = vec2(length * TB * float(matrix_X + 1),length * TR * float(matrix_Y + 1));
        }else{ 
         // y方向 奇数列
            curTexelCoord1 = vec2(length * TB * float(matrix_X),length * TR * float(matrix_Y + 1));
            
            curTexelCoord2 = vec2(length * TB * float(matrix_X + 1),length * TR * float(matrix_Y));
        }
        
    }else{  // x方向 奇数列
        // y方向 偶数列
        if (matrix_Y /2  * 2 == matrix_Y) {
            curTexelCoord1 = vec2(length * TB * float(matrix_X),length * TR * float(matrix_Y + 1));
            
            curTexelCoord2 = vec2(length * TB * float(matrix_X + 1),length * TR * float(matrix_Y ));
        }else{
             // y方向 奇数列
            curTexelCoord1 = vec2(length * TB * float(matrix_X),length * TR * float(matrix_Y));
            
            curTexelCoord2 = vec2(length * TB * float(matrix_X + 1),length * TR * float(matrix_Y + 1));
        }
    }
    // 计算当前纹素到参考纹素值的距离，就近取值
    float distance1 = sqrt(pow(curTexelCoord1.x - matrix_X, 2) + pow(curTexelCoord1.y - matrix_Y, 2));
    float distance2 = sqrt(pow(curTexelCoord2.x - matrix_X, 2) + pow(curTexelCoord2.y - matrix_Y, 2));
    //  距离六边形中心点更小的就取值为该参考点的纹素（颜色值）
    if (distance1 < distance2) {
        curTexelCoordReslut = curTexelCoord1;
    }else{
        curTexelCoordReslut = curTexelCoord2;
    }
    // 计算纹理坐标与六边形中心点的弧度值，[-π，π]
    float agnleV = atan((texCoordX - curTexelCoordReslut.x) / (texCoordY - curTexelCoordReslut.y));
    // 计算6个三角形的中心点
    vec2 area1 = vec2(curTexelCoordReslut.x, curTexelCoordReslut.y + length * TR / 2.0);
    vec2 area2 = vec2(curTexelCoordReslut.x + length / 2.0, curTexelCoordReslut.y - length * TR / 2.0);
    vec2 area3 = vec2(curTexelCoordReslut.x + length / 2.0, curTexelCoordReslut.y - length * TR / 2.0);
    vec2 area4 = vec2(curTexelCoordReslut.x, curTexelCoordReslut.y + length * TR / 2.0);
    vec2 area5 = vec2(curTexelCoordReslut.x - length / 2.0, curTexelCoordReslut.y - length * TR / 2.0);
    vec2 area6 = vec2(curTexelCoordReslut.x - length / 2.0, curTexelCoordReslut.y + length * TR / 2.0);
    // 
    if (agnleV >= PI6 && agnleV < PI6 * 3.0) {
      curTexelCoordReslut = area1;
    }else if (agnleV >= PI6 * 3.0 && agnleV < PI6 * 5.0){
      curTexelCoordReslut = area2;
    }else if ((agnleV >= PI6 * 5.0 && agnleV <= PI6 * 6.0) || (agnleV < -PI6 * 5.0 && agnleV > -PI6 * 6.0)){
      curTexelCoordReslut = area3;
    }else if (agnleV < -PI6 * 3.0 && agnleV >= -PI6 * 5.0){
      curTexelCoordReslut = area4;
    }else if (agnleV <= -PI6 && agnleV > -PI6 * 3.0){
      curTexelCoordReslut = area5;
    }else if (agnleV > -PI6 && agnleV < PI6){
      curTexelCoordReslut = area6;
    }
    // 将颜色值填充到内建变量
    gl_FragColor = texture2D(un_texture,curTexelCoordReslut);  
}

image.png

github demo 地址