WebGL Cannot Draw More Than 44 Points Even If Enough Buffer Space

Question

As the title says I have a WebGL application. I am making use of drawArrays in such a fashion

gl.drawArrays(gl.LINES, 0, 44);

But I seem to be running into a problem where if I try to draw more than 44 points than I get the following error

[.WebGL-0x7000c6e700] GL_INVALID_OPERATION: Vertex buffer is not big enough for the draw call

And I have checked to make sure I have enough buffer space even hardcoding the values, it happens on whatever browser I am on.

I think the problem is my laptop (M1 MacBook Pro) as when I move the code to my windows desktop it runs fine.

// edit As for a code example

// points is an array of 46 points i.e. [[0,0,1,1],....]
let wBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, wBuffer);

gl.bufferData(gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW);

let vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);

gl.drawArrays(gl.LINES, 0, 46);

Create a [minimum viable code example](https://stackoverflow.com/help/minimal-reproducible-example). It might only run on windows due to ANGLEs directx backend, have you tried the opengl backend? — LJᛃ, Apr 12 '22 at 23:10
Does flatten return a Float32Array? If it’s not a typed array maybe different browsers/OS coerce it differently. — teddybeard, Apr 14 '22 at 00:17
Sorry I forgot to specify, yes flatten returns a Float32Array — NullPointer7, Apr 14 '22 at 13:02

NullPointer7 · Answer 1 · 2022-04-14T13:02:54.307

2

I am unsure on the specific details on why this works but turning hardware acceleration off on my browser fixed it for me.

edited Apr 14 '22 at 13:02

answered Apr 13 '22 at 08:45

NullPointer7

101
7

What OS are U on? After bashing my head for awhile this solved my error (macOs 12.14 - latest Chrome). I also don't know enough theory to understand why/how this works. – Mote Zart Jul 09 '22 at 19:34
I am also on macOs 12 and latest chrome, how did you fix it? – NullPointer7 Jul 11 '22 at 07:00
I just did what you said in the post: `turning hardware acceleration off,` and it worked. No idea why. I googled how to turn if off, since I didn't know that either. I'm a webgl beginner. – Mote Zart Jul 11 '22 at 14:50
I am not sure either, I am wondering if it’s maybe something to do with m1 macs but I need someone more informed to say. – NullPointer7 Jul 12 '22 at 15:02

score 1 · Answer 2 · edited Dec 07 '22 at 22:01

I was having this issue myself, and I realised it was because the count (drawArrays third argument) was wrong.

The problem for me was, that the array had single co-ordinates, so every two elements === one vec2 for the vertex shader.

That means that the count is not the length of the buffer array, but the length / 2.

You should match the count to how many shapes you will draw - if you're drawing points, then it's buffer.length / 2. If you're drawing triangles, it will be buffer.length / 6.

WebGL Cannot Draw More Than 44 Points Even If Enough Buffer Space

2 Answers2

Linked