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

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


效果2.gif

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

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

灰度濾鏡

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

//片元著色器，頂點(diǎ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值，實(shí)現(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;
}

馬賽克濾鏡

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

正方形馬賽克濾鏡

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

  • 根據(jù)紋理坐標(biāo)計(jì)算出實(shí)際圖像中的位置
  • 計(jì)算出一個(gè)小馬賽克的坐標(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ò)展：若要實(shí)現(xiàn)局部馬賽克，可判斷小馬賽克的坐標(biāo)位置實(shí)現(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;
}

六邊形馬賽克濾鏡

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

例圖1.png

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

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

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

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等分，每個(gè)三角形都是正三角形，再求出紋理坐標(biāo)與六邊形中心點(diǎn)的夾角，同時(shí)求出每個(gè)三角形的中心點(diǎn)，根據(jù)夾角判斷，夾角屬于哪個(gè)三角形，就將該三角形的中心點(diǎn)顏色作為整個(gè)三角形的紋素

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個(gè)area的面積的中心點(diǎn)？
    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輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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