这个计算究竟意味着什么？

Question

我是 GLSL 的新手，并从此处的教程中学习。 （它正在使用 ShaderToy）

https://gamedevelopment.tutsplus.com/tutorials/a-beginners-guide-to-coding-graphics-shaders--cms-23313

我的问题是为什么您可以通过将 fragCoord 的 x 坐标除以 iResolution(screensize) 来将 x 坐标设置为 0-1。

这可能只是一个数学问题，但我很困惑“iResolution.x”究竟表示什么或这里进行了什么样的计算。 （是矢量划分吗？）

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 xy = fragCoord.xy; //We obtain our coordinates for the current pixel
    xy.x = xy.x / iResolution.x; //We divide the coordinates by the screen size
    xy.y = xy.y / iResolution.y;
    // Now x is 0 for the leftmost pixel, and 1 for the rightmost pixel
    vec4 solidRed = vec4(0,0.0,0.0,1.0); //This is actually black right now
    if(xy.x > 0.5){
        solidRed.r = 1.0; //Set its red component to 1.0
    }
    fragColor = solidRed;
}

Answer 1

其他答案都是正确的。 fragCoord 是当前正在绘制的像素，iResolution 是屏幕的大小所以

xy.x = xy.x / iResolution.x; //We divide the coordinates by the screen size
xy.y = xy.y / iResolution.y

给出标准化值，其中 xy.x 从 0 变为 1，xy.y 在屏幕上从 0 变为 1，这似乎 正是 cmets 所说的

需要注意的是，iResolution 和 fragCoord 是用户变量。在这种情况下，我猜你是从 Shadertoy 获得这个 GLSL。这些变量不是 WebGL 或 GLSL 的一部分，它们由 Shadertoy 定义，因此它们的值和含义由 shadertoy 定义。

请注意，如果您不熟悉 GLSL 和 WebGL，您可能需要考虑一些 webgl tutorials。另见this answer about shadertoy

Answer 2

iResolution.x 是屏幕的宽度（以像素为单位）。将像素 x 位置除以总宽度会将位置转换为屏幕宽度的一小部分。因此，如果您的屏幕是 1000 像素宽，并且您的当前位置是 x=500，xy.x = xy.x / iResolution.x; 会将xy.x 转换为 0.500。