[小白自学]Shader-01-三行代码实现动态波纹扩散

功能描述:
以平面上某一个点为中心实现实现圆形波纹动态扩散的效果
效果:


参数:

//底色
mainColor:     { value: [1, 1, 1, 1], editor: { type: color } }
//波纹颜色
subColor:      { value: [0, 0, 1, 1], editor: { type: color } }
//点位置
point:         { value: [0, 0], range: [0, 1], editor: { type: range } }
//扩散频率(宽度)
frequency :    { value: 1, editor: { slide : true, range : [1,100], step: 1 } }
//扩散速度
speed :        { value: 1, editor: { slide : true, range : [0,10], step: 0.1 } } 

核心思路:
根据像素距离中心点的位置,使用正弦函数绘制随时间波动的点的颜色。

  vec4 frag () {
    //求距离
    float dist = distance(v_uv, point);
    //计算正弦波
    float sineWave = sin(dist * frequency - cc_time.x * speed) * 0.5 + 0.5;
    //平滑过渡混合
    vec4 col = mix(mainColor, subColor, smoothstep(0.0, 1.0, sineWave));
    
    return CCFragOutput(col);
  }

扩展:此Pattern可以应用于带有纹理的混合。

4赞

感谢分享,