Line width similar to LineRenderer in Unity

[rgalindox]

Hello guys,

I'm investigating BabylonJS for our next project at the company, we have our current application built in Unity and exported to WebGL, it is working pretty well however BabylonJS seems a great alternative in terms of portability to other platforms specially mobiles. We relay a lot on line renderers into the application as we crate many items on the fly, but I see the line function in BabylonJS doesn't support width. Someone has a workaround to have lines wider on scenes? I've tried tubes but they don't look very well compared to a line drawn on the fly as I have a function that smoothes the lines using interpolation.

Thanks in advance

[Kesshi]

Lines with a custom width are not possible with WebGL (at least not on windows plattforms).
You have to simulate it with triangles. You can have a look here: https://mattdesl.svbtle.com/drawing-lines-is-hard
In my project i created a basic implementation of that technique by creating a custom BabylonJS mesh and a shader.

[jerome]

A workaround could be to use Ribbons in billboard mode.

[rgalindox]

7 hours ago, Kesshi said:

Lines with a custom width are not possible with WebGL (at least not on windows plattforms).
You have to simulate it with triangles. You can have a look here: https://mattdesl.svbtle.com/drawing-lines-is-hard
In my project i created a basic implementation of that technique by creating a custom BabylonJS mesh and a shader.

Thanks Kesshi, I'm wondering how Unity implemented this when exporting to WebGL as it looks exactly as exporting to other platforms.

[rgalindox]

7 hours ago, jerome said:

A workaround could be to use Ribbons in billboard mode.

Let me check the Ribbons and play with the billboard mode. Thanks

[rgalindox]

10 hours ago, jerome said:

A workaround could be to use Ribbons in billboard mode.

I'm playing around ribbons and they are awesome, as I can to my lines in parallel and then apply the ribbon, looks great! Do you know if the resulting ribbon is a mesh that can be clicked on? I'll test this shortly but wondering if you already tested this.

Thanks

[jerome]

Ribbons are just standard meshes : pickable, collidable, morphable, etc

good readings :

http://doc.babylonjs.com/how_to/parametric_shapes

(legacy http://doc.babylonjs.com/how_to/legacy_param )

http://doc.babylonjs.com/how_to/ribbon_tutorial

http://doc.babylonjs.com/resources/maths_make_ribbons

http://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh