原图
灰度效果图
三通道图:图片每个像素点都有三个值(RGB)表示 ,所以就是三通道。也有四通道的图(RGBA)。RGB色彩模式是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。总之,每一个点由三个值表示
单通道图:俗称灰度图,每个像素点只能有有一个值表示颜色,它的像素值在0到255之间,0是黑色,255是白色,中间值是一些不同等级的灰色。
有5中方法来实现灰度滤镜的算法(前三种方法是利用权重来实现的):
顶点着色器无需改变,只放出整数算法
的片元着色器代码
precision highp float;
varying lowp vec2 varyTexCoord;
uniform sampler2D colorMap;
//该值取自GUPImage
const highp vec3 GRAY = vec3(0.2125, 0.7154, 0.0721);
void main(void) {
vec3 realColor = texture2D(colorMap, varyTexCoord).rgb;
//向量点乘
float result = dot(realColor, GRAY);
gl_FragColor = vec4(vec3(result), 1.0);
}
效果图
修改纹理坐标
来达到旋转效果。旋转计算原点
,也就是纹理坐标(x-0.5,y-0.5).precision highp float;
//动画时间戳
uniform float Time;
varying lowp vec2 varyTexCoord;
uniform sampler2D colorMap;
//每次移动的角度
const float DEGREE = 0.2;
void main(void) {
vec2 temp = varyTexCoord;
//计算斜边长度
float hLine = distance(vec2(0.5, 0.5) , varyTexCoord);
//计算斜边的旋转度数
float aDegree = DEGREE * Time + atan(temp.y - 0.5, temp.x - 0.5);
//通过角度来计算x ,y轴坐标
temp.x = hLine * cos(aDegree);
temp.y = hLine * sin(aDegree);
//将坐标转换为纹理坐标
temp.x = temp.x + 0.5;
temp.y = temp.y + 0.5;
gl_FragColor = texture2D(colorMap, temp);
}