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(vx, vy, 0.7-vy*vx); vec2 v = rotate2d(iGlobalTime) * uv; color *= vec3(vx, vy, 0.7-vy*vx);

使顏色漸變？ 如果有人喜歡在此處觀看代碼及其作用，則這里是代碼的鏈接： 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給您一個余弦。

希望這可以使事情順利進行。