我该如何在WebGL中使用stride？

Question

//Defining geometry
var vertices = [
    +0.0,+0.0,+0.0,
    +0.0,+0.0,+1.0,

    -0.5,+0.0,+0.0,
    +1.0,+0.0,+0.0, 

    -0.5,-0.5,+0.0,
    +0.0,+1.0,+0.0,

    +0.5,+0.5,+0.0,
    +1.0,+0.0,+1.0, 

    +0.5,+0.0,+0.0,
    +1.0,+1.0,+0.0, 

    -0.5,+0.5,+0.0
    +1.0,+0.0,+1.0
];



indices = [3,4,0,0,2,1,5,0,1];

var VextexBuffer = webgl.createBuffer();

webgl.bindBuffer(webgl.ARRAY_BUFFER, VextexBuffer);

webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(vertices), webgl.STATIC_DRAW);

var coord = webgl.getAttribLocation(shaderProgram,"coordinates");

webgl.vertexAttribPointer(coord, 3, webgl.FLOAT, false ,6 * 4,0);

webgl.enableVertexAttribArray(coord);

var color = webgl.getAttribLocation(shaderProgram, "color");

webgl.vertexAttribPointer(color, 3, webgl.FLOAT, false ,6 * 4,3 * 4);

webgl.enableVertexAttribArray(color);       


var IndexBuffer = webgl.createBuffer();

webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, IndexBuffer);

webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), webgl.STATIC_DRAW);

我希望使用VertexAttribPointer方法中的stride来使用单个VBO来存储顶点和颜色数据，而不是使用2个VBO，但问题在于我不知道javascript中float的大小。所以我假设它是4。

现在我遇到了这个错误：

**[.CommandBufferContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements:        
attempt to access out of range vertices in attribute 1**

我认为问题出在：

webgl.vertexAttribPointer(coord, 3, webgl.FLOAT, false ,6 * 4,0);

并且：-

webgl.vertexAttribPointer(color, 3, webgl.FLOAT, false ,6 * 4,3 * 4);

请告诉我故障出在哪里？ 谢谢。

- user6241971

Answer 1

在WebGL中，FLOAT的大小为4。它与JavaScript中的数字或浮点数无关。JavaScript中的浮点数/数字与WebGL缓冲区中的浮点数是分开的。

你的绘图调用在哪里？从上面的代码中看不出有什么问题。乍一看，它看起来是正确的。

在下面的测试中，我发现了一个问题。你在最后一个坐标和最后一个颜色之间缺少了一个逗号，这意味着你的vertices数组少了一个值。

var webgl = document.querySelector("#c").getContext("webgl");
var shaderProgram = twgl.createProgramFromScripts(webgl, ["vs", "fs"]);
webgl.useProgram(shaderProgram);

//Defining geometry
var vertices = [
    +0.0,+0.0,+0.0,
    +0.0,+0.0,+1.0,

    -0.5,+0.0,+0.0,
    +1.0,+0.0,+0.0, 

    -0.5,-0.5,+0.0,
    +0.0,+1.0,+0.0,

    +0.5,+0.5,+0.0,
    +1.0,+0.0,+1.0, 

    +0.5,+0.0,+0.0,
    +1.0,+1.0,+0.0, 

    -0.5,+0.5,+0.0,
    +1.0,+0.0,+1.0
];


indices = [3,4,0,0,2,1,5,0,1];

var VextexBuffer = webgl.createBuffer();

webgl.bindBuffer(webgl.ARRAY_BUFFER, VextexBuffer);

webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(vertices), webgl.STATIC_DRAW);

var coord = webgl.getAttribLocation(shaderProgram,"coordinates");

webgl.vertexAttribPointer(coord, 3, webgl.FLOAT, false ,6 * 4,0);

webgl.enableVertexAttribArray(coord);

var color = webgl.getAttribLocation(shaderProgram, "color");

webgl.vertexAttribPointer(color, 3, webgl.FLOAT, false ,6 * 4,3 * 4);

webgl.enableVertexAttribArray(color);       


var IndexBuffer = webgl.createBuffer();

webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, IndexBuffer);

webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), webgl.STATIC_DRAW);

webgl.drawElements(webgl.TRIANGLES, 6, webgl.UNSIGNED_SHORT, 0);

<script src="https://twgljs.org/dist/twgl.min.js"></script>
<script id="vs" type="notjs">
attribute vec4 coordinates;
attribute vec4 color;

varying vec4 v_color;

void main() {
  gl_Position = coordinates;
  v_color = color;
}
</script>
<script id="fs" type="notjs">
precision mediump float;
varying vec4 v_color;
void main() {
  gl_FragColor = v_color;
}
</script>
<canvas id="c"></canvas>

- gman