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

正常，您不知道坐标系就无法在Blender中重现此代码。

shadertoy网站声明为：

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

void mainImage（在vec4 fragColor中，在vec2 fragCoord中；]]

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

让我解释一下。

iResolution变量是uniform vec3，这意味着将使用一些openGL代码将窗口的尺寸发送到着色器。

[fragCoord是内置变量，它将具有应用着色器的像素坐标。

关于进一步的解释，请参见变量的那些值：

• fragCoord：X轴范围从0到640，Y轴范围从0到360
• iResolution
：对于X值为640，对于Y值为360

这里是标准的规范化uv：

该图像是通过变量vec2 uv = fragCoord/iResolution.xy;获得的我们可以看到输出范围从左下角的0,0到右上角的1,1。这是OpenGL设置的默认左下窗口空间。

此图像是通过变量vec2 uv = (fragCoord - iResolution.xy * 0.5)/iResolution.y;获得的但是你为什么要问？首先用(fragCoord - iResolution.xy * 0.5)将窗口大小的一半减去每个像素坐标。然后用/iResolution.y标准化Y轴上的输出。我们不想除以iResolution.xy，因为图像将在X轴和Y轴之间压缩，并且会变得很奇怪。输出是以屏幕中心为中心的图像，如果我们[uv坐标] ceil()，则得到的该图像将清楚地显示图像的中心点为0,0左下角是-0.5,-0.5，右上角是0.5,0.5。

现在是shadertoy语句的第二部分：

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

将变量标签设为out将能够与渲染管道的下一个阶段“进行通信”。从而使颜色在其他环境下显示在屏幕上More info over here。因此，变量fragColor是将在其上应用着色器的像素的颜色之外的变量！

如果您想在此处了解有关着色器的更多信息，请点击以下链接：

the book of shader - uniformlearn OpenGL - shader