OpenGL特效记录

OpenGL特效记录

滤镜 - 加入阴影边框(阴影边框为透明白底)

原理：相机预览数据纹理和bitmap图片纹理点乘叠加；即两个图层叠加，颜色向量点乘效果；边框阴影中间透明色（1，1，1），点乘不影响相机颜色数据；边框会大于小于，点乘后值更小，颜色更深

//边框滤镜
precision mediump float;
varying highp vec2 textureCoordinate;
uniform sampler2D inputTexture;
uniform sampler2D bitmapTexture;
void main()
{
    vec3 border = texture2D(bitmapTexture,textureCoordinate).rgb;
    vec4 color = texture2D(inputTexture,textureCoordinate);
    vec3 finalColor = color.rgb * border;
    gl_FragColor = vec4(finalColor, color.a);
}

效果：

滤镜 - 加入阴影边框(阴影边框为不透明黑底底)

原理：以下算法，颜色越暗能量越低，与原图点乘会导致变成黑色；所以不能相乘，反色相乘；以下等式实质也等于直接点乘，这个效果就是非黑色部分

color = 1.0 - ((1.0 - color) * (1.0 - border));

效果：

镜像特效

原理：复用上半部分图片，并倒置图像

//镜像
precision mediump float;
varying highp vec2 textureCoordinate;
uniform sampler2D inputTexture;
void main(){
    if(textureCoordinate.y < 0.5){
        gl_FragColor = texture2D(inputTexture,textureCoordinate);
    }else{
        float y = 1.0 - textureCoordinate.y;
        gl_FragColor = texture2D(inputTexture,vec2(textureCoordinate.x, y));
    }
}

效果：

高斯模糊特效

权重乘积求和

  lowp vec4 color = vec4(0.0);
    if(blurtexCoor[0].y < 0.7 && blurtexCoor[0].y > 0.3){
        color = texture2D(inputTexture, blurtexCoor[0]);
    }else{
        color = texture2D(inputTexture, blurtexCoor[0]) * 0.3;
        color += texture2D(inputTexture, blurtexCoor[1]) * 0.12;
        color += texture2D(inputTexture, blurtexCoor[2]) * 0.12;
        color += texture2D(inputTexture, blurtexCoor[3]) * 0.07;
        color += texture2D(inputTexture, blurtexCoor[4]) * 0.07;
        color += texture2D(inputTexture, blurtexCoor[5]) * 0.06;
        color += texture2D(inputTexture, blurtexCoor[6]) * 0.06;
        color += texture2D(inputTexture, blurtexCoor[7]) * 0.04;
        color += texture2D(inputTexture, blurtexCoor[8]) * 0.04;
        color += texture2D(inputTexture, blurtexCoor[9]) * 0.03;
        color += texture2D(inputTexture, blurtexCoor[10]) * 0.03;
        color += texture2D(inputTexture, blurtexCoor[11]) * 0.03;
        color += texture2D(inputTexture, blurtexCoor[12]) * 0.03;
    }
    gl_FragColor = color;

效果：

分屏特效

主要是涉及坐标位置转换：

vec2 pos = vec2(0.0);
    if(textureCoordinate.y < 0.5 && textureCoordinate.x < 0.5){
        pos = vec2(textureCoordinate.x * 2.0, textureCoordinate.y * 2.0);
    }else if(textureCoordinate.y > 0.5 && textureCoordinate.x < 0.5){
        pos = vec2(textureCoordinate.x * 2.0, (textureCoordinate.y - 0.5)/0.5);
    }else if(textureCoordinate.y < 0.5 && textureCoordinate.x > 0.5){
        pos = vec2((textureCoordinate.x - 0.5)/0.5, textureCoordinate.y * 2.0);
    }else{
        pos = vec2((textureCoordinate.x - 0.5)/0.5, (textureCoordinate.y - 0.5)/0.5);
    }

    gl_FragColor = texture2D(inputTexture,pos);

效果：

马赛克特效

方格马赛克特效

原理：
将x和y轴，用一小段线等分成多个小段，x和y轴分段后，在该段内的像素点都取同一个像素；代码如下：

precision mediump float;
varying highp vec2 textureCoordinate;
uniform sampler2D inputTexture;
uniform float perPixelWidth;
uniform float perPixelHeight;
//马赛克包含的像素个数
uniform float pixelCounts;
void main(){
    //马赛克宽高
    float width = pixelCounts * perPixelWidth;
    float height = pixelCounts * perPixelHeight;
    vec2 pos = vec2(width * floor(textureCoordinate.x / width), height * floor(textureCoordinate.y / height));
    gl_FragColor = texture2D(inputTexture,pos);
}

效果：