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);

WebGL 索引颜色缓冲区

WebGL indexed color buffer

javascript

webgl