Lines and Ellipse in Rectangle

Bugs
1

I am not sure if it is a bug, but I assume it is better to report.

While using GUI Lines and Ellipse inside a Rectangle that got thickness=0.

  1. There are different lineWidths rendered even though they are all set to equal value.
  2. The Ellipse is not centered anymore, like it is on Rectangle with thickness=1.

Here is my PG: https://playground.babylonjs.com/#DC3QM1#5

2

It does feel like investigation is needed. @carolhmj - do you have a bit of time for that? Otherwise assign me, i’ll find time to debug that.

3

Yep I was just starting to take a look at this

1 Like
5

I’m trying to reproduce this but have been unable to. See that the lines are exactly the same on the rectangles even though one has thickness 1 and the other 0: Testing lines | Babylon.js Playground (babylonjs.com). Have you tried simplifying your playground to see if there isn’t any property missing?

6

What I’ve found out is that #2 is not a bug, my positioning of lines where wrong, which is the reason why the ellipse looked like not being in the center.

Regarding #1 I tried to simplify as much as possible, but the issue is still there: https://playground.babylonjs.com/#DC3QM1#8

switch between thickness 0 and 1, then you see difference of lineWidths.

Edit: When you tweak Rectangle height/width you can reproduce even better:
If lines and rectangle-border(thickness=0) are

  • Overlapping, then everything looks good
  • when close or touching, then the issue occurs (either on bottom or right depending on what you tweak height or width)
  • far away, then everything looks good
7

Ooooh, I think I get what’s happening, since the lines are right on the border, they get clipped when the thickness is 0. If you set the border to not clip content, the issue is gone: 2D GUI Target | Babylon.js Playground (babylonjs.com)

1 Like
10

Anything that doesn’t make the line go over the borders or be clipped will work :smiley:

11

Ops, deleted my post, thought it was double posted.
Here again:

You can use lineWidth float if you don’t want to miss optimization.

1 Like