Error: WebGL: drawElements?

[Pryme8]

I have a script that I call, that works when Initialize the object but then once I recall later on it works up until the point of creating the meshs.

Any ideas what I am doing wrong?

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

 

I am calling _RebuildRegion and it gives me that error when it gets to the Construct Region part, even though its the same function I call initially to build the scene...
 

TERIABLE.prototype._PurgeRegion = function(){
for(var i = 0; i < this._regionBlocks.length; i++){
	this._regionBlocks.mesh.dispose();
}
this._regionBlocks = [];
return
}

TERIABLE.prototype._RebuildRegion = function(){
	console.log("Purge");
	this._PurgeRegion();
	console.log("Get Basic Settings");
	this._getBasicSettings();
	console.log("Construct");
	this._ConstructRegion();

}

TERIABLE.prototype._getBasicSettings = function(){
	this._block_size_x = $('#block-size-y').val() || 100;
	this._block_size_y = $('#block-size-y').val() || 100;
	this._block_detail = $('#block-detail').val() || 120;
	
	this._region_size_x = $('#region-size-x').val() || 5;
	this._region_size_y = $('#region-size-y').val() || 5;
	
	this._current_x = 0;
	this._current_y = 0;
	return;	
}

TERIABLE.prototype._ConstructRegion = function(){

if(this._regionBlocks.length < (this._region_size_x*this._region_size_y)){
	
	var newBlock = {
		id : this._regionBlocks.length,
		location : {x: this._current_x, y: this._current_y},
		mesh : BABYLON.Mesh.CreateGround("block_"+this._regionBlocks.length, this._block_size_x, this._block_size_y, this._block_detail, this._scene, true),
		
	}
	
	
	newBlock.mesh.position.x = ((newBlock.location.x*(this._block_size_x))+((this._region_size_x*this._block_size_x)/-2));
	newBlock.mesh.position.z = ((newBlock.location.y*(this._block_size_y))+((this._region_size_y*this._block_size_y)/-2));
	
	newBlock.mesh.material = new BABYLON.StandardMaterial("rMat", this._scene);
			newBlock.mesh.material.diffuseColor = new BABYLON.Color3(Math.random(), Math.random(), Math.random());
	
	
	console.log("X:"+this._current_x+": Y:"+this._current_y);
	this._regionBlocks.push(newBlock);
	
	
		if(this._current_x < this._region_size_x - 1){
			this._current_x ++;
			
			}else{
			this._current_x = 0;
			this._current_y ++;	
			
		}	
		
	this._ConstructRegion();
}

 

[Wingnut]

Hi P8!  I'll tell you what little I know.  First, did you forum search?  http://www.html5gamedevs.com/search/?&q=%22bound%20vertex%20attribute%20buffers%22&type=forums_topic&nodes=16,28,29,30,31

I did.  One message held some goods.  Deltakosh says "Based on the error, this sounds like the index buffer has (number-of) values that are greater than the current number of vertices in vertex buffer."

It's something wrong with the AMOUNT-of positions, normals, or indices (or other dataKind)... on a vertexData object (that gets applied to a mesh).  I don't see any mesh-plotting happening in the code you have shown... but I might be missing something.  Hope this helps.

[Pryme8]

yea thats why I am confused I already read that post.  I am really kinda wondering what it could be.  Is it the texture creation? that would be the only thing I can think of that would have any association to vertex data besides the creation of the mesh...

Should I try disposing the entire scene and re initialize everything and see if that works?
I really dont understand, because in my console the function is firing the correct amount of times and with the correct information, but then once it completes I get that webGL error...

[Pryme8]

Ok it seems like even after I dispose the meshes when I call look at what information is still being stored in this._scene had indices data geometry data unique id count mesh data  and material data...  Why would all this not be cleared out on the dispose of the mesh?

[Wingnut]

Interesting.  Any chance you can reproduce the issue in a playground scene?

I'm really not experienced in this... hopefully smarter people will reply.  But I have a theory... though it could be wrong.

Maybe... IF the mesh is still referenced/stored in some place OTHER THAN scene.meshes, maybe it won't dispose.  For example, if a variable holds a reference to the mesh you are trying to dispose, or if a reference to the mesh is stored in someobject.someproperty... it might not dispose.  Clear variables and properties that might refer to that mesh, then try the dispose.  Just an idea.  Not sure if it has any merit/wisdom.

After the dispose, does scene.meshes still show the mesh existing?  That might be something to check.  *shrug*

[Pryme8]

Yes it does, it's like the dispose is not doing anything, im thinking about seeing what happens when I create the scene from within my object class and try the same process.

[jerome]

Actually this error is pure WebGL : this means, as Wingnut said, that you're refering (probably in your indices array) some elements out of the range of the refered array (probably in the positions, normals or uvs array)

I would advice you to log positions.length, indices.length, etc just before calling the method you're using to update/build your mesh : updateVerticesData() or setVerticesData()

[Pryme8]

Jerome this answer kinda confuses me.  I am using the same function to create them as I use to successfully create them initially.  The way I understand Mesh.Dispose() is it should get rid of it entirely and not hold information in the indices Array or the mesh or geometry array on the scene object.  I assume then the information stored on the scene object is what is causing the error.  I know its not the standard CreateGround Babylon function or that I am passing incorrect values because I put manual ones in to test and still a no go.

How do I purge all the Arrays on the Scene and basically reset the scene?  Maybe that will be the fix for now... I really wanna start implementing this new Process Stack for teriable...

[Pryme8]

*** SOLVED ***
Jerome's answer lead me down the correct path, by making me think that the only factor that could be causing this was the CreateGround function was not getting passed what I was expecting.
Even though console.log showed what I expected the variable type was incorrect.  Simply put I just had to make sure the input values ont he html form elements once passed to TERIABLE were parsed as an Integer.

simple solution to a 14 hour headache... :

 

TERIABLE.prototype._getBasicSettings = function(){
	this._block_size_x = parseInt($('#block-size-y').val()) || 100;
	this._block_size_y = parseInt($('#block-size-y').val()) || 100;
	this._block_detail = parseInt($('#block-detail').val()) || 120;
	
	this._region_size_x = parseInt($('#region-size-x').val()) || 5;
	this._region_size_y = parseInt($('#region-size-y').val()) || 5;
	
	this._current_x = 0;
	this._current_y = 0;
	return;	
}