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.
@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.