Shadertoy-fragCoord对比iResolution对比fragColor [英] Shadertoy - fragCoord vs iResolution vs fragColor
问题描述
总体来说，我对Shadertoy和GLSL还是陌生的.我已经成功地将许多Shadertoy着色器复制到Blender中，而实际上并不知道它是如何工作的.我一直在寻找教程，但我更是视觉学习者.
如果有人可以解释甚至更好地提供一些图像来描述fragCoord，iResolution和&fragColor.那就太好了！
我主要对数字感兴趣.因为我使用Blender，所以我习惯将画布设置为0到1-或--1到1
这个特别让我有些困惑.
vec2 u =(fragCoord-iResolution.xy * .5)/iResolution.y * 8 .;
在不知道坐标系的情况下，我无法在Blender中再现其余代码.
任何帮助将不胜感激！
正常，如果不知道坐标系，则无法在Blender中重现此代码.
此图片是使用以下代码计算的:
//归一化的像素坐标(介于0和1之间)vec2 uv = fragCoord/iResolution.xy;//根据位置设置R和G值vec3 col = vec3(uv.x，uv.y，0);//输出到屏幕fragColor = vec4(col，1.0); 输出范围从左下角的 0,0 和右上角的 1,1 .这是OpenGL设置的默认左下窗口空间.
该图像是使用以下代码计算的:
//归一化的像素坐标(在-0.5和0.5之间)vec2 uv =(fragCoord-iResolution.xy * 0.5)/iResolution.xy;//根据位置设置R和G值vec3 col = vec3(uv.x，uv.y，0);//输出到屏幕fragColor = vec4(col，1.0); 输出范围从左下角的 -0.5，-0.5 和 0.5,0.5 第一步，我们从每个像素坐标[ fragCoord ]中减去窗口大小[ 0.5 ]的一半.您可以看到效果，直到很久以后，红色和绿色的值才可见.
您可能还想通过将第一步更改为
来仅对 y轴进行标准化 vec2 uv =(fragCoord-iResolution.xy * 0.5)/iResolution.y; 根据我们的目的，如果对两个轴进行归一化，则图像可能看起来很奇怪，因此这是一种可能的策略.
此图片是使用以下代码计算的:
//归一化的像素坐标(在-0.5到0.5之间)vec2 uv =(fragCoord-iResolution.xy * 0.5)/iResolution.xy;//使用ceil()函数根据位置设置R和G值//ceil()函数返回大于uv值的最小整数vec3 col = vec3(ceil(uv.x)，ceil(uv.y)，0);//输出到屏幕fragColor = vec4(col，1.0); ceil()函数使我们可以看到图像的中心是0，0
关于shadertoy文档的第二部分:
输出颜色以fragColor作为四分量向量返回，客户端忽略的最后一个组件.结果是在"out"中检索到预期将来会有变数多个渲染目标.
这真的意味着 fragColor 包含四个值，这些值被购物到渲染管道的下一个阶段.您可以在此处找到有关in和out变量的更多信息.
fragColor 中的值确定要应用着色器的像素的颜色.
如果您想了解有关着色器的更多信息，这些是一些不错的起点:
I'm fairly new to Shadertoy and GLSL in general. I have successfully duplicated numerous Shadertoy shaders into Blender without actually knowing how it all works. I have looked for tutorials but I'm more of a visual learner.
If someone could explain or, even better, provide some images that describe the difference between fragCoord, iResolution, & fragColor. That would be great!
I'm mainly interested in the Numbers. Because I use Blender I'm used to the canvas being 0 to 1 -or- -1 to 1
This one in particular has me a bit confused.
vec2 u = (fragCoord - iResolution.xy * .5) / iResolution.y * 8.;
I can't reproduce the remaining code in Blender without knowing the coordinate system.
Any help would be greatly appreciated!
It is normal, you cannot reproduce this code in blender without knowing the coordinate system.
The Shadertoy documentation states:
Image shaders implement the mainImage() function to generate procedural images by calculating a color for each pixel in the image. This function is invoked once in each pixel and the host application must provide the appropriate input data and retrieve the output color to assign it to the corresponding pixel on the screen. The signature of this function is:
void mainImage( out vec4 fragColor, in vec2 fragCoord);
where fragCoord contains the coordinates of the pixel for which the shader must calculate a color. These coordinates are counted in pixels with values from 0.5 to resolution-0.5 over the entire rendering surface and the resolution of this surface is transmitted to the shader via the uniform iResolution variable.
Let me explain.
The iResolution variable is a uniform vec3 which contains the dimensions of the window and is sent to the shader with some openGL code.
The fragCoord variable is a built-in variable that contains the coordinates of the pixel where the shader is being applied.
More concretely:
- fragCoord : is a
vec2that is between 0 > 640 on the X axis and 0 > 360 on the Y axis - iResolution : is a
vec2with an X value of 640 and a Y value of 360
This image was calculated with the following code:
// 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);
The output ranges from 0,0 in the lower-left and 1,1 in the upper-right. This is the default lower-left windows space set by OpenGL.
This an image was calculated with the following code:
// 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);
The output ranges from -0.5,-0.5 in the lower-left and 0.5,0.5 because
in the first step we subtract half of the window size [0.5] from each pixel coordinate [fragCoord]. You can see the effect in the way the red and green values don't kick into visibility until much later.
You might also want to normalize only the y axis by changing the first step to
vec2 uv = (fragCoord - iResolution.xy * 0.5)/iResolution.y;
Depending our your purpose the image can seem strange if you normalize both axes so this is a possible strategy.
This an image was calculated with the following code:
// 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);
The ceil() function allows us to see that the center of the image is 0, 0
As for the second part of the shadertoy documentation:
The output color is returned in fragColor as a four-component vector, the last component being ignored by the client. The result is retrieved in an "out" variable in anticipation of the future addition of several rendering targets.
Really all this means is that fragColor contains four values that are shopped to the next stage in the rendering pipeline. You can find more about in and out variables here.
The values in fragColor determine the color of the pixel where the shader is being applied.
If you want to learn more about shaders these are some good starting places:
the book of shader - uniform
learn OpenGL - shader
这篇关于Shadertoy-fragCoord对比iResolution对比fragColor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
