Improve the ReflectionProbe editor gizmo for better visibility

[lander-vr]

Describe the project you are working on

ReflectionProbe improvements

Describe the problem or limitation you are having in your project

The reflection probes currently suffer from some extremely cluttered UI:

• Lines connecting the center offset to the corners of the bounding box. I have no idea what the purpose of these lines is, or what they're supposed to communicate to the user.
• There are a bunch of UI elements stacked on top of each other at the center:
  • Center offset handles
    • They look the exact same as all the bounding box handles for the probe itself, often causing confusion over which handle is for what purpose
    • They are unpractical to use because:
    • They are extremely close to each other
    • It's often not clear which handle is for what axis
    • They're in the same position as the 3D Gizmo, this makes it feel like you're unable to grab these handles.
  • The 3D Gizmo
  • 3 crossing lines to represent the "center offset" location
  • The ReflectionProbe Icon
  • Those corner lines coming together at the center
• It is often not visually clear which bounding box handle affects which side.
• The solid box material is pretty opaque, which makes it difficult to see what's happening inside the reflection probe while you're editing parameters

Current probes:

Describe the feature / enhancement and how it helps to overcome the problem or limitation

Corner-to-center-offset lines: We can just delete these.

The center offset handles: These can also just be removed. In my opinion they don't solve any UX issues or are an improvement over changing the Vector3 int he property panel, since they are cumbersome to use and add clutter. Maybe there could be a sort of internal context added, where you can adjust the center offset with the regular 3D gizmo. I'm not sure how complex that would be to implement though.

Representing the "center offset" location: This can just be done by the ReflectionProbe icon itself. It has another bonus, besides clearing up clutter: A typical reason to change the center offset is because the actual center is inside some geometry. Moving the icon along with the center offset makes the probe easily selectable from the 3D view again in those scenarios.

Improving bounding box handles context: Handles obstructed by the bounding box could be made slightly transparent.

Solid box opacity: Ideally, this solid box only appears while using the handles of the bounding box, however an easier improvement would be to just make this box a lot more transparent. I don't see a reason for it to be as opaque as it is.

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

If this enhancement will not be used often, can it be worked around with a few lines of script?

/

Is there a reason why this should be core and not an add-on in the asset library?

ReflectionProbe UI is core.

[Calinou]

Lines connecting the center offset to the corners of the bounding box. I have no idea what the purpose of these lines is, or what they're supposed to communicate to the user.

They're here to make the origin offset more visually obvious, especially since you can drag it directly in the 3D editor. However, I don't know how often you need to change it in practice. It's not very common to do in my experience, so maybe it's fine to remove those handles.

We still need to keep some visual representation for it, so I suggest keeping the cross but making it a lot smaller (e.g. make its lines 1 unit long each).

This can just be done by the ReflectionProbe icon itself.

The gizmo icon is always kept at the node's origin. Allowing it to move outside the origin would break that convention, so I'm not sure it's a good idea.

Handles obstructed by the bounding box could be made slightly transparent.

We should figure out a generic solution to this for all 3D gizmo handles, as this is needed in many nodes and not just ReflectionProbe. This is also a good opportunity to tint them depending on the axis they represent (red/green/blue for X/Y/Z).

Fading the probes obstructed by the bounding box is a matter of decreasing the opacity of the X/Y/Z handle that is further away from the camera (if both are visible on screen). The difficulty is that this means we'd need to update the handles every time the camera moves, which is currently not something the 3D editor gizmos are meant to do (it may have a negative performance impact).

See https://github.com/godotengine/godot/pull/60474.

Ideally, this solid box only appears while using the handles of the bounding box, however an easier improvement would be to just make this box a lot more transparent. I don't see a reason for it to be as opaque as it is.

It makes sense to reduce its opacity (I believe this was already done for VoxelGI at some point).

[lander-vr]

Regarding showing the center_offset, what we could do is show a representation of it (a smaller icon or cross-lines as they are right now) only when the center offset is not set to 0,0,0. This avoids having the pivot point be so cluttered as a baseline, but still shows the necessary information when it's relevant.

That PR looks like a huge UX improvement for these handles.

The difficulty is that this means we'd need to update the handles every time the camera moves, which is currently not something the 3D editor gizmos are meant to do (it may have a negative performance impact).

Could we do a persistent bool for each axis, keep track of whether the +axis or -axis gets drawn as closest, and every time the camera moves we compare that persistent bool to a check of which handle is closest, if there's a mismatch we execute redraw(), update those handles based on the persistent bools, and update the persistent bools for each axis?