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

我不明白为什么我们需要标准化的向量的点积和它是如何选择exacly：

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 +波纹）。最简单的波浪功能是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给你余弦。

希望这可以清理一些东西。