着色器输出与 Shadertoy (Raymarching) 不匹配

Question

我一直在尝试使用 Rust、SDL2 和 OpenGL (GLSL) 显示图形。几何体渲染得很好，但我在片段着色器中遇到颜色问题。我当前正在渲染两个三角形，它们一起形成一个覆盖整个屏幕的正方形。

正在绘制的顶点：

let vertices: Vec<f32> = vec![
// positions      
 1.0, -1.0, 0.0,   // bottom right
-1.0, -1.0, 0.0,  // bottom left
-1.0,  1.0, 0.0,   // top

-1.0,  1.0, 0.0,   // top
 1.0,  1.0, 0.0, // top right
 1.0, -1.0, 0.0,   // bottom right
];

这是我的顶点着色器：

#version 330 core

layout (location = 0) in vec3 Position;
out vec2 fragCoord;

void main() {
    gl_Position = vec4(Position, 1.0);
    fragCoord = Position.xy;
}

还有我的片段着色器：

#version 330 core

uniform vec2 u_resolution;
in vec2 fragCoord;
out vec4 fragColor;


void main() {
    vec2 uv = fragCoord.xy/u_resolution.xy;
    vec3 col = vec3(uv,0.0);
    fragColor = vec4(col, 1.0);
}

u_resolution

变量只是屏幕的尺寸（800 x 600）。对应的渲染是：

我向 Shadertoy.com 提交了以下着色器，它应该与我的相同：

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
    vec2 uv = fragCoord/iResolution.xy;
    vec3 col = vec3(uv,0.0);
    fragColor = vec4(col,1.0);
}

网站上的输出是：

我不明白这里发生了什么，网站上的几何形状是否有所不同？我的程序的最终目的是在 GPU 上运行光线行进器算法，但我不确定要渲染什么几何体。我的猜测只是一个覆盖整个屏幕的矩形（并根据相机进行变换），但我需要不同的东西吗？我希望能够单独控制每个像素的颜色，并使用光线行进而不是光栅器渲染几何图形。我的方法完全失效了吗？

编辑：我对图片最左侧的奇怪线条表示歉意，它们是我裁剪不当的结果。

Answer 1

你的

fragCoord

和Shadertoy的

fragCoord

其实不一样。

您的

fragCoord

在

vec2(-1.0)

到

vec2(1.0)

范围内。而 Shadertoy 的

fragCoord

则在

vec2(0.0)

到

iResolution

范围内（这正是您想要的）。

Shadertoy的

fragCoord

简单来说就是

gl_FragCoord.xy

，就是当前fragment的窗口相对坐标。