Recently, I decided to try out the InstancedBufferGeometry method in order to improve performance when rendering thousands of objects. Specifically, I wanted to create instances of cube geometries with varying heights.
AFRAME.registerComponent('instancing', {
schema: {
count: {type: 'int', default: 10000}
},
init: function () {
this.count = this.data.count;
this.model = null;
},
update: function () {
if (this.model !== null) { return; }
var data = this.data;
var el = this.el;
var count = this.count;
var geometry = new THREE.InstancedBufferGeometry();
geometry.copy(new THREE.BoxBufferGeometry(10, 5, 10));
var translateArray = new Float32Array(count*3);
var vectorArray = new Float32Array(count*3);
var colorArray = new Float32Array(count*3);
var vertices = new Float32Array(count * 24);
// Populate vertices array with random height values
for(var i = 0; i < count; i++){
var y = Math.floor((Math.random() * 200) + 50);
// Populate vertices for each face of the cube
// Code snippet truncated for brevity.
}
// Additional code snippets omitted for brevity.
Unfortunately, I encountered an error stating [.Offscreen-For-WebGL-0x17d96d74a000]GL ERROR :GL_INVALID_VALUE : glVertexAttribPointer: size GL_INVALID_VALUE (index):1 [.Offscreen-For-WebGL-0x17d96d74a000]GL ERROR :GL_INVALID_OPERATION : glDrawElementsInstancedANGLE: attached to enabled attrib 1 : no buffer. I'm still learning and exploring Three.js's low-level functions and started with A-Frame, but it seems like I need a more specialized approach for my project to achieve optimal performance.
I aim to have multiple cubes of different sizes positioned at various locations. Any advice or suggestions would be greatly appreciated. Thank you in advance!
Here is TheJim's solution: