问题描述
我的片段着色器中有这个笑脸面具,它占据了整个窗口(1)。
我将较小的坐标传递给顶点着色器,试图将笑脸缩小到一个较小的盒子中(2)(预期结果)。
然而,结果是(3)。
如何才能使片段着色器适合我传递给顶点着色器的坐标,使其看起来像 (2) 而不是 (3)?
-- 顶点着色器 --
#version 300 es
layout(location=0) in vec3 vPosition;
void main() {
gl_Position = vec4(vPosition,1.0);
}
-- 片段着色器 --
#version 300 es
precision mediump float;
uniform float width;
uniform float height;
out vec4 fragColor;
float Circle(vec2 uv,vec2 p,float r,float blur) {
float d = length(uv - p);
return smoothstep(r,r-blur,d);
}
void main() {
vec2 uv = gl_FragCoord.xy / vec2(width,height);
uv -= 0.5;
uv.x *= width / height;
float blur = 0.005;
float c = Circle(uv,vec2(0.,0.),0.25,blur);
c -= Circle(uv,vec2(-0.1,0.1),0.05,vec2(0.1,blur);
float mouth = Circle(uv,0.15,blur);
mouth -= Circle(uv,0.05),blur);
c -= clamp(mouth,0.,1.);
fragColor = vec4(vec3(1.,1.,0.) * c,1.0);
}
谢谢!
编辑 1:
这是在之前/之后传递给顶点着色器的两组坐标。
编辑 2:
感谢 Rabbid76 的解决方案!下面显示了我最终传递给顶点着色器的 uv 坐标。
// location = 0
GLfloat vertices[] = {
-0.8,-0.8,0.0,-0.2,0.0
};
// location = 1
GLfloat uv[] = {
0.0,1.0,1.0
};
解决方法
为 uv 坐标添加附加属性。属性必须在 [0.0,1.0] 范围内。 (0,0 左下角和 (1,1) 右上角。将属性从顶点着色器传递给片段着色器:
#version 300 es
layout(location=0) in vec3 vPosition;
layout(location=1) in vec2 vUV;
out vec2 uv;
void main()
{
uv = vUV;
gl_Position = vec4(vPosition,1.0);
}
使用片段着色器输入 uv
而不是 vec2 uv = gl_FragCoord.xy / vec2(width,height);
:
// [...]
in vec2 uv;
void main()
{
// vec2 uv = gl_FragCoord.xy / vec2(width,height); DELETE
// [...]
}