前沿

滤镜都是通过着色器特别是片元着色器来实现不通的效果，本篇主要介绍路径的原理，不太着重实现代码，详细代码请参看demo

灰度

灰度滤镜的算法
1.浮点算法:Gray=R0.3+G0.59+B0.11
2.整数方法:Gray=(R30+G59+B11)/100
3.移位方法:Gray =(R76+G151+B*28)>>8;
4.平均值法:Gray=(R+G+B)/3;
5.仅取绿⾊色:Gray=G;
没经过任何变化的图片

image.png

整数方法实现滤镜

precision highp float;
varying vec2 TextureCoordsVarying;
uniform sampler2D Texture;
const lowp vec3 W = vec3(30.0,59.0,11.0);
void main (void){
    vec4 mask = texture2D(Texture,TextureCoordsVarying);
    float luminance = dot(mask.rgb,W);
    gl_FragColor =vec4(vec3(luminance/100.0),1.0);
    
}

image.png

平均值法

precision highp float;
varying vec2 TextureCoordsVarying;
uniform sampler2D Texture;
void main (void){
    
    vec4 mask = texture2D(Texture,TextureCoordsVarying);
    float averageValue = (mask.r + mask.g +mask.b)/3.0;
    gl_FragColor = vec4(vec3(averageValue),1.0);
    
}

image.png

其他的算法就不一一去调试了，原理就是通过算法改变颜色值.

颠倒

颠倒就是s坐标不变，t坐标翻转。因为纹理坐标的值范围是[0,1]，我们想让倒置，用1减去t坐标.

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

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

image.png

正方形马赛克

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

void main (void){
    
    float x = TextureCoordsVarying.x;
    float y = TextureCoordsVarying.y;
    vec2 UVMosaic = vec2(floor(x/size)*size,floor(y/size)*size);
    gl_FragColor = texture2D(Texture,UVMosaic);
    
}

image.png

可以通过size的大小，来调节马赛克效果.

SquareMosaic.png

如图我们把一整个图片分成若干个小正方形，通过计算，我们知道某一点在某一特定的小正方形内，然后我们取小正方形左上顶点的像素，填充整个小正方形。当然我们也可以取正方形中心的像素填充整个正方形。

六边形马赛克

image.png

我们可以看到一个图形可以有正六边形拼接而成。

image.png

我们可以看出来所以的拼接都可以看成有这四种长方形拼接而成。
我们可以通过判断行数和列数的奇偶行来判断是哪一类长方形。进而得出其相邻的两个六边形的中心点。

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

void main (void){
    
    float length = mosaicSize;
    float TR = 0.866025;
    float TB = 1.5;
    float x = TextureCoordsVarying.x;
    float y = TextureCoordsVarying.y;
    int wx = int(x / TB / length);
    int wy = int(y / TR / length);
    vec2 v1,v2,vn;
    if (wx/2*2 == wx) {
        if (wy/2*2 == wy) {
            v1 = vec2(float(wx)*TB*length,float(wy)*TR*length);
            v2 = vec2(float(wx+1)*TB*length,float(wy+1)*TR*length);

        } else {
            v1 = vec2(float(wx)*TB*length,float(wy+1)*TR*length);
            v2 = vec2(float(wx+1)*TB*length,float(wy)*TR*length);
            
        }
        
    } else {
        if (wy/2*2 == wy) {
                v1 = vec2(float(wx)*TB*length,float(wy+1)*TR*length);
                v2 = vec2(float(wx+1)*TB*length,float(wy)*TR*length);

            } else {
                v1 = vec2(float(wx)*TB*length,float(wy)*TR*length);
                v2 = vec2(float(wx+1)*TB*length,float(wy+1)*TR*length);
                
        }
        
    }
    
    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;
       }
    gl_FragColor = texture2D(Texture,vn);
    
}

image.png

三角形马赛克

image.png

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;
    }
    
    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 = area3;
    } 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 =area1;
    } else if (a < -PI6 * 3.0 && a >= -PI6 * 5.0) {
        vn = area6;
    } else if(a <= -PI6 && a> -PI6 * 3.0) {
        vn = area5;
    } else if (a > -PI6 && a < PI6)
    {
        vn = area4;

    }
    
    vec4 color = texture2D(Texture, vn);
    gl_FragColor = color;
}

B36713CF00A2BF99DD52D35FA16DBE3F.png