SpatialUnderstandingExample needs to have UI fixed

Trying out the SpatialUnderstandingExample I noticed that the buttons kept flickering when you keep your cursor on them. Turns out the GazeManager keeps cycling through the different layers of the UI elements and fires GazeManager_FocusedChanged of the InputManager constantly.

How to reproduce:

1. Open SpatialUnderstandingExample scene in the Unity-Editor.
2. Scan the room till you can complete the scan process to get the UI to pop up.
3. Place your cursor on any layered UI elements (tab buttons, regular buttons).
4. GazeManager will now keep firing focus changed event with the different elements in layers under the cursor.

For exampling just printing the name of the HitObject element when placing the cursor on one of the buttons and leaving it there for a few seconds:

[Zod-]

I did some more testing and found more issues. It’s not just the regression that causes the focus change firing, it only makes it slightly worse. Here doing the same reproduction steps with a commit just before the merge:

The issue is that with this UI setup, raycasts simply don’t work. I think the general idea behind the current design is wrong or has to be used differently. The main issue is that the UI all exists in the same plane. The canvas and all it’s child ui elements have the same z-coordinate so they all have the same distance to the camera. However because of floating point variations in the raycast calculations it will alwas choose a random one that is the “clostest”.

The 3D raycast will choose a random ui-element of the canvas layer which will then be compared to a different random ui-element from the ui raycast. The regression only adds a few more randomly selected ui-elements for the second one which makes it worse.

A solution would be to add a small z-position to every single ui element so that the raycasts can actually detect the depth that they have. Like this the current system could be kept but every ui would have to be set up like this.

My second idea would be to have different layers for the canvas and its ui-elements. Only the canvas itself would be hit by the 3D raycast but not any of the ui-elements. After detecting a canvas got hit we then can do a ui raycast for the other layer where we determine which is the top element by their depth in the canvas.

[Ben-Howard-bencinStudios]

Thanks @Zod- , and thanks @kmikkel … going with ease on this one, the z-value offset seems to have worked for the most part, still very subtle flicker when button or input field is gazed at, but notably better both visually and functionally. Was the quick hack I needed to meet the deadline, thanks all!