GLSL片段着色器中uv.x赋值固定值为何生成水平条？

我具备PHP/JS开发背景，正在学习GLSL，对部分概念的掌握需要时间。在以下片段着色器代码中，我无法理解为何会在画面中心生成水平条：原点已平移至中心，当我对uv.x执行+=或-=操作时，是为每个像素的x分量做加减，这会使生成的圆形移动，这点我已理解。但将操作改为直接赋值uv.x = .2时，我原本认为每个像素的x分量被固定为0.2会导致图形错乱，为何实际却生成水平条？

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;

void main(){
  vec2 uv = gl_FragCoord.xy/u_resolution.xy;
  uv.x *= u_resolution.x/u_resolution.y;

  // Remap the space to -1. to 1.
  uv = uv *2.-1.;

  // The following will move the circle around
  // uv.x += 0.2;
  // uv.x -= 0.2;

  // But why does this creates the horizontal bar?
  uv.x = .2;

  // Visualize the distance field
  gl_FragColor = vec4(vec3(step( .3, length(uv))),1.0);
}

通俗解释 #

核心是每个像素独立计算，拆解来看：

1. 原本每个像素的uv坐标是独一无二的——左边像素uv.x小，右边的大，上边uv.y大，下边的小。
2. 当你给uv.x = .2时，只是把当前计算的这个像素的x坐标强行改成0.2，但它的y坐标还是原来的数值（从上到下在-1到1之间变化）。
3. 接下来计算length(uv)，也就是新坐标(0.2, uv.y)到原点的距离，这个距离只和uv.y有关：sqrt(0.2² + uv.y²)。
4. step(.3, length(uv))的规则是：距离≥0.3时显示白色（1），否则显示黑色（0）。咱们算一下临界值：
   平方后得 0.04 + uv.y² ≤ 0.09 → uv.y² ≤ 0.05 → uv.y在≈-0.22到0.22之间。
5. 所有uv.y落在这个区间的像素，都会显示黑色，这些像素刚好是画面中间一段水平区域，所以最终呈现出水平条。

直白点说：你把每个像素的x坐标都钉在0.2的位置，但y坐标还是上下分布，所以这些点到原点的距离只由y决定，符合条件的y值就是中间一条线，自然形成水平条。

内容的提问来源于stack exchange，提问作者Mr.Coder