OpenGL ES滤镜：灰度、颠倒、马赛克

原图如下：

原图.png

这篇博客是在OpenGL ES滤镜：分屏滤镜的基础上进行讲解的。其实不同滤镜效果显示就是加载编译不同的着色器对象。下面我们来分别看一下不同滤镜下的着色器对象。

灰度滤镜

灰度滤镜顶点着色器Gray.vsh

attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

void main (void) {
    gl_Position = Position;
    TextureCoordsVarying = TextureCoords;
}

灰度滤镜片元着色器Gray.fsh

const highp vec3 W = vec3(0.2125, 0.7154, 0.0721); //权重值W中三个值的权重是借鉴于GPUImage
得到纹素mask后，对mask和W进行点乘（dot）后获得标量luminance
vec4(vec3(luminance), 1.0);//利用vec3()这个内建函数将vec4()中前3个值进行灰度计算的标量luminance

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//变换因子
const highp vec3 W = vec3(0.2125, 0.7154, 0.0721);

void main (void) {
    //获取纹理坐标下的颜色值——纹素
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    //将颜色mask与变换因子W相乘得到灰度值
    float luminance = dot(mask.rgb, W);
    //将灰度值转化成（luminance，luminance，luminance，mask.a）并填充到像素中
    gl_FragColor = vec4(vec3(luminance), 1.0);
}

其实这几种不同的滤镜其顶点着色器都是相同的，只有片元着色器不同。下面我们继续分析一下其他的滤镜效果。

实现效果：

灰度滤镜.jpeg

颠倒滤镜

颠倒滤镜片元着色器Reversal.fsh

vec4 color = texture2D(Texture, vec2(TextureCoordsVarying.x, 1.0 - TextureCoordsVarying.y)); //在Y轴上反转纹理坐标

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

void main (void) {
    
    vec4 color = texture2D(Texture, vec2(TextureCoordsVarying.x, 1.0 - TextureCoordsVarying.y));
    
    gl_FragColor = color;
}

实现效果：

颠倒滤镜.jpeg

正方形马赛克

正方形马赛克Mosaic.fsh

1. 计算实际图像位置
2. 计算出一个小马赛克的位置坐标
3. 换算回马赛克的纹理坐标
4. 获得马赛克后的纹理坐标的颜色值-纹素
5. 将马赛克颜色值赋值给gl_FragColor

precision mediump float;
//纹理坐标
varying vec2 TextureCoordsVarying;
//纹理采样器
uniform sampler2D Texture;
//纹理图片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, floor(intXY.y/mosaicSize.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
    gl_FragColor = color;
}

实现效果：

正方形马赛克.jpeg

六边形马赛克

六边形马赛克片元着色器HexagonMosaic.fsh

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

void main (void)
{
    float length = mosaicSize;
    //矩形高的比例 二分之一根号3 计算过程length*sin(60°)
    float TR = 0.866025;
    //矩形宽的比例 二分之三 计算过程 length*1/2 +length*1/2 + length*cos(60°)
    float TB = 1.5;
    //取出纹理左边的x和y
    float x = TextureCoordsVarying.x;
    float y = TextureCoordsVarying.y;
    /*
    wx、wy是将纹理坐标（0~1）先根据我们设置的矩形进行放缩，然后对它向下取整
    这个放缩我们不需要考虑几何意义，其实就是进行放缩后取整，和我们正方形滤镜的floor效果一样，最终获得矩形左上角的坐标点
    */
    int wx = int(x / TB / length);
    int wy = int(y / TR / length);
    //v1,v2分别为各个矩形要取值对角线的坐标点，这也是六边形的中心店
    vec2 v1, v2, vn;
    //判断wx是否问偶数，其实就是wx%2 == 0
    if (wx/2 * 2 == wx) {
        //wx为偶数
        //判断wy是否为偶数，其实就是wy % 2 == 0
        if (wy/2 * 2 == wy) {
            /*
            左上角点的取法
            因为wx和wy都已经进行了向下取整，所以再乘以（length*TB) 或（length*TR)即可获得左上角点
            */  
            v1 = vec2(length * TB * float(wx), length * TR * float(wy));
            /*
            右下角点的取法
            右下角都要进行加1之后再恢复坐标
            */  
            v2 = vec2(length * TB * float(wx + 1), length * TR * float(wy + 1));
        } else {
            //wx是偶数，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 {
        //wx是奇数
        //判断wy是否问偶数，其实就是wy%2 == 0
        if (wy/2 * 2 == wy) {
            //wx是奇数，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 {
            //wx和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));
        }
    }
    //分别判断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;
    
}

实现效果：

六边形马赛克.jpeg

三角形滤镜

三角形滤镜片元着色器TriangularMosaic.fsh

关于三角形马赛克首先可以肯定的是马赛克是等边三角形，这样才能真正的无缝拼接。
如果有理解了上面的六边形马赛克的原理，那么三角形马赛克就很好理解了，观察发现，一个六边形正好可以用六个三角形拼凑而成。

6个三角形.png

如果任意取一点（下图中红色的大点），该点颜色值就取它所在的三角形的中心点的颜色值，要判断一个点属于哪个三角形，必须先判断它属于那个六边形，这个在之前的六边形马赛克中已经提到了。

点位于哪个三角形.png
知道了该点在哪个六边形之后，也就知道了该点的坐标，然后根据该点和六边形中心点的夹角范围是不是就知道了这个点位于哪个三角形内了。
夹角的计算 float θ = atan((x-O.x)/(y-O.y));这里注意一下atan算出的范围是-180度至180度，对应的数值是-PI至PI。
根据这个角度就能知道这个点位于这六个三角形中的哪一个三角形了（在上图中已经对这六个三角形进行了标记划分）。然后再计算这六个三角形各自的中心点坐标（上图中的小红点），任取的点属于哪个三角形就取该三角形中心点的颜色值。最后再进行颜色赋值。

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

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

实现效果：

三角形马赛克.jpeg

Demo：
MosaicFilter