准备工作
- 准备工作的代码与分屏demo
<13-2.GLSL-分屏滤镜案例>中一致，只需要修改相应的底部item数组及对应的着色器名称等 - 顶点着色器也没有任何变化，主要是
片元着色器中的实现滤镜算法
灰度滤镜
灰度滤镜的实现原理是
让RGB值保持一个平衡并填充，或者只保留一个亮度值，即绿色，在人眼中，绿色的亮度是最显眼的，绿色值越深，在肉眼观察中图片越暗淡，这是眼睛的一种生理现象。
灰度滤镜公式
- 浮点算法：
Gray=R*0.3+G*0.59+B*0.11(RGB的权重总和为1) - 整数⽅法：
Gray=(R*30+G*59+B*11)/100(RGB的权重总和为100) - 移位⽅法：
Gray =(R*76+G*151+B*28)>>8 - 平均值法：
Gray=(R+G+B)/3(处理后的图片比较柔和) - 仅取绿⾊：
Gray=G(这种方式方便简单，且易用)
- 在片元着色器中分别使用
浮点算法和仅取绿色来实现灰度处理。
1. 浮点算法
- 首先设定一个权重，权重借鉴了
GPUImage的权重，绿色值最高是因为人们对绿色敏感度最高
const highp vec3 W = vec3(0.2125,0.7154,0.0721);
- 然后计算出纹素中的灰度值，
dot指的是点乘
//计算灰度值
float luminance = dot(mask.rgb,W);
- 最后将灰度值转化为纹素返回给
gl_FragColor
gl_FragColor = vec4(vec3(luminance),0.1);
- 浮点算法完整的片元着色器代码
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),0.1);
}
-
浮点算法效果
浮点算法效果
2. 仅取绿⾊算法
- 仅取绿⾊算法完整的片元着色器代码
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main (void) {
//获取对应纹理坐标系下色颜色值
vec4 mask = texture2D(Texture, TextureCoordsVarying);
//将RGB全部设置为G，即GRB全部取绿色值
gl_FragColor = vec4(vec3(mask.g), 1.0);
}
-
仅取绿⾊算法效果
仅取绿⾊算法效果
颠倒滤镜
要实现颠倒滤镜，实质是将图片上下倒过来，围绕Y轴将每个像素的坐标进行翻转，实现颠倒滤镜。
在片元着色器中，翻转纹理坐标y值，实现颠倒滤镜
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main()
vec4 mask = texture2D(Texture, vec2(TextureCoordsVarying.x, 1.0-TextureCoordsVarying.y));
gl_FragColor = vec4(mask.rgb, 1.0);
}
-
颠倒滤镜效果
颠倒滤镜效果
马赛克滤镜
主要是实现不同马赛克样式的滤镜，主要有以下三种样式
- 正方形
- 六边形
- 三角形
正方形马赛克
原理：把图片的一个相当大小的区域用同一个颜色值来表示，可以认为是大规模的降低图像的分辨率，从而让图像的一些细节隐藏起来
- 正方形马赛克滤镜算法主要有以下几步：
- 根据纹理坐标计算实际图像中的位置，相当于将纹理颜色区放大
- 计算出一个小马赛克的坐标，即找到马赛克提取颜色值的像素点
-
将马赛克坐标换算回纹理坐标，即将纹理颜色区缩小
正方形马赛克滤镜算法步骤
正方形马赛克代码实现
1.假定纹理的大小和马赛克的大小(马赛克设置的越小，马赛克越密集)
//假设纹理大小为400.0 * 400.0
const vec2 TextSize = vec2(400.0,400.0);
//设置马赛克大小为10.0 * 10.0
const vec2 MosaicSize = vec2(10.0,10.0);
- 获取马赛克在假设纹理中的实际坐标
//获取纹理中的实际坐标
vec2 intXY = vec2(TextureCoordsVarying.x * TextSize.x , TextureCoordsVarying.y * TextSize.y);
- 计算一个小马赛克的坐标
//计算小马赛克的坐标
vec2 XYMosaic = vec2(floor(intXY.x/MosaicSize.x) * MosaicSize.x , floor(intXY.y/MosaicSize.y) * MosaicSize.y);
floor()是GLSL的一个内建函数,返回⼩于/等于X的最⼤整数值，即向下取整。
- 最后换算出在纹理坐标中的位置
//获取纹理坐标中的位置
vec2 UVMosaic = vec2(XYMosaic.x / TextSize.x , XYMosaic.y / TextSize.y);
- 赋值给gl_FragColor
vec4 mask = texture2D(Texture, UVMosaic);
gl_FragColor = mask;
正方形马赛克片元着色器整体代码如下:
precision highp float;
uniform sampler2D Texture;
const vec2 TextSize = vec2(400.0,400.0);
const vec2 MosaicSize = vec2(10.0,10.0);
varying vec2 TextureCoordsVarying;
void main (void) {
vec2 intXY = vec2(TextureCoordsVarying.x * TextSize.x , TextureCoordsVarying.y * TextSize.y);
vec2 XYMosaic = vec2(floor(intXY.x/MosaicSize.x) * MosaicSize.x , floor(intXY.y/MosaicSize.y) * MosaicSize.y);
vec2 UVMosaic = vec2(XYMosaic.x / TextSize.x , XYMosaic.y / TextSize.y);
vec4 mask = texture2D(Texture, UVMosaic);
gl_FragColor = mask;
}
-
正方形马赛克滤镜效果
正方形马赛克滤镜效果
六边形马赛克
六边形马赛克原理：将一张图片，分割成由六边形组成，再取每个六边形的中心点画出一个个的矩形，根据矩形的奇偶排列情况求出对应的2个中心点，并计算纹理坐标与两个中心点的距离，根据距离判断，采取就近原则，当前的六边形就采用近的中心点的颜色值。
将图片分割成六边形，六边形中心点画出矩形后的呈现如下所示
六边形
滤镜算法主要实现步骤有：
-
设置矩形的长宽比例值TR、TB（TB：TR 符合比例
3：√3）
其中长宽比为3：√3，计算过程如下：image 获取纹理坐标的x，y
-
根据纹理坐标计算对应的矩形坐标wx、wy
假设矩阵的比例为3*len：√3*len，那么纹理坐标（x，y）对应的矩阵坐标为image -
根据行列的奇偶情况，求对应的中心点纹理坐标v1、v2
偶行偶列：（0，0）（1，1）/，即左上、右下
偶行奇列：（0，1）（1，0）\，即左下、右上
奇行偶列：（0，1）（1，0）\，即左下、右上
-
奇行奇列：（0，0）（1，1）/，即左上、右下
最终汇总起来也只有2种情况，（0，0）（1，1） 和 （0，1）（1，0），如下图所示image
其中单个矩阵中，4个点的坐标计算公式如下：
- 对于计算中的wx+1，拿（1，0）点来说，wx+1等同于（1，0）与（0，0）之间相差一个矩形的长，这个长度为1，为了得到（1，0）点的坐标，要在（0，0）点坐标的基础上，将wx增加一个长
- 对于计算中的wy+1，拿（0，1）点来说，wy+1等同于（0，0）与（0，1）之间相差一个矩形的高，这个长度为1，为了得到（0，1）点的坐标，要在（0，0）点坐标的基础上，将wy增加一个高
4个点的坐标计算公式
- 左上角，
vec2(length * 1.5 * float(wx), length * TR * float(wy)) - 左下角，
vec2(length * 1.5 * float(wx), length * TR * float(wy + 1)) - 右上角，
vec2(length * 1.5 * float(wx + 1), length * TR * float(wy)) - 右下角，
vec2(length * 1.5 * float(wx + 1), length * TR * float(wy + 1))
-
根据距离公式求像素点(红色点)距离两个中心点的距离s1、s2
s1 = √（（v1.x-x）² + （v1.y-y）²）
-
s2 = √（（v2.x-x）² + （v2.y-y）²）
如图所示，求像素点(红色点)距离
根据求出的距离，判断离哪个中心点近，就取哪个六边形的中心点颜色值为六边形的颜色值
六边形马赛克片元着色器整体代码如下:
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//六边形的边长
const float mosaicSize = 0.03;
void main(){
float length = mosaicSize;
//矩形的高的比例为√3，取值 √3/2 ，也可以直接取√3
float TR = 0.866025;
//矩形的长的比例为3，取值 3/2 = 1.5，也可以直接取3
float TB = 1.5;
//取出纹理坐标
float x = TextureCoordsVarying.x;
float y = TextureCoordsVarying.y;
//根据纹理坐标计算出对应的矩阵坐标
//即 矩阵坐标wx = int（纹理坐标x/ 矩阵长），矩阵长 = TB*len
//即 矩阵坐标wy = int（纹理坐标y/ 矩阵宽），矩阵宽 = TR*len
int wx = int(x / TB / length);
int wy = int(y / TR / length);
vec2 v1, v2, vn;
//判断wx是否为偶数，等价于 wx % 2 == 0
if (wx/2 * 2 == wx) {
if (wy/2 * 2 == wy) {//偶行偶列
//(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{//偶行奇列
//(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) {//奇行偶列
//(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{//奇行奇列
//(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));
//选择距离小的则为六边形的中心点，且获取它的颜色
vn = (s1 < s2) ? v1 : v2;
//获取六边形中心点的颜色值
vec4 color = texture2D(Texture, vn);
gl_FragColor = color;
}
-
六边形马赛克滤镜效果
六边形马赛克滤镜
三角形马赛克
三角形马赛克是由六边形马赛克演变而来，得到三角形必须先有六边形，然后将正六边形6等分，每个三角形都是正三角形，然后求出纹理坐标与中心点的夹角，同时求出三角形的中心点，根据夹角判断，夹角属于哪个三角形，就将该三角形的中心点颜色作为整个三角形的纹素
- 三角形滤镜算法步骤是在六边形滤镜算法的步骤上增加以下步骤
-
求出当前像素点与纹理中心点的夹角
如下图所示，纹理坐标为（x，y），中心点为vn，求夹角
夹角计算图示 -
计算6个三角形的中心点
6个三角形的中心点计算图 -
判断夹角属于哪个三角形，则获取哪个三角形的中心点坐标
其中，不同三角形的夹角范围如图所示
夹角范围图
三角形马赛克片元着色器代码：
(在六边形滤镜算法（即 vn = (s1 < s2) ? v1 : v2;）后增加代码)
atan是GLSL中的内建函数，有两种计算方式
1、atan(y,x) 值域是[0，π],
2、atan(y/x),值域是[-π/2, π/2]
//获取像素点与中心点的角度
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
gl_FragColor = color;
-
三角形马赛克滤镜效果三角形马赛克滤镜
