WebGL indices array size

Question

For one of my WebGL projects I need to generate lots of objects with indices. For examples, cones. When JavaScript generates not so many everything works fine, by adding another cones to the scene rendering becomes glitchy.

works fine with small number of cones

glitchy with lots of them

I am pretty sure that the problem is in defining index buffer:

*var iBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(glIndices), gl.STATIC_DRAW);*

To be more specific with Unit8Array or its transition to shader.

Can anyone help me with that?

Sorry, Uint8Array of course.

VVK
– VVK

2016-11-08 17:04:49 +00:00
Commented Nov 8, 2016 at 17:04 — VVK
– VVK, Commented Nov 8, 2016 at 17:04
How about using Uint16Array?!

LJᛃ
– LJᛃ

2016-11-08 18:20:11 +00:00
Commented Nov 8, 2016 at 18:20 — LJᛃ
– LJᛃ, Commented Nov 8, 2016 at 18:20

solidpixel · Accepted Answer · 2016-11-08 23:56:03Z

2

If you use Uint8 for indices you are limiting yourself to a maximum of 256 unique vertices per drawcall, so if you batch a draw it's likely you are exceeding the max value of a Uint8 and integer truncation likely means you just end up with effectvely random vertex connectivity across models.

Increase to a Uint16 indices will let you have 65536 unique vertices per draw.

answered Nov 8, 2016 at 23:56

solidpixel

12.7k1 gold badge23 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

VVK Over a year ago

That's what I did firstly, but it seems that with changing Uint8Array to Uint16Array I need to change something else, because in this case script always renders the same mess. Maybe I need change this line somehow: gl.drawElements( gl.TRIANGLES, indices.length, gl.UNSIGNED_BYTE, 0 );

solidpixel Over a year ago

gl.UNSIGNED_BYTE != 16 bits.

VVK Over a year ago

Yeah, that's why I posted gl.drawElements line, but I could find by what it should be replaced. I have tried UNSIGNED_SHORT, but the script stops working and maybe I have to change variable type within shader also.

VVK Over a year ago

According to WebGL reference there is only two options: UNSIGNED_BYTE and UNSIGNED_SHORT (16-bit), so I have tried to implement short, but everything stops working returning Offscreen-For-WebGL-0x7f9227023400]GL ERROR :GL_INVALID_OPERATION : glDrawElements: range out of bounds for buffer

VVK Over a year ago

I have tried this way: var buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(glIndices), gl.STATIC_DRAW); var iBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buf); var indices = [3, 2, 1]; //or 2, 1, 0 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); however it returns INVALID_OPERATION: bindBuffer: buffers can not be used with multiple targets and INVALID_OPERATION: bufferData: no buffer

|

Collectives™ on Stack Overflow

WebGL indices array size

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related