OpenGL ES 片元着色器灰色滤镜+图片倒置+马赛克实现

效果图

效果实现的代码是鉴于上一片的博客，这里只需要修改片元着色器实现滤镜效果，因此对于实现的代码将不阐述，具体代码，可以参考demo。
灰度滤镜的方法，比较常用的是浮点算法

浮点算法	Gray=R0.3+G0.59+B*0.11
整数⽅方法	Gray=(R30+G59+B*11)/100
移位⽅方法	Gray =(R76+G151+B*28)>>8
平均值法	Gray=(R+G+B)/3
仅取绿⾊色	Gray=G

灰度滤镜可以不通过自定义着色器去完成，基于颜色通道进行修改
一般饱和度滤镜，对比度滤镜，如果在业务开发中使用，大家可以使用GPUImage代码量是最少，如果项目是基于OpenGL开发，想要实现滤镜效果就需要去GPUImage copy对应的代码使用

const highp vec3 W = vec3(0.2125, 0.7154, 0.0721);

这个值是借鉴GPUImage,我们可以看到绿色值是最大的，因为我们对绿色比较敏感，属于我们的生理现象。

float luminance = dot(mask.rgb, W);

dot是一个点乘，向量之间的点乘得到一个标量，我们所有的颜色值都取同一个灰度值使用。

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);
    float luminance = dot(mask.rgb, W);
    gl_FragColor = vec4(vec3(luminance), 1.0);
}

图片颠倒

因为屏幕的范围是0～1，所以图片的颠倒只需要改变的纹理坐标的y值（1.0-y）

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

马赛克滤镜实现

⻢马赛克效果就是把图⽚片的⼀一个相当⼤大⼩小的区域⽤用同⼀一个点的颜⾊色来表示.可以认为是⼤大规模的降低图像的分辨率,⽽而让图像的⼀一些细节隐藏起来。

正方形马赛克

正方形马赛克流程

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);
//马赛克坐标
 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;
}

六边形马赛克

实现思路:
我们要做的效果就是让一张图⽚，分割成由六边形组成，让每个六边形中的颜色相同(直接取六边形中⼼心点像素RGB较方便，们这⾥里里采⽤的就是这种方法)
将它进行分割，取每个六边形的中⼼心点画出⼀个矩阵

借鉴cc老师图

1.首先六边形可以分裂成一个矩形块，而这个矩形块的宽为√3，长为：3
2.长宽比为3:√3
3.矩形的宽：length√3/2；
3.矩阵的长：length3/2
4.矩形的高的比例TR = sqrt(3)/2 = 0.8666025
5.矩形的宽的比例TB = 3/2 = 1.5

纹理坐标在所对应的矩阵坐标
int wx = int(x/1.5length)
int wy = int(y/TRlength);

从上面的图中可看出六边型是有多个矩阵块组成，那么我们取色范围就是拿到六边型的中心点的色值

借鉴图

通过这张图，我们可以了解每一个点都是中心点，那么颜色值是根据像素点距离谁比较近，而就近选取

刚刚说过六边形是有多个矩阵组成，那么我们来看看矩阵坐标

矩阵坐标

矩阵顶点

坐标的计算方式

这些客观的展示六边形实现的原理，我们只需要在矩阵加多一条线，并且拿到对应中心点的坐标就可以获取到色值。
获取坐标的方式：
1.偶数行，偶数列(0,0)(1,1)
2.偶数行，奇数列(0,1)(1,0)
3.奇数行，偶数列(0,1)(1,0)
4.奇数行，奇数列(0,0)(1,1)

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
const float mosaicSize = 0.03;

void main (void)
{
//六边形边长
    float length = mosaicSize;
    //矩形高的比例  sqrt(3)/2 = 0.8666025 /length*sina（60度）
    float TR = 0.866025;
//矩形宽比的例 计算过程lenght*1/2+lenght*1/2+lenght*cos（60度）
    float TB = 1.5;
    //纹理的xy
    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) {
        if (wy/2 * 2 == wy) {
            //  wy为偶数，wy % 2 = 0 对应六边形左上角右下角   (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 {
            // 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 = color;
}

三角形马赛克

上个案例是六边形滤镜效果，我们使用距离进行取值，相对三角形就行不通了，因此就要通过角度取值。
三角形马赛克是是一个正三角形基于六边形的基础进行的修改，先有六边形的基础，因此，我们需要使用六边形滤镜实现的代码，并且继续划分六等分正三角形，获取三角形中心点，并判断夹角在那个三角形中，获取对应三角形中心点的颜色填充。

获取六个正三角形的中心点

借鉴月月博客图

六个正三角形的范围

借鉴月月博客图

    //纹理中该点的颜色值
    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);
  
    //判断夹角属于那个三角形，则获取哪个三角形的中心点坐标
    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;
}

完整的代码可见Github
注意：
关于三角形滤镜图借鉴月月博客（//www.greatytc.com/p/dcfb5515dbab）