Moving multiple Line is extremely slow than using one single Line

Questions
1

Hi I’ve create a project that has a bunch of moon objects orbiting a sun. I’d like lines between each of the moons as they orbit.

I’ve tried creating two ways of connecting these moving moons:

  1. One single line with a BufferGeometry with multiple points (see: Webpack App)
  2. Multiple lines with 2 points (see: Webpack App)

Why is singleline so much more performant than multiline?

You can see the github project here: GitHub - mbalex99/hero: ditto hero webgl

2

Because the single line approach produces way less draw calls. Draw calls are a typical source for performance problems in apps. You should always ensure to keep the number of draw calls as low as possible.

3

I see! That makes sense.

The reason I wanted multiple lines is that I wanted a material that I could dynamically control the opacity between each of the moons given the distance.

I can’t seem to find any code examples where a BufferGeometry can have multiple materials. I’ve tried the following. Nothing shows up!

const geometry = new THREE.BufferGeometry().setFromPoints(points);
const materialA = new THREE.LineBasicMaterial({ color: 0x00ff00 });
const materialB = new THREE.LineBasicMaterial({ color: 0x0000ff });
const line = new THREE.Line(geometry, [materialA, materialB]);
4

A draw call is a single geometry, drawn with a single material1. It is possible to use the geometry.groups property to assign multiple materials to a BufferGeometry, but this will result in as many draw calls as you have materials.

If you just need different colors for each line, you can use vertex colors (example) to do that. three.js does not yet support per-vertex opacity with vertex colors, but that is in progress (#20975).

1 An exception here is THREE.InstancedMesh, but it still requires a single material, and wouldn’t be the right choice for distributing individual line segments. For that, vertex colors are a better choice.

1 Like
5

If your goal is to toggle the visibility of target segment, then I do have a very simple solution for you.

6

@mbalex99
Hi!
Seems, you’re looking for something like this: three.js examples.

7

I wouldn’t say toggle the visibility… but more like if the distance between the lines are close, then the opacity gets closer to 1. If they are far it the line’s opacity gets closer to 0.

Do you recommend a solution for that?