Efficiently display arcs

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,

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

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


However, I want to have thicker lines. I’m using an orthographic camera, so I could use also something like the tube here:

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?

Way more clear thanks a lot :slight_smile:

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

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?

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

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

The idea would be to make them all follow an arc vs what I did here: Babylon.js Playground

So it might be a bit intense :slight_smile:

Maybe you should look at our path and ribbon functionnalities ? Ribbon In Detail | Babylon.js Documentation

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


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

1 Like