首页 > 解决方案 > 片段着色器不会在 OpenGL GLSL 中创建像光一样的渐变

问题描述

我试图了解如何使用着色器操作我的渲染。我没有更改场景的投影矩阵,但我绘制了一个顶点 = {-0.5, -0.5} {0.5, -0.5} {0, 0.5} 的三角形。然后我将一个“光”的 vec2 位置传递给我的片段着色器的制服,我想从三角形的右上角(lightPos = (0.5,0.5))基本上照射到我的三角形上

这是一张非常糟糕的图画,描绘了所有东西的位置。

我用油漆做的可怕图像

这就是我在我的三角形中的目标(有点……它不需要从白色到蓝色,它只需要在靠近光的地方更亮,在更远的地方更暗)

示例图片

这是着色器

#version 460 core

in vec3 oPos;
out vec4 fragColor;

uniform vec3 u_outputColor;
uniform vec2 u_lightPosition;

void main(){

float intensity =  1 / length(oPos.xy - u_lightPosition);
vec4 col = vec4(u_outputColor, 1.0f);
fragColor = col * intensity; 
} 

这是编译着色器的基本代码(大部分都被抽象出来了,所以它相当简单)

/* Test data for shader program. */
program.init("passthrough.vert", "passthrough.frag");
program.setUniformVec3("u_outputColor", 0.3f, 0.3f, 0.8f);
program.setUniformVec2("u_lightPosition", 0.5f, 0.5f);



GLfloat vertices[9] = {-0.5f, -0.5, 0,    0,0.5f,0,    0.5, -0.5, 0};

这是顶点着色器:

#version 460 core

layout (location = 0) in vec3 aPos;
out vec3 oPos;

void main(){
    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
}

我运行的每一个测试,看看为什么我不能让它工作似乎告诉我,如果有轻微的颜色变化,它会将整个三角形变成不同的阴影。所有测试都在整个事物上显示一种颜色的三角形;完全没有渐变。我希望三角形是一个渐变,靠近光线更亮,远离它更暗。这让我发疯了,因为我已经在这样一个简单的事情上坚持了 3 个小时,而且似乎我编写的任何代码都会一次修改所有 3 个顶点,就好像它们在同一个位置一样。我把数学写出来了,我强烈地觉得这应该可行。非常感谢任何帮助。

编辑

解决方案后的三角形解决了我的问题:

在此处输入图像描述

标签: c++openglgraphicsglslshader

解决方案


试试这个为你的顶点着色器:

#version 460 core

layout (location = 0) in vec3 aPos;
out vec3 oPos;

void main(){
    oPos.xyz  = aPos.xyz; // ADD THIS LINE
    gl_Position = vec4(aPos.xyz, 1.0);
}

您的版本从不写入oPos,因此片段着色器获得 a) 随机值,或者在您的情况下为 b) vec3(0,0,0)。由于您的颜色计算基于:

float intensity =  1 / length(oPos.xy - u_lightPosition);

这与基本相同

float intensity =  1 / length(-1*u_lightPosition);

所以颜色只取决于光的位置。

您可以通过将片段颜色设置为来调试和验证这一点oPos

vec4 col = vec4(oPos.xy, oPos.z + 0.5, 1.0f);

如果oPos在顶点着色器中设置正确,那么片段着色器中的这条线将显示一个 RGB 渐变。如果oPos设置不正确,您将看到 50% 蓝色。

始终检查从 OpenGL 返回的错误和日志。它应该发出一个警告,让你直接解决这个问题。

另外,我很惊讶你的整个三角形没有被剪裁,因为顶点z0.


推荐阅读