Yet another performance issue generating large number of meshes

Questions
1

First, the context: I’m trying to re-implement a 3D L-system generator that could eventually reproduce the constructs described in “The Algorithmic Beauty of Plants”. The underlying graphics implementation is a mix of turtle graphics with polygon and more complicated meshes spliced in. Second, I’m a JavaScript rookie, so bear with my code.
I have a working preliminary 3D turtle implementation and have run into performance problems with the number of meshes that it creates: tens of thousands of short, connected tubes are child’s play for an L-system to generate, before considering leaves and flowers. I’ve read many of the suggestions to use SPS to deal with this, but that is a bad fit for L-systems. Instances seem to be next in line, but also suffer from problems wrt to color and texture management.
So, my first attempt was to merge meshes as soon as they are generated and that is what the playground below demonstrates, but it is also painfully slow (5 or more minutes to complete). This creates 3600 tubes, immediately merging the newest with the previous mesh, ending with 1 mesh. Is there a way to optimize this? I’ve thought about creating an array of segments and merging in larger batches - will that help or is it just an issue of vertices?
If I can’t make this work, I’m thinking of trying to generate a path and create a single tube/extrusion per branch all at once. For a plant, this would still result in hundreds to tens of thousands of meshes. Again, less of a conceptual fit, but close.
the code snippet of interest is here, where 'segment is a newly created tube:

   if (this.TurtleState.TrackMesh == null) {
                     this.TurtleState.TrackMesh = segment;
                     this.meshCount[1]++;
                  } else {
                     this.TurtleState.TrackMesh = BABYLON.Mesh.MergeMeshes([this.TurtleState.TrackMesh, segment],true, true);
                  }
                  this.TurtleState.TrackMesh.id = t;
                  BABYLON.Tags.AddTagsTo(this.TurtleState.TrackMesh, tag, scene);

https://playground.babylonjs.com/#WJD8Q7#2 - be prepared to wait several minutes

2 Likes
2

Just thinking out loud, but do you have to use individual meshes? Could you just have one mesh and modify/add vertices?

3

Can I do this? I should have added I’m a rookie at both Babylon.js and graphics/animation systems in general, since I stopped playing with Logo 30 years ago. I’ve been playing with creating custom meshes for leaves and flowers, but wasn’t clear that I could add to the set of vertices.
Is there a way to delay rendering until I’ve constructed the mesh I need? I’m not sure what is taking all the time in my PG.

There are actually two competing uses for the turtle component - one is an interactive one, but the L-systems application is not; viewing progress is nice, but not required.

4

You can definitely do it, have a look at this

To delay rendering only call engine.render() when you are ready

Cheers

5

Maybe you can directly create the list of vertices / uv coordinates (if any)?

See Create Custom Meshes From Scratch | Babylon.js Documentation

6

Thanks, I had started looking at that after your comment. It seems like this should be equivalent to what MeshBuilder.CreateTube followed by MergeMeshes does, but perhaps it’s faster.

7

Thanks for the advice, all. I’ve had versions of my eventual solution in place for several months, and they all boil down to collecting a path from the underlying turtle movement and, at the end, extruding a mesh. It’s much faster, although it still can bog down on large trees, and it has the one disadvantage that you see the tree built in reverse (or more correctly, in depth-first order), since the branches , leaves, and flowers are separate extrusions and are completed before the branch they originate from. At least at this point. I’m thinking about using parallel turtles, but that’s uncooked.