我如何在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); 

请说明故障在哪里？ 谢谢。

Answer 1

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

你的平局电话在哪里？从上面的代码中不清楚什么是错的。它看起来正确一目了然

下面测试我发现1，问题。你失踪协调最后之间的逗号和最后一种颜色，这意味着你的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>