坐标操作

• out vec4 fragColor：这是输出参数，表示最终渲染到屏幕上的颜色
• in vec2 fragCoord：这是输入参数，表示当前像素在屏幕上的原始坐标
• iResolution.xy 是渲染目标（通常是窗口或帧缓冲区）的分辨率，表示屏幕的宽度和高度。
• length() 函数来计算向量（vec2/vec3/vec4）的的欧几里得长度

简单的颜色变化

将当前像素的颜色设置为基于其在屏幕上的位置

void mainImage (out vec4 fragColor, in vec2 fragCoord){
    vec2 uv = fragCoord / iResolution.xy;
    fragColor = vec4(uv, 0, 1.); // rgba
}

画个圆

在屏幕上绘制一个半径为 0.3 的白色圆形

void mainImage (out vec4 fragColor, in vec2 fragCoord){
    vec2 uv = fragCoord / iResolution.xy - vec2(.5);
    float c = 0.0;
    float r = 0.3;
    // 判断像素是否在圆形区域内
    if (length(uv) < r) {
      c = 1.0;
    }
    fragColor = vec4(vec3(c), 1.0); // rgba
}

画个正圆

void mainImage (out vec4 fragColor, in vec2 fragCoord) {
    // 将像素坐标平移到屏幕中心，并确保圆形不会因为宽高比不同而变形
    vec2 uv = (fragCoord - 0.5 * iResolution.xy) / min(iResolution.x,iResolution.y);
    float c = 0.0;
    float r = 0.3;
    if (length(uv) < r){
      c = 1.0;
    }
    fragColor = vec4(vec3(c),1.0); // rgba
}