webGL - vertexAttribPointer：错误`type`：NONE

Question

我似乎无法弄清楚为什么我的代码不工作。当我运行它，我得到这些错误：

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

我跟着这个例子：Link

编辑：现在的代码工作，它应该显示一个彩色三角形 mycode的：

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(); 

    } 

看起来我已经完成了获取属性位置和指针的所有步骤，但它不起作用。我不明白VBO如何被绑定，因为我使用了gl.bindBuffer，它在draw阶段仍然是活动的。

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); 
}