前沿
滤镜都是通过着色器特别是片元着色器来实现不通的效果，本篇主要介绍路径的原理，不太着重实现代码，详细代码请参看demo
灰度
灰度滤镜的算法
1.浮点算法:Gray=R0.3+G0.59+B0.11
2.整数方法:Gray=(R30+G59+B11)/100
3.移位方法:Gray =(R76+G151+B*28)>>8;
4.平均值法:Gray=(R+G+B)/3;
5.仅取绿⾊色:Gray=G;
没经过任何变化的图片
image.png
整数方法实现滤镜
precision highp float;
varying vec2 TextureCoordsVarying;
uniform sampler2D Texture;
const lowp vec3 W = vec3(30.0,59.0,11.0);
void main (void){
vec4 mask = texture2D(Texture,TextureCoordsVarying);
float luminance = dot(mask.rgb,W);
gl_FragColor =vec4(vec3(luminance/100.0),1.0);
}
image.png
平均值法
precision highp float;
varying vec2 TextureCoordsVarying;
uniform sampler2D Texture;
void main (void){
vec4 mask = texture2D(Texture,TextureCoordsVarying);
float averageValue = (mask.r + mask.g +mask.b)/3.0;
gl_FragColor = vec4(vec3(averageValue),1.0);
}
image.png
其他的算法就不一一去调试了，原理就是通过算法改变颜色值.
颠倒
颠倒就是s坐标不变，t坐标翻转。因为纹理坐标的值范围是[0,1]，我们想让倒置，用1减去t坐标.
precision highp float;
varying vec2 TextureCoordsVarying;
uniform sampler2D Texture;
void main (void){
gl_FragColor = texture2D(Texture,vec2(TextureCoordsVarying.x,1.0-TextureCoordsVarying.y));
}
image.png
正方形马赛克
precision highp float;
varying vec2 TextureCoordsVarying;
uniform sampler2D Texture;
const lowp float size = 0.03;
void main (void){
float x = TextureCoordsVarying.x;
float y = TextureCoordsVarying.y;
vec2 UVMosaic = vec2(floor(x/size)*size,floor(y/size)*size);
gl_FragColor = texture2D(Texture,UVMosaic);
}
image.png
可以通过size的大小，来调节马赛克效果.
SquareMosaic.png
如图我们把一整个图片分成若干个小正方形，通过计算，我们知道某一点在某一特定的小正方形内，然后我们取小正方形左上顶点的像素，填充整个小正方形。当然我们也可以取正方形中心的像素填充整个正方形。
六边形马赛克
image.png
我们可以看到一个图形可以有正六边形拼接而成。
image.png
我们可以看出来所以的拼接都可以看成有这四种长方形拼接而成。
我们可以通过判断行数和列数的奇偶行来判断是哪一类长方形。进而得出其相邻的两个六边形的中心点。
precision highp float;
varying vec2 TextureCoordsVarying;
uniform sampler2D Texture;
const highp float mosaicSize = 0.03;
void main (void){
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) {
v1 = vec2(float(wx)*TB*length,float(wy)*TR*length);
v2 = vec2(float(wx+1)*TB*length,float(wy+1)*TR*length);
} else {
v1 = vec2(float(wx)*TB*length,float(wy+1)*TR*length);
v2 = vec2(float(wx+1)*TB*length,float(wy)*TR*length);
}
} else {
if (wy/2*2 == wy) {
v1 = vec2(float(wx)*TB*length,float(wy+1)*TR*length);
v2 = vec2(float(wx+1)*TB*length,float(wy)*TR*length);
} else {
v1 = vec2(float(wx)*TB*length,float(wy)*TR*length);
v2 = vec2(float(wx+1)*TB*length,float(wy+1)*TR*length);
}
}
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);
}
image.png
三角形马赛克
image.png
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;
}
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 = area3;
} 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 =area1;
} else if (a < -PI6 * 3.0 && a >= -PI6 * 5.0) {
vn = area6;
} else if(a <= -PI6 && a> -PI6 * 3.0) {
vn = area5;
} else if (a > -PI6 && a < PI6)
{
vn = area4;
}
vec4 color = texture2D(Texture, vn);
gl_FragColor = color;
}
B36713CF00A2BF99DD52D35FA16DBE3F.png
网友评论