GLSL 黑科技：让抖音特效在 iOS 上炫起来！

IOS

2024-01-11 23:10:53

用 GLSL 在 iOS 中重现抖音特效

背景

抖音，一个风靡全球的短视频社区，以其海量的创意特效而闻名。这些特效丰富了我们的日常生活，让我们可以尽情释放想象力。

什么是 GLSL？

GLSL（OpenGL 着色语言）是一种专门为图形处理器（GPU）设计的编程语言。它允许开发人员直接操作图形渲染管道，充分发挥 GPU 的强大功能。

GLSL 赋能抖音特效

掌握了 GLSL，我们就能在 iOS 上重现抖音的特效，甚至创造出更加酷炫的效果。下面我们一步步揭秘 GLSL 的奥秘。

搭建 OpenGL 渲染管道

首先，使用 GLKit 建立一个 OpenGL 渲染管道，为特效展示搭建舞台。这个管道负责将纹理和着色数据传递给 GPU 进行处理。

编写 GLSL 着色器

下面列出几个常见的抖音特效及其对应的 GLSL 着色器：

抖动特效：

// 片段着色器
uniform float u_time;
uniform vec2 u_resolution;
varying vec2 v_texCoord;

void main()
{
  // 时间因子，产生动画效果
  float t = u_time;
  
  // 纹理采样，添加抖动偏移
  vec4 color = texture2D(u_image, v_texCoord);
  color.xy += vec2(sin(t) * 0.05, cos(t) * 0.05);
  
  // 设置输出颜色
  gl_FragColor = color;
}

模糊特效：

// 片段着色器
uniform float u_blurRadius;
uniform vec2 u_resolution;
varying vec2 v_texCoord;

void main()
{
  // 像素偏移量
  vec2 offset = vec2(u_blurRadius);
  
  // 图像采样，进行卷积模糊
  vec4 sum = vec4(0.0);
  for (float x = -3.0; x <= 3.0; x++) {
    for (float y = -3.0; y <= 3.0; y++) {
      sum += texture2D(u_image, v_texCoord + offset * vec2(x, y)) / 49.0;
    }
  }
  
  // 设置输出颜色
  gl_FragColor = sum;
}

马赛克特效：

// 片段着色器
uniform float u_blockSize;
uniform vec2 u_resolution;
varying vec2 v_texCoord;

void main()
{
  // 计算马赛克块的左下角
  vec2 blockCoord = vec2(
    (int)(v_texCoord.x / u_blockSize),
    (int)(v_texCoord.y / u_blockSize)
  );
  
  // 采样马赛克块的平均颜色
  vec4 color = vec4(0.0);
  for (float x = 0.0; x < u_blockSize; x++) {
    for (float y = 0.0; y < u_blockSize; y++) {
      color += texture2D(u_image, blockCoord + vec2(x, y) / u_blockSize) / (u_blockSize * u_blockSize);
    }
  }
  
  // 设置输出颜色
  gl_FragColor = color;
}