接著上一篇文章《在 iOS 中使用 GLSL 實現分屏濾鏡》，我們來實現馬賽克等濾鏡，頂點著色器代碼依舊不變，在片元著色器實現我們需要的濾鏡效果。
頂點著色器
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;
void main()
{
TextureCoordsVarying = TextureCoords;
gl_Position = Position;
}
灰度
片元著色器
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);
}
灰度.png
顛倒
片元著色器
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main()
{
gl_FragColor = texture2D(Texture, vec2(TextureCoordsVarying.x, 1.0 - TextureCoordsVarying.y));
}
顛倒.png
旋渦
片元著色器
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
const float PI = 3.14159265;
const float uD = 180.0;
const float uR = 0.5;
void main()
{
ivec2 ires = ivec2(512, 512);
float Res = float(ires.s);
vec2 st = TextureCoordsVarying;
float Radius = Res * uR;
vec2 xy = st * Res;
vec2 dxy = xy - vec2(Res/2.0, Res/2.0);
float r = length(dxy);
float beta = atan(dxy.y, dxy.x) + radians(uD) * 2.0 * (1.0-(r/Radius)*(r/Radius));
if (r <= Radius)
{
xy = Res/2.0 + r * vec2(cos(beta), sin(beta));
}
st = xy/Res;
vec3 irgb = texture2D(Texture, st).rgb;
gl_FragColor = vec4(irgb, 1.0);
}
旋渦.png
馬賽克
片元著色器
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
const vec2 TexSize = vec2(400.0, 400.0);
const vec2 mosaicSize = vec2(8.0, 8.0);
void main()
{
vec2 intXY = vec2(TextureCoordsVarying.x * TexSize.x, TextureCoordsVarying.y * TexSize.y);
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 = color;
}
馬賽克.png
馬賽克2
片元著色器
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
const float mosaicSize = 0.02;
void main()
{
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)
{
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
{
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)
{
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
{
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;
}
gl_FragColor = texture2D(Texture,vn);
}
馬賽克2.png
馬賽克3
片元著色器
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
const float mosaicSize = 0.02;
void main()
{
float TR = 0.866025;
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;
}
gl_FragColor = texture2D(Texture, vn);
}
馬賽克3.png
