WebGL 代码解释 - 为什么它会这样工作

Question

我正在尝试制作一个稍微发光的灯泡，然后它会变得不那么强烈。在边缘也稍微暗一点。我找到了一个代码，我认为它创建了我想要创建的效果，但我似乎不太了解它。代码如下：

mat2 rotate2d(float angle){
return mat2(cos(angle),-sin(angle),
            sin(angle),cos(angle));
    }

float variation(vec2 v1, vec2 v2, float strength, float speed) {
    return sin(
        dot(normalize(v1), normalize(v2)) * strength + iGlobalTime * speed
    ) / 100.0;
}

vec3 paintCircle (vec2 uv, vec2 center, float rad, float width) {

    vec2 diff = center-uv;
    float len = length(diff);

    len += variation(diff, vec2(0.0, 1.0), 5.0, 2.0);
    len -= variation(diff, vec2(1.0, 0.0), 5.0, 2.0);

    float circle = smoothstep(rad-width, rad, len) - smoothstep(rad, rad+width, len);
    return vec3(circle);
}


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

    vec3 color;
    float radius = 0.35;
    vec2 center = vec2(0.5);


    //paint color circle
    color = paintCircle(uv, center, radius, 0.1);

    //color with gradient
    vec2 v = rotate2d(iGlobalTime) * uv;
    color *= vec3(v.x, v.y, 0.7-v.y*v.x);

    //paint white circle
    color += paintCircle(uv, center, radius, 0.01);


    fragColor = vec4(color, 1.0);
}

我不明白为什么我们需要归一化向量的点积以及它是如何精确选择的：

len += variation(diff, vec2(0.0, 1.0), 5.0, 2.0);
len -= variation(diff, vec2(1.0, 0.0), 5.0, 2.0);

我的意思是 - 为什么先加，然后减？ 那为什么会这样：

vec2 uv = fragCoord.xy / iResolution.xy;
uv.x *= 1.5;
uv.x -= 0.25;

这是怎么做到的 vec2 v = rotate2d(iGlobalTime) * uv; color *= vec3(v.x, v.y, 0.7-v.y*v.x);

使颜色渐变？ 如果有人更喜欢在那里观看代码以及它的作用，这里是代码的链接：https://www.shadertoy.com/view/ltBXRc。 我显然不太擅长几何。如果有人可以帮助我，我将不胜感激:)

Answer 1

如果我们想画一个完美的圆，我们只需绘制距离场景中心一定距离的所有点。从程序上讲，我们将从中心开始，选择任何随机方向，在该方向上走一段距离r，然后绘制一个点。然后返回中心，选择其他方向，走相同的距离r，然后绘制另一个点。依此类推，直到我们有一个平滑的圆圈： r = 1

要绘制一个扭曲的圆，我们可以根据我们面对的方向改变距离r。如果我们将方向表示为以弧度表示的角度 (theta)，那么 r 将是该角度的某个函数。具体是什么功能？让我们先尝试一些简单的事情：r = theta

不是我们想要的安静，它应该更像一个圆圈（r = 1），但有点波纹（r = 1 + waviness）。最简单的波浪函数是sin(x)。让我们尝试添加它：r = 1 + 0.1 * sin(5 * theta)

通过改变数字，我们可以控制波的幅度和频率。但是对称性太多了，要打破它，我们需要比正弦波更复杂的东西。

这个怪物怎么样sin(5 * sin(x)) - sin(5 * cos(x))

我们把它加到圈子r = 1 + 0.1 * sin(5 * sin(theta)) - 0.1 * sin(5 * cos(theta))

对我来说看起来不错。

着色器完全执行这种失真，但以不同的方式。使用标准基向量进行点积只会为您提供向量的 X 或 Y 坐标。我们可以将该位重写为：

len += 0.02 * sin(normalize(diff).y * 5.0 + 2.0 * iGlobalTime);
len -= 0.02 * sin(normalize(diff).x * 5.0 + 2.0 * iGlobalTime);

归一化向量的 X 和 Y 坐标只是该向量表示的角度的 sin 和 cos。所以，normalize(diff).y 给你一个角的正弦，normalize(diff).x 给你余弦。

希望这能把事情弄清楚一点。