如何在 WebGL 中制作一个波浪形的对称圆圈？

Question

我正在尝试开发一个可以调节圆上曲线数量的着色器，但我遇到了一个问题，因为它不对称。也就是说，虽然我可以增加圆的波纹度，但似乎所有波浪都来自左侧的一个点。

有一个shader here完美的展示了这个效果

如果单击上面的 ShaderToy link，您会注意到所有其他曲线似乎都来自原点（0 度）。也就是左边动的多，圆的右边几乎不动。

有什么方法可以修改这种效果，使生成的曲线更加对称吗？理想情况下，它看起来不像是从左侧开始的曲线，而是以更均匀的方式出现。

下面复制的着色器代码，以防您无法访问 ShaderToy link：

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    uv = uv * 2.0 - 1.0;
    uv.x *= iResolution.x / iResolution.y;

    float l = length(uv);
    float thi = atan(uv.y,uv.x);

    float freq = sin(iTime) * 9.5 + 5.0;
    float sina = sin(floor(freq) * thi);
    float sinb = sin(ceil(freq) * thi);
    float fr = fract(freq);

    float r = 0.5 + 0.05 * mix(sina, sinb, fr);
    //float r = 0.5 + 0.05 * sin(freq * thi);
    l = step(l,r);
    vec3 col = vec3(0.0,0.5,0.8);
    fragColor = vec4(col*l,1.0);
}

编辑： 糟糕，我没有意识到着色器 link 已设置为私有！现在应该修复了。

Answer 1

也许你可以去掉时间，给它一个固定的频率，然后把它们和base混合。 r = mix(0.5, r, abs(sin(iTime)));

或使其均匀以获得对称性。

https://www.shadertoy.com/view/sljBzm

Answer 2

这种方法的问题在于，对于每个整数频率，零点始终是正弦波的峰值。因此，共享那些山峰的地方似乎不会改变。

你必须选择一些点来考虑“零”角。但是你可以改变它的位置，这样峰就不会明显地相互叠加。

我已经为这个函数抽象了一个例子：

float ripples(float thi, float freq) {
    float adjustedThi = thi + freq;
    // causes each frequency to have it's zero peak at a different spot.

    return sin(floor(freq) * adjustedThi);
}

这让它更有机一些。

参见：https://www.shadertoy.com/view/NtSBWz

如何在 WebGL 中制作一个波浪形的对称圆圈？

How to make a wavy, symmetric circle in WebGL?

javascript

geometry

shader

webgl

trigonometry