前沿

濾鏡都是通過著色器特別是片元著色器來實(shí)現(xiàn)不通的效果，本篇主要介紹路徑的原理，不太著重實(shí)現(xiàn)代碼，詳細(xì)代碼請參看demo

灰度

灰度濾鏡的算法
1.浮點(diǎn)算法:Gray=R0.3+G0.59+B0.11
2.整數(shù)方法:Gray=(R30+G59+B11)/100
3.移位方法:Gray =(R76+G151+B*28)>>8;
4.平均值法:Gray=(R+G+B)/3;
5.僅取綠?色:Gray=G;
沒經(jīng)過任何變化的圖片

image.png

整數(shù)方法實(shí)現(xiàn)濾鏡

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

其他的算法就不一一去調(diào)試了，原理就是通過算法改變顏色值.

顛倒

顛倒就是s坐標(biāo)不變，t坐標(biāo)翻轉(zhuǎn)。因?yàn)榧y理坐標(biāo)的值范圍是[0,1]，我們想讓倒置，用1減去t坐標(biāo).

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的大小，來調(diào)節(jié)馬賽克效果.

SquareMosaic.png

如圖我們把一整個(gè)圖片分成若干個(gè)小正方形，通過計(jì)算，我們知道某一點(diǎn)在某一特定的小正方形內(nèi)，然后我們?nèi)⌒≌叫巫笊享旤c(diǎn)的像素，填充整個(gè)小正方形。當(dāng)然我們也可以取正方形中心的像素填充整個(gè)正方形。

六邊形馬賽克

image.png

我們可以看到一個(gè)圖形可以有正六邊形拼接而成。

image.png

我們可以看出來所以的拼接都可以看成有這四種長方形拼接而成。
我們可以通過判斷行數(shù)和列數(shù)的奇偶行來判斷是哪一類長方形。進(jìn)而得出其相鄰的兩個(gè)六邊形的中心點(diǎn)。

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