Page MenuHome

UI: 3DView Overlay Text Contrast
Needs ReviewPublic

Authored by Harley Acheson (harley) on Jul 6 2020, 6:14 AM.
Tokens
"Like" token, awarded by vollstock2."Love" token, awarded by pablovazquez."Love" token, awarded by Tetone."Like" token, awarded by duarteframos."Like" token, awarded by EAW.

Details

Reviewers
None
Group Reviewers
User Interface
Summary

I have submitted something similar to this a long time ago, but this version is an entirely different approach...

We print some text overlaid onto the 3DView but quite often it does not contrast enough with the background and is hard to see. Change to the "2D Animation" workspace and you will see it does badly against the white background.

We are currently adding a contrasting shadow below the text, but that does not go far enough. It is (necessarily) blurry and low opacity. It adds to contrast best in the mid-range where it is not needed, far too much at one end of the brightness spectrum, and does nothing at the other.

This patch replaces the blurry shadow with a crisp outline. The strokes of the glyphs are expanded in each direction, without any increased advance, and then moved slightly left and down. This is done in a single pass. And then regular text is drawn over top:

It is isn't perfect - notice the incorrect left upper of the "d" - but works quite well for this purpose. It adds contrast nicely for both light and dark text.

The outline color is chosen to match the current background color then the desired text color is mixed to provide contrast with that outline color. The outline is printed at full opacity, so that you don't see it in normal circumstances. But it will come into play when you have anything that differs greatly from the background color. You only see the outline when it is needed.

Font colors are carefully mixed to remain differentiated yet retain the desired theme hue. Shown here with the Overlay "Measurements" enabled, current on left, patch on right:

This patch should always give better result than we get currently. Vastly better at the extremes, like when you have a white or black background with highly contrasting object colors.

This patch contains a lot of changes, but almost all are single-line changes where I had to pass the v3d around. Creating the text outline is only about 5 lines. Then just a few new functions of about 45 lines in total.

Diff Detail

Repository
rB Blender

Event Timeline

Harley Acheson (harley) requested review of this revision.Jul 6 2020, 6:14 AM
Harley Acheson (harley) created this revision.

Nice job! I think it is much better than the original. However, because I know that people like @Paul Kotelevets (1D_Inc) often work in extremely dense scenes, I thought I would simulate something like that for a stress test :)
To do this I took the default cube, added a wireframe modifier and 3 array modifiers to make a sort of hyper complex rubik's cube like structure and then set the viewport shading to have cavity enabled for both, and for the object to have a flat, single color of white. I also separated all the cubes out and set them to random colors. And while most of it performs pretty well there are some cases where it is quite hard to read. Not impossible like before, though, which is very good, and the multi-colored one performs better than the white.

Hope you don't mind that I broke your perfect solution in the first ten minutes :P

Well, not sure that outlined text is better than solid semi-transparent background, that forms default contrast.
Like it works in N-panel.
It will make text look uniform, and uniform solution is better to percept, especially when long numbers are not splitted by style in the middle, and are not outline-bolded.

About measurements - the ability to change its size independently from other texts and UI scale is really appreciated.

@Paul Kotelevets (1D_Inc) wrote - not sure that outlined text is better than solid semi-transparent background, that forms default contrast...Like it works in N-panel.
It will make text look uniform, and uniform solution is better to percept, especially when long numbers are not splitted by style in the middle, and are not outline-bolded.

The way you have worded this it sounds like you are guessing about the result. Have you compiled this patch in and tried it?

hi, it's possible to see some pictures with old and new design for review the solution? thankyou.

Well, not sure that outlined text is better than solid semi-transparent background, that forms default contrast.

Yes, I think that a panel-like background (possibly only visible when over objects?) would have better readability than this patch; however, I do believe that this patch has better readability than the current solution in default blender, especially for the on object text like dimensions.

The way you have worded this it sounds like you are guessing about the result. Have you compiled this patch in and tried it?

No, I didn't tried yet, but I've seen images you provided, know about possible industry standards solutions and also know about outlined text perception issues when was working with it in graphic design.
I am familiar with fighting for better text readability.

Harley Acheson (harley) edited the summary of this revision. (Show Details)Jul 7 2020, 5:31 PM

@stefano severi (Tetone) hi, it's possible to see some pictures with old and new design for review the solution? thankyou.

No problem. I updated the screen captures in the original post (at top) to now show comparisons between current behavior and what you get from the patch.

Harley Acheson (harley) edited the summary of this revision. (Show Details)Jul 7 2020, 5:36 PM

Thank you. For me the best with your patch.

Updated to current state of master.

Harley Acheson (harley) edited the summary of this revision. (Show Details)Jul 8 2020, 6:34 PM

Updated to current state of master. Some simplification and some contrast optimization.

Harley Acheson (harley) edited the summary of this revision. (Show Details)Jul 9 2020, 8:36 PM

Updated to current state of master. Some simplification. Changes to how colored text is dealt with.

Updated to current state of master.

Updated to current state of master. Small changes to how text color is determined.