Three-line-2d with instanced buffer geometry

Questions
,
1

Hi. How can use three-line-2d library with instanced buffer geometry to reduce the amount of draw calls? I need to draw a large number of curved lines with different widths.

2

Instead of using the mentioned library, I suggest you use the “fat” lines approach from the examples which is essentially the same. Both implement triangulated lines but the code from the examples is based on instanced rendering. The following demo illustrates the basic usage:

https://threejs.org/examples/webgl_lines_fat.html

1 Like
3

Thanks. I rewrote my code to use Line2, but I have two additional questions:

  • How can I set different linewidth for different lines
  • I want to move the lines. I tried the following code, but when I start changing lines my FPS drops to 5:
    lineGeometry.setPositions(links.positions);
    lineGeometry.attributes.instanceStart.needsUpdate = true;
    lineGeometry.attributes.instanceEnd.needsUpdate = true;
4

You cant do that every frame if you have a lot of lines with a lot of vertices. What are you trying to achieve?

I wrote some articles on instancing with three, you might be interested:

5

I read your articles they are great. I am trying to build a fairly large network graph. When the user moves the node, I need to move it and all the edges associated with it. There are no problems with the nodes, but when I added the lines, the FPS drops to 5.

6

There might be a way to structure it differently and do the update in a different way. Can you share more of the context?

btw i like corn :slight_smile:

1 Like
7

Here is the code, though without data.

picking.html (3.4 KB)
picking.js (12.1 KB)

8

Would you my putting it in a fiddle?

9

In my code i use adaptive-bezier-curve package for line construction. This package creates a large number of points for the line. When i switched to simple two point lines it fix my performance. Thank all for participating.