OpenGL es 灰度滤镜、正方形、六边形马赛克原理

灰度滤镜

截屏2020-08-22 09.55.30.png

灰度滤镜算法

gray = R * 0.3 + G * 0.59 + B * 0.11;

片元着色器代码

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

正方形马赛克原理

马赛克是由许多相同形状的不同颜色块组成的一块模糊图形。每个颜色块取其中一个像素点覆盖周围的像素点。
指定需要马赛克的地方，指定马赛克的大小（正方形宽高相等），可以计算出该区域有多少个马赛克。当纹理坐标在其中一个马赛克正方形内
，取其左上角的像素点作为整个正方形颜色的像素点。

片元着色器代码

precision highp float; 
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
//假设纹理的大小size
const vec2 TexSize = vec2(400.0,400.0);
//假设马赛克的大小size
const vec2 mosaicSize = vec2(8.0,8.0);

void main()
{
    //计算实际图像的位置
    vec2 intXY = vec2(varyTextCoord.x * TexSize.x ,varyTextCoord.y * TexSize.y);
    //马赛克的坐标，floor向下取整数，
    //向下取整，表示当前的纹理坐标所在那个马赛克内左上角的纹理坐标
    //即如果改像素点在这个正方形内，去其左上角的纹理坐标
    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(colorMap,uvMosaic);
    
    gl_FragColor = color;
    
}

截屏2020-08-13 12.03.45.png

正六边形马赛克

正六边形马赛克是取正六边形马赛克的中心点的像素点为整个六边形的颜色，使得

六边形.png

1. 六边形马赛克其实是由图中右侧两种图形组成的，根据像素点所在位置计算距离四边形对角的长度。

2. 图中左侧红色点是每个正六边形的中心点，两个左右相邻的中心点可以组成一个图元，图元1的左下角A和右上角B分别对应两个正六边形的中心点。
   3.根据规律可以发现，这两种图元是按照奇偶行列间隔。

3. 假设像素点在图元1的左半边部分，那么就取像素点A为该正六边形的像素。由于正六边形的每个角度是120°，计算出图元宽高比是3：根号3。

步骤
1.将纹理坐标转换为矩阵坐标
2.计算出纹理坐标图元的两个中心点
3.判断像素点距离两个中心的距离，确定所处的正六边形

片元着色器代码

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

const float mosaicSize = 0.03;

void main (void)
{
    //马赛克大小
    float length = mosaicSize;
    
    //正六边形的角度是120
    float TR = 0.866025; //高
    float TB = 1.5;     //宽
    
    float x = TextureCoordsVarying.x;
    float y = TextureCoordsVarying.y;
    
    //纹理坐标转换为所对应的矩阵坐标
    int wx = int(x / TB / length);
    int wy = int(y / TR / length);
    //v1和v2表示构成正六边形的中心点，长方形的对角顶点
    vec2 v1, v2, vn;
    
    //奇数偶数判断，由于glsl对数据类型严格匹配，3/2 != 1.5
    //wx坐标是偶数
    if (wx/2 * 2 == wx) {
        //wy是偶数
        if (wy/2 * 2 == wy) {
            //(0,0),(1,1)
          //C点坐标
            v1 = vec2(length * 1.5 * float(wx), length * TR * float(wy));
            //d点坐标
            v2 = vec2(length * 1.5 * float(wx + 1), length * TR * float(wy + 1));
        } else {
            //(0,1),(1,0)
           //A点
            v1 = vec2(length * 1.5 * float(wx), length * TR * float(wy + 1));
          //B点
            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));
        }
    }
    
    //s1 和 s2 是距离对角顶点的距离
    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;
    
}

截屏2020-08-22 09.56.18.png

地址