I'm currently working on a project that involves dynamically generating trees using simple cubes for branches and leaves in the early prototype stages. Each tree consists of a hierarchy of cubes nested with rotations and scaling to create the final structure. The challenge I'm facing is the performance impact when rendering large trees with many cubes, causing the program to slow down significantly.
After researching solutions, I came across the THREE.GeometryUtils.merge() function, which can merge all the branches of a tree into a single object for faster rendering and transformation. However, the issue I'm encountering is that the merge process doesn't consider the parent transforms, only merging the vertices.
My attempts to resolve this issue include the code snippet below. I've tried applying the matrix to the geometry and experimenting with other adjustments, but I haven't achieved the desired outcome yet:
var newGeo = new THREE.Geometry();
var newTree = tree.clone();
newTree.traverse(function(child){
if(child.parent){
child.applyMatrix(child.parent.matrixWorld);
}
THREE.GeometryUtils.merge(newGeo, child);
});
I've created a jsFiddle demo to showcase the problem:
http://jsfiddle.net/JeYhF/2/
The left object shows 4 meshes parented inside each other, while the right object displays the merged combination. Although each component of the combination has individual transforms (11-unit translation in the y-axis and PI/4 rotation in the z-axis), they are not affected by parent transforms. The MergeTree() function in the program is the root of this issue, and it seems to only function properly in Chrome for me.
If you have any advice on how to tackle this problem effectively, I would greatly appreciate it. Thank you