CODEWITHSUNDEEP
javascriptwebgl
NullPointer7
NullPointer7

Reputation: 101

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

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

Upvotes: 2

Views: 3812

Answers (2)

Tobias S
Tobias S

Reputation: 11

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.

Upvotes: 1

NullPointer7
NullPointer7

Reputation: 101

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

Upvotes: 2

Related Questions