OpenGL ES濾鏡：灰度、顛倒、馬賽克

原圖如下：


原圖.png

這篇博客是在OpenGL ES濾鏡：分屏濾鏡的基礎(chǔ)上進(jìn)行講解的。其實(shí)不同濾鏡效果顯示就是加載編譯不同的著色器對(duì)象。下面我們來分別看一下不同濾鏡下的著色器對(duì)象。

灰度濾鏡

灰度濾鏡頂點(diǎn)著色器Gray.vsh
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

void main (void) {
    gl_Position = Position;
    TextureCoordsVarying = TextureCoords;
}
灰度濾鏡片元著色器Gray.fsh

const highp vec3 W = vec3(0.2125, 0.7154, 0.0721); //權(quán)重值W中三個(gè)值的權(quán)重是借鑒于GPUImage
得到紋素mask后，對(duì)mask和W進(jìn)行點(diǎn)乘（dot）后獲得標(biāo)量luminance
vec4(vec3(luminance), 1.0);//利用vec3()這個(gè)內(nèi)建函數(shù)將vec4()中前3個(gè)值進(jìn)行灰度計(jì)算的標(biāo)量luminance

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//變換因子
const highp vec3 W = vec3(0.2125, 0.7154, 0.0721);

void main (void) {
    //獲取紋理坐標(biāo)下的顏色值——紋素
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    //將顏色mask與變換因子W相乘得到灰度值
    float luminance = dot(mask.rgb, W);
    //將灰度值轉(zhuǎn)化成（luminance，luminance，luminance，mask.a）并填充到像素中
    gl_FragColor = vec4(vec3(luminance), 1.0);
}

其實(shí)這幾種不同的濾鏡其頂點(diǎn)著色器都是相同的，只有片元著色器不同。下面我們繼續(xù)分析一下其他的濾鏡效果。

實(shí)現(xiàn)效果：
灰度濾鏡.jpeg

顛倒濾鏡

顛倒濾鏡片元著色器Reversal.fsh

vec4 color = texture2D(Texture, vec2(TextureCoordsVarying.x, 1.0 - TextureCoordsVarying.y)); //在Y軸上反轉(zhuǎn)紋理坐標(biāo)

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;
}
實(shí)現(xiàn)效果：
顛倒濾鏡.jpeg

正方形馬賽克

正方形馬賽克Mosaic.fsh
  1. 計(jì)算實(shí)際圖像位置
  2. 計(jì)算出一個(gè)小馬賽克的位置坐標(biāo)
  3. 換算回馬賽克的紋理坐標(biāo)
  4. 獲得馬賽克后的紋理坐標(biāo)的顏色值-紋素
  5. 將馬賽克顏色值賦值給gl_FragColor
precision mediump float;
//紋理坐標(biāo)
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()
{
    //計(jì)算實(shí)際圖像位置
    vec2 intXY = vec2(TextureCoordsVarying.x*TexSize.x, TextureCoordsVarying.y*TexSize.y);
    //floor(x)內(nèi)建函數(shù)，返回小于/等于x的最大整數(shù)（向下取整）
    //floor(intXY.x/mosaicSize.x)*mosaicSize.x, floor(intXY.y/mosaicSize.y)計(jì)算出一個(gè)小馬賽克的位置坐標(biāo)
    vec2 XYMosaic = vec2(floor(intXY.x/mosaicSize.x)*mosaicSize.x, floor(intXY.y/mosaicSize.y)*mosaicSize.y);
    //換算回馬賽克的紋理坐標(biāo)
    vec2 UVMosaic = vec2(XYMosaic.x/TexSize.x, XYMosaic.y/TexSize.y);
    //獲得馬賽克后的紋理坐標(biāo)的顏色值-紋素
    vec4 color = texture2D(Texture, UVMosaic);
    //將馬賽克顏色值賦值給gl_FragColor
    gl_FragColor = color;
}
實(shí)現(xiàn)效果：
正方形馬賽克.jpeg

六邊形馬賽克

六邊形馬賽克片元著色器HexagonMosaic.fsh
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//六邊形邊長(zhǎng)
const float mosaicSize = 0.03;

void main (void)
{
    float length = mosaicSize;
    //矩形高的比例 二分之一根號(hào)3 計(jì)算過程length*sin(60°)
    float TR = 0.866025;
    //矩形寬的比例 二分之三 計(jì)算過程 length*1/2 +length*1/2 + length*cos(60°)
    float TB = 1.5;
    //取出紋理左邊的x和y
    float x = TextureCoordsVarying.x;
    float y = TextureCoordsVarying.y;
    /*
    wx、wy是將紋理坐標(biāo)（0~1）先根據(jù)我們?cè)O(shè)置的矩形進(jìn)行放縮，然后對(duì)它向下取整
    這個(gè)放縮我們不需要考慮幾何意義，其實(shí)就是進(jìn)行放縮后取整，和我們正方形濾鏡的floor效果一樣，最終獲得矩形左上角的坐標(biāo)點(diǎn)
    */
    int wx = int(x / TB / length);
    int wy = int(y / TR / length);
    //v1,v2分別為各個(gè)矩形要取值對(duì)角線的坐標(biāo)點(diǎn)，這也是六邊形的中心店
    vec2 v1, v2, vn;
    //判斷wx是否問偶數(shù)，其實(shí)就是wx%2 == 0
    if (wx/2 * 2 == wx) {
        //wx為偶數(shù)
        //判斷wy是否為偶數(shù)，其實(shí)就是wy % 2 == 0
        if (wy/2 * 2 == wy) {
            /*
            左上角點(diǎn)的取法
            因?yàn)閣x和wy都已經(jīng)進(jìn)行了向下取整，所以再乘以（length*TB) 或（length*TR)即可獲得左上角點(diǎn)
            */  
            v1 = vec2(length * TB * float(wx), length * TR * float(wy));
            /*
            右下角點(diǎn)的取法
            右下角都要進(jìn)行加1之后再恢復(fù)坐標(biāo)
            */  
            v2 = vec2(length * TB * float(wx + 1), length * TR * float(wy + 1));
        } else {
            //wx是偶數(shù)，wy是奇數(shù)
            //所以對(duì)應(yīng)的點(diǎn)是取左下角(0,1)和右上角(1,0)
            v1 = vec2(length * TB * float(wx), length * TR * float(wy + 1));
            v2 = vec2(length * TB * float(wx + 1), length * TR * float(wy));
        }
    }else {
        //wx是奇數(shù)
        //判斷wy是否問偶數(shù)，其實(shí)就是wy%2 == 0
        if (wy/2 * 2 == wy) {
            //wx是奇數(shù)，wy是偶數(shù)，對(duì)應(yīng)六邊形左下部分
            //所以對(duì)應(yīng)的點(diǎn)是左下角(0,1)和右上角(1,0)
            v1 = vec2(length * TB * float(wx), length * TR * float(wy + 1));
            v2 = vec2(length * TB * float(wx + 1), length * TR * float(wy));
        } else {
            //wx和wy都是奇數(shù)，對(duì)應(yīng)六邊形右下部分
            //所以對(duì)應(yīng)的點(diǎn)是左上角(0,0)和右下角(1,1)
            v1 = vec2(length * TB * float(wx), length * TR * float(wy));
            v2 = vec2(length * TB * float(wx + 1), length * TR * float(wy + 1));
        }
    }
    //分別判斷v1、v2和紋理坐標(biāo)的距離，離哪個(gè)近就取哪個(gè)點(diǎn)的顏色值
    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;
    
}
實(shí)現(xiàn)效果：
六邊形馬賽克.jpeg

三角形濾鏡

三角形濾鏡片元著色器TriangularMosaic.fsh

關(guān)于三角形馬賽克首先可以肯定的是馬賽克是等邊三角形，這樣才能真正的無縫拼接。
如果有理解了上面的六邊形馬賽克的原理，那么三角形馬賽克就很好理解了，觀察發(fā)現(xiàn)，一個(gè)六邊形正好可以用六個(gè)三角形拼湊而成。


6個(gè)三角形.png

如果任意取一點(diǎn)（下圖中紅色的大點(diǎn)），該點(diǎn)顏色值就取它所在的三角形的中心點(diǎn)的顏色值，要判斷一個(gè)點(diǎn)屬于哪個(gè)三角形，必須先判斷它屬于那個(gè)六邊形，這個(gè)在之前的六邊形馬賽克中已經(jīng)提到了。


點(diǎn)位于哪個(gè)三角形.png

知道了該點(diǎn)在哪個(gè)六邊形之后，也就知道了該點(diǎn)的坐標(biāo)，然后根據(jù)該點(diǎn)和六邊形中心點(diǎn)的夾角范圍是不是就知道了這個(gè)點(diǎn)位于哪個(gè)三角形內(nèi)了。
夾角的計(jì)算 float θ = atan((x-O.x)/(y-O.y));這里注意一下atan算出的范圍是-180度至180度，對(duì)應(yīng)的數(shù)值是-PI至PI。
根據(jù)這個(gè)角度就能知道這個(gè)點(diǎn)位于這六個(gè)三角形中的哪一個(gè)三角形了（在上圖中已經(jīng)對(duì)這六個(gè)三角形進(jìn)行了標(biāo)記劃分）。然后再計(jì)算這六個(gè)三角形各自的中心點(diǎn)坐標(biāo)（上圖中的小紅點(diǎn)），任取的點(diǎn)屬于哪個(gè)三角形就取該三角形中心點(diǎn)的顏色值。最后再進(jìn)行顏色賦值。 
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);
    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;
}
實(shí)現(xiàn)效果：
三角形馬賽克.jpeg

Demo：
MosaicFilter

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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