尝试从 vec4 获取颜色数据时出现 WebGL 错误

Question

我在 WebGL 中渲染正方形时遇到问题。当我运行 Chrome 中的程序时，出现错误：

GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 0

我假设这是因为在某些时候，缓冲区在尝试获取数据时查看了错误的数组。我已将问题定位到

gl.vertexAttribPointer(pColorIndex, 4, gl.FLOAT, false, 0, 0);

下面代码中的行。即，如果我将 4 更改为 2，代码将运行，但不正确（因为我在这里查看用于颜色数据的 vec4）。我的数组绑定方式有问题吗？

    bindColorDisplayShaders();
// clear the framebuffer
gl.clear(gl.COLOR_BUFFER_BIT);

// bind the shader
gl.useProgram(shader);

// set the value of the uniform variable in the shader
var shift_loc = gl.getUniformLocation(shader, "shift");
gl.uniform1f(shift_loc, .5);

// bind the buffer
gl.bindBuffer(gl.ARRAY_BUFFER, vertexbuffer);

// get the index for the a_Position attribute defined in the vertex shader
var positionIndex = gl.getAttribLocation(shader, 'a_Position');
if (positionIndex < 0) {
    console.log('Failed to get the storage location of a_Position');
    return;
}

// "enable" the a_position attribute
gl.enableVertexAttribArray(positionIndex);

// associate the data in the currently bound buffer with the a_position attribute
// (The '2' specifies there are 2 floats per vertex in the buffer.  Don't worry about
// the last three args just yet.)
gl.vertexAttribPointer(positionIndex, 2, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, null);

// bind the buffer with the color data
gl.bindBuffer(gl.ARRAY_BUFFER, chosencolorbuffer);

var pColorIndex = gl.getUniformLocation(shader, 'a_ChosenColor');
if(pColorIndex < 0){
    console.log('Failed to get the storage location of a_ChosenColor');
}

gl.enableVertexAttribArray(pColorIndex);

gl.vertexAttribPointer(pColorIndex, 4, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, null);

// draw, specifying the type of primitive to assemble from the vertices
gl.drawArrays(gl.TRIANGLES, 0, numPoints);

Answer 1

您只能使用 uniform 或 vertex attribute，这是两个不同的东西。

当使用顶点属性时，您必须匹配位置缓冲区中的顶点数量，并使用gl.getAttribLocation.

当使用 uniform 时，您不是通过数组缓冲区提供其数据，而是使用 gl.uniform* 方法来设置他们的价值。

在你的例子中gl.uniform4fv(pColorIndex, yourColorVector)。

尝试从 vec4 获取颜色数据时出现 WebGL 错误

WebGL error when attempting to get color data from vec4

opengl-es

glsl

webgl