WebGL索引的颜色缓冲区

Question

我有一个WebGL程序，它应该使用索引缓冲区绘制三角形。使用自定义着色器，该着色器使用属性a_position和a_color；分别用于顶点位置和顶点颜色。

相关JavaScript代码：

var gl = // initialized elsewhere
var vertexArray      = new Float32Array( 3 * 3 ); // 3 vec3's
var vertexIndexArray = new Uint16Array( 3 );      // 3 vertices
var colorArray      = new Float32Array( 1 * 4 );  // 1 vec4
var colorIndexArray = new Uint16Array( 3 );       // 3 vertices
// # Omitted: Fill buffers #
// -- Setup the GL buffers --
var vertexBuffer      = setupGLArrayBuffer( vertexArray );
var vertexIndexBuffer = setupGLIndexBuffer( vertexIndexArray );
var colorBuffer       = setupGLArrayBuffer( colorArray );
var colorIndexBuffer  = setupGLIndexBuffer( colorIndexArray );
// -- "Link" buffers to shader attributes --
var aColor    = gl.getAttribLocation( privateVariables.shaderProgram, "a_color" );
var aPosition = gl.getAttribLocation( privateVariables.shaderProgram, "a_position" );
gl.bindBuffer( gl.ARRAY_BUFFER, colorBuffer ); 
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, colorIndexBuffer ); 
gl.vertexAttribPointer( aColor, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( aColor );
gl.bindBuffer( gl.ARRAY_BUFFER, vertexBuffer );
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, vertexIndexBuffer );
gl.vertexAttribPointer( aPosition, 2, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( aPosition );
// # Omitted: Setting up viewport etc. #
gl.drawElements( gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0 );

这根本没有显示任何内容。但是，当删除颜色部分并将a_color属性设置为white时，它就可以工作了。（没有自定义颜色）
所以，我相信这与索引引用的颜色缓冲区有关。

希望有人能告诉我们这里出了什么问题，以及为什么。

Answer 1

元素数组缓冲区的工作方式与您想象的不同。应该只有一个元素数组和多个数组缓冲区，每个缓冲区中的顶点数相同。因此，在您的情况下，您上传的数据是不完整的，因为您发送了3个位置的顶点，但只有第一个顶点有颜色数据。

所以你的var colorArray = new Float32Array( 1 * 4 );应该是new Float32Array(3 * 4);