WebGL代碼的解釋 - 爲什麼它的工作方式

我試圖讓燈泡發光一點，然後變得不那麼激烈。也在邊緣有點暗淡。我找到了一個代碼，我認爲它創建了我想創建的效果，但我似乎並沒有很好地理解它。下面的代碼：WebGL代碼的解釋 - 爲什麼它的工作方式

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。我顯然不是很擅長几何。如果有人可以幫助我，我會很感激它:)

來源

2015-10-24 vixenn

如果我們想畫一個完美的圓，我們將簡單地繪製所有點從場景的中心位於一定的距離。程序上講，我們將從中心開始，選擇任意方向，在該方向上走一段距離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給你餘弦。

希望這可以清理一些東西。

來源

2015-10-25 00:52:49

是的，它的確如此。謝謝：） – vixenn

WebGL代碼的解釋 - 爲什麼它的工作方式

回答

相關問題