webGL - vertexAttribPointer：不正な `type`：なし

Question

私のコードがうまくいかない理由がわかりません。私はそれを実行すると、私はこれらのエラーを取得：

Error: WebGL warning: vertexAttribPointer: Bad type : NONE
Error: WebGL warning: drawArrays: no VBO bound to enabled vertex attrib index 1u!

私はこの例に従っ：Link

EDIT：

var gl; 
    var shaderProgram; 

    var triangleVertices = 
    [ // X, Y,  R, G, B 
      0.0, 0.5, 1.0, 1.0, 0.0, 
      -0.5, -0.5, 0.7, 0.0, 1.0, 
      0.5, -0.5, 0.1, 1.0, 0.6 
    ]; 
    var triangleVertexBufferObject; 
    var positionAttribLocation; 
    var colorAttribLocation; 


    var vertShaderCode = 'precision mediump float;'+ 
       'attribute vec2 vertPosition;'+ 
       'attribute vec3 vertColor;'+ 
       'varying vec3 fragColor;'+ 
       'void main()'+ 
       '{'+ 
       ' fragColor = vertColor;'+ 
       ' gl_Position = vec4(vertPosition, 0.0, 1.0);'+ 
       '}'; 

    var fragShaderCode = 
      'precision mediump float;'+ 
      'varying vec3 fragColor;'+ 
      'void main()'+ 
      '{'+ 
      ' gl_FragColor = vec4(fragColor, 1.0);'+ 
      '}'; 


    function initGL(canvas) { 
     try { 
      gl = canvas.getContext("webgl"); 
      gl.viewportWidth = canvas.width; 
      gl.viewportHeight = canvas.height; 
     } catch (e) { 
     } 
     if (!gl) { 
      alert("Could not initialise WebGL, sorry :-("); 
     } 
    } 




    function initShaders() { 
     var fragmentShader = getShader(fragShaderCode, gl.FRAGMENT_SHADER); 
     var vertexShader = getShader(vertShaderCode, gl.VERTEX_SHADER); 

     shaderProgram = gl.createProgram(); 
     gl.attachShader(shaderProgram, vertexShader); 
     gl.attachShader(shaderProgram, fragmentShader); 
     gl.linkProgram(shaderProgram); 

     if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { 
      alert("Could not initialise shaders"); 
     } 




    } 



    function initBuffers() { 
     triangleVertexBufferObject = gl.createBuffer(); 
     gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferObject); 
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW); 

     positionAttribLocation = gl.getAttribLocation(shaderProgram, "vertPosition"); 
     colorAttribLocation = gl.getAttribLocation(shaderProgram, "vertColor"); 

     gl.vertexAttribPointer(
      positionAttribLocation, // attribute location 
      2, //number of elements per attribute 
      gl.FLOAT, // type of element 
      gl.FALSE, 
      5 * Float32Array.BYTES_PER_ELEMENT,//size of induvidual vertex 
      0//offset from the beginning of a single vertex to this attribute 
      ); 
     gl.vertexAttribPointer(
      colorAttribLocation, 
      3, 
      gl.FLOAT, 
      gl.FALSE, 
      5 * Float32Array.BYTES_PER_ELEMENT, 
      2 * Float32Array.BYTES_PER_ELEMENT 
     ); 
     gl.enableVertexAttribArray(positionAttribLocation); 
     gl.enableVertexAttribArray(colorAttribLocation); 
    } 


    function drawScene() { 
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 
     gl.drawArrays(gl.TRIANGLES, 0/*verts to skip*/, 3/*verts to draw*/); 

    } 


    function getShader(code, type){ 
     var shader = gl.createShader(type); 
     gl.shaderSource(shader, code); 
     gl.compileShader(shader); 
     return shader; 
    } 



    this.start = function(spritesCompiledDone, scriptsCompiledDone, roomsCompiledDone, customObjectsCompiledDone, soundsCompiledDone, currentIdGen){ 
     document.body.style.cursor = "auto"; 
     var canvas = document.createElement("canvas"); 
     canvas.width = 640; 
     canvas.height = 480; 
     canvas.style.position = "fixed"; 
     canvas.style.top = "0px"; 
     canvas.style.left = "0px"; 
     document.body.appendChild(canvas); 
     initGL(canvas); 
     initShaders(); 
     initBuffers(); 
     gl.useProgram(shaderProgram); 

     gl.clearColor(0.2, 0.1, 0.7, 1.0); 

     drawScene(); 

    } 

：今のコードは動作しますが、それは色の三角形 MyCodeを示すべき

属性の位置とポインタを取得するためのすべての手順を実行したようですが、機能しません。私は描画フェーズでまだアクティブでなければならないgl.bindBufferを使うので、VBOがどのようにバインドできないのか分かりません。

Answer 1

あなたは次のことを変更する必要があります。色を設定するとき

function initBuffers() { 
    triangleVertexBufferObject = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferObject); 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW); 

    positionAttribLocation = gl.getAttribLocation(shaderProgram, "vertPosition"); 
    colorAttribLocation = gl.getAttribLocation(shaderProgram, "vertColor"); 

    gl.vertexAttribPointer(
     positionAttribLocation, // attribute location 
     2, //number of elements per attribute 
     gl.FLOAT, // type of element 
     gl.FALSE, // to => false, 
     5 * Float32Array.BYTES_PER_ELEMENT,//size of induvidual vertex 
     0//offset from the beginning of a single vertex to this attribute 
     ); 
    gl.vertexAttribPointer(
     colorAttribLocation, 
     3, 
     gl.Float, //to => gl.FLOAT, 
     gl.False, //to => false, 
     5 * Float32Array.BYTES_PER_ELEMENT, 
     5 * Float32Array.BYTES_PER_ELEMENT //to => 2 * Float32Array.BYTES_PER_ELEMENT 
    ); 
    gl.enableVertexAttribArray(positionAttribLocation); 
    gl.enableVertexAttribArray(colorAttribLocation); 
}