为什么我的 WebGL 变量没有将值从我的顶点着色器传递到片段着色器？

Question

我的目标是在立方体上添加纹理。我在 Chrome 上使用 webGL 1。我的 UV 坐标变化似乎没有正常工作。看起来好像这些值没有传递给片段着色器。

顶点着色器代码：

attribute vec3 a_position;
attribute vec2 a_vertexUV;

uniform mat4 u_mvp;

varying vec2 v_uv;

void main() {
    v_uv = a_vertexUV;
    gl_Position = u_mvp * vec4(a_position, 1);
}

片段着色器代码：

precision mediump float; 

varying vec2 v_uv;

uniform sampler2D u_texSampler;

void main() {
    gl_FragColor = texture2D(u_texSampler, v_uv).bgra;
}

运行我的程序产生以下结果：

我看到了我的立方体，它从纹理中获取颜色，但整个形状只使用第一个纹素的颜色。这表明我的 UV 矢量为空。

我可以通过尝试将 uv 矢量中的数据用作颜色来确认这一点：

gl_FragColor = vec4(v_uv,0,1);

这给了我以下信息：

一个黑色立方体。我的 UV 矢量中没有值...

奇怪的是，如果我像这样在顶点着色器中使用 uv 矢量：

gl_Position = u_mvp * vec4(v_uv, 0, 1);

突然间，我在片段着色器中的 uv 向量中获得了值，将其用作颜色值会产生以下结果：

或者像这样在我的纹理中使用 Uv 坐标：

gl_FragColor = texture2D(u_texSampler, v_uv).bgra;

生成以下内容：

哪个正确地从我的纹理中获取颜色...

为什么我的 varying 不将值传递给片段着色器，除非它用于 gl_Position？

Answer 1

我发现了我的错误。

我将我的 gl 对象位置存储在不同的数组中，例如：

webGlBuffers = [];
webGlShaders = [];
webGlPrograms = [];
webGlAttribLocations = [];
webGlUniformLocations = [];
webGlTextures = [];

在我的 gl.EnableVertexAttribArray 调用中，我引用了错误的数组。 IE：我打电话给

gl.EnableVertexAttribArray(webGlShaders[0]);

我应该什么时候打电话

gl.EnableVertexAttribArray(webGlAttribLocations[0]);

为什么我的 WebGL 变量没有将值从我的顶点着色器传递到片段着色器？

Why does my WebGL varying not pass the values from my vertex shader to the fragment shader?

canvas

glsl

webgl