實現效果

馬賽克灰度.gif

灰度濾鏡

• 實現灰度濾鏡的方式有很多，但原理都大同小異，提高綠色的權重，或者只保留綠色值。
  大致分為以下五種：
  1 浮點算法：Gray = R * 0.3 + G * 0.59 + B * 0.11 (RGB的權重總和為1)
  2 整數方法：Gray = （R * 30 + G * 59 + B * 11）/ 100（RGB的權重總和為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;

const highp vec3 W = vec3(0.19757, 0.73846, 0.06397);

void main (void){
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    float luminance = dot(mask.rgb, W);
    gl_FragColor = vec4(vec3(luminance), 1.0);
}

dot(mask.rgb, W)，點乘函數，參數為兩個向量。得到常量，我們使用得到的常量構建一個三維向量，加上透明度，就構成的RGBA

顛倒濾鏡

• 實現思路
  對紋理坐標的t值，用極值1減去對應的t值，就可以達到顛倒的目的。
• 核心代碼

    vec4 color = texture2D(Texture, vec2(TextureCoordsVarying.x, 1.0 - TextureCoordsVarying.y));
    
    gl_FragColor = color;

矩形馬賽克

• 實現思路
  矩形馬賽克，其實是將周圍的像素點，統一成一個像素點。但我們都知道紋理坐標是[0, 1]之間的值，我們操作起來就沒有那么便捷。這里我們定義一個二維向量const vec2 TexSize = vec2(600.0, 600.0)，用來將我們的紋理坐標做放大處理。再定義一個二維向量const vec2 mosaicSize = vec2(5.0, 5.0)，用來處理放大后的坐標每5個單位做一個單位，換算到紋理坐標[0,1]中，就相當于我們每5/600個單位取同一個紋理坐標。floor()向下取整函數。這里我們利用先放大，再轉換映射關系，再還原到標準的紋理范圍區間。得到馬賽克紋理，然后渲染。

• 圖解

  
  
  矩形馬賽克原理圖解.png

• 核心代碼

    vec2 intXY = vec2(TextureCoordsVarying.x*TexSize.x, TextureCoordsVarying.y*TexSize.y);
    vec2 XYMosaic = vec2(floor(intXY.x/mosaicSize.x)*mosaicSize.x, floor(intXY.y/mosaicSize.y)*mosaicSize.y);
    vec2 UVMosaic = vec2(XYMosaic.x/TexSize.x, XYMosaic.y/TexSize.y);
    vec4 color = texture2D(Texture, UVMosaic);
    gl_FragColor = color;