Hey there, I am interested in creating multiple cubes with unique textures for each cube. In order to optimize performance, I've combined the geometries into a single mesh. However, I've encountered an issue with textures as I currently require a draw call per texture. Is there a way to merge textures similar to how I merged the geometries, so I can create a single texturized mesh with just one draw call?
Here is my current code snippet:
var geometry = new THREE.Geometry();
var materials = [];
for(var p = 0; p < 1000; p++){
var height = Math.floor((Math.random() * 100) + 50);
var box = new THREE.BoxGeometry(10, 5, 10);
box.translate(
Math.floor((Math.random() * 100) + 50),
Math.floor((Math.random() * 100) + 50),
Math.floor((Math.random() * 100) + 50));
var texture = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load(textures[p])});
texture.needsUpdate = true;
geometry.merge(box);
materials.push(texture);
}
var mesh = new THREE.Mesh(geometry, materials);
el.setObject3D("mesh", mesh);
I believe the solution may be to associate a texture per geometry or to combine different textures into a single texture. Any advice on this matter would be greatly appreciated. Thank you in advance.
I am using A-Frame v.0.7.1, but I believe this issue pertains more to Three.js.