明确的uv.x值形成了一个水平线,长度由函数确定。

huangapple go评论63阅读模式
英文:

Explicit uv.x value forms a horizontal line with length function

问题

在以下片段着色器代码中,我不明白为什么会在中心出现水平条?

原点被移到中心,没问题。
当我使用 +=-= 来改变 uv.x 的值时,它会对 每个 像素的 .x 值进行加法或减法运算。这也可以理解为这样做会移动结果圆圈的位置。

但是当你将 -=+= 更改为 = 时,这应该意味着每个像素的 .x 值都被固定为 .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 = 0.2;

  // Visualize the distance field
  gl_FragColor = vec4(vec3(step(0.3, length(uv))), 1.0);
}
英文:

I am trying to get better with something as complex as glsl but it's taking some time to grasp certain concepts coming from a PHP/JS background.

In the following fragment shader code, I don't understand why are we getting a horizontal bar in the center?

The origin is shifted to the center, fine.
And when I +=or -= the uv.x value, it's adding or subtracting the .x value for each pixel. That is also understood as doing this moves the resultant circle around.

But when you change this -= or += to just = it should mean that every pixel gets its .x value fixed to be .2(in this case) which should give a messed up graphic as every pixel is moving itself to the .2 spot on x-axis? Could someone please explain in layman terms? Thanks.

#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

得分: 1

length(vec2(0.2, uv.y)) 表达式的结果在同一行中的所有像素中都相等。


片段着色器并发地为每个片段执行,并且内置片段着色器输入变量 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 分量,从而生成条形而不是圆形。

英文:

Short answer:

The result of length(vec2(0.2, uv.y)) is equal for all the pixels in one row.


The fragment shader is executed (concurrently) for each fragment and the built-in fragment shader input variable gl_FragCoord.xy is different for each fragment. It ranges from (0, 0) for the bottom left fragment to (width, height) for the top right fragment. Therefore the uv coordinate ranges from (-1aspect, -1) to (1acpect, 1).

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

The output color of the fragment shader depends on the uv coordiante:

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

length(uv) calculates the length of the vector uv. The result increases circularly starting from point (0, 0). If you add a constant to the components of the coordinates (e.g. length(vec2(uv.x + 0.2, uv.y - 0.2)), the result still depends on the two components, resulting in a circle.
This changes if you set one component of the coordinate uv to a constant value. Because then this component is no longer different for each fragment. Instead of setting uv.x = .2, you can also replace the expression by length(vec2(0.2, uv.y)). This way the result depends only on the y-component of the uv-coordinate, resulting in a bar instead of a circular shape.

huangapple
  • 本文由 发表于 2023年7月28日 00:55:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/76781941.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定