OpenGL 12.1 - 案例:灰度马赛克滤镜

图片显示到屏幕上由CPU/GPU 协作完成：

CPU：计算视图 frame 、图片解码，需要绘制的图片通过数据总线交给 GPU。

GPU：纹理混合、顶点变换与计算、像素点的填充计算、渲染到帧缓冲区。

iOS双缓冲机制：2个帧缓冲区

纹理图片滤镜处理，通过修改片元着色器实现滤镜效果。

效果：

一、灰度

原理：对纹理RGB值权重修改并保持平衡，或只取绿色G值 --> 人眼对绿色是最敏感的，绿色值越大，眼睛看到图片越暗。

1. 浮点算法: Gray = R*0.3+G*0.59+B*0.11
2. 整数方法: 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;
const highp vec3 W = vec3(0.2125, 0.7154, 0.0721);// 权重值取自GPUImage，RGB三值相加=1

void main (void) {
    // 获取纹理图片当前纹理坐标下的 颜色值
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    float luminance = dot(mask.rgb, W);// 点乘 颜色 点乘 变换因子
    gl_FragColor = vec4(vec3(luminance), 1.0);// 将灰度值转化并填充到像素中(luminance，luminance，luminance，mask.a) 
　　 // gl_FragColor = vec4(vec3(mask.g), 1.0);// 只取绿色
12 }

翻转：

OpenGL 十 - 002、GLSL案例-纹理图片绘制与翻转 中 第三节 图片倒立翻转问题。

二、方形马赛克

马赛克原理：⻢赛克效果就是把图片中的⼀个相对⼤小的区域(设置每个马赛克的大小范围)取⽤同⼀个点的颜⾊来表示。可以认为是⼤规模的降低图像的分辨率，⽽让图像的⼀些细节隐藏起来。

每个小方块范围内取同一个色值，计算每个马赛克块的所在位置对应所取的色值 —>

1.对纹理图片进行放大(400,400)，纹理坐标(400*x,400*y)

2.求出放大后纹理坐标下 对应的马赛克块(size:16,16)位置，向下取整 —> 400*x / 16 * 16 // 即：400*x  % 16

3.对放大坐标进行复原，相应缩小，取出位置对应颜色

—> 可理解为：纹理图片被分割成了N个小方块，每个小方块范围内取同一个色值填充，我们计算出方块应取得色值是什么即可。纹理大小除以方块大小得到个数，第n个方块取得色值都是(n,n)位置的色值。

片元着色器代码：

precision mediump float;

varying vec2 TextureCoordsVarying;
uniform sampler2D Texture;
const vec2 TexSize = vec2(400.0, 400.0);
const vec2 mosaicSize = vec2(16.0, 16.0);

void main() {
    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;
}

三、正六边形马赛克

1、目标：将 纹理图片 处理成 由 N 个六边形的图形马赛克 绘制而成。

2、方式：纹理像素取值：每个六边形范围内，取六边形的中心位置的纹理坐标值。

3、算法逻辑：每个六边形周边会有4个中心位置组成一个矩形。

当纹理坐标传入时，根据纹理坐标计算出六边形中心点位置 --> 矩形顶点位置 --> 上图中黄绿原点。

算法：

 

1）给定六边形边长 length，矩形的长宽比 = 3*length : √3*length 

2）上图 紫色位置处纹理坐标w(x,y)，它所对应的矩形的位置 --> ( int(x / (3*length)),  int (y / (√3*length))

3）计算中心点坐标

3.1、六边形所在矩形分割成4个小矩形。

a、当 w 位置是 偶行偶列 时，如下图 --> 计算 1、5 两个中心点：

1：(3/2 * length * wx, √3/2 * length * wy)

5：(3/2 * length * (wx + 1), √3/2 * length * (wy + 1)) 

为何中心点5的 x、y 坐标值 +1 --> w 的位置对应计算出的值恰好是 1 的值，而 5 与 1 的跨度是一个小矩形的大小，所以坐标值需加 相应的宽高(矩形长宽)值。

 b、当 w 位置是 偶行奇列 时，如下图 --> 计算 2、5 两个中心点 -->

5：(3/2 * length * wx, √3/2 * length * (wy + 1))

2：(3/2 * length * (wx + 1), √3/2 * length * wy)

--> w 计算出的值是左上角 --> 中心点 2 的 x 位置多了一个宽度，中心点 5 的 y 多了一个高度。

 

c、当中心点位置是 奇行偶列 时，如下图 --> 4、5 两个中心点 -->

4：(3/2 * length * wx, √3/2 * length * (wy + 1))

5：(3/2 * length * (wx + 1), √3/2 * length * wy)

 

d、当 w 位置是 奇行奇列 时，如下图 --> 计算 3、5 两个中心点：

5：(3/2 * length * wx, √3/2 * length * wy)

3：(3/2 * length * (wx + 1), √3/2 * length * (wy + 1)) 

 4）计算出当前纹理坐标 w(x, y) 位置距两个中心点 v1、v2 位置的远近

s1 = √(v1.x-x)² + (v1.y-y)²)　　s12 = √(v2.x-x)² + (v2.y-y)²)

比较大小，取距离近的，即取小值。

4、片元着色器代码

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

const float mosaicSize = 0.03;

void main (void) {
    
    float length = mosaicSize;
    
    float TR = 0.866025;// √3/2
    float TB = 1.5;// 3/2
    
    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) {// wx % 2 == 0
        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));
        }
    }
    
    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;
    
}

四、三角形马赛克

 三角形马赛克算法原理：

1、在正六边形算法的基础上，切割成三角形，计算每个三角形的弧度 --当前纹理坐标与正六边形中心点的夹角

2、对比夹角所在位置处在1~6哪个三角形中，取对应三角形的中心位置点的颜色

3、计算每个三角形的中心位置(此中心位置并非为准确的中心点，而是三角形中线的1/2，图中绿色线的1/2位置)

片元着色器代码

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

float mosaicSize = 0.03;

void main (void) {
    
    const float TR = 0.866025;
    const float PI6 = 0.523599;// π/6  30度
    
    float x = TextureCoordsVarying.x;
    float y = TextureCoordsVarying.y;
    
 
    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));
        }
    }

    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;
    }
    
    // 三角形处理
    // 计算纹理坐标与六边形中心点夹角 - 
    // atan 计算出的范围(-180~180),对应的值 -PI~PI
    float a = atan((x - vn.x)/(y - vn.y));

    // 计算6个中心点位置
    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) {// 30~90
        vn = area1;
    } else if (a >= PI6 * 3.0 && a < PI6 * 5.0) {// 90~150
        vn = area2;
    } else if ((a >= PI6 * 5.0 && a <= PI6 * 6.0)|| (a<-PI6 * 5.0 && a>-PI6*6.0)) {// 150~180 -180~-150
        vn = area3;
    } else if (a < -PI6 * 3.0 && a >= -PI6 * 5.0) {// -150~-90
        vn = area4;
    } else if (a <= -PI6 && a> -PI6 * 3.0) {// -90~-30
        vn = area5;
    } else if (a > -PI6 && a < PI6) {// -30~30
        vn = area6;
    }
    
    vec4 color = texture2D(Texture, vn);
    gl_FragColor = color;
}