Combining meshes without drawing them and performance issues

Lets say I’m given a bunch of points along a line that contain a from and to value (both 3d vectors), each from and to value is paired with a corresponding radius. I’m drawing 10,000 meshes and they all are tubes with varying radius and lengths and to speed up rendering I want to draw them all together,

Would combining them all speed up performance?

Is there a way to combine them all during creation?

For reference it kinda looks like this, but imagine 10000 of these little things slowing down the webpage

The initial data would look like: [{from, to, radius}, {from, to, radius} … etc]
from and to looks like: {x, y, z}
radius is an float

Is every tube going to be connected on the ends? Or could they end up being their own separate entities?

They’re all their own separate entity

Did you also want each one to have its own material?


Is what a group of them would look like. And yes they need to maintain their respective colors

Do you have a playground link?

1 Like

It looks like each group is composed how I thought they might be, just 1 tube with varying radius at certain points.

This playground shows how to use the radiusFunction on MeshBuilder.CreateTube function.

1 Like

So another addition to this would be, I would need to maintain color on certain faces as each segment has a color property plus there needs to be some form of face recognition as each segment has unique data within it. I wasn’t sure if this was possible using the radius function as it draws it correctly but might need some workarounds.

If you don’t need fancy materials, you can use vertex colors instead. Still have to tackle performance issues with a lot of meshes. You might could look at using SPS. I haven’t done a lot with it yet, but have seen some examples that are impressive in terms of performance.

1 Like

I always thought SPS was used for point clouds or for effects. I also think for SPS I still have to create an underlying mesh in order to generate an SPS mesh. Hmmmm

I also don’t have the colors or radius set by default, they’re updated dynamically based on the data within each tube and what the user wants.

The tubes radius can be updated dynamically. Dynamically morph a mesh - Babylon.js Documentation

1 Like

Hmmm I would still need a way to be able to identify which segment is being looked at, is that possible by just morphing the mesh with the radius function?

Here’s a video of what I have now with a reference of about 2000 meshes and it’s speed:

The only issue is speed at the >10000 mesh count

Ahh, I see. It is probably possible to look get which segment is being hovered over, but I think this may not be the best way. I would have to work on it more to get a solid answer. I think it is worth looking more into SPS though. Might be able to keep most everything the same, and just add each mesh to the SPS.

1 Like

mmh… well, your tubes look like simple colored cylinders stuck ones on the others, don’t they ?

In this case, you could use a SPS with a single model shape : one cylinder.
Then create as many as needed cylindric particles, color them, scale them and locate them by groups and stacks.

1 Like

Yes you are correct, each segment is drawn individually as cylinders that overlap one another which bogs performance when I have a bunch of segments and it feels necessary, but the only issue was uniqueness in the data and cylinders.

So render one shape with all the radii of each segment, turn it into an SPS mesh and respectively color the particles based on location and group them for future event handling?

Would each particle have it’s own event handler/hitbox/pickability for displaying info?

Also if I had enough particles I’m assuming the integrity of the shapes are maintained?Also why would this be faster, doesn’t Babylon need to check every single particle to see which is hit? I’m just curious at this point

Now that I am playing with SPS some, I think you will still have issues using tubes in SPS, especially if you want to view like 10000 of them. https://www.babylonjs-playground.com/#2FPT1A#310 This is using 1000 spheres and it bogs down my PC when creating. 10k causes the tab to crash.

1 Like

Yea 10k meshes just freeze the tab and crashes it for me too. I was thinking of just creating the 10000 objects in the background, stealing their faces, normals, vertex, color and creating a single mesh with all their info so that babylon would only render 1 mesh and do some face picking to determine what’s been hovered over to display information.

I wish I was able to come up with some better answers for you, sorry about that. I am sure you will get it though!

1 Like

This is essentially what a SPS does.

20K pickable SPS particles. Of course cylinders have more vertices so would be slower.

It is worth reading the full facilities of an SPS Use the Solid Particle System - Babylon.js Documentation it is very versatile.

1 Like

Yes, 10K different objects is really a big number to render anyway, whatever the way you’ll try (because they are different and because of the huge number of vertices).

Maybe try to aim a lower number ?

About the SPS, what I would do :

  • create a single cylindric model SPS (maybe something baked translated on Y so it’s based on positive y)
  • define that each your tubes is a stack of, say, 5 cylinders that I call “rings”, each having a height and a radius
  • parent successive solid particles to each other by pools of 5 :
    • scale ring0 with its height on Y and with its radius on X and Z, assign its color, locate ring0 to its position in the space
    • set ring0 as ring1’s parent, locate its position.y at ring0 scaling.y, set its scaling.y with its height and its scaling.x and .z with its radius, assign its own color
    • repeat for ring2, parented to ring1, and so on
    • after the 5th ring, process the next particle as ring0 and iterate

So with 50K cylindric particles (please reduce the tessellation to something quite low like 10 or 12, and set only one segment on the cylinder height), you could theorically manage 10K different tubes with different sizes and colors on their rings in a single draw call.

As the particles are parented by pools of 5, you only need to locate/rotate the particles ring0 to set your tubes in the space then.

prototype in progress : https://www.babylonjs-playground.com/#PN6F08#4

1 Like