OpenGLES之灰度、颠倒和马赛克

我是小菜
552 阅读4分钟

灰度

实现原理

让RGB值保持一个平衡或者只保持一个亮度值（绿色），从而达到灰度的效果

灰度计算方法

  • 浮点算法:Gray=R0.3+G0.59+B*0.11，注意与RGB相乘的系数之和必须等于1

  • 整数⽅方法:Gray=(R30+G59+B*11)/100 

  • 移位⽅方法:Gray =(R76+G151+B*28)>>8

  • 平均值法:Gray=(R+G+B)/3

  • 仅取绿⾊色:Gray=G

代码实现

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
const highp vec3 W = vec3(0.2125, 0.7154, 0.0721);
//const highp vec3 W = vec3(0.33, 0.33, 0.34);
//const highp vec3 W = vec3(0.0, 1.0, 0.0);
void main (void) {

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

效果如下图

颠倒

原理：

将纹理坐标上下颠倒即可

代码实现

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

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

效果

马赛克

原理：把图⽚的一个相当大小的区域⽤同⼀个 点的颜色来表示

正方形马赛克

思路：将纹理中正方形区域内的点用同一个色值来表示

代码实现

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//纹理理图⽚片size
const vec2 TextSize = vec2(400.0, 400.0);
//⻢马赛克Size
const vec2 mosicSize = vec2(6.0, 6.0);

void main(){
    //计算实际图像位置
    vec2 intXY = vec2(TextureCoordsVarying.x * TextSize.x, TextureCoordsVarying.y * TextSize.y);
    // floor (x) 内建函数,返回⼩小于/等于X的最⼤大整数值.
    // floor (intXY.x / mosaicSize.x) * mosaicSize.x 计算出⼀一个⼩小⻢马赛克的坐标.
    vec2 xyMosaic = vec2(floor(intXY.x / mosicSize.x) * mosicSize.x, floor(intXY.y / mosicSize.y) * mosicSize.y);
    //换算回纹理理坐标
    vec2 uvSize = vec2(xyMosaic.x / TextSize.x, xyMosaic.y / TextSize.y);
    //获取到⻢马赛克后的纹理理坐标的颜⾊色值并赋值给gl_FragColor
    gl_FragColor = texture2D(Texture,uvSize);
}

效果如下

六边形马赛克

原理：将一张图片，分割成由六边形组成，再取每个六边形的中心点画出一个个的矩形，根据矩形的奇偶排列情况求出对应的2个中心点，并计算纹理坐标与两个中心点的距离，根据距离判断，采取就近原则，当前的六边形就采用近的中心点的颜色值。

取每个六边形的中心点画出一个矩阵，如图

矩阵的宽高比为3：√3，约为1.5，

左上角顶点为：vec2(length * 1.5 * float(wx), length * TR * float(wy))

右上角顶点为：vec2(length * 1.5 * float(wx + 1), length * TR * float(wy))

左下角顶点为：vec2(length * 1.5 * float(wx), length * TR * float(wy + 1))

右下角顶点为：vec2(length * 1.5 * float(wx + 1), length * TR * float(wy + 1))

我们根据任意顶点位置到该顶点所在矩形的两个顶点距离的大小就可以判断出来取哪个顶点的色值。矩形的形式分为奇行奇列、奇行偶列、偶行奇列、偶行偶列共四种情况，其中奇行奇列和偶行偶列相同，奇行偶列和偶行奇列相同。

代码实现

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

const float mosaicSize = 0.03;

void main(){
    float length = mosaicSize;

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

}

效果

三角形马赛克

原理：角形马赛克是由六边形马赛克演变而来，得到三角形的前提，就是的先有六边形，然后将正六边形6等分，每个三角形都是正三角形，然后求出纹理坐标与中心点的夹角，同时求出三角形的中心点，根据夹角判断，夹角属于哪个三角形，就将该三角形的中心点颜色作为整个三角形的纹素。

步骤

  • 求出当前像素点与纹理中心点的夹角，如当前像素点（x,y）与中心点(vn.x, vn.y)

  • 求出六个正三角形的中心点的坐标
  • 判断夹角属于哪个三角形，则该顶点的颜色值为那个三角形的中心点颜色值

代码实现

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

效果

注意

本文中图片引用的计算三角形中心点以及夹角的图片来源于简书Style_月月的博客，欢迎阅读。

avatar
文章
阅读
粉丝