显式 uv.x 值与长度函数形成一条水平线

Question

我正在尝试更好地处理像 glsl 这样复杂的东西，但需要一些时间来掌握来自 PHP/JS 背景的某些概念。

在下面的片段着色器代码中，我不明白为什么我们会在中心得到一个水平条？

原点移到中心了，很好。 当我

+=

或

-=

uv.x

值时，它会添加或删除

每个

像素的 .x 值。这也可以理解为这样做会移动所得的圆。

但是，当您将此

-=

或

+=

更改为

=

时，这应该意味着每个像素的

.x

值 fixed 为

.2

（在本例中），这应该会给出一个混乱的图形因为每个像素都将自身移动到 x 轴上的

.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);
}

Answer 1

片段着色器针对每个片段（并发）执行，并且内置片段着色器输入变量

gl_FragCoord.xy

对于每个片段都是不同的。它的范围从左下片段的 (0, 0) 到右上片段的 (width, height)。因此

uv

坐标范围从 (-1aspect, -1) 到 (1aspect, 1)。

vec2 uv = gl_FragCoord.xy/u_resolution.xy;
uv.x *= u_resolution.x/u_resolution.y;

片段着色器的输出颜色取决于

uv

坐标：

gl_FragColor = vec4(vec3(step( .3, length(uv))), 1.0);

length(uv)

计算向量

uv

的长度。结果从点(0, 0)开始循环增加。如果向坐标的分量添加一个常量（例如

length(vec2(uv.x + 0.2, uv.y - 0.2))

，结果仍然取决于这两个分量，从而形成一个圆。
如果您将坐标

uv

的一个分量设置为常量值，这一情况会发生变化。因为这样每个片段的这个组件就不再不同了。您也可以将表达式替换为

uv.x = .2

，而不是设置

length(vec2(0.2, uv.y))

。这样，结果仅取决于 uv 坐标的 y 分量，从而产生条形而不是圆形。