shadertoy 游戏《来自星尘》摇杆复刻

正确的做法应该是上 noise 而不是叠加 sin 波，不过如果不想麻烦的话叠波还是一个不错的选择：整体效果如下，已经非常形似

直接上链接：Shader - Shadertoy BETA

float radiusScale = 0.9;
float variation(vec2 v1, vec2 v2, float strength, float speed)
{float v = dot(normalize(v1), normalize(v2));return sin(v * strength - iTime * speed) / 50.0+ sin(v * strength * 3.0 - iTime * speed) / 450.0;
}float paintCircle(vec2 uv, vec2 center, vec2 center2, float rad, float width, float strong, float speed)
{width *= radiusScale;rad *= radiusScale;vec2 diff = center - uv;float len = max(step(center2.y, uv.y) * length(center2 - uv) + step(uv.y, center.y) * length(center - uv), abs(uv.x - center.x));float normal = max(-normalize(diff).y, 0.0) * max(-normalize(diff).y, 0.0);len += variation(diff, vec2(0.0, 1.0), strong, speed) * normal;len -= variation(diff, vec2(1.0, 0.0), strong, speed) * normal;rad -= 0.15 * max((uv.y - 0.55), 0.0);return step(abs(len - rad), width);
}void mainImage(out vec4 fragColor, in vec2 fragCoord)
{vec2 uv = fragCoord.xy / iResolution.xy;uv.y += 0.1;uv.x *= 1.5;uv.x -= 0.25;float color;float radius = 0.24 * radiusScale;float think1 = radius / 13.0;float think2 = think1 / 3.0;vec2 center = vec2(0.5, 0.5);color = max(color, paintCircle(uv, center, vec2(0.5, 0.7), radius, think1, 5.0, 7.2));color += paintCircle(uv, center, vec2(0.5, 0.72), radius + think1 / 2.0, think2, 6.5, 7.8);color = max(color, paintCircle(uv, center, vec2(0.5, 0.74), radius + think1 * 2.0, think2, 6.5, 8.4));color = max(color, paintCircle(uv, center, vec2(0.5, 0.76), radius + think1 * 2.0 + think2 * 4.0, think2, 7.0, 9.0));color = max(color, paintCircle(uv, center, vec2(0.5, 0.78), radius + think1 * 2.0 + think2 * 8.0, think2, 8.0, 10.2));fragColor = vec4(color * vec3(1.5 - uv.y, 1.0, 1.0), 1.0);
}

整体没啥难度，就不上教学了吧，链接里左边效果右边就是代码了，可以自行参考