# Efficiently display arcs

**URL:** <https://forum.babylonjs.com/t/efficiently-display-arcs/16147>\
**Category:** Questions\
**Created:** [November 30, 2020, 11:05am UTC](https://forum.babylonjs.com/t/efficiently-display-arcs/16147 "2020-11-30T11:05:50Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![zacherl](https://avatars.discourse-cdn.com/v4/letter/z/8dc957/32.png) [@zacherl](https://forum.babylonjs.com/u/zacherl)\
**Post date:** [November 30, 2020, 11:05am UTC](https://forum.babylonjs.com/t/efficiently-display-arcs/16147/1 "2020-11-30T11:05:50Z")

</div>

Dear community,

I am trying to visualize angles via an arc and I’m looking for an efficient way to display and update these arcs. My first idea was to use a disc mesh, set the arc property and apply a partially transparent texture so that only the border is visible. However, it seems the arc cannot be updated later on.

Is there a better solution to do what I want to?

Kind regards,  
zacherl

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 30, 2020, 1:50pm UTC](https://forum.babylonjs.com/t/efficiently-display-arcs/16147/2 "2020-11-30T13:50:47Z")

</div>

I am not entirely sure what you are trying to do ☹ Could you put it in a playground so it would be easier to have a look ?

---

<div class="post-metadata">

**Author:** ![zacherl](https://avatars.discourse-cdn.com/v4/letter/z/8dc957/32.png) [@zacherl](https://forum.babylonjs.com/u/zacherl)\
**Post date:** [November 30, 2020, 2:08pm UTC](https://forum.babylonjs.com/t/efficiently-display-arcs/16147/3 "2020-11-30T14:08:42Z")

</div>

Thank you for your answer. Basically, I’d like to draw angles similar to this PG (the colored lines within the triangle):

[https://playground.babylonjs.com/#FUK3S#47](https://playground.babylonjs.com/#FUK3S#47)

However, I want to have thicker lines. I’m using an orthographic camera, so I could use also something like the tube here:  
[https://playground.babylonjs.com/#Z1SIC#1](https://playground.babylonjs.com/#Z1SIC#1)

However, the angle should often be adjusted since we allow dragging the points around, so I thought recreating the mesh all the time would be too expensive, especially since we are using it on mobile browsers.

Is it more clear now?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 30, 2020, 2:12pm UTC](https://forum.babylonjs.com/t/efficiently-display-arcs/16147/4 "2020-11-30T14:12:12Z")

</div>

Way more clear thanks a lot 🙂

The last paremeter of createLines called instance can help you update an existing instance. Maybe you could check if it fits your needs ?

---

<div class="post-metadata">

**Author:** ![zacherl](https://avatars.discourse-cdn.com/v4/letter/z/8dc957/32.png) [@zacherl](https://forum.babylonjs.com/u/zacherl)\
**Post date:** [November 30, 2020, 2:33pm UTC](https://forum.babylonjs.com/t/efficiently-display-arcs/16147/5 "2020-11-30T14:33:49Z")

</div>

This would work, but I cannot change the width of the line, can I? Furthermore, I heard that lines are not very performant. Is this wrong?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 30, 2020, 2:38pm UTC](https://forum.babylonjs.com/t/efficiently-display-arcs/16147/6 "2020-11-30T14:38:04Z")

</div>

Yup width is impossible to change, so in your case, you could maybe use planes instead and instances ???

---

<div class="post-metadata">

**Author:** ![zacherl](https://avatars.discourse-cdn.com/v4/letter/z/8dc957/32.png) [@zacherl](https://forum.babylonjs.com/u/zacherl)\
**Post date:** [November 30, 2020, 2:38pm UTC](https://forum.babylonjs.com/t/efficiently-display-arcs/16147/7 "2020-11-30T14:38:52Z")

</div>

I actually do not understand how I could use planes and instances. 😅

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 30, 2020, 2:54pm UTC](https://forum.babylonjs.com/t/efficiently-display-arcs/16147/8 "2020-11-30T14:54:16Z")

</div>

The idea would be to make them all follow an arc vs what I did here: [Babylon.js Playground](https://playground.babylonjs.com/#1E93K3)

So it might be a bit intense 🙂

Maybe you should look at our path and ribbon functionnalities ? [Ribbon In Detail | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/mesh/creation/param/ribbon_extra)

---

<div class="post-metadata">

**Author:** ![zacherl](https://avatars.discourse-cdn.com/v4/letter/z/8dc957/32.png) [@zacherl](https://forum.babylonjs.com/u/zacherl)\
**Post date:** [November 30, 2020, 3:22pm UTC](https://forum.babylonjs.com/t/efficiently-display-arcs/16147/9 "2020-11-30T15:22:39Z")

</div>

Thanks a lot for your hints. I just realized that tubes with a path tracing feature will be sufficient:

[https://playground.babylonjs.com/#FUK3S#48](https://playground.babylonjs.com/#FUK3S#48)

If I use a fixed amount of points, I can also easily refresh the created mesh.