OpenGL ES — 幾種濾鏡實現

時間 2019-11-07

標籤 opengl 幾種實現简体版

原文原文鏈接

灰度濾鏡

原理將RGB通道都渲染成同一色值。
方法 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
代碼實現

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);
}
複製代碼

效果

顛倒濾鏡

原理翻轉紋理座標
方法 vec2(TextureCoordsVarying.x, 1.0 - TextureCoordsVarying.y)
代碼實現

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

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

效果

旋渦濾鏡

原理

圖像漩渦主要是在某個半徑範圍里，把當前採樣點旋轉必定角度，旋轉之後當前點的顏色就被旋轉後的點的顏色代替，所以整個半徑範圍里會有旋轉的效果。若是旋轉的時候旋轉角度隨着當前點離半徑的距離遞減，整個圖像就會出現漩渦效果git

方法當前角度：atan(dxy.y, dxy.x) 加重旋渦角度：atan(dxy.y ,dxy.x ) + radians(uD) * 2.0 加重旋渦衰減角度：atan(dxy.y ,dxy.x ) + radians(uD) * 2.0 * disValue
代碼

precision mediump float; //PI
const float PI = 3.14159265; //紋理採樣器
uniform sampler2D Texture; //旋轉角度
const float uD = 80.0; //旋渦半徑
const float uR = 0.5;
//紋理座標
varying vec2 TextureCoordsVarying;
void main() {
//旋轉正方形範圍:[512,512]
ivec2 ires = ivec2(512, 512); //獲取旋轉的直徑
float Res = float(ires.s); //紋理座標[0,0],[1,0],[0,1],[1,1]...
vec2 st = TextureCoordsVarying; //半徑 = 直徑 * 0.5;
float Radius = Res * uR;
//準備旋轉處理的紋理座標 = 紋理座標 * 直徑 vec2 xy = Res * st;
//紋理座標的一半
vec2 dxy = xy - vec2(Res/2., Res/2.);
    //r
    float r = length(dxy);
//拋物線遞減因⼦子:(1.0-(r/Radius)*(r/Radius) )
float beta = atan(dxy.y, dxy.x) + radians(uD) * 2.0 * (1.0-(r/Radius)*(r/Radius));
    if(r<=Radius)
    {
//獲取的紋理座標旋轉beta度.
xy = Res/2.0 + r*vec2(cos(beta), sin(beta));
}
//st = 旋轉後的紋理座標/旋轉範圍 st = xy/Res;
//將旋轉的紋理理座標替換原始紋理理座標TextureCoordsVarying 獲取對應像素點的顏色. vec3 irgb = texture2D(Texture, st).rgb;
//將計算後的顏色填充到像素點中 gl_FragColor
    gl_FragColor = vec4( irgb, 1.0 );
}
複製代碼

效果

馬賽克濾鏡

原理

⻢賽克效果就是把圖片的⼀個至關大小的區域用同⼀個點的顏色來表示.能夠認爲是大規模的下降圖像的分辨率,而讓圖像的⼀些細節隱藏起來。github

代碼實現

precision mediump float;
//紋理座標
varying vec2 TextureCoordsVarying; //紋理採樣器
uniform sampler2D Texture;
//紋理圖片size
const vec2 TexSize = vec2(400.0, 400.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較方便)算法

代碼實現

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;
    
}
複製代碼

效果

三角形馬賽克

原理

三角形馬賽克的原理相似六邊形馬賽克原理，只不過是將六邊形各邊和中心點組成六個三角形bash

代碼實現

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;
}
複製代碼

效果

源碼下載：https://github.com/meetly/MosaicFilter

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。