所以,我开始了一段相当瞬间的旅程,进入了可视化、3-d 编程的世界。我目前在 webgl 上投入了大量资金,在 JavaScript 和大多数面向 Web 的语言方面拥有相当深厚的背景,但这是我的第一个图形语言。
在尝试绘制我的第一个相当简单的形状时,我遇到了一个我似乎无法找到解决方案的错误。它在 chrome 中读取为:
WebGL:INVALID_OPERATION:drawElements:attribs 设置不正确(重复 n 次)
其中 n 是一个看似随机变化的数字。有问题的代码在这里:
var tessVertexPositionBuffer;
var tessVertexColorBuffer;
var tessVertexIndexBuffer;
function initBuffers () {
tessVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, tessVertexPositionBuffer);
var vertices = [
//innerfront
-1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
1.0, -1.0, 1.0,
-1.0, -1.0, 1.0,
//innerleft
-1.0, 1.0, 1.0,
-1.0, -1.0, 1.0,
-1.0, 1.0, -1.0,
-1.0, -1.0, -1.0,
//innerback
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
//innerright
1.0, 1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, -1.0,
1.0, -1.0, -1.0,
//topfront
-1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
-2.0, 2.0, 2.0,
2.0, 2.0, 2.0,
//topleft
-1.0, 1.0, 1.0,
-2.0, 2.0, 2.0,
-1.0, 1.0, -1.0,
-2.0, 2.0, -2.0,
//topback
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
-2.0, 2.0, -2.0,
2.0, 2.0, -2.0,
//topright
1.0, 1.0, 1.0,
2.0, 2.0, 2.0,
1.0, 1.0, -1.0,
2.0, 2.0, -2.0,
//outerfront
-2.0, 2.0, 2.0,
2.0, 2.0, 2.0,
-2.0, -2.0, 2.0,
2.0, -2.0, 2.0,
//outerleft
-2.0, 2.0, 2.0,
-2.0, -2.0, 2.0,
-2.0, 2.0, -2.0,
-2.0, -2.0, -2.0,
//outerback
-2.0, 2.0, -2.0,
2.0, 2.0, -2.0,
-2.0, -2.0, -2.0,
2.0, -2.0, -2.0,
//outerright
2.0, 2.0, 2.0,
2.0, -2.0, 2.0,
2.0, 2.0, -2.0,
2.0, -2.0, -2.0,
//bottomfront
2.0, 2.0, 2.0,
-2.0, 2.0, 2.0,
-2.0, -2.0, 2.0,
2.0, -2.0, 2.0,
//bottomleft
-1.0, -1.0, 1.0,
-2.0, -2.0, 2.0,
-1.0, -1.0, -1.0,
-2.0, -2.0, -2.0,
//bottomback
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
-2.0, -2.0, -2.0,
2.0, -2.0, -2.0,
//bottomright
1.0, -1.0, 1.0,
2.0, -2.0, 2.0,
1.0, -1.0, -1.0,
2.0, -2.0, -2.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
tessVertexPositionBuffer.itemSize = 3;
tessVertexPositionBuffer.numItems = 64;
tessVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, tessVertexColorBuffer);
var colors = [
[0.7, 0.7, 0.7, 1.0], //all inner sides
[0.7, 0.7, 0.7, 1.0],
[0.7, 0.7, 0.7, 1.0],
[0.7, 0.7, 0.7, 1.0],
[0.7, 0.0, 0.7, 1.0], //all top sides
[0.7, 0.0, 0.7, 1.0],
[0.7, 0.0, 0.7, 1.0],
[0.7, 0.0, 0.7, 1.0],
[0.7, 0.7, 0.0, 1.0], //all outer sides
[0.7, 0.7, 0.0, 1.0],
[0.7, 0.7, 0.0, 1.0],
[0.7, 0.7, 0.0, 1.0],
[0.0, 0.7, 0.7, 1.0], //all bottom sides
[0.0, 0.7, 0.7, 1.0],
[0.0, 0.7, 0.7, 1.0],
[0.0, 0.7, 0.7, 1.0],
];
var unpackedColors = [];
for (var i in colors) {
var color = colors[i];
for (var j=0; j< 4; j++) {
unpackedColors = unpackedColors.concat(color);
}
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unpackedColors), gl.STATIC_DRAW);
tessVertexColorBuffer.itemSize = 4;
tessVertexColorBuffer.numItems = 64;
tessVertexIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tessVertexIndexBuffer);
var tessVertexIndices = [
0, 1, 2, 0, 2, 3,
4, 5, 6, 5, 6, 7,
8, 9, 10, 9, 10, 11,
12, 13, 14, 13, 14, 15,
16, 17, 18, 17, 18, 19,
20, 21, 22, 21, 22, 23,
24, 25, 26, 25, 26, 27,
28, 29, 30, 29, 30, 31,
32, 33, 34, 33, 34, 35,
36, 37, 38, 37, 38, 39,
40, 41, 42, 41, 42, 43,
44, 45, 46, 45, 46, 47,
48, 49, 50, 48, 50, 51,
52, 53, 54, 53, 54, 55,
56, 57, 58, 57, 58, 59,
60, 61, 62, 61, 62, 63
];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(tessVertexIndices), gl.STATIC_DRAW);
tessVertexIndexBuffer.itemSize = 1;
tessVertexIndexBuffer.numItems = 96;
}
缓冲区的实际绘制在这里:
gl.bindBuffer(gl.ARRAY_BUFFER, tessVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vetexPositionAttribute, tessVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, tessVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, tessVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tessVertexIndexBuffer);
setMatrixUniforms();
gl.drawElements(gl.TRIANGLES, tessVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
现在,这是来自 learningwebgl 的相对逐字,我真的只是想画一个简单的形状。我相对确定我的问题在于我的缓冲区类型,因为老实说,我对它们了解不多(而且我发现的大多数关于 webGl 的文献要么是对语言或 HYPERSUPERPRO 品种有一般了解的新手)。
我已经多次检查了实际的顶点位置/颜色/索引,除非我对代码足够熟悉以至于我对简单的错误视而不见,否则我在那里找不到错误。