转载

OpenGL 滤镜效果(一)

#####滤镜实际上就是在片元着色器对特定的像素点进行处理。 灰度滤镜 灰度滤镜原理:

  1. 浮点算法:Gray = R * 0.3 + G * 0.59 + B * 0.11
  2. 整数算法:Gray = (R30 + G59 + B*11) / 100
  3. 移位算法:Gray = (R76 + G151 + B*28)>>8
  4. 平均值法:Gray = (R+G+B)/3
  5. 仅取绿色:Gray = G

思路:

  1. 获取原始图片的纹素值
  2. 选择合适的灰度算法
  3. 将计算所得赋给gl_FragColor

实例代码

  1. 顶点着色器(滤镜并不需要操作顶点着色器,所以不同滤镜顶点着色器代码一致):
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

void main (void) {
    gl_Position = Position;
    TextureCoordsVarying = TextureCoords;
}
复制代码
  1. 片元着色器
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

void main (void) {
    
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
}

复制代码

权值法(各个颜色的权值参考了GPUImage ,也可以用上面的权值)

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

复制代码

平均值法:

    float color = (mask.r + mask.g + mask.b) / 3.0;
    vec4 tempColor = vec4(color,color,color,1);
    gl_FragColor = vec4(vec3(tempColor), 1.0);
复制代码

一般由于人眼对不同颜色的敏感度不一样,所以三种颜色值的权重不一样,一般来说绿色最高,红色其次,蓝色最低,最合理的取值分别为Wr = 30%,Wg = 59%,Wb = 11%,所以权值法相对效果更好一点。

暖色滤镜 思路:

  1. 获取原始图片的纹素值
  2. 将rgb通道的颜色添加相应的红/绿色值,再作为rgb通道的值,
  3. 将计算所得赋给gl_FragColor
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    gl_FragColor = mask + vec4(0.3,0.3,0.0,0.0);
复制代码

冷色滤镜 思路:

  1. 获取原始图片的纹素值
  2. 将rgb通道的颜色添加相应的蓝色值,再作为rgb通道的值,
  3. 将计算所得赋给gl_FragColor
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    gl_FragColor = mask + vec4(0.0,0.0,0.3,0.0);
复制代码

颠倒滤镜 思路:

  1. 获取原始图片的纹素值
  2. 将纹理坐标做映射 (y -> 1 - y)
  3. 将计算所得赋给gl_FragColor
vec4 color = texture2D(Texture, vec2(TextureCoordsVarying.x, 1.0 - TextureCoordsVarying.y));
复制代码

转载于:https://juejin.im/post/5d22f34fe51d45775c73dd60

正文到此结束
本文目录