Different behavior of lines when scaling in orthogonal camera mode

Playground

I created two triangles using CreateGreasedLine and CreateLines respectively, where CreateGreasedLine will be wider.

When I use the orthogonal mode of ArcrotateCamera to zoom the screen, when zoomed to a certain extent, the graphics created by CreateLines will appear very crowded and even wider than CreateGreasedLine. What is the reason for this and how to modify it.

I think CreateLines should be thinner than CreateGreasedLine for the correct effect.

Cc @roland :slight_smile: (your feature is a freaking successful one mate!)

1 Like

I started to write it because we needed to visualize pipes and electrical wiring in our digital twins and there are tens of thousands of lines even in a smaller building with various widths/colors, we can show water flow in pipes using animating the dash of the lines, so quite cool. BUT it actually looks very good only when using thinner lines. When people started to draw thick lines I realized that the joints must be improved because it looks like shit. :smiley:

The lines are thinner at joints (or thicker, depends on the angle)

because they share vertices and the joints and to keep the line camera facing it starts to distort.

It’s freaking me out :smiley:

I’m pretty curious why don’t anyone complain about it :see_no_evil: I believe it can be fixed quite easily by adding some more vertices at the joints so I’ll give it a try just right I’ll have some extra time. One of my friends gave me a very good advice: sleep faster LOL

1 Like

@America-first-melon You are using two different approaches here:

GreasedLine for the first line to achieve thickness and 1px thick line with edge rendering to make it thicker. Unfortunatelly you can’t compare them. Choose the one which fits your needs better.

GreasedLine has a feature called sizeAttenuation which you might want to use to get always the same width.

I am not aware of your goals. If you could explain what do you want to achieve we can help you to choose the right babylon.js feature. :wink:

https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased_line#sizeattenuation

:vulcan_salute:

@America-first-melon

Ok, I’ve managed to setup GreasedLine to look the same as the line with edge rendering:

image

@ roland I saw instructions and example effects on sizeAttenuation. Thank you very much for your answer. I still need to read more about the API. :sob:

Then the effect I need should be like this:

The farther you look, the thinner the lines you see.

I guess there should be another attribute to set this effect. I will look for the documentation first :sob: and look forward to your answer.

URL: [https://playground.babylonjs.com/#5LJFCF#3]

1 Like

Why do you stick to the EdgeRenderer and just don’t use GreasedLine ?
If there is a reason actually you can change the edgesWidth according to camera.radius in the render loop so you basically:

    scene.onBeforeRenderObservable.add(() => {
        lines.edgesWidth = camera.radius * ???
    })

For example like here:

Another thing is how you use GreasedLine:
If you need only one color in your line you don’t need these lines:


All you have to set is:

{
  width: 0.5,
  color: BABYLON.Color.Red()
}

It’s like this, In the previous historical code, edgesWidth was used to create a line with width.

After recently setting up orthogonal mode, lines created using edgesWidth will have some display differences (initial question).

I found a way to use onBeforeRenderObservable in the forum. And i’m looking for if there’s a simpler way like sizeAttenuation that sets the attribute directly.

At present, it seems that it should be the design of Babylon.

I will use onBeforeRenderObservable or GreasedLine to modify the historical code.

Good night thank you. :first_quarter_moon_with_face:

1 Like

Please mark a solution. Thank you!

BTW 10:32 AM here :stuck_out_tongue:

Good night anyway :sleeping:

1 Like

Greased line is much more faster and if you need simple colored lines choose the material type simple and you’ll get blazingly fast renderings speeds.

Okay I’ll try it.

1 Like