Greased line doesn't work with right handed system

Bugs
1

I’m trying to use greased lines with a right handed system, but it doesn’t work. The lines are only visible when the camera is close, and they’re not lines, just little triangles.
image
vs

image
image644×799 149 KB

In the basic playground example, when I set scene.useRightHandedSystem = true;, nothing is visible.

1 Like
2

I had a look at the code, but I’m too new to BJS to understand it. But perhaps @roland might be able to confirm if this is a bug and know how to fix it if so?

3

Hey @parched! Welcome!

This is a bug. I didn’t take the existence of the right handed system into account when I created GRL. Let me have a look at this issue a bit later today.

Thanks for reporting!

:vulcan_salute:

1 Like
4

Welcome to the wonderful land of left- and right-handed coordinate systems madness!

3 Likes
5

I am still at work but already thinking about the issue and theoretically GRL has to work in both coordinate systems. But it seems there are land mines everywhere and I’ve just stepped on one of them :roll_eyes:

6

Thanks for the quick reply @roland and thanks for the greased lines, they work perfect in the left-handed system which is fine while I’m doing development, it just leaves my building mirrored.

7

You have to turn off back face culling for the lines:

line.material.backFaceCulling = false

to use GreasedLine with the right handed coordinate system.

I will put this information into the docs.

8

You are welcome! I’d be happy to see how do you use GRL so show some screenshots if it is posibble.

Glad to hear that :slight_smile:

9

Thanks, that did the trick.

Sure, but my use of greased lines is very basic for now, I just wanted a line system that scaled when I zoomed.
They are the teal panel outlines in picture below.

image
image1755×618 186 KB

1 Like
10

Hi @roland

I’m using a very early, stripped down version of your greased line in our Babylon React Native app, and we use a right hand coordinate system also, so I ran into this issue. I resolved it like so:

Instead of …

grlFinalPosition.xy += grlNormal.xy * grlSide;

Just replace the sign …

grlFinalPosition.xy -= grlNormal.xy * grlSide;

How you’d detect RH vs LH coordinate system in the shader, I don’t know. I just hard-coded it for our purposes.

3 Likes
11

Hello!
I decided not to make any changes to the implementation because the user can switch the scene to right handed coordinate system any time and disabling the culling works whenever this happens. However changing the coordinate system should mark all materials dirty (I am not sure) so the shader could be recompiled with the right coordinate system in mind but I was looking for the easiest solution :partying_face: Thank you very much for your advice! If the team will insist on making the changes I’ll use your proposed change and you already saved me time to figure out the solution! Yo! However I would rather change the sign of the normal in the shader.

:vulcan_salute:

2 Likes
12

I couldn’t resist :rofl:

Thanks again buddy!

2 Likes
13

Nice one @roland !

1 Like
14

@parched

After this gets merged you will not need to turn off backface culling anymore. Please set the scene to RH before creating the lines.

1 Like
15

Hi @roland, thanks for the fix. I can turn backface culling back on and it works.

I’ve noticed a few other peculiarities though. When a line has multiple segments, the join is a bit weird.

image
image902×533 80.3 KB

I doesn’t seem specific to right handed system though. This is the playground example with left handed.
image

16

Hello!

You have three options how to connect thick lines:

    const points1 =
        [
            -5, 7, 0,
            5, 7, 0,
            5, 13, 0
        ]

This will distort long lines because the line shares vertices at the ‘elbow’ of the line. (see the image below)

    const points2 = BABYLON.GreasedLineTools.SegmentizeLineBySegmentLength(
      BABYLON.GreasedLineTools.ToVector3Array(  [
            -5, 0, 0,
            5, 0, 0,
            5, 6, 0
        ])
    , 0.1)

You can split the line into smaller segments.

    const points3 =
    [
        [
            -5, -7, 0,
            5, -7, 0,
        ],
        [
            5, -7, 0,
            5, -1, 0
        ]
    ]

You can define [] [] points so it doesn’t share vertices. You can modify the points position so the line will overlap better. In our case thw width of the line is 1, so subtract 0.5 (half of the width) from the x position [4.5, -7, 0, 4.5, -1, 0]

Or you can combine these approaches together. (segmentize only the portion of the line close to the elbow or draw an extra line which connects the elbowed two line segments manually)

image
image630×1568 26.4 KB

image
image888×1524 76.1 KB

1 Like
17

Greased line material cannot be cloned ：https://playground.babylonjs.com/#H1LRZ3#136
at line 43:

const material2 = line1.material.clone(“lines2”)

18

Cannot read properties of undefined (reading ‘useRightHandedSystem’) Not fixed yet in 6.17.0

19

This PR will fix the problem:

2 Likes
20

Sorry it had to be fixed by me primarily as I am the author but I was off the last 3 days.