shader编程经典：呼吸发光圆环

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

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

3.shader编程经典：呼吸发光圆环2023-05-16

4.shader编程经典：分形--科赫（雪花）曲线2023-06-01

收起

“呼吸发光圆环”是对shader编程基础画圆、画线很好的应用案例。

#define R .5
#define RT 0.1
#define FADE 0.05

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
	vec2 uv = (fragCoord.xy-0.5 * iResolution.xy) / iResolution.y; 
    vec3 col = vec3(0.);
    float t = sin(iTime * 3.1415 + .1);
    uv *= 2. + .5 * t;
    float d = length(uv);

    col += smoothstep((RT + FADE) / 2.0, FADE / 2.0, abs(d - R + (RT / 2. + FADE / 2.)));
    col *= 1. - (t + 1.) / 4.;
    fragColor = vec4(col, 1.);
}

这里的“呼吸”效果主要是通过sin周期函数来缩放uv实现，通过smoothstep函数来绘制圆环和平滑发光区域渐隐。

基础知识

• shader编程基础：画圆
• shader编程基础：画线