I am facing the challenge of rendering a vast forest comprised of over 100,000 simplistic trees in ThreeJS. It is not feasible to create individual meshes for each tree. Currently, I am using GeometryUtils.merge to combine the trees into one large geometry to reduce the number of draw calls, which has been effective. However, as the number of trees approaches 100k, it starts to slow down. I am looking for ways to further optimize performance, possibly by implementing additional optimizations that could potentially increase performance by 10 times or more.
Below is the code snippet, and I have also included a JSFiddle showcasing my current approach: http://jsfiddle.net/RLtNL/
// Definition of tree geometry (two intersecting y-perpendicular triangles)
var triangle = new THREE.Shape();
triangle.moveTo(5, 0);
triangle.lineTo(0, 12);
triangle.lineTo(-5, 0);
triangle.lineTo(5, 0);
var tree_geometry1 = new THREE.ShapeGeometry(triangle);
var matrix = new THREE.Matrix4();
var tree_geometry2 = new THREE.ShapeGeometry(triangle);
tree_geometry2.applyMatrix(matrix.makeRotationY(Math.PI / 2));
// Tree material
var basic_material = new THREE.MeshBasicMaterial({color: 0x14190f});
basic_material.color = new THREE.Color(0x14190f);
basic_material.side = THREE.DoubleSide;
// Merge into a single giant geometry for maximum efficiency
var forest_geometry = new THREE.Geometry();
var dummy = new THREE.Mesh();
for (var i = 0; i < 1000; i++)
{
dummy.position.x = Math.random() * 1000 - 500;
dummy.position.z = Math.random() * 1000 - 500;
dummy.position.y = 0;
dummy.geometry = tree_geometry1;
THREE.GeometryUtils.merge(forest_geometry, dummy);
dummy.geometry = tree_geometry2;
THREE.GeometryUtils.merge(forest_geometry, dummy);
}
// Create mesh and add it to the scene
var forest_mesh = new THREE.Mesh(forest_geometry, basic_material);
scene.add(forest_mesh);
Does anyone have any suggestions for additional techniques to enhance the loading and rendering speed of this forest?