shader编程基础：画线

合集 - Shader基础和经典复刻(4)

1.shader编程基础：画圆2023-05-16

2.shader编程基础：画线2023-05-16

3.shader编程经典：呼吸发光圆环2023-05-164.shader编程经典：分形--科赫（雪花）曲线2023-06-01

收起

以sin曲线为例，任何函数曲线画法类似。
画线原理虽然十分简单，却是复杂图形曲线绘制的基础。
uv和smoothstep等函数不清楚请参考跳转链接： shader编程基础：画圆

#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.)纯黑。