ShaderJoy——用GLSL打造漫画笔触效果

前端

2024-02-08 00:25:02

在本文中，您将学习到：

使用ShaderJoy创建自定义着色器
如何使用阈值分割和边缘检测来创建漫画笔触效果
如何使用Photoshop中的图层来微调效果

无论您是平面设计师、插画师还是游戏开发者，本教程都将帮助您掌握使用ShaderJoy创建漫画笔触效果的技巧。

漫画笔触效果背后的算法原理

该效果的核心思路一共分为以下几步【参考 Photoshop 中的图层操作】：

根据图像的亮度，人为设定阈值，将图像分割成两部分：亮部和暗部。
使用边缘检测算法，检测图像中的边缘。
将亮部和暗部分别赋予不同的颜色，并使用边缘作为分界线。
将两部分融合在一起，即可得到漫画笔触效果。

在ShaderJoy中实现漫画笔触效果

现在，让我们开始在ShaderJoy中实现漫画笔触效果。

首先，我们需要创建一个新的着色器项目。
然后，在着色器编辑器中添加以下代码：

// 阈值
uniform float threshold = 0.5;

// 边缘检测核
const vec2 edgeDetectionKernel[9] = {
  vec2(-1, -1), vec2(0, -1), vec2(1, -1),
  vec2(-1, 0), vec2(0, 0), vec2(1, 0),
  vec2(-1, 1), vec2(0, 1), vec2(1, 1)
};

void main() {
  // 获取片段颜色
  vec4 color = texture2D(u_texture, v_texCoord);

  // 亮度
  float brightness = dot(color.rgb, vec3(0.2126, 0.7152, 0.0722));

  // 阈值分割
  float mask = step(threshold, brightness);

  // 边缘检测
  vec2 gradient = vec2(0, 0);
  for (int i = 0; i < 9; i++) {
    vec4 sample = texture2D(u_texture, v_texCoord + edgeDetectionKernel[i] * 0.01);
    gradient += sample.rgb - color.rgb;
  }

  // 计算法线
  vec2 normal = normalize(gradient);

  // 计算光照
  vec3 lightDirection = vec3(0.5, 0.5, 1.0);
  float diffuse = dot(normal, lightDirection);
  diffuse = max(diffuse, 0.0);

  // 合并颜色
  color.rgb = mix(vec3(0.0, 0.0, 0.0), color.rgb, mask);
  color.rgb = mix(vec3(1.0, 1.0, 1.0), color.rgb, diffuse);

  // 输出颜色
  gl_FragColor = color;
}