OpenGL 滤镜原理(灰度+颠倒+马赛克滤镜)

715 阅读6分钟

效果

流程

着色器滤镜原理

灰度滤镜

一张图片的显示是由三个颜色通道(RGB)来决定的,所以图片也称为三通道图。

三通道图:图片每个像素点都有三个值表示 ,所以就是三通道,例如RGB图片即为三通道图片,RGB色彩模式是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。总之,每一个点由三个值表示。。也有四通道的图。

灰度滤镜其实就是只有一个通道有值,也就是只要得到图片的亮度即可,其实这也就是单通道图。

单通道图:俗称灰度图,每个像素点只能有有一个值表示颜色,它的像素值在0到255之间,0是黑色,255是白色,中间值是一些不同等级的灰色。(也有3通道的灰度图,3通道灰度图只有一个通道有值,其他两个通道的值都是零)。

  • 有5中方法来实现灰度滤镜的算法(前三种方法是利用权重来实现的):
  1. 浮点算法: Gray = R * 0.3 + G * 0.59 + B * 0.11 (根据对应纹素的颜色值调整RGB的比例)

  2. 整数算法: Gray = (R * 30 + G * 59 + B * 11) / 100 (同浮点算法)

  3. 移位算法: Gray = (R * 76 + G * 151 + B * 28) >> 8

  4. 平均值法: Gray = (R + G + B) / 3; (获取到对应纹素的RGB平均值,填充到三个通道上面)

  5. 仅取绿色: Gray = G (一个颜色填充三个通道)

  • 片元着色器代码

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
const highp vec3 W = vec3(0.2125, 0.7154, 0.0721);

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

颠倒滤镜

颠倒滤镜,既可以在顶点着色器中修改,也可以在片元着色器中修改,但是在顶点着色器修改的好处是只需要颠倒顶点,计算量相比较少。

  • 在顶点着色器中修改
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

void main (void) {
    gl_Position = vec4(Position.x,  - Position.y, 0.0, 1.0);
    TextureCoordsVarying = TextureCoords;
}
  • 修改片元着色器
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

void main (void) {
    vec4 mask = texture2D(Texture, vec2(TextureCoordsVarying.x, 1.0 - TextureCoordsVarying.y));
    gl_FragColor = vec4(mask.rgb, 1.0);
}

GLSL渲染图片时,原本图片就是倒置的,只不过在获取纹理的代码中,将图片进行了翻转

//将图片翻转过来(图片默认是倒置的)
CGContextTranslateCTM(context, 0, height);
CGContextScaleCTM(context, 1.0f, -1.0f);
CGColorSpaceRelease(colorSpace);
CGContextClearRect(context, rect)

正方形马赛克滤镜

把图片的⼀个相当⼤小的区域⽤同一个点的颜色来表示,让图像的一些细节隐藏起来。根据马赛克单元格的宽高计算出图像总的马赛克行数和列数,每个马赛克单元计算该单元格RGB的平均值,然后进行颜色/纹理采样赋颜色值。

  • 片元着色器代码
precision mediump float;
//纹理坐标
varying vec2 TextureCoordsVarying;
//纹理采样器
uniform sampler2D Texture;
//纹理图片size
const vec2 TexSize = vec2(600.0, 600.0);
//马赛克size
const vec2 mosaicSize = vec2(16.0, 16.0);

void main()
{
    //计算图像的实际位置
    vec2 intXY = vec2(TextureCoordsVarying.x*TexSize.x, TextureCoordsVarying.y*TexSize.y);
    // floor (x) 内建函数,返回小于/等于X的最大整数值.
    // floor (intXY.x / mosaicSize.x) * mosaicSize.x 计算出一个⼩小⻢赛克的坐标.
    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. 
    gl_FragColor = color;
}

六边形马赛克

让⼀张图片,分割成由多个六边形组成,让每 个六边形中的颜色相同(直接取六边形中心点纹素RGB)

如上图,矩形的长和宽比例为 3:√3 的。然后可以对每个点采⽤坐标系标记. 假如屏幕的左上点为上图的(0,0)点,设定的矩阵比例为 3LEN : √3LEN ,那么屏幕上的任意 点(x, y)所对应的矩阵坐标为(int(x/(3LEN)), int(y/ (√3LEN)))。那么(wx, wy) 表示纹理坐标在所对应的矩阵坐标为:wx = int(x/(1.5 * length)); wy = int(y/(TR * length))

可以把一个六边形分割成四块区域,任一块区域四个点的计算公式如下 : 四个矩形区域的颜色取值

  • 偶数行偶数列计算左上中心点和右下中心点
 //(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));
  • 偶数行奇数列计算左下中心点和右上中心点
//(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));
  • 奇数行偶数列计算左下中心点和右上中心点
//(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));
  • 奇数行奇数列计算左上中心点和右下中心点
//(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;
}

最后得到颜色值

vec4 color = texture2D(Texture, vn);
    
gl_FragColor = color;
  • 片元着色器程序代码
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 x = TextureCoordsVarying.x;
    float y = TextureCoordsVarying.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) {
            //(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;
    }
    vec4 color = texture2D(Texture, vn);
    
    gl_FragColor = color;
    
}

三角形马赛克

三角形马赛克等边三角形,这样才能真正的无缝拼接。

一个六边形正好可以用六个三角形拼凑而成。 思路: 先确定六边形-->然后通过点与六边形的的夹角确定位于哪个三角形

  • [-30°,30°] 位于1三角形 取1三角形中心点的颜色值填充

    vec2 area6 = vec2(vn.x - mosaicSize / 2.0, vn.y - mosaicSize * TR / 2.0);

  • [30°,90°] 位于2三角形 取2三角形中心点的颜色值填充

    vec2 area1 = vec2(vn.x, vn.y - mosaicSize * TR / 2.0);

  • [90°,150°] 位于3三角形 取3三角形中心点的颜色值填充

    vec2 area2 = vec2(vn.x + mosaicSize / 2.0, vn.y - mosaicSize * TR / 2.0);

  • [150°,180°],[-150°,-180°] 位于4三角形 取4三角形中心点的颜色值填充

    vec2 area3 = vec2(vn.x + mosaicSize / 2.0, vn.y + mosaicSize * TR / 2.0);

  • [-90°,-150°] 位于5三角形 取5三角形中心点的颜色值填充

    vec2 area4 = vec2(vn.x, vn.y + mosaicSize * TR / 2.0);

  • [-30°,-90°] 位于6三角形 取6三角形中心点的颜色值填充

    vec2 area4 = vec2(vn.x, vn.y + mosaicSize * TR / 2.0);

片元着色器代码

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;
    
    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;
    }
    
    vec4 mid = texture2D(Texture, vn);
    float a = atan((x - vn.x)/(y - vn.y));
    
    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;
    }
    
    vec4 color = texture2D(Texture, vn);
    gl_FragColor = color;
}

完整程序代码参考: github