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

发布于 2025-01-27 11:02:29 字数 1035 浏览 4 评论 0原文

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

这里有一个 Shader ，这很好地证明了这种效果。

如果单击上面的Shadertoy链接，您会注意到它似乎所有附加曲线都来自原点（0度）。也就是说，左侧移动很多，圆的右侧几乎没有移动。

有什么方法可以修改这种效果，使曲线在其一代中更对称？理想情况下，看起来曲线是源自左侧的，而是以更统一的方式出现。

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

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);
}

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

原文

I'm trying to develop a shader where I can modulate the the number of curves on a circle, but I'm having an issue in that it is not symmetric. That is, while I can increase the waviness of the circle, it appears as if all waves come from a point on the left-hand-side.

There's a shader here which demonstrates this effect perfectly.

If you click on the ShaderToy link above, you'll notice that the it appears that all the additional curves come from the origin (0 degrees). That is, the left side moves a lot, and the right side of the circle hardly moves at all.

Is there any way to modify this effect such that the curves are more symmetrical in their generation? Ideally it wouldn't look like the curves are originating from the left-hand side, but rather appear in a more uniform manner.

Shader code copied below in case you cannot access the 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);
}

Edit: Oops, I didn't realize the shader link was set to private! Should be fixed now.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

愚人国度 2025-02-03 11:02:29

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

您必须选择一些点才能考虑“零”角度。但是，您可以改变那的位置，因此峰值不会显然彼此堆叠。

我已经将其提取了一个示例：

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/view/ntsbwz

The problem with this approach is that for each integer frequency the zero point will always be peak on the sin wave. So that place that shares those peaks will appear to not change.

You have to pick some point to consider the "zero" angle. But you can vary where that is so the peaks don't noticeably stack up on each other.

I've abstracted an example of that to this function:

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);
}

This makes it a bit more organic.

See: https://www.shadertoy.com/view/NtSBWz

回复收藏 0 原文