本案例的目的是理解如何用GLSL實(shí)現(xiàn)灰度+顛倒+馬賽克（共5種）濾鏡
整體的效果圖如下：
- 準(zhǔn)備工作的代碼與分頻demo中一致，只需要修改相應(yīng)的底部item數(shù)組及對(duì)應(yīng)的著色器名稱等熙涤，這里不再說(shuō)明這部分內(nèi)容
- 頂點(diǎn)著色器也沒(méi)有任何變化，主要是片元著色器中的實(shí)現(xiàn)濾鏡算法
下面只針對(duì)濾鏡的自定義片元著色器中的GLSL代碼進(jìn)行解釋說(shuō)明
灰度濾鏡
灰度濾鏡的實(shí)現(xiàn)原理是讓RGB值保持一個(gè)平衡并填充汗洒，或者只保留一個(gè)亮度值减牺，即綠色是嗜，在人眼中，綠色的亮度是最顯眼的齿梁，綠色值越深催植，在肉眼觀察中圖片越暗淡，這是眼睛的一種生理現(xiàn)象勺择。
灰度濾鏡的算法一共有5種创南，大致分為3類
- 權(quán)值法：處理后的圖片比較逼真
- 浮點(diǎn)算法：
Gray = R*0.3 + G*0.59 + B*0.11(RGB的權(quán)重總和為1) - 整數(shù)方法：
Gray = （R*30 + G*59 + B*11）/100（RGB的權(quán)重總和為100) - 移位方法：
Gray = （R*76 + G*151 + B*28）>>8
- 浮點(diǎn)算法：
- 平均值法：
Gray = （R+G+B）/3，處理后的圖片比較柔和 - 僅取綠色：
Gray = G省核，這種方式方便簡(jiǎn)單稿辙，且易用
在片元著色器中分別使用 浮點(diǎn)算法 和 僅取綠色實(shí)現(xiàn)灰度濾鏡算法。
- 浮點(diǎn)算法：這里的RGB權(quán)重取自GPUImage框架
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//RGB的變換因子气忠，即權(quán)重值
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);
}
- 僅取綠色
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main(){
//獲取對(duì)應(yīng)紋理坐標(biāo)系下色顏色值
vec4 mask = texture2D(Texture, TextureCoordsVarying);
//將RGB全部設(shè)置為G邻储，即GRB全部取綠色值
gl_FragColor = vec4(mask.g, mask.g, mask.g, 1.0);
}
效果圖如下所示
除了自定義著色器外，還可以通過(guò)GPUImage旧噪、iOS原生的CoreImage實(shí)現(xiàn)灰度濾鏡吨娜。選擇哪種方式，需要根據(jù)需求而定淘钟。
顛倒濾鏡
說(shuō)到顛倒圖片宦赠，之前在翻轉(zhuǎn)解決方案博文中講了幾種顛倒圖片翻轉(zhuǎn)的方式，圖片一開始是倒置的米母，為什么還要翻轉(zhuǎn)在顛倒呢勾扭？原因是一開始顛倒的圖片如果不翻轉(zhuǎn)，會(huì)影響其他濾鏡效果的顯示铁瞒，顛倒濾鏡只是一個(gè)濾鏡效果妙色，不會(huì)影響其他濾鏡效果。
在片元著色器中慧耍，翻轉(zhuǎn)紋理坐標(biāo)y值身辨，實(shí)現(xiàn)顛倒濾鏡
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main(){
vec4 mask = texture2D(Texture, vec2(TextureCoordsVarying.x, 1.0-TextureCoordsVarying.y));
gl_FragColor = vec4(mask.rgb, 1.0);
}
馬賽克濾鏡
主要是實(shí)現(xiàn)不同馬賽克樣式的濾鏡丐谋，主要有以下三種樣式
- 正方形
- 六邊形
- 三角形
不同馬賽克樣式，對(duì)應(yīng)不同的濾鏡算法栅表，如圖所示
正方形馬賽克
正方形馬賽克原理：把圖片的一個(gè)相當(dāng)大小的區(qū)域用同一個(gè)顏色值來(lái)表示笋鄙，可以認(rèn)為是大規(guī)模的降低圖像的分辨率，從而讓圖像的一些細(xì)節(jié)隱藏起來(lái)
濾鏡算法主要有以下幾步：
根據(jù)紋理坐標(biāo)計(jì)算實(shí)際圖像中的位置怪瓶，相當(dāng)于將紋理顏色區(qū)放大
計(jì)算出一個(gè)小馬賽克的坐標(biāo)，即找到馬賽克提取顏色值的像素點(diǎn)
-
將馬賽克坐標(biāo)換算回紋理坐標(biāo)践美，即將紋理顏色區(qū)縮小
如圖所示image
片元著色中的濾鏡算法實(shí)現(xiàn)如下
precision highp float;
//紋理坐標(biāo)
uniform sampler2D Texture;
//紋理采樣器
varying vec2 TextureCoordsVarying;
//紋理圖片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)陨倡，此時(shí)的紋理坐標(biāo)是小馬賽克的部分的紋理坐標(biāo)敛滋，即某一個(gè)色塊
vec2 UVMosaic = vec2(XYMosaic.x/TexSize.x, XYMosaic.y/TexSize.y);
//獲取到馬賽克后的紋理坐標(biāo)的顏色值
vec4 color = texture2D(Texture, UVMosaic);
//將馬賽克顏色值賦值給gl_FragColor
gl_FragColor = color;
}
六邊形馬賽克
六邊形馬賽克原理：將一張圖片，分割成由六邊形組成兴革，再取每個(gè)六邊形的中心點(diǎn)畫出一個(gè)個(gè)的矩形绎晃，根據(jù)矩形的奇偶排列情況求出對(duì)應(yīng)的2個(gè)中心點(diǎn)，并計(jì)算紋理坐標(biāo)與兩個(gè)中心點(diǎn)的距離杂曲，根據(jù)距離判斷庶艾，采取就近原則，當(dāng)前的六邊形就采用近的中心點(diǎn)的顏色值擎勘。
將圖片分割成六邊形咱揍，六邊形中心點(diǎn)畫出矩形后的呈現(xiàn)如下所示
濾鏡算法主要實(shí)現(xiàn)步驟有：
-
設(shè)置矩形的長(zhǎng)寬比例值TR、TB（TB：TR 符合比例 3：√3）
其中長(zhǎng)寬比為3：√3棚饵，計(jì)算過(guò)程如下：image 獲取紋理坐標(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)為image -
根據(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）咆疗，如下圖所示image
其中單個(gè)矩陣中漓帚，4個(gè)點(diǎn)的坐標(biāo)計(jì)算公式如下：
- 對(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è)高
-
根據(jù)距離公式求像素點(diǎn)距離兩個(gè)中心點(diǎn)的距離s1俗壹、s2
s1 = √（（v1.x-x）2 + （v1.y-y）2）
-
s2 = √（（v2.x-x）2 + （v2.y-y）2）
如圖所示科汗，image
根據(jù)求出的距離，判斷離哪個(gè)中心點(diǎn)近绷雏，就取哪個(gè)六邊形的中心點(diǎn)顏色值為六邊形的顏色值
片元著色器代碼
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;
}
三角形馬賽克
原理：三角形馬賽克是由六邊形馬賽克演變而來(lái)缺前，得到三角形的前提蛀醉，就是的先有六邊形，然后將正六邊形6等分衅码，每個(gè)三角形都是正三角形，然后求出紋理坐標(biāo)與中心點(diǎn)的夾角脊岳，同時(shí)求出三角形的中心點(diǎn)逝段，根據(jù)夾角判斷，夾角屬于哪個(gè)三角形割捅，就將該三角形的中心點(diǎn)顏色作為整個(gè)三角形的紋素
三角形濾鏡算法步驟是在六邊形濾鏡算法的步驟上增加以下步驟：
-
求出當(dāng)前像素點(diǎn)與紋理中心點(diǎn)的夾角
如下圖所示奶躯，紋理坐標(biāo)為（x，y）亿驾，中心點(diǎn)為vn嘹黔，求夾角image -
計(jì)算6個(gè)三角形的中心點(diǎn)
image -
判斷夾角屬于哪個(gè)三角形，則獲取哪個(gè)三角形的中心點(diǎn)坐標(biāo)
其中莫瞬，不同三角形的夾角范圍如圖所示image
片元著色器代碼：在六邊形濾鏡算法（即 vn = (s1 < s2) ? v1 : 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;
atan是GLSL中的內(nèi)建函數(shù)疼邀，有兩種計(jì)算方式
1喂江、atan(y,x) 值域是[0，π],
2旁振、atan(y/x),值域是[-π/2, π/2]
