OpenGLES濾鏡開發(fā)匯總 —— 馬賽克

什么是馬賽克

馬賽克原理

馬賽克的實現(xiàn)

  • 方格馬賽克的glsl實現(xiàn)如下:
precision highp float;

varying vec2 textureCoordinate; // 紋理坐標(biāo)

uniform sampler2D inputTexture; // 輸入圖像紋理

uniform float imageWidthFactor; // 圖像寬度
uniform float imageHeightFactor;// 圖像高度

uniform float mosaicSize;       // 馬賽克大小(像素值)

void main()
{
    vec2 uv  = textureCoordinate.xy;
    // 計算出馬賽克的寬度
    float dx = mosaicSize * imageWidthFactor;
    // 計算出馬賽克的高度
    float dy = mosaicSize * imageHeightFactor;
    // 使用floor函數(shù)計算出橫坐標(biāo)和縱坐標(biāo)經(jīng)過馬賽克變換后的值
    vec2 coord = vec2(dx * floor(uv.x / dx), dy * floor(uv.y / dy));
    // 計算出馬賽克的顏色
    vec3 tc = texture2D(inputTexture, coord).xyz;
    // 輸出馬賽克圖像
    gl_FragColor = vec4(tc, 1.0);
}

得到的馬賽克效果如下：


馬賽克效果
  • 圓形馬賽克的實現(xiàn)：
    我們經(jīng)過上一步，可以得到基本的馬賽克效果，我們實現(xiàn)一個圓形的馬賽克效果。圓形馬賽克其實就是在原來馬賽克的基礎(chǔ)上，判斷馬賽克格子中的元素是否落在圓內(nèi)，圓外部的像素保留。fragment shader如下：
precision highp float;
uniform sampler2D inputTexture;
varying vec2 textureCoordinate;

uniform float imageWidth;     // 圖片寬度
uniform float imageHeight;    // 圖片高度
uniform float mosaicSize;

void main(void)
{
    vec2 texSize = vec2(imageWidth, imageHeight);
    // 計算實際圖像位置
    vec2 xy = vec2(textureCoordinate.x * texSize.x, textureCoordinate.y * texSize.y);
    // 計算某一個小mosaic的中心坐標(biāo)
    vec2 mosaicCenter = vec2(floor(xy.x / mosaicSize) * mosaicSize + 0.5 * mosaicSize,
                         floor(xy.y / mosaicSize) * mosaicSize + 0.5 * mosaicSize);
    // 計算距離中心的長度
    vec2 delXY = mosaicCenter - xy;
    float delLength = length(delXY);
    // 換算回紋理坐標(biāo)系
    vec2 uvMosaic = vec2(mosaicCenter.x / texSize.x, mosaicCenter.y / texSize.y);

    vec4 color;
    if (delLength < 0.5 * mosaicSize) {
        color = texture2D(inputTexture, uvMosaic);
    } else {
        color = texture2D(inputTexture, textureCoordinate);
    }
    gl_FragColor = color;
}
圓形馬賽克效果
precision highp float;
uniform sampler2D inputTexture;
varying vec2 textureCoordinate;

uniform float mosaicSize;   // 馬賽克大小

void main (void)
{
    float length = mosaicSize;
    float TR = 0.866025;
    float x = textureCoordinate.x;
    float y = textureCoordinate.y;
    int wx = int(x / 1.5 / 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(inputTexture, vn);
    gl_FragColor = color;
}

六邊形馬賽克的效果如下：


六邊形馬賽克效果

這里的六邊形并不是正六邊形，這是由于沒有做長寬比的計算。你也可以在此基礎(chǔ)上添加長寬比實現(xiàn)正六邊形的馬賽克。這里不做詳細(xì)介紹，有興趣的可以去嘗試實現(xiàn)以下。

  • 三角形馬賽克的實現(xiàn)：
    三角形馬賽克其實就是在原來六邊形馬賽克的基礎(chǔ)上，將六邊形分成留個三角形即可。可以參考這篇文章：
    『openframeworks』shader制作三角形馬賽克效果
    修改之后得到的fragment shader 如下：
precision highp float;
uniform sampler2D inputTexture;
varying vec2 textureCoordinate;

// len 是六邊形的邊長
uniform float mosaicSize;

void main (void){
    const float TR = 0.866025;  // .5*(3)^.5
    const float PI6 = 0.523599; // PI/6

    float x = textureCoordinate.x;
    float y = textureCoordinate.y;

    // 1.5*len 是矩形矩陣的長，TR*len 是寬
    // 計算矩形矩陣的頂點坐標(biāo) (0,0)(0,1)(1,0)(1,1)
    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));
        }
    }
    // 計算參考點與當(dāng)前紋素的距離
    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(inputTexture, vn);
    float a = atan((x - vn.x)/(y - vn.y)); // 計算夾角
    // 分別計算六個三角形的中心點坐標(biāo)，之后將作為參考點
    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);

    // 根據(jù)夾角判斷是哪個三角形
    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(inputTexture, vn);
    gl_FragColor = color;
}

三角形馬賽克效果如下：


三角形馬賽克

可以看到，這里的馬賽克不是正三角形的。由于沒有處理長寬比，所以得不到正三角形的馬賽克，你也可以添加長寬比來計算。這里不做相似的介紹，有興趣的可以去嘗試以下。

詳細(xì)實現(xiàn)過程，可以參考本人的開源相機(jī)項目：
CainCamera
CainCamera的FilterLibrary中有馬賽克的全部實現(xiàn)。

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

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,802評論 25贊 709
  • 精讀魯迅的《秋夜》，摘出其中兩個你認(rèn)為精彩的句子，嘗試分析 哇的一聲，夜游的惡鳥飛過了。 原文是這樣的： 鬼眼的天...
    和和打怪閱讀 362評論 1贊 1
  • 是不是很多人有在現(xiàn)實生活中預(yù)設(shè)了一個小目標(biāo)，達(dá)到之后反而覺得迷茫的情況.之前在目標(biāo)沒有達(dá)到的時候，可以埋頭奮戰(zhàn)，一...
    HedyWang1閱讀 199評論 0贊 0
  • 思維導(dǎo)圖與英語學(xué)習(xí)，楊老師通過深入淺出的方式將思維導(dǎo)圖工具應(yīng)用到英語學(xué)習(xí)中，給我們一種快樂學(xué)習(xí)的美好體驗。后面又通...
    DONSTUDIO閱讀 4,574評論 0贊 2
  • 2016年1月6號10點10分，閨蜜生下一位小公主，孩子沒出世之前我和她就一直討論小孩的性別，我們兩都想是個女孩。...
    塵小稀閱讀 995評論 0贊 0

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