WebGL2: what is up with max elements indices/vertices?

Question

I'm developing a web component using WebGL2 (and three.js) with OES_element_index_uint enabled. I'm drawing a geometry using indexed vertices and I'm seeing the following anomaly -- look for the lines going across the middle of the figure:

If I redraw the figure I get something slightly different even if I don't change the inputs (I think).

I've made debug code to double check the buffers I'm passing in to the geometry and I don't find any problem. I also haven't noticed anything like this using the same implementation with smaller data sets (yet).

I looked at this webgl2 report site https://alteredqualia.com/tools/webgl-features/ and I notice the lines:

                 Max elements vertices: 1048575
                  Max elements indices: 150000

Could this be the cause of the anomaly because my buffers are bigger than that? Where are these numbers explained?

I'm working on a Mac Laptop with the GPU reported as

                     Unmasked renderer: AMD Radeon Pro 560X OpenGL Engine
                       Unmasked vendor: ATI Technologies Inc.

Any clues as to what is going on or explanations about max elements indices/vertices would be much appreciated. Thanks in advance.

Answer 1

To draw an object using drawElements WebGL2 allows you to define indices of data type gl.UNSIGNED_INT up to 4294967296. You have to pass a Uint32Array array: new Uint32Array(indices) to your created and binded index buffer:

const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(
    gl.ELEMENT_ARRAY_BUFFER,
    new Uint32Array(indices),
    gl.STATIC_DRAW
);

In drawElements pass gl.UNSIGNED_UINT as index type:

gl.drawElements(primitive, count, gl.UNSIGNED_UINT, offset);

With THREE.js in setIndex for your Buffer Geometry :

  bg = new THREE.BufferGeometry();    
  bg.setIndex( new THREE.BufferAttribute( new Uint32Array( indices ), 1 ) );

Answer 2

I'm rendering in WebGL1.0 and I've found the 64k vertex limitation to be "a thing". I get features like those long triangles like that appearing from nowhere when I hit this "thing".

The way to resolve it is to split your model up into several models so that no sub-model has more than 64k vertices.

I haven't tested the boundary on this myself but by some reports, you should maybe consider 65000 to be the boundary of max vertices per model as you may experience some issues if you use 65535.