shader程式設計基礎:畫線

寡人正在Coding發表於2023-05-16

以sin曲線為例,任何函式曲線畫法類似。
畫線原理雖然十分簡單,卻是複雜圖形曲線繪製的基礎。
uv和smoothstep等函式不清楚請參考跳轉連結: shader程式設計基礎:畫圓
image

#define T .01

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
	vec2 uv = (fragCoord.xy-0.5 * iResolution.xy) / iResolution.y; 
    vec3 col = vec3(0.);
    
    uv *= 4.;
    
    
    vec2 curve = vec2(uv.x, sin(uv.x + iTime * 3.1415926));
    float d = length(uv - curve);
    col += smoothstep(T, .0, d);

    fragColor = vec4(col, 1.);
}
  • T:線的粗細
  • uv: 畫素在螢幕空間的標準化位置
  • curve:sin曲線在當前標準化座標系x = uv.x下的位置
  • d:當前uv座標距離curve的長度

同過對映將確定當前座標點的uv,計算當前曲線x = uv.x的位置,進而計算當前uv座標和curve在x = uv.x的座標的距離長度,透過smoothstep計算顯示的顏色(即距離d < 0輸出為1, 0 < d < 0.01輸出為1到0,d > 0.01輸出為0),越靠近曲線顏色變白,遠離曲線變黑,直到到達T即0.01,顏色col = vec3(1., 1., 1.)純黑。

相關文章