0017--OpenGL ES 滤镜进阶篇之黑白、倒置、马赛克滤镜

[toc]

前言

本篇主要是探讨滤镜处理中灰度、颠倒滤镜、旋涡滤镜、六边形马赛克滤镜、三角形马赛克滤镜处理.

iOS与图形图像处理框架

5be6abcb9a92ff0bcaf7b37a388389c1

图⽚片显示原理理

f3093715ff131e19a176615041d35e5a

CPU: 计算视图frame，图片解码，需要绘制纹理图片通过数据总线交给GPU
GPU: 纹理理混合，顶点变换与计算,像素点的填充计算，渲染到帧缓冲区
• 时钟信号:垂直同步信号V-Sync / 水平同步信号H-Sync
• iOS设备双缓冲机制:显示系统通常会引入两个帧缓冲区，双缓冲机制
图片显示到屏幕上是CPU与GPU的协作完成

图⽚片滤镜实现思路路

前提条件: 能够用GLSL显示普通图片
简单思路:

初始化(上下文,顶点数组,顶点数据,顶点缓存区, CAEAGLayer, 绑定渲染缓存区/帧缓存区, 获取图片路径并将图片->纹理理, 设置视口,link默认着⾊器)

创建CADisplayLink刷新图⽚

灰色滤镜实现原理

灰色滤镜模式在苹果的coreimage和三方GPUimage中都包含的有,我们也可以不通过自定义着色器实现.

现有下面5中计算方式实现灰色滤镜.
第5中,仅仅取绿色的值,可以决定整个灰色值.


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;

接下来编写着色器代码,
.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中的颜色值权重.

mask为纹理色值,与权值点乘(dot).
vec3将点乘结果转换成vec3向量
vec4将计算后的色值加上alpha,返回给gl_FragColor

对于一些滤镜我们可以去GPUImage中查找着色器代码,复制过来可以使用.

效果图

4110996709f35b59955eea4be7712c59

颠倒滤镜原理

翻转纹理坐标

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

图片也有颜色组成,每一个片元的颜色都不是不同的,而马赛克则是去中心点附近颜色混合

正方形马赛克步骤:

计算每一个点对应的实际坐标.
计算每一个马赛克小正方形的实际坐标,这里采用floor向下取整,例如,10-20取样的颜色点就是同一个.
将马赛克实际坐标换成纹理对应坐标.


precision highp float;
//纹理坐标
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(){
    //计算实际坐标
    vec2 intXY = vec2(TextureCoordsVarying.x * TexSize.x, TextureCoordsVarying.y * TexSize.y);
    
    //floor(x) 内建函数，返回小于/等于x最大的整数，即向下取整
    //floor(intXY.x/mosaicSize.x)*mosaicSize.x 计算出一个小马赛克的坐标,采用向下取整,例如10-20取值一样
    vec2 XYMosaic = vec2(floor(intXY.x/MosaicSize.x)*MosaicSize.x, floor(intXY.y/MosaicSize.y)*MosaicSize.y);

    //换算回纹理坐标，此时的纹理坐标是小马赛克的部分的纹理坐标，即某一个色块,0-1区间.
    vec2 UVMosaic = vec2(XYMosaic.x/TexSize.x, XYMosaic.y/TexSize.y);
    //获取到马赛克后的纹理坐标的颜色值
    vec4 color = texture2D(Texture, UVMosaic);
    //将马赛克颜色值赋值给gl_FragColor
    gl_FragColor = color;
}

效果图

50decf2c7d7cf2ae89627da98efd3a0e

六边形马赛克

六边形马赛克将一张纹理用六边形平铺,六边形的颜色都是取六边形中心的颜色值.

0c502458667682b2ed959ae1bedcbf39

如下如,可以算出一个矩形的宽高比为3:√3,

3c6fa6f3eedc5b8153f48a4ca77ff4f6

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

对应的纹理坐标为:

假如我们的屏幕的左上点为上图的(0,0)点，则屏幕上的任⼀一点我们找到它所对应的那个矩形了了。
假定我们设定的矩阵⽐例为 3*LEN : √3*LEN ，那么屏幕上的任意点(x, y)所对应的矩阵坐标为(int(x/(3*LEN)), int(y/ (√3*LEN))).

根据行列的奇偶情况，求对应的中心点纹理坐标v1、v2

偶行偶列：（0，0）（1，1）/，即左上、右下
偶行奇列：（0，1）（1，0）\，即左下、右上
奇行偶列：（0，1）（1，0）\，即左下、右上
奇行奇列：（0，0）（1，1）/，即左上、右下
最终汇总起来也只有2种情况，（0，0）（1，1）和（0，1）（1，0）,图中黑色部分

ff49e14ce7202187d99b838e79c6662e

坐标计算

6ab6631b199e374e65b151511726bb6f

对于计算中的wx+1，拿（1，0）点来说，wx+1等同于（1，0）与（0，0）之间相差一个矩形的长，这个长度为1，为了得到（1，0）点的坐标，要在（0，0）点坐标的基础上，将wx增加一个长

对于计算中的wy+1，拿（0，1）点来说，wy+1等同于（0，0）与（0，1）之间相差一个矩形的高，这个长度为1，为了得到（0，1）点的坐标，要在（0，0）点坐标的基础上，将wy增加一个高.

两点之间的距离计算

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));

通过判断距离那个中心点更近,来取纹理坐标

184315b1386af8f744458f8b03abedcf

判断着色器代码

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//六边形的边长
const float mosaicSize = 0.03;

void main(){
    
    float length = mosaicSize;
    //矩形的高的比例为√3，取值 √3/2 ，也可以直接取√3
    float TR = 0.866025;
    //矩形的长的比例为3，取值 3/2 = 1.5，也可以直接取3
    float TB = 1.5;
    
    //取出纹理坐标
    float x = TextureCoordsVarying.x;
    float y = TextureCoordsVarying.y;
    
    //根据纹理坐标计算出对应的矩阵坐标 
    //即 矩阵坐标wx = int（纹理坐标x/ 矩阵长），矩阵长 = TB*len
    //即 矩阵坐标wy = int（纹理坐标y/ 矩阵宽），矩阵宽 = TR*len
    int wx = int(x / TB / length);
    int wy = int(y / TR / length);
    vec2 v1, v2, vn;
    
    //判断wx是否为偶数，等价于 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));
        }
    }
    //利用距离公式，计算中心点与当前像素点的距离
    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));
    
    //选择距离小的则为六边形的中心点，且获取它的颜色
    vn = (s1 < s2) ? v1 : v2;
    //获取六边形中心点的颜色值
    vec4 color = texture2D(Texture, vn);
    gl_FragColor = color;
}

效果图

9b0428749183ddb5a990cfd8c25a0409

三角形马赛克

三角形马赛克,先有6边形,在拆解成6分,取每个三角形的中心颜色值.

先算出矩形,根据点的位置计算取那个六边形的中心点.
计算出传进来的坐标和中心点的夹角
根据夹角计算中心点在六边形那个区域
将颜色值设置对应区域三角形的中心点颜色值.

计算六边形

计算方式和上面六边形马赛克一样

计算夹角大小

tanα = x/y , α = atan(x/y)
假设中心点是vn,那么当传进来纹理坐标x1,y1,
那么x = x1-vn.x,y = y1-vn.y

计算区域范围
π=180°,那么第一个区域的范围就是π/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;
    }
     //获取像素点与中心点的角度
    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
     gl_FragColor = color;
    
}

效果图

41c42af0936191351889354e44445067

总结

图片来源:Style_月月

c611bff73691cc6f74964da6aed4b8c8

0017--OpenGL ES 滤镜进阶篇之黑白、倒置、马赛克滤镜

前言

iOS与图形图像处理框架

图⽚片显示原理理

图⽚片滤镜实现思路路

灰色滤镜实现原理

颠倒滤镜原理

马赛克

六边形马赛克

三角形马赛克

总结

你可能感兴趣的:(0017--OpenGL ES 滤镜进阶篇之黑白、倒置、马赛克滤镜)