# Three-line-2d with instanced buffer geometry

**URL:** <https://discourse.threejs.org/t/three-line-2d-with-instanced-buffer-geometry/5268>\
**Category:** Questions\
**Tags:** instancing, line\
**Created:** [December 7, 2018, 9:16pm UTC](https://discourse.threejs.org/t/three-line-2d-with-instanced-buffer-geometry/5268 "2018-12-07T21:16:23Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![KyKyPy3](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kykypy3/32/3446_2.png) [@KyKyPy3](https://discourse.threejs.org/u/KyKyPy3)\
**Post date:** [December 7, 2018, 9:16pm UTC](https://discourse.threejs.org/t/three-line-2d-with-instanced-buffer-geometry/5268/1 "2018-12-07T21:16:23Z")

</div>

Hi. How can use **[three-line-2d](https://github.com/mattdesl/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.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 7, 2018, 9:43pm UTC](https://discourse.threejs.org/t/three-line-2d-with-instanced-buffer-geometry/5268/2 "2018-12-07T21:43:01Z")

</div>

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](https://threejs.org/examples/webgl_lines_fat.html)

---

<div class="post-metadata">

**Author:** ![KyKyPy3](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kykypy3/32/3446_2.png) [@KyKyPy3](https://discourse.threejs.org/u/KyKyPy3)\
**Post date:** [December 8, 2018, 8:34pm UTC](https://discourse.threejs.org/t/three-line-2d-with-instanced-buffer-geometry/5268/3 "2018-12-08T20:34:32Z")

</div>

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:

```auto
    lineGeometry.setPositions(links.positions);
    lineGeometry.attributes.instanceStart.needsUpdate = true;
    lineGeometry.attributes.instanceEnd.needsUpdate = true;

```

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [December 9, 2018, 10:58am UTC](https://discourse.threejs.org/t/three-line-2d-with-instanced-buffer-geometry/5268/4 "2018-12-09T10:58:06Z")

</div>

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:

> **[Instancing with three.js — Part 1 – Dusan Bosnjak – Medium](https://medium.com/@pailhead011/instancing-with-three-js-36b4b62bc127)**
>
> This is a three part series on a somewhat broad technical 3d topic. The first part is a theoretical overview of the technique, the second…

---

<div class="post-metadata">

**Author:** ![KyKyPy3](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kykypy3/32/3446_2.png) [@KyKyPy3](https://discourse.threejs.org/u/KyKyPy3)\
**Post date:** [December 9, 2018, 11:35am UTC](https://discourse.threejs.org/t/three-line-2d-with-instanced-buffer-geometry/5268/5 "2018-12-09T11:35:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [December 9, 2018, 11:36am UTC](https://discourse.threejs.org/t/three-line-2d-with-instanced-buffer-geometry/5268/6 "2018-12-09T11:36:47Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![KyKyPy3](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kykypy3/32/3446_2.png) [@KyKyPy3](https://discourse.threejs.org/u/KyKyPy3)\
**Post date:** [December 9, 2018, 11:39am UTC](https://discourse.threejs.org/t/three-line-2d-with-instanced-buffer-geometry/5268/7 "2018-12-09T11:39:53Z")

</div>

Here is the code, though without data.

[picking.html](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/a/ab350c5ca5f169cbceaeb30ce15d82d5288c9cd9.html) (3.4 KB)  
[picking.js](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/cf29a7dc4a9321d974d064568eab1b046f1398b9.js) (12.1 KB)

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [December 9, 2018, 7:19pm UTC](https://discourse.threejs.org/t/three-line-2d-with-instanced-buffer-geometry/5268/8 "2018-12-09T19:19:45Z")

</div>

Would you my putting it in a fiddle?

---

<div class="post-metadata">

**Author:** ![KyKyPy3](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kykypy3/32/3446_2.png) [@KyKyPy3](https://discourse.threejs.org/u/KyKyPy3)\
**Post date:** [December 10, 2018, 9:20pm UTC](https://discourse.threejs.org/t/three-line-2d-with-instanced-buffer-geometry/5268/9 "2018-12-10T21:20:58Z")

</div>

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.