OpenGL ES 案例：灰度+顛倒+馬賽克濾鏡

本案例的目的是理解如何用GLSL實現(xiàn)灰度，顛倒，正方形馬賽克，六邊形馬賽克，三角形馬賽克共五種濾鏡。具體效果如下


效果2.gif

要實現(xiàn)我們的濾鏡效果，首先得能通過GLSL方式正常顯示一張紋理圖片。對應(yīng)的頂點著色器和片元著色器的代碼如下：

//頂點著色器
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);
}

灰度濾鏡

灰度濾鏡的實現(xiàn)原理是讓RGB值保持一個平衡并填充，或者只保留一個亮度值，即綠色，在人眼中，綠色的亮度是最顯眼的，綠色值越深，在肉眼觀察中圖片越暗淡，這是眼睛的一種生理現(xiàn)象。

//片元著色器，頂點著色器不必修改
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);
}

顛倒濾鏡

在片元著色器中，翻轉(zhuǎn)紋理坐標(biāo)y值，實現(xiàn)顛倒濾鏡

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

馬賽克濾鏡

?賽克效果就是把圖?的?個相當(dāng)??的區(qū)域?同?個點的顏?來表示.可以認(rèn)為是?規(guī)模的降低圖像的分辨率,?讓圖像的?些細(xì)節(jié)隱藏起來。不同的馬賽克效果的算法實現(xiàn)都有一定的區(qū)別，但本質(zhì)上都是通過對片元著色器的紋理坐標(biāo)的運算操作重新得到對應(yīng)紋素的過程。

正方形馬賽克濾鏡

正方形馬賽克的實現(xiàn)，大致可以分為以下幾個步驟：

  • 根據(jù)紋理坐標(biāo)計算出實際圖像中的位置
  • 計算出一個小馬賽克的坐標(biāo)
  • 將馬賽克坐標(biāo)換算回紋理坐標(biāo)
precision mediump float;

varying vec2 TextureCoordsVarying;
uniform sampler2D Texture;
const vec2 TexSize = vec2(400.0, 400.0);
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;
}

擴(kuò)展：若要實現(xiàn)局部馬賽克，可判斷小馬賽克的坐標(biāo)位置實現(xiàn),例如

if (XYMosaic.x>200.0) {
    vec2 UVMosaic = vec2(XYMosaic.x/TexSize.x, XYMosaic.y/TexSize.y);
    vec4 color = texture2D(Texture, UVMosaic);
    gl_FragColor = color;
}
else{
    vec4 color =texture2D(Texture,TextureCoordsVarying);
    gl_FragColor = color;
}

六邊形馬賽克濾鏡

六邊形馬賽克原理：將一張圖片，分割成由六邊形組成，再取每個六邊形的中心點點畫出一個個的矩形，根據(jù)矩形的奇偶排列情況求出對應(yīng)的2個中心點，并計算紋理坐標(biāo)與兩個中心點的距離，根據(jù)距離判斷，采取就近原則，當(dāng)前的六邊形就采用近的中心點的顏色值。

例圖1.png

如圖，畫出很多?和寬?例為 3：√3 的的矩形陣，然后我們可以對每個點進(jìn)?編號，采?坐標(biāo)系標(biāo)記。假如我們的屏幕的左上點為上圖的（0,0）點，則屏幕上的任?點我們找到它所對應(yīng)的那個矩形了。假定我們設(shè)定的矩陣?例為 3LEN : √3LEN ，那么屏幕上的任意點（x, y）所對應(yīng)的矩陣坐標(biāo)為（int(x/(3LEN)), int(y/(√3LEN))）。然后再根據(jù)行列的奇偶情況，求對應(yīng)的中心點紋理坐標(biāo)v1、v2，當(dāng)奇行奇列和偶行偶列時，兩個點對應(yīng)的紋理坐標(biāo)就分別為(0,0) (1,1)，當(dāng)奇行偶列和偶行奇列時，兩個點對應(yīng)的紋理坐標(biāo)就分別為(0,1) (1,0)。
例圖2.png

此時我們就可以計算出和兩個中心點的坐標(biāo)，以偶行偶列的情況，如下圖
例圖3.png

拿到這兩個中心點的坐標(biāo)后，最后我們只需要分別求出這兩個中心點與當(dāng)前像素點的距離，取距離近的那個的中心點的顏色值作為六邊形的顏色值。具體代碼如下：

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

const 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(length * 1.5 * float(wx), length * TR * float(wy));
            v2 = vec2(length * 1.5 * float(wx + 1), length * TR * float(wy + 1));
        } else {
            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) {
            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 {
            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; 
}

三角形馬賽克

三角形馬賽克是由六邊形馬賽克演變而來，得到三角形的前提，就是的先有六邊形，然后將正六邊形6等分，每個三角形都是正三角形，再求出紋理坐標(biāo)與六邊形中心點的夾角，同時求出每個三角形的中心點，根據(jù)夾角判斷，夾角屬于哪個三角形，就將該三角形的中心點顏色作為整個三角形的紋素

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);//求出6個area的面積的中心點？
    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;
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容