GUI line connected to a control linked to a mesh, with higher zIndex got clipped at random place

Hi.

The setup is simple:

  • there’s a control linked to a mesh representing an anchor, with zIndex 2
  • there’s a line connected to the control, it’s with zIndex 1, so that it’s below the anchor.

https://playground.babylonjs.com/#5SVAQB#3

Initially it is drawn fine, but then mesh moves (by key ‘Space’ in the playground), everything get redrawn and the line got clipped at random places, somethimes it’s completely not rendered.

That happens with Ellipse and Rectangle as anchors.

That does not happen with my custom control MyDot or built-in TextBlock.
But they both produce another bug with infinite relayout somehow.

cc @amoebachant :slight_smile:

Apparently, the line is clipped by a rectangle of its previous position.
It’s quite testable by putting fingers on screen.

However, gui.useInvalidateRectOptimization = false does not help.
There’s something else.

Hi @qwiglydee - thanks for this bug report! I was able to track down the root cause today, and here’s the PR with the fix: GUI: Fix Line layout bug when a connectedControl has a higher zIndex by AmoebaChant · Pull Request #17558 · BabylonJS/Babylon.js · GitHub

I appreciate you reporting this bug!

1 Like