GreasedLine Arrowheads

[apowers313]

I’ve been playing around with creating arrows using greased lines for a graph visualization project.

I have aspiration to create a bunch more arrowheads, inspired by graphviz, cytoscape, and other projects.

What’s killing me right now is getting various shapes to match the greased line when viewed from different angles: when rotated up and down, greased lines seem to keep the same width; when rotated left and right, they foreshorten. For the last week I’ve been trying to append a 2d disc at the end of a greased line mesh and get it to look like a part of the line from all angles but gaps always emerge or there are sizing issues that make it shrink and grow from different perspectives when compared the the line width.

Any recommendations as to how to add arrowheads to the end of a greased line and reliably get them to line up with the end of the line?

[Cedric]

I think you can place a billboard at the end of the line : Babylon.js docs

size will be dependent to the distance to the camera. I got asked some time ago how to keep a constant size but I can’t find the thread. gist was to scale proportinaly to the distance to camera.

[apowers313]

Thanks. I tried billboarding but if you move the camera the rotation of the billboarding doesn’t match the screen space expansion of the greased line shader.

e.g. here’s what it looks like at the start:

…but the open dot arrowhead becomes misaligned after some rotation because billboarding doesn’t match the greased line shader..

[Cedric]

Did you check this ? https://playground.babylonjs.com/?inspectorv2=true#H1LRZ3#97