Add a darker outline to 3D gizmos to ensure better visibility

[lentsius-bark]

Describe the project you are working on

Currently preparing for a jam. Setting up a 3d game boilerplate.

Describe the problem or limitation you are having in your project

The gizmos can disappear when against a similarly coloured background. This issue can happen at random and turns into an unpredictable painpoint when working in 3D. One never knows when a material and the WE (world environment) settings will make it 'camouflage' the gizmo handles.

Z rotate and grab handles barely visible.

Considering that the sky and water often get a shade of blue the chances of losing

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

Perhaps someone with a better idea will come along, I've, so far, thought of a couple of solutions:

1. Give the gizmos a "shaded" material, which would automatically give them shading and therefore making them visible even when put against the same colour. UE does it this way I believe.
2. Add a dark outline around the move, rotate and scale gizmos to ensure that they'd be visible against brighter or similarly-colored backgrounds

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

here's a mockup of the gizmo with darker outlines:

and the same image but zoomed out:

Here's a screenshot UE5's gizmo which is shaded (dither? shaded when occluded by geometry):

And a screenshot of UE5's rotation gizmo:

(notice the darker edges which ensure better visibility at varying backgrounds of similar colour palette)

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

It will be used often. Similarly to how the scaling operation in 3D was broken for a long time without any reports, I believe the main reason why this hasn't been brought up yet is the relatively small user base of 3D users. Which has by now potentially learnt to live with the current ux quirks.

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

It is directly linked to 3D gizmos, those are created and set up in core also, directly linked to improving the usability of the 3D editor in situations which have till now turned finding the handles slightly more complex.

[lentsius-bark]

@Calinou thanks! I've edited the title and content to align with the proposal of darker edges around gizmos related to them having bad visibility on similarly coloured elements in their direct background.

[Calinou]

cc @JFonS

[charlesmlamb]

It looks nice, I'm mostly worried about pointless information, tbh. looks quite good but, well adding information, that does nothing, tends to be towards worse UX . . I would maybe to see some customization options or, if it was made more subtle . .

Imo, this gives an unintentional stylized look, to the gizmo and, I think the more neutral default one is better, for any project, however it's also neat, the new stuff . . . Saw this on twitter, it's a neat idea . . .

Second way of doing it, would be to place a black line inside, not outside the well circles . . .

I think it adds less information, and avoids it looking stylized or, cartoon, or one could use a darker red-green-blue, for the center, though a mostly dark is prob. best . . . It'd be a kick - ass gizmo but, not one has seen bef., in any engine . . . <3

[charlesmlamb]

Or, one could add a dashed line center, or some pattern, instead of a line on either side, some line, in the center, prob. just a dark color, out ordinary color . . . .

Anyway, that'd solve the problem, one could even make front facing side, of loop be quite dark, and inside ( inward facing loop side ) be closer, to color of the ring, so just dark red . . . That give information, about which loop was facing front or, so . . . .

Some ideas, don't know about spacing but, I'd rather do it that way, to avoid a stylized look, for engine that is made for realistic and, also stylized stuff, ie. it'd look weird, in quite realistic games but, then super - neat for stylized, however some stylized titles, don't have edges, that are drawn, just inside cel-shading, so it's difficult to find a look, that fits all projects . . . I'd rather have some pattern, inside the ring, not sure . . . .

I really like the proposal, hope something can be done, there are several ways to paint a pattern, or edge on rings, was hoping someone might make some prototypes and, see if there some good ones . . .

[lentsius-bark]

@charlesmlamb Interesting!
There's one thing I'd worry about with your design, being that user can tweak the gizmo size, which can make a single axis line as slim as 2 or 1px, in which case the line running through the center could start to look like a shadow or even disappear. 🤔 though there might be a workaround for that.

Also I believe that an outline doesn't by definition create a cartoon-ish effect, for instance (quick mockup):

[rsubtil]

This would also be consistent with godotengine/godot#42995 and godotengine/godot#36530

About worries regarding UX, what if the gizmos displayed outlines only when the mouse is near them?

[lentsius-bark]

@ev1lbl0w hadn't realised this was being worked on and right you are. Now that the same issue is being solved with the other UI elements similarly it would make sense to add it to the gizmos.
The only question is what the best solution is, the other changes have been applied to purely UI elements, where's 3D gizmos are objects in the 3D world, the outline might be ideal, might not.

My idea proposes the outline, having seen how other engines and 3D programs do it I've noticed that making the gizmos "shaded" is more prominent solution.

[lentsius-bark]

@ev1lbl0w showing outlines only when the mouse is near them would be possible indeed, the UX question for the idea is whether there'd be situations when finding the gizmo at all, becomes an issue, IMO this shouldn't be a problem as the user is always likely to see at least one (usually two) of the axis present. As usually there's only colour in the background that hides one of the handles.

I'll try the shaded approach and see if that resolves the problem.

[charlesmlamb]

Be nice to see different prototypes, perhaps even live, so much easier to get an idea, then, pick the best solution . . !

Might be real tough, to code, esp. for UX stuff, UI, having a picture or, 2 - second animation, well think this has a ton of promise, then pick best idea . . !