[小白自学]Shader-02-实现通道错位Glitch Art(补档)

Showcase
#1

（说明：本帖子是补之前发的不知是什么原因找不到了的part02的记录）

功能描述：
使用RGB通道错位实现类似tiktok图标的色彩溢出效果。
效果：

ezgif-7acf95b09272fa
ezgif-7acf95b09272fa800×411 2.34 MB

参数：

mainTexture:    { value: white }
//色彩通道偏移方向x,y
point:      {value: [0.5, 0.5], editor: { slide : true, range : [0,1], step: 0.01 } }

核心思路：
根据uv通道的偏移距离分别对RGB三个颜色通道进行采样并绘制。

vec4 frag () {
    //以中心为坐标基准点
    vec2 center = vec2(0.5, 0.5);
    //求取偏移方向向量
    vec2 normalDist = normalize(point - center);
    //计算uv偏移量
    vec2 v_uv_r = v_uv;
    vec2 v_uv_g = clamp(v_uv + normalDist * 0.02, 0.0, 1.0);
    vec2 v_uv_b = clamp(v_uv + normalDist * 0.03, 0.0, 1.0);
    //分别进行逐通道纹理采样
    float col_r = texture(mainTexture, v_uv_r).r;
    float col_g = texture(mainTexture, v_uv_g).g;
    float col_b = texture(mainTexture, v_uv_b).b;

    return CCFragOutput(vec4(col_r, col_g, col_b, 1.0));
  }
3赞