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

Question

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

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

我的问题是为什么你可以通过将fragCoord的x坐标除以iResolution（屏幕尺寸）来将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

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

Answer 2

其他答案都是正确的。 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，屏幕看起来正如评论所说的那样

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

请注意，如果您是GLSL和WebGL的新手，您可能需要考虑一些webgl tutorials。另见this answer about shadertoy