I have been following the Babylon.js official documentation page on drawing lines of a set width, using the Line2D utility functions provided. In particular, I have been using the Line2D function to draw a Line in XoZ Plane.
For the most part, such function has satisfied my user requirements. One problem persists however, and it is to do with using the function to draw lines that increase on the Y axis, specifically lines that may, for instance, by travelling up a slope.
Here are a few screenshots of what I am talking about, capturing the problematic line at different angles.
As can be seen, the line renders just fine with the desired texture. Yet there is this odd twisting of the line that occurs when the line increases on the Y axis.
Playground link: https://playground.babylonjs.com/#FJO3RO
Any further information on this would be greatly appreciated. Even better an alternative approach I can use to render the exact line that I want, which is a straightened version of the same line without any twists.
This tutorial is an external contribution, but I don’t know who contributed it in the first place… cc @RaananW in case he would remember, as this page already existed when it was first committed in 2020.
Thanks for your reply.
That is unfortunate. I understand why the Line2D functions are needed: because the OpenGL specifications are limited when it comes to creating lines of fixed widths. Yet the issue is so minor that I would try fixing it myself if I had any clue how the Line2D function actually worked (the particular one I am using being ‘Line in XoZ Plane Formed from Central Path’).
Alas, I am at a loss with trying to understand it. There are not even any comments explaining it from the code given in the official documentation.
If I remember correctly, this guide was written by @JohnK , which is sadly no longer with us.
The twist happens because of the way the edge lines are computed. You can avoid it like this, if it helps:
Thank you! I didn’t expect the solution to be so straightforward. This was really helpful 
.
2 Likes
