OpenGL ES --顛倒濾鏡、灰度濾鏡以及三種馬賽克效果的實(shí)現(xiàn)原理探究

本篇文章的基礎(chǔ)代碼OpenGL ES --使用GLSL語(yǔ)言加載一張圖，關(guān)于濾鏡效果的實(shí)現(xiàn)，主要是實(shí)現(xiàn)片元著色器的算法，所以相關(guān)效果的頂點(diǎn)著色器是一樣的不需要改動(dòng)。

效果圖

一、顛倒濾鏡的實(shí)現(xiàn)原理
  • 原理：將紋理坐標(biāo)的Y值進(jìn)行一個(gè)顛倒操作，1- 原來(lái)的紋理坐標(biāo)y值；

  • 效果圖
    顛倒濾鏡效果圖
  • 顛倒濾鏡片元著色器代碼
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main (void) {

    vec4 mask = texture2D(Texture, vec2(TextureCoordsVarying.x,1.0-TextureCoordsVarying.y));
    
    gl_FragColor = vec4(mask.rgb, 1.0);
}
二、灰度濾鏡的實(shí)現(xiàn)原理
  • 原理：灰度濾鏡主要是讓RGB值保持一個(gè)平衡并填充，或者只保留一個(gè)亮度值，當(dāng)只保留一個(gè)亮度值的時(shí)候，我們僅僅使用綠色，因?yàn)榫G色是人眼的生理現(xiàn)象，讓看到的圖片更暗淡。
  • 關(guān)于濾鏡算法主要有五種方式
    1.浮點(diǎn)算法：Gray=R*0.3+G*0.59+B*0.11；
    2.整數(shù)?法：Gray=(R*30+G*59+B*11)/100；
    3.移位?法：Gray =(R*76+G*151+B*28)>>8;
    4.平均值法：Gray=(R+G+B)/3;
    5.僅取綠?：Gray=G；

  • 效果圖
    灰度濾鏡效果圖
  • 灰度濾鏡片元著色器代碼
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

//RGB的變換因子，即權(quán)重值，該權(quán)重值參考GPUImage的值
const highp vec3 W = vec3(0.2125, 0.7154, 0.0721);

void main(){
    //獲取對(duì)應(yīng)紋理坐標(biāo)系下色顏色值
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    
    //將顏色mask 與 變換因子相乘得到灰度值
    float luminance = dot(mask.rgb, W);
    
    //將灰度值轉(zhuǎn)換為(luminance,luminance,luminance,mask.a)并填充到像素中
    gl_FragColor = vec4(vec3(luminance), 1.0);
}

思考：什么是馬賽克效果：?賽克效果就是把圖?的?個(gè)相當(dāng)??的區(qū)域?同?個(gè)點(diǎn)的顏?來(lái)表示.可以認(rèn)為是?規(guī)模的降低圖像的分辨率,?讓圖像的?些細(xì)節(jié)隱藏起來(lái)。

三、正方形馬賽克的實(shí)現(xiàn)原理
  • 原理：
    第一步：根據(jù)紋理坐標(biāo)來(lái)計(jì)算實(shí)際圖像的位置；
    第二步：根據(jù)內(nèi)建函數(shù)floor (x) 內(nèi)建函數(shù),返回?于/等于X的最?整數(shù)值,來(lái)獲取一個(gè)小正方形馬賽克的坐標(biāo)；
    第三步：在由紋理圖片的大小換算出紋理坐標(biāo)；
    第四步：根據(jù)馬賽克紋理坐標(biāo)獲取到該紋理坐標(biāo)的顏色值

  • 實(shí)現(xiàn)效果


    正方形馬賽克效果圖
  • 正方形濾鏡片元著色器實(shí)現(xiàn)代碼
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 計(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)原理
  • 原理：我們要做的效果就是讓?張圖?，分割成由六邊形組成，讓每個(gè)六邊形中的顏?相同（直接取六邊形中?點(diǎn)像素RGB較?便，我們這?采?的就是這種?法），將它進(jìn)行分割，取每個(gè)六邊形的中心畫出一個(gè)矩陣
    截屏2020-08-12 16.09.32.png
    如上圖，畫出很多?和寬?例為 3：√3 的的矩形陣。然后我們可以對(duì)每個(gè)點(diǎn)進(jìn)?編號(hào)，如上圖中，采?坐標(biāo)系標(biāo)記.假如我們的屏幕的左上點(diǎn)為上圖的（0,0）點(diǎn)，則屏幕上的任?點(diǎn)我們找到它所對(duì)應(yīng)的那個(gè)矩形了。假定我們?cè)O(shè)定的矩陣?例為 3*LEN : √3*LEN ，那么屏幕上的任意點(diǎn)（x, y）所對(duì)應(yīng)的矩陣坐標(biāo)為（int(x/(3*LEN)), int(y/(√3*LEN))）。

第一步：設(shè)置矩形的長(zhǎng)寬比例值TR、TB（TB：TR 符合比例 3：√3）其中長(zhǎng)寬比為3：√3；
第二步：獲取紋理坐標(biāo)的x，y；
第三步：根據(jù)紋理坐標(biāo)計(jì)算對(duì)應(yīng)的矩形坐標(biāo)wx、wy假設(shè)矩陣的比例為3*len：√3*len，那么紋理坐標(biāo)（x，y）對(duì)應(yīng)的矩陣坐標(biāo)為

圖片來(lái)自網(wǎng)絡(luò)

第四步：根據(jù)行列的奇偶情況，求對(duì)應(yīng)的中心點(diǎn)紋理坐標(biāo)v1、v2；
第五步：根據(jù)距離公式求像素點(diǎn)距離兩個(gè)中心點(diǎn)的距離s1、s2；
第六步：根據(jù)求出的距離，判斷離哪個(gè)中心點(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.866026;
    
    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;
}
五、三角形馬賽克的實(shí)現(xiàn)原理

  • 原理：三角形馬賽克原理和六邊形馬賽克的類似，我們只需要將六邊形平分六等分，六邊形分為了6個(gè)等邊三角形，然后按照角度值來(lái)判斷坐標(biāo)位于哪一個(gè)三角形內(nèi)，就采用哪個(gè)哪個(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.866026;
    
    float TB = 1.5;
    
    float PI6 = 0.523599;
    
    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;
    }
        
    
    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;
}

源碼地址MosaicDemo

最后編輯于 ：
?著作權(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)容