Best way to render many lines?

Questions
1

I’m rendering many lines using LinesBuilder, but after 300-400, I start to notice FPS hits.

What is the recommended way to draw hundreds (if not thousands) of straight lines (single segment) in a scene with minimal performance loss?

The only requirement is that each line needs to be individually removable.

2

Maybe the LineSystem ? Create Parametric Shapes - Babylon.js Documentation

1 Like
3

It doesn’t appear that I can access each individual line post-creation with a lineSystem. The getVerticesData() suggests that it’s a single mesh with just a bunch of edges/lines drawn into it.

4

Of course, you can access each line or segment (each being an array of Vector3) after creation, move them, change them, or color them if you create the system as updatable. Just modify the lines in the passed lines array and recall the same function by passing back the already created lineSystem object with the parameter instance.

You can’t remove lines once created though. But if you need to remove just some of them, then reduce them to a single point in an invisible location or color, this won’t change the perfs. The LineSystem can handle dozen thousands lines (or more) in one draw call.

5

I see how that works now. Hmm. I’ll have to see what the the performance is like of re-initializing a new linesystem upon add/remove. Playing size tricks to “remove” lines might introduce more complexity than the performance gain is worth. This is a debug-mode tool, so taking an FPS hit is not the worst thing in the world.

Thanks

1 Like