默认

顶点着色器代码：

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

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

片元着色器代码：

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

void main (void) {

    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    gl_FragColor = vec4(mask.rgb, 1.0);
}

灰度滤镜

顶点着色器代码不变，片元着色器代码：

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

/*
 1.浮点算法:Gray=R*0.3+G*0.59+B*0.11
 2.整数方法:Gray=(R*30+G*59+B*11)/100
 3.移位方法:Gray=(R*76+G*151+B*28)>>8;
 4.平均值法:Gray=(R+G+B)/3;
 5.仅取绿色:Gray=G;
 */
void main (void) {
    //获取对于纹理坐标下的颜色值
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    //颜色值与变换因子相乘得灰度值
    float luminance = dot(mask.rgb, W);
    //将灰度值(luminance,luminance,luminance,mask.a)并填充到像素中
    gl_FragColor = vec4(vec3(luminance), 1.0);
}

颠倒滤镜

顶点着色器代码不变，片元着色器代码：

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

void main (void) {
    //纹理坐标y轴翻转
    vec4 color = texture2D(Texture, vec2(TextureCoordsVarying.x, 1.0-TextureCoordsVarying.y));
    gl_FragColor = color;
}

正方形马赛克滤镜

马赛克效果就是把图片的一个相当⼤小的区域⽤同一个点的颜⾊来表示.可以认为是大规模的降低图像的分辨率,⽽让图像的一些细节隐藏起来。
顶点着色器代码不变，片元着色器代码：

precision highp float;
//纹理采样器
uniform sampler2D Texture;
//纹理坐标
varying vec2 TextureCoordsVarying;
//纹理图⽚size
const vec2 TexSize = vec2(400.0, 400.0);
//⻢赛克Size
const vec2 mosaicSize = vec2(10.0, 10.0);

void main (void) {
   //计算实际图像位置
   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较⽅便，我们这里采⽤的就是这种⽅法)。
即取每个六边形的中心点画出一个的矩形，根据矩形的奇偶排列情况求出对应的2个中心点，并计算纹理坐标与两个中心点的距离，根据距离判断，采取就近原则，当前的六边形就采用近的中心点的颜色值。
顶点着色器代码不变，片元着色器代码：

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

/*
 注意①:
 首先六边形可以分裂成一个矩形块.而这个矩形块的宽为:√3， 长为: 3;
 那么长宽比为 3: √3;
 矩形的宽为: length * √3/2;
 矩形的长为: length * 3/2
 所以TR = sqrt(3)/2 = 0.866025
 所以TB = 3/2 = 1.5;
 
 注意②
 第一种：表示当点在偶数行偶数列，或者奇数行奇数列的情形，这种情况下，只有左上右下有个点是六边形中心点。
 左上点的纹理坐标为：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 = vec2(length * 1.5 * float(wx), length * TR * float(wy + 1))；
 右上点的纹理坐标为:v2 = vec2(length * 1.5 * float(wx + 1), length * TR * float(wy))。
 */
void main (void)
{
    float length = mosaicSize;
    //矩形高的比例 √3/2
    float TR = 0.866025;
    //矩形宽的比例 3/2
    float TB = 1.5;
    //纹理坐标:(0,0)(0,1)(1,0)(1,1)
    float x = TextureCoordsVarying.x;
    float y = TextureCoordsVarying.y;
    //wx,wy -> 表示纹理坐标在所对应的矩阵坐标
    //wx,wy是将纹理坐标（0～1）先根据我们设置的矩形区域缩放，然后对它进行向下取整
    //这个缩放我们不需要考虑几何意义，和我们在正方形滤镜的floor效果一样，最终获得矩形左上角的坐标点
    int wx = int(x / TB / length);
    int wy = int(y / TR / length);
    //v1, v2为各个矩形要取值的对角线的坐标点，也是六边形的中心点
    vec2 v1, v2, vn;
    //判断wx,wy在矩形中的上半部还是下半部
    if (wx/2 * 2 == wx) { //判断wx是否为偶数，相当于wx % 2 == 0
        if (wy/2 * 2 == wy) { //判断wy是否为偶数，相当于wy % 2 == 0
            //wx wy 都是偶数，对应六边形左上部分
            //所以对应的点我们取左上角和右下角(0,0),(1,1)
            /*
             左上角的点的坐标
             */
            v1 = vec2(length * 1.5 * float(wx), length * TR * float(wy));
            /*
             右下角的点的坐标
             加1的意思，对于x就是再加一个宽，对于y就是再加一个高。
            */
            v2 = vec2(length * 1.5 * float(wx + 1), length * TR * float(wy + 1));
        } else {
            //wx是偶数，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 {
        if (wy/2 * 2 == wy) {
            //wx是奇数，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 {
            //wx 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));
        }
    }
    //计算参考点与当前纹素的距离
    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 中
    gl_FragColor = color;
    
}

三角形马赛克滤镜

三角形马赛克是由六边形马赛克演变而来，得到三角形的前提，就是的先有六边形，然后将正六边形6等分，每个三角形都是正三角形，然后求出纹理坐标与中心点的夹角，同时求出三角形的中心点，根据夹角判断，夹角属于哪个三角形，就将该三角形的中心点颜色作为整个三角形的纹素。
顶点着色器代码不变，片元着色器代码：

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//马赛克的边
float mosaicSize = 0.03;

void main (void){
    //TR其实是√3/2
    const float TR = 0.866025;
    //π/6 = 30.0
    const float PI6 = 0.523599;
    //纹理坐标:(0,0)(0,1)(1,0)(1,1)
    float x = TextureCoordsVarying.x;
    float y = TextureCoordsVarying.y;
    
    //wx,wy -> 表示纹理坐标在所对应的矩阵坐标
    int wx = int(x/(1.5 * mosaicSize));
    int wy = int(y/(TR * mosaicSize));
    
    //判断wx,wy在矩形中的上半部还是下半部
    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);
    //获取a与纹理中心的⻆度.
    //atan算出的范围是-180至180度，对应的数值是-PI至PI
    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);
    //判断夹⻆a 属于哪个三⻆形.则获取哪个三⻆形的中心点坐标
    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;
}

滤镜demo