功能描述:
以平面上某一个点为中心实现实现圆形波纹动态扩散的效果
效果:
参数:
//底色
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可以应用于带有纹理的混合。
