webglでどのようにストライドを使用しますか？

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メソッドでストライドを使用して、2つのVBOを使用するのではなく、頂点とカラーの両方のデータに単一のVBOを使用したいのですが、問題は私がJavaScriptのfloatのサイズを知らないことです。

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

私はこの問題はであると思い

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

- ：： -

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

と - ：だから私は今、私はこのエラーを取得しています、それは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>