webgl

Firefox throw a n error drawArraysInstanced: but attribs only supply 0, when I make drawArrays while Chrome is good


I've replaced gl.bufferData with non typed javascript arrays with typed Float32Arrays and now when I make drawArrays call nothing happen in FF but this

Error: WebGL warning: drawArraysInstanced: Vertex fetch requires 30000, but attribs only supply 0.


Solution

  • @Zemledelec's answer helped me but to anyone still struggling with this I can offer a rough explanation.

    The problem was my call to gl.drawArrays expected more vertex data than it received. The vertex data was missing because my call to gl.bufferData was failing. I fixed the problem by providing gl.bufferData with a Float32Array object instead of the typical javascript array object.

    replaced...

    gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);
    

    with...

    let verts32 = new Float32Array(verts);
    //...
    gl.bufferData(gl.ARRAY_BUFFER, verts32, gl.STATIC_DRAW);
    

    So if you are receiving this error, make sure you are providing all the vertex data you are attempting to draw.

    EDIT:

    Changed code to separate Float32Array construction from gl.bufferData call. My suggestion is if you are repeatedly calling code like this (like rendering inside of requestAnimationFrame) to consider creating your typed array (e.g. Float32Array) once and reusing it until your data needs to be changed. This avoids repeatedly calling new Float32Array every frame which creates a new object on the heap which becomes irrelevant by the next frame but stays in memory until the garbage collector performs a collection which has a time cost. That's my understanding at least.