功能描述：
实现一个圆形与中心圆形之间相互融合吸引的动态效果
效果：
参数：
//移动
point: { value: [ 0.5, 0.5 ], editor: { slide : true, range : [0,1], step: 0.01 } }
radius: { value: 0.1, editor: { slide : true, range : [0,1], step: 0.01 } }
核心思路：
实现效果的核心是需要设计一个函数，使得在两个圆形接近的范围内实现平滑过渡。因此函数的入参与两个圆形的位置、半径有关。而根据uv坐标可以计算每个圆围绕其圆心衰减的距离场，因此函数可以设计为两个圆的距离场叠加获得每个点位置的距离场之和，再通过使用此数值作为阈值来控制图像的显示即可。
float energy(float r, vec2 p1, vec2 p2) {
return (r * r) / ((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y));
}
vec4 frag () {
vec4 col = mainColor * texture(mainTexture, v_uv);
float fragEnergy = energy(radius + 0.1, v_uv.xy, vec2(0.5)) + energy(radius, v_uv.xy, point);
col.rgb = mix(vec3(0.0),col.rgb,smoothstep(0.95, 1.0, fragEnergy));
return CCFragOutput(col);
}
扩展：有点类似于动态计算SDF，因此还可以设计出其他更有趣的效果。