WebGL: drawElements: bound vertex attribute buffers do not have sufficient size for given indices from the bound element array

[JCPalmer]

I was trying to merge the individual "Letter" meshes of a "Label" into a single Mesh sub-class of Letter.  I made changes to Mesh.MergeMeshes to handle optionally doing it to a sub-class, & allowed a mesh in the source array to be null (I use this for space characters).

/** * Merge the array of meshes into a single mesh for performance reasons. * @param {Array<Mesh>} meshes - The vertices source.  They should all be of the same material.  Entries can empty * @param {boolean} disposeSource - When true (default), dispose of the vertices from the source meshes * @param {boolean} allow32BitsIndices - When the sum of the vertices > 64k, this must be set to true. * @param {Mesh} meshSubclass - When set, vertices inserted into this Mesh.  Meshes can then be merged into a Mesh sub-class. */public static MergeMeshes(meshes: Array<Mesh>, disposeSource = true, allow32BitsIndices?: boolean, meshSubclass?: Mesh): Mesh {    if (!allow32BitsIndices) {        var totalVertices = 0;        // Counting vertices        for (var index = 0; index < meshes.length; index++) {            if (meshes[index]){                totalVertices += meshes[index].getTotalVertices();                if (totalVertices > 65536) {                    Tools.Warn("Cannot merge meshes because resulting mesh will have more than 65536 vertices. Please use allow32BitsIndices = true to use 32 bits indices");                    return null;                }            }        }    }    // Merge    var vertexData      : VertexData;    var otherVertexData : VertexData;    var source : Mesh;    for (index = 0; index < meshes.length; index++) {        if (meshes[index]){            otherVertexData = VertexData.ExtractFromMesh(meshes[index], true);            otherVertexData.transform(meshes[index].getWorldMatrix());                            if (vertexData){                vertexData.merge(otherVertexData);            }else{                vertexData = otherVertexData;                source = meshes[index];            }        }    }    if (!meshSubclass){        meshSubclass = new Mesh(source.name + "_merged", source.getScene());    }    vertexData.applyToMesh(meshSubclass);    // Setting properties    meshSubclass.material = source.material;    meshSubclass.checkCollisions = source.checkCollisions;    // Cleaning    if (disposeSource) {        for (index = 0; index < meshes.length; index++) {            if (meshes[index]){                meshes[index].dispose();            }        }    }    return meshSubclass;}

Because I am also using clones, & the merge process uses transforms, I had to change how getVerticesData optionally works (and plumbing of the in between function calls for this in Geometry:

public getVerticesData(kind: string, copyWhenShared? : boolean): number[] {    var vertexBuffer = this.getVertexBuffer(kind);    if (!vertexBuffer) {        return null;    }    var orig = vertexBuffer.getData();    if (!copyWhenShared || this._meshes.length === 1){        return orig;    }else{        var len = orig.length;        var copy = [];        for (var i = 0; i < len; i++){            copy.push(orig[i]);        }        return copy;    }}

I call MergeMeshes in the Label class, with allow32BitIndices false here:

/** * @override */public _layout(widthConstraint : number, heightConstraint : number): void {    var mergeLater = !Label.NO_MERGING && !this._prohibitMerging && this.getSubPanels().length > 1;                // always run super's _layout at least once with individual Letters    super._layout(widthConstraint, heightConstraint);                if (mergeLater){        var merged = new Letter(this.name + "-merged", DialogSys._scene);        BABYLON.Mesh.MergeMeshes(this.getSubPanels(), true, false, merged);        if (merged.getTotalVertices() > 0){            this.removeAll();            this.addSubPanel(merged);            super._layout(widthConstraint, heightConstraint);                        }else console.log("merge failed- " + this.name);     } }

It runs, and some of the Display is shown, but I get 32 of the above errors in the titles.  Any clues?

[GameMonetize]

Based on the error, this sounds like the index buffer has values that are greater than the current number of vertices in vertex buffer.

 

This should be handled by this line:

https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Mesh/babylon.mesh.vertexData.ts#L169

[jerome]

how many times did I get this message when designing ribbons and side orientation ... ?   quite an overdose !

 

Conlose.log, indices.length, positions.length and multiply/divide by 3 were my only friends to debug this just before the applyToMesh() call.

[JCPalmer]

Thanks, for the area of concern.  I started this morning by having a static counter of # of Labels merged so far and limit I kept upping.  It worked up to a Label with the letters "LCD".  I put the "L" in Label that merged earlier to see what would happen.  No errors.

 

Beginning to suspect that I did not get all the changes necessary to merge clones, so I hacked TOB and generated a font2D.js that never generates clones.  No errors with no limits as to how many Labels to merge.

 

No sure where to look, but my test is way to big.  Need to come up with a Panel much smaller, but still shows the error.