从基础到精通：使用 GLSL 实现灰度、反转和马赛克滤镜

IOS

2023-12-22 12:46:18

在 OpenGL-ES 中使用 GLSL 实现滤镜，提升图像魅力

图像处理是计算机图形学中一项不可或缺的技术，它赋予了图像全新的外观和感受。在 OpenGL-ES 环境中，我们可以通过 GLSL（OpenGL 着色语言）轻松实现各种滤镜，让图像焕发光彩。

滤镜的原理

滤镜通过操纵像素颜色、纹理坐标和几何形状属性来改变图像的外观。例如，灰度滤镜会将彩色图像转换成黑白图像，而反转滤镜则会让图像呈现出负片效果。

用 GLSL 实现滤镜

GLSL 是为编写 OpenGL 着色器程序而设计的特定领域编程语言。着色器程序是附加到 OpenGL 管道的可编程片段，用于控制图像渲染方式。使用 GLSL，我们可以实现各种滤镜，包括：

灰度滤镜： 该滤镜将每个像素的三个颜色通道（红色、绿色和蓝色）的平均值设置为新的像素颜色，从而产生黑白图像。
反转滤镜： 该滤镜将每个颜色通道的值从 1 中减去，产生一种类似负片的视觉效果。
马赛克滤镜： 该滤镜将图像划分为一系列小方格，并用每个方格中像素颜色的平均值填充该方格，从而创建一种马赛克效果。

代码示例

以下是使用 GLSL 在 OpenGL-ES 中实现上述滤镜的示例代码：

// 灰度滤镜
void main() {
  vec3 color = texture2D(inputTexture, texCoord).rgb;
  float gray = (color.r + color.g + color.b) / 3.0;
  gl_FragColor = vec4(gray, gray, gray, 1.0);
}

// 反转滤镜
void main() {
  vec3 color = texture2D(inputTexture, texCoord).rgb;
  gl_FragColor = vec4(1.0 - color.r, 1.0 - color.g, 1.0 - color.b, 1.0);
}

// 马赛克滤镜
void main() {
  vec2 texCoord = texCoord * 10.0;
  texCoord = floor(texCoord);
  texCoord /= 10.0;
  vec3 color = texture2D(inputTexture, texCoord).rgb;
  gl_FragColor = vec4(color, 1.0);
}