OpenGLES（九）- GLSL案例：灰度、旋转

OpenGLES（九）- GLSL案例：灰度

灰度滤镜

原图 灰度效果图

三通道图：图片每个像素点都有三个值(RGB)表示 ，所以就是三通道。也有四通道的图(RGBA)。RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。总之，每一个点由三个值表示

单通道图：俗称灰度图，每个像素点只能有有一个值表示颜色，它的像素值在0到255之间，0是黑色，255是白色，中间值是一些不同等级的灰色。

有5中方法来实现灰度滤镜的算法（前三种方法是利用权重来实现的）：

• 浮点算法： Gray = R 0.3 + G 0.59 + B * 0.11 （根据对应纹素的颜色值调整RGB的比例）
• 整数算法： Gray = (R 30 + G 59 + B * 11) / 100 （同浮点算法）
• 移位算法： Gray = (R 76 + G 151 + B * 28) >> 8
• 平均值法： Gray = (R + G + B) / 3; （获取到对应纹素的RGB平均值，填充到三个通道上面）
• 仅取绿色： Gray = G （一个颜色填充三个通道）

顶点着色器无需改变，只放出整数算法的片元着色器代码

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);
}

旋转滤镜

效果图

之前都是通过修改顶点叉乘一个旋转矩阵来达到旋转，该例子是通过修改纹理坐标来达到旋转效果。

1. 由于要按照中心点来进行旋转，所以在思路上按照把纹理原点移动到旋转计算原点，也就是纹理坐标（x-0.5,y-0.5).
2. 计算出结果后还需要将坐标进行转换：（x+0.5,y+0.5)
3. 其中还涉及到一些简单的三角函数计算。

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);
}

完整DEMO地址: Github