时间戳

首页 > 解决方案 > 为什么我的 WebGL 变化不将值从我的顶点着色器传递到片段着色器？

canvas - 为什么我的 WebGL 变化不将值从我的顶点着色器传递到片段着色器？

问题描述

我的目标是在 Cube 上添加纹理。我在 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);

这给了我以下信息：

画布打印屏幕 #2

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

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

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

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

画布打印屏幕 #3

或者作为我的纹理中的 Uv 坐标，如下所示：

gl_FragColor = texture2D(u_texSampler, v_uv).bgra;

产生以下内容：

画布打印屏幕 #4

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

为什么我的变量不将值传递给片段着色器，除非它在 ​​gl_Position 中使用？

标签： canvasglslwebgl

解决方案

我发现了我的错误。

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

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

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

gl.EnableVertexAttribArray(webGlShaders[0]);

当我应该打电话时

gl.EnableVertexAttribArray(webGlAttribLocations[0]);

推荐阅读