webGL - vertexAttribPointer: Mauvais `type`: NONE

Question

Je n'arrive pas à comprendre pourquoi mon code ne fonctionne pas. Quand je le lance, je reçois ces erreurs:

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

J'ai suivi cet exemple: Link

EDIT: maintenant le code fonctionne, il devrait montrer un triangle de couleur 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(); 

    } 

Il semble que j'ai fait toutes les étapes pour obtenir les emplacements et les pointeurs d'attribut, mais cela ne fonctionne pas. Je ne comprends pas comment aucun VBO ne peut être lié car j'utilise gl.bindBuffer qui devrait être actif dans la phase de dessin.

Answer 1

Vous devez changer les choses suivantes:

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