Shader Art Coding Introduction

先上链接和源码
Shader Art Coding Introduction (shadertoy.com)

/* This animation is the material of my first youtube tutorial about creative 
   coding, which is a video in which I try to introduce programmers to GLSL 
   and to the wonderful world of shaders, while also trying to share my recent 
   passion for this community.
                                       Video URL: https://youtu.be/f4s1h2YETNY
*/

//https://iquilezles.org/articles/palettes/
vec3 palette( float t ) {
    vec3 a = vec3(0.5, 0.5, 0.5);
    vec3 b = vec3(0.5, 0.5, 0.5);
    vec3 c = vec3(1.0, 1.0, 1.0);
    vec3 d = vec3(0.263,0.416,0.557);

    return a + b*cos( 6.28318*(c*t+d) );
}

//https://www.shadertoy.com/view/mtyGWy
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
    vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
    vec2 uv0 = uv;
    vec3 finalColor = vec3(0.0);
    
    for (float i = 0.0; i < 4.0; i++) {
        uv = fract(uv * 1.5) - 0.5;

        float d = length(uv) * exp(-length(uv0));

        vec3 col = palette(length(uv0) + i*.4 + iTime*.4);

        d = sin(d*8. + iTime)/8.;
        d = abs(d);

        d = pow(0.01 / d, 1.2);

        finalColor += col * d;
    }
    
        
    fragColor = vec4(finalColor, 1.0);
}

1. vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
   

   转换坐标到uv，uv.x的取值范围为[-ResolutionRatio, ResolutionRatio]，uv.y为[-1, 1]，ResolutionRatio为分辨率

2.     uv = fract(uv * 1.5) - 0.5;
   

   fract：取小数函数
   用于分割uv，1.5代表分割大小，数值越大，分割越细；-0.5代表偏移，越靠近0.5，每块图像越接近圆形

3.    float d = length(uv) * exp(-length(uv0));
   

将length(uv)映射到更小的区间（偏向黑色）

4.    vec3 col = palette(length(uv0) + i*.4 + iTime*.4);
   

色彩渐变
length(uv0)：提供圆环的色彩
i * .4 ：大小分层颜色区分
iTime * .4：内旋色彩

5.     d = sin(d*8. + iTime)/8.;
   

d*8. ：控制圆环出现的频率
/8.：圆环粗细

6.    d = abs(d);
   

可有可无，没有也不影响

7.     d = pow(0.01 / d, 1.2);
   

反色处理，形成白色圆环

8.     finalColor += col * d;
   

混色

9. for (float i = 0.0; i < 4.0; i++) 
   

分层嵌套，大环套小环