0017--OpenGL ES 濾鏡進(jìn)階篇之黑白、倒置、馬賽克濾鏡

[toc]

前言

本篇主要是探討濾鏡處理中灰度、顛倒濾鏡、旋渦濾鏡、六邊形馬賽克濾鏡、三角形馬賽克濾鏡處理.

iOS與圖形圖像處理框架

5be6abcb9a92ff0bcaf7b37a388389c1

圖?片顯示原理理

f3093715ff131e19a176615041d35e5a
  • CPU: 計(jì)算視圖frame，圖片解碼，需要繪制紋理圖片通過(guò)數(shù)據(jù)總線交給GPU
  • GPU: 紋理理混合，頂點(diǎn)變換與計(jì)算,像素點(diǎn)的填充計(jì)算，渲染到幀緩沖區(qū)
    ? 時(shí)鐘信號(hào):垂直同步信號(hào)V-Sync / 水平同步信號(hào)H-Sync
    ? iOS設(shè)備雙緩沖機(jī)制:顯示系統(tǒng)通常會(huì)引入兩個(gè)幀緩沖區(qū)，雙緩沖機(jī)制
  • 圖片顯示到屏幕上是CPU與GPU的協(xié)作完成

圖?片濾鏡實(shí)現(xiàn)思路路

  • 前提條件: 能夠用GLSL顯示普通圖片

  • 簡(jiǎn)單思路:

  • 初始化(上下文,頂點(diǎn)數(shù)組,頂點(diǎn)數(shù)據(jù),頂點(diǎn)緩存區(qū), CAEAGLayer, 綁定渲染緩存區(qū)/幀緩存區(qū), 獲取圖 片路徑并將圖片->紋理理, 設(shè)置視口,link默認(rèn)著?器)
  • 創(chuàng)建CADisplayLink刷新圖?

灰色濾鏡實(shí)現(xiàn)原理

灰色濾鏡模式在蘋(píng)果的coreimage和三方GPUimage中都包含的有,我們也可以不通過(guò)自定義著色器實(shí)現(xiàn).

現(xiàn)有下面5中計(jì)算方式實(shí)現(xiàn)灰色濾鏡.
第5中,僅僅取綠色的值,可以決定整個(gè)灰色值.


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;

接下來(lái)編寫(xiě)著色器代碼,
.vsh


attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

void main(){
    
    gl_Position = Position;
    TextureCoordsVarying = TextureCoords;
}

.fsh

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
const highp vec3 W = vec3(0.2125, 0.7154, 0.0721);
void main(){
    vec4 mask = texture2D(Texture,TextureCoordsVarying);
    float luminance = dot(mask.rgb,W);
    gl_FragColor = vec4(vec3(luminance),1.0);
}

const highp vec3 W = vec3(0.2125, 0.7154, 0.0721);是借鑒GPUImage中的顏色值權(quán)重.

  • mask為紋理色值,與權(quán)值點(diǎn)乘(dot).
    vec3將點(diǎn)乘結(jié)果轉(zhuǎn)換成vec3向量
    vec4將計(jì)算后的色值加上alpha,返回給gl_FragColor

對(duì)于一些濾鏡我們可以去GPUImage中查找著色器代碼,復(fù)制過(guò)來(lái)可以使用.

效果圖

4110996709f35b59955eea4be7712c59

顛倒濾鏡原理

  • 翻轉(zhuǎn)紋理坐標(biāo)
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main(){
    vec4 mask = texture2D(Texture,vec2(TextureCoordsVarying.x,1.0-TextureCoordsVarying.y));
    gl_FragColor = mask;
}

效果圖

079890a1f2d7fcf411cbf3f64a76d7d7

馬賽克

c2742e46ac75424a8259f44eccb2d0cc

圖片也有顏色組成,每一個(gè)片元的顏色都不是不同的,而馬賽克則是去中心點(diǎn)附近顏色混合

正方形馬賽克步驟:

  1. 計(jì)算每一個(gè)點(diǎn)對(duì)應(yīng)的實(shí)際坐標(biāo).
  2. 計(jì)算每一個(gè)馬賽克小正方形的實(shí)際坐標(biāo),這里采用floor向下取整,例如,10-20取樣的顏色點(diǎn)就是同一個(gè).
  3. 將馬賽克實(shí)際坐標(biāo)換成紋理對(duì)應(yīng)坐標(biāo).

precision highp float;
//紋理坐標(biāo)
uniform sampler2D Texture;
//紋理采樣器
varying vec2 TextureCoordsVarying;
//紋理圖片size
const vec2 TexSize = vec2(500.0, 500.0);
//馬賽克size
const vec2 MosaicSize = vec2(16.0, 16.0);

void main(){
    //計(jì)算實(shí)際坐標(biāo)
    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),采用向下取整,例如10-20取值一樣
    vec2 XYMosaic = vec2(floor(intXY.x/MosaicSize.x)*MosaicSize.x, floor(intXY.y/MosaicSize.y)*MosaicSize.y);

    //換算回紋理坐標(biāo)，此時(shí)的紋理坐標(biāo)是小馬賽克的部分的紋理坐標(biāo)，即某一個(gè)色塊,0-1區(qū)間.
    vec2 UVMosaic = vec2(XYMosaic.x/TexSize.x, XYMosaic.y/TexSize.y);
    //獲取到馬賽克后的紋理坐標(biāo)的顏色值
    vec4 color = texture2D(Texture, UVMosaic);
    //將馬賽克顏色值賦值給gl_FragColor
    gl_FragColor = color;
}

效果圖

50decf2c7d7cf2ae89627da98efd3a0e

六邊形馬賽克

六邊形馬賽克將一張紋理用六邊形平鋪,六邊形的顏色都是取六邊形中心的顏色值.

0c502458667682b2ed959ae1bedcbf39

如下如,可以算出一個(gè)矩形的寬高比為3:√3,


3c6fa6f3eedc5b8153f48a4ca77ff4f6

TR = cos60°+1/2+1/2 = 1.5
TB = sin60°+1/2+1/2 = √3/2
TR:TB = 3: √3

  • 對(duì)應(yīng)的紋理坐標(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))).

  • 根據(jù)行列的奇偶情況，求對(duì)應(yīng)的中心點(diǎn)紋理坐標(biāo)v1、v2

偶行偶列：（0，0）（1，1）/，即左上、右下
偶行奇列：（0，1）（1，0）\，即左下、右上
奇行偶列：（0，1）（1，0）\，即左下、右上
奇行奇列：（0，0）（1，1）/，即左上、右下
最終匯總起來(lái)也只有2種情況，（0，0）（1，1） 和 （0，1）（1，0）,圖中黑色部分


ff49e14ce7202187d99b838e79c6662e
  • 坐標(biāo)計(jì)算
6ab6631b199e374e65b151511726bb6f

對(duì)于計(jì)算中的wx+1，拿（1，0）點(diǎn)來(lái)說(shuō)，wx+1等同于（1，0）與（0，0）之間相差一個(gè)矩形的長(zhǎng)，這個(gè)長(zhǎng)度為1，為了得到（1，0）點(diǎn)的坐標(biāo)，要在（0，0）點(diǎn)坐標(biāo)的基礎(chǔ)上，將wx增加一個(gè)長(zhǎng)

  • 對(duì)于計(jì)算中的wy+1，拿（0，1）點(diǎn)來(lái)說(shuō)，wy+1等同于（0，0）與（0，1）之間相差一個(gè)矩形的高，這個(gè)長(zhǎng)度為1，為了得到（0，1）點(diǎn)的坐標(biāo)，要在（0，0）點(diǎn)坐標(biāo)的基礎(chǔ)上，將wy增加一個(gè)高.
  • 兩點(diǎn)之間的距離計(jì)算
bf3f68e7f5307d568de91fa83c0bf14a
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));

通過(guò)判斷距離那個(gè)中心點(diǎn)更近,來(lái)取紋理坐標(biāo)

184315b1386af8f744458f8b03abedcf
  • 判斷著色器代碼
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//六邊形的邊長(zhǎng)
const float mosaicSize = 0.03;

void main(){
    
    float length = mosaicSize;
    //矩形的高的比例為√3，取值 √3/2 ，也可以直接取√3
    float TR = 0.866025;
    //矩形的長(zhǎng)的比例為3，取值 3/2 = 1.5，也可以直接取3
    float TB = 1.5;
    
    //取出紋理坐標(biāo)
    float x = TextureCoordsVarying.x;
    float y = TextureCoordsVarying.y;
    
    //根據(jù)紋理坐標(biāo)計(jì)算出對(duì)應(yīng)的矩陣坐標(biāo) 
    //即 矩陣坐標(biāo)wx = int（紋理坐標(biāo)x/ 矩陣長(zhǎng)），矩陣長(zhǎng) = TB*len
    //即 矩陣坐標(biāo)wy = int（紋理坐標(biāo)y/ 矩陣寬），矩陣寬 = TR*len
    int wx = int(x / TB / length);
    int wy = int(y / TR / length);
    vec2 v1, v2, vn;
    
    //判斷wx是否為偶數(shù)，等價(jià)于 wx % 2 == 0
    if (wx/2 * 2 == wx) {
        if (wy/2 * 2 == wy) {//偶行偶列
            //(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));
        }else{//偶行奇列
            //(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{
        if (wy/2 * 2 == wy) {//奇行偶列
            //(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{//奇行奇列
            //(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));
        }
    }
    //利用距離公式，計(jì)算中心點(diǎn)與當(dāng)前像素點(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));
    
    //選擇距離小的則為六邊形的中心點(diǎn)，且獲取它的顏色
    vn = (s1 < s2) ? v1 : v2;
    //獲取六邊形中心點(diǎn)的顏色值
    vec4 color = texture2D(Texture, vn);
    gl_FragColor = color;
}

效果圖

9b0428749183ddb5a990cfd8c25a0409

三角形馬賽克

三角形馬賽克,先有6邊形,在拆解成6分,取每個(gè)三角形的中心顏色值.

  1. 先算出矩形,根據(jù)點(diǎn)的位置計(jì)算取那個(gè)六邊形的中心點(diǎn).
  2. 計(jì)算出傳進(jìn)來(lái)的坐標(biāo)和中心點(diǎn)的夾角
  3. 根據(jù)夾角計(jì)算中心點(diǎn)在六邊形那個(gè)區(qū)域
  4. 將顏色值設(shè)置對(duì)應(yīng)區(qū)域三角形的中心點(diǎn)顏色值.
  • 計(jì)算六邊形

計(jì)算方式和上面六邊形馬賽克一樣

  • 計(jì)算夾角大小

tanα = x/y , α = atan(x/y)
假設(shè)中心點(diǎn)是vn,那么當(dāng)傳進(jìn)來(lái)紋理坐標(biāo)x1,y1,
那么x = x1-vn.x,y = y1-vn.y

  • 計(jì)算區(qū)域范圍
    π=180°,那么第一個(gè)區(qū)域的范圍就是π/6~π/6*2的范圍,剩下的以此類推.
b05bf5f027698dd3df90f8d67e6065a6
  • 片元著色器代碼
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 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) {
            //(0,0),(1,1)
            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 {
            //(0,1),(1,0)
            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) {
            //(0,1),(1,0)
            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 {
            //(0,0),(1,1)
            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;
    }
     //獲取像素點(diǎn)與中心點(diǎn)的角度
    float a = atan((x-vn.x)/(y-vn.y));
     
     //判斷夾角，屬于哪個(gè)三角形，則獲取哪個(gè)三角形的中心點(diǎn)坐標(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);
     
     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;
     }
      //獲取對(duì)應(yīng)三角形重心的顏色值
     vec4 color = texture2D(Texture, vn);
      // 將顏色值填充到片元著色器內(nèi)置變量gl_FragColor
     gl_FragColor = color;
    
}

效果圖

41c42af0936191351889354e44445067

總結(jié)

圖片來(lái)源:Style_月月

c611bff73691cc6f74964da6aed4b8c8
?著作權(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)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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