I need to generate an equally wide line in the xoz plane through Greasedline, so I used
ribbonOptions: { facesMode: GreasedLineRibbonFacesMode.FACES_MODE_DOUBLE_SIDED, directions: new BABYLON.Vector3(0, 0, Math.PI / 2) }
The line generated in this way is indeed in the xoz plane, but it is not equally wide at the corners. I hope it is equally wide. How do I do it
cc @roland the brilliant mind behind the greased lines feature.
1 Like
Sorry, I don’t have time to create a PG now however my idea is to creste the line in pointsMode: POINTS_MODE_PATH and calculate both sides of the line manually.
This could be quite easy. Get the Vector3 from points [n, n + 1]. Rotate the normalized vector by 90 degrees. Add the rotated normalized vector * width to both points[n, n + 1]. Store these values to a new array (it will represent the other side of the line) [m, m + 1]. Mix the two arrays [[m, n], [m+1,n+1], …] and draw the line in POINTS_MODE_PATH
Hopefuly you get the idea!
Next week I could create a PG for this. Let me know if you need it.
1 Like
I understand. I need to generate points on the same plane myself, which I can handle. Thank you for your reply
Hello!
Here is a working example:
2 Likes
Hello, I have encountered another issue. I used Greasedline to generate dashedlines of equal width and found that the dashes displayed at the corners were not what I wanted, as they did not appear to be perpendicular to the plane
Babylon.js Playground (babylonjs.com)
Is there a good way to handle it
The following image is displayed in my project
I used your PG to generate equally wide highways using Greasedline, and drew equally wide lane lines on the highways using GreasedLine. These lane lines are dashed, but the presentation of dashlines is only slightly problematic
You can use colors to achieve the same effect:
Set the second color to the same as the bg color of your line:
If you want longer color segments, repeat the colors:
[white, white, white, bgcolor, bgcolor, bgcolor]
If you want transparency you can use vertex colors:
@Kelede did this solve your problem?
I haven’t dealt with my problem very well yet. I’m working on it. I used the method you provided and found that if there is a large corner angle, there will be generated point interleaving. I tried to modify it, but it didn’t have a good effect. Then, I referred to the code of line2d and it is currently in progress
Babylon.js Playground (babylonjs.com)
I modified the method of line2d to generate points, and then used GreasedLine to generate lines.
Draw a Line With a Set Width | Babylon.js Documentation (babylonjs.com)
1 Like