Shadertoy - fragCoord vs iResolution vs fragColor

Question

总的来说，我对 Shadertoy 和 GLSL 相当陌生。我已经成功地将许多 Shadertoy 着色器复制到 Blender 中，但实际上并不知道它是如何工作的。我一直在寻找教程，但我更像是一个视觉学习者。

如果有人可以解释，或者甚至更好，提供一些描述 fragCoord、iResolution 和 fragColor 之间差异的图像。那很好啊！

我主要对数字感兴趣。因为我使用 Blender 我习惯了画布是 0 到 1 -或- -1 到 1

这个特别让我有点困惑。

vec2 u = (fragCoord - iResolution.xy * .5) / iResolution.y * 8.;

在不知道坐标系的情况下，我无法在 Blender 中重现剩余的代码。

任何帮助将不胜感激！

Answer 1

这是正常的，您无法在不知道坐标系的情况下在搅拌机中重现此代码。

Shadertoy 文档指出：

图像着色器实现 mainImage() 函数，通过计算图像中每个像素的颜色来生成程序图像。此函数在每个像素中调用一次，主机应用程序必须提供适当的输入数据并检索输出颜色以将其分配给屏幕上的相应像素。这个函数的签名是：

void mainImage(out vec4 fragColor, in vec2 fragCoord);

其中 fragCoord 包含着色器必须为其计算颜色的像素的坐标。这些坐标以像素为单位进行计数，在整个渲染表面上的值从 0.5 到分辨率 0.5，并且该表面的分辨率通过统一的 iResolution 变量传输到着色器。

让我解释。

该iResolution变量是一个uniform vec3包含该窗口的尺寸和被发送到与一些openGL的代码着色器。

该fragCoord变量是一个内置变量，其中包含应用着色器的像素的坐标。

更具体地说：

• fragCoord :vec2在 X 轴上的 0 > 640 和 Y 轴上的 0 > 360 之间
• iResolution：vec2X 值为 640，Y 值为 360

此图像是使用以下代码计算的：

    // Normalized pixel coordinates (between 0 and 1)
    vec2 uv = fragCoord/iResolution.xy;

    // Set R and G values based on position
    vec3 col = vec3(uv.x,uv.y,0);

    // Output to screen
    fragColor = vec4(col,1.0);

输出范围从0,0左下角1,1到右上角。这是 OpenGL 设置的默认左下角窗口空间。

这个图像是用以下代码计算的：

    // Normalized pixel coordinates (between -0.5 and 0.5)
    vec2 uv = (fragCoord - iResolution.xy * 0.5)/iResolution.xy;
    
    // Set R and G values based on position
    vec3 col = vec3(uv.x,uv.y,0);

    // Output to screen
    fragColor = vec4(col,1.0);

输出范围从-0.5,-0.5左下角开始，0.5,0.5因为在第一步中我们0.5从每个像素坐标 [ fragCoord] 中减去窗口大小 [ ] 的一半。您可以看到红色和绿色值直到很久以后才开始可见的效果。

您可能还想通过将第一步更改为仅标准化y 轴

vec2 uv = (fragCoord - iResolution.xy * 0.5)/iResolution.y;

根据我们的目的，如果您对两个轴进行标准化，图像可能看起来很奇怪，因此这是一种可能的策略。

这个图像是用以下代码计算的：

    // Normalized pixel coordinates (between -0.5 to 0.5)
    vec2 uv = (fragCoord - iResolution.xy * 0.5)/iResolution.xy;
   
    // Set R and G values based on position using ceil() function
    // The ceil() function returns the smallest integer that is greater than the uv value
    vec3 col = vec3(ceil(uv.x),ceil(uv.y),0);

    // Output to screen
    fragColor = vec4(col,1.0);

该ceil()函数可以让我们看到图像的中心是 0, 0

至于shadertoy文档的第二部分：

输出颜色在 fragColor 中作为四分量向量返回，客户端忽略最后一个分量。结果在“out”变量中检索，以预期将来会添加多个渲染目标。

实际上，这一切意味着fragColor包含四个值，这些值被购买到渲染管道的下一个阶段。您可以在此处找到有关输入和输出变量的更多信息。

中的值fragColor确定应用着色器的像素的颜色。

如果您想了解有关着色器的更多信息，这些是一些不错的起点：

着色器之书——统一
学习OpenGL——着色器