本文建立是在 OpenGL加载纹理及分屏滤镜实现 一文基础上增加着色器文件实现。
顶点着色器
顶点着色器 本文滤镜通过修改片元着色器即可，因此不在重复顶点着色器代码
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordVarying;
void main(void) {
gl_Position = Position;
TextureCoordVarying = TextureCoords;
}
原始图片
一、灰度滤镜
- 浮点算法(GPUImage采用)
Gray = R * 0.3 + G * 0.59 + B * 0.11 - 整数方法
Gray = (R * 30 + G * 59 + B * 11) / 100 - 位移方法
Gray = (R * 76 + G * 151 + B * 28) >> 8 - 平均值法
Gray = (R + G + B) / 3 - 仅取绿色
Gray = G
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordVarying;
const highp vec3 W = vec3(0.2125, 0.7154, 0.0721);
void main(void) {
vec4 mask = texture2D(Texture, TextureCoordVarying);
// 采用浮点算法，取得 RGB 点乘值作为新的 RGB 参数
float luminance = dot(mask.rgb, W);
gl_FragColor = vec4(vec3(luminance), 1.0);
}
二、翻转滤镜
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordVarying;
void main(void) {
// 翻转 y 坐标
vec4 mask = texture2D(Texture, vec2(TextureCoordVarying.x, 1.0 - TextureCoordVarying.y));
gl_FragColor = vec4(mask.rgb, 1.0);
}
三、方块马赛克滤镜
由于 TextureCoordVarying 取值范围是(0,1)
因此，先放大400，再向下取整马赛克大小的整数，再缩小400，得到的就是 某个坐标所在的马赛克方块左上角的坐标。
precision highp float;
uniform sampler2D Texture;
const vec2 TexSize = vec2(400.0, 400.0);
const vec2 MosaicSize = vec2(16.0, 16.0);
varying vec2 TextureCoordVarying;
void main(void) {
vec2 intXY = vec2(TextureCoordVarying.x * TexSize.x, TextureCoordVarying.y * TexSize.y);
vec2 XYMosaic = vec2(floor(intXY.x / MosaicSize.x) * MosaicSize.x, floor(intXY.y / MosaicSize.y) * MosaicSize.y);
vec2 UVMasaic = vec2(XYMosaic.x / TexSize.x, XYMosaic.y / TexSize.y);
vec4 mask = texture2D(Texture, UVMasaic);
gl_FragColor = vec4(mask.rgb, 1.0);
}
四、六边形马赛克滤镜
将屏幕使用六边形分割，可以画出长宽比为 3:√3 ≈ 1.5 的矩形。
以屏幕左上角为 (0,0),则屏幕上任意一点，都可以找出它所对应的矩形。
公式如下, (wx, wy) 表示点(x, y)对应的矩形的左上角坐标
int wx = int(x / TB / length);
int wy = int(y / TR / length);
TB=1.5, TR=0.866025
分割示意图
四种情况，求出小矩形所在两个六边形的中心点坐标
1.偶数行，偶数列: 求取小矩形 (0,0) (1,1)
2.偶数行，奇数列: 求取小矩形 (0, 1) (1,0)
3.奇数行，偶数列: 求取小矩形 (0, 1) (1,0)
4.奇数行，奇数列: 求取小矩形 (0,0) (1,1)
再根据当前坐标距离两个六边形的距离，找出最近的一个六边形中心点，取出辞典的颜色值。
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordVarying;
const float mosaicSize = 0.03;
void main(void) {
float length = mosaicSize;
float TR = 0.866025;
float TB = 1.5;
float x = TextureCoordVarying.x;
float y = TextureCoordVarying.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) {
// find (0,0) (1,1)
v1 = vec2(length * TB * float(wx), length * TR * float(wy));
v2 = vec2(length * TB * float(wx + 1), length * TR * float(wy + 1));
} else {
// find (0, 1) (1,0)
v1 = vec2(length * TB * float(wx), length * TR * float(wy + 1));
v2 = vec2(length * TB * float(wx + 1), length * TR * float(wy));
}
} else {
if (wy / 2 * 2 == wy) {
// find (0, 1) (1,0)
v1 = vec2(length * TB * float(wx), length * TR * float(wy + 1));
v2 = vec2(length * TB * float(wx + 1), length * TR * float(wy));
} else {
// find (0,0) (1,1)
v1 = vec2(length * TB * float(wx), length * TR * float(wy));
v2 = vec2(length * TB * 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 mask = texture2D(Texture, vn);
gl_FragColor = vec4(mask.rgb, 1.0);
}
五、三角形马赛克滤镜
在六边形马赛克基础上，找到六边形的中心点。
将六边形分为六个区域，获取对应中心点坐标
// 此时 vn 是当前坐标坐在的六边形中心点
float midMosaicLength = mosaicSize * TR / 2.0;
vec2 area1 = vec2(vn.x, vn.y - midMosaicLength);
vec2 area2 = vec2(vn.x + mosaicSize / 2.0, vn.y - midMosaicLength);
vec2 area3 = vec2(vn.x + mosaicSize / 2.0, vn.y + midMosaicLength);
vec2 area4 = vec2(vn.x, vn.y + midMosaicLength);
vec2 area5 = vec2(vn.x - mosaicSize / 2.0, vn.y + midMosaicLength);
vec2 area6 = vec2(vn.x - mosaicSize / 2.0, vn.y - midMosaicLength);
mosaicSize 为六边形马赛克边长
然后求出当前坐标与中心点的的连线，相对于x轴的夹角，判断当前坐标坐落的区域，取出对应三角形区域中心点的颜色值
float a = atan((x - vn.x) / (y - vn.y));
完整代码如下
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordVarying;
const float mosaicSize = 0.03;
void main(void) {
float length = mosaicSize;
float TR = 0.866025;
float TB = 1.5;
float PI6 = 0.523599;
float x = TextureCoordVarying.x;
float y = TextureCoordVarying.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) {
// find (0,0) (1,1)
v1 = vec2(length * TB * float(wx), length * TR * float(wy));
v2 = vec2(length * TB * float(wx + 1), length * TR * float(wy + 1));
} else {
// find (0, 1) (1,0)
v1 = vec2(length * TB * float(wx), length * TR * float(wy + 1));
v2 = vec2(length * TB * float(wx + 1), length * TR * float(wy));
}
} else {
if (wy / 2 * 2 == wy) {
// find (0, 1) (1,0)
v1 = vec2(length * TB * float(wx), length * TR * float(wy + 1));
v2 = vec2(length * TB * float(wx + 1), length * TR * float(wy));
} else {
// find (0,0) (1,1)
v1 = vec2(length * TB * float(wx), length * TR * float(wy));
v2 = vec2(length * TB * 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;
}
// 此时 vn 是当前坐标坐在的六边形中心点
float a = atan((x - vn.x) / (y - vn.y));
float midMosaicLength = mosaicSize * TR / 2.0;
vec2 area1 = vec2(vn.x, vn.y - midMosaicLength);
vec2 area2 = vec2(vn.x + mosaicSize / 2.0, vn.y - midMosaicLength);
vec2 area3 = vec2(vn.x + mosaicSize / 2.0, vn.y + midMosaicLength);
vec2 area4 = vec2(vn.x, vn.y + midMosaicLength);
vec2 area5 = vec2(vn.x - mosaicSize / 2.0, vn.y + midMosaicLength);
vec2 area6 = vec2(vn.x - mosaicSize / 2.0, vn.y - midMosaicLength);
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 mask = texture2D(Texture, vn);
gl_FragColor = vec4(mask.rgb, 1.0);
}
