Rotate axis labels that are longer than 4 characters in 3D scenes (issue #3077)

[archmoj]

This PR is to enable the interactive alignment of axis tiles (labels) that are long i.e. to avoid the overlap of layout descriptions with data representation: issues #3077 and #511 .
For various reasons this functionality is not applied for labels that are shorter than 4 characters e.g. 'x', 'y', 'z'. As a result during the image test there were only 2 images that needed to be replaced which now have vertical titles on their z-axis.
To achieve this, changes are made to textVert.glsl shader as well as axes.js of gl-axes3d module.
Having this new setup, it could also be possible to orient axis ticks as well (once there is a config option).
It may also be possible to remove horizontal & vertical alignments locks in the shader and to try orienting every title towards its axis.
@etpinard
@alexcjohnson

[archmoj]

gl-vis/gl-axes3d@master...archmoj:rotate3d-axis-lables

[archmoj]

gl-vis/gl-axes3d@master...archmoj:rotate3d-axis-lables

[etpinard]

Let's try to get this part of v1.42.0

[etpinard]

Here's a look at @archmoj's "dynamic" behavior:

[alexcjohnson]

FYI @archmoj and I agreed that he will extend this so the titles exactly match the axis angles, rather than being restricted to exactly horizontal or vertical.

[archmoj]

Alex, what do you think about these?

[archmoj]

@alexcjohnson This could be a good version to test & merge.
@etpinard Could you please help with updating the baseline images? This time the image test on CircleCi stopped after encountering only a few differences. So I was not able to collect the rest of changes. Thank you!

[archmoj]

No need for generating baseline images. They are uploaded. I am looking forward for your review.
@etpinard @alexcjohnson

[alexcjohnson]

Whew, late night @archmoj! 😴

Tick labels on all 3 axes behave the same now, which is great 🎉 and the titles are still fantastic 🏆
But the condition for flipping the tick labels between rotated left and rotated right seems weird. Particularly if I point one of the axes close to straight in/out of the screen, I can get labels rotated far past vertical. They're still all determining when to flip independently, and again I wouldn't spend time on that issue right now, but in lieu of a solution like that (which, based on some experimentation like the bottom image below I'm not even sure is a good idea anymore) we should simply restrict their individual angles to [-90, 90]. Some examples of what I see now:

All "moneyness" tick labels are upside-down:

140 and 160 are past vertical but at least consistent with 40-120, yet 180 and 200 flip to right-side-up:

[archmoj]

Thanks for your observations. I agree for ticks we could also the set the default tolerance to zero.
On another topic, what do you think about the maximum number of characters in titles so that stay horizontal? I was wondering it may be better to use a number less than 4?

[alexcjohnson]

I was wondering it may be better to use a number less than 4?

I don't have a strong opinion about this. 1-letter titles should definitely NOT be rotated, as then you don't have enough context to figure out how to read it. Long titles must be rotated (that's how we got into this issue after all!) But I could see an argument for anywhere from 2 to 4 letters being the longest unrotated title.

At some point we will make this configurable, for now lets leave it at 4 unless anyone else has strong feelings otherwise.

[alexcjohnson]

Much better. I can still find occasional cases where it doesn't behave quite as I would like, but I think we should merge this and move on. Thanks @archmoj! Can you work with @etpinard to get these changes published in the gl-* packages and updated back to npm references? Then 💃 !!!

[etpinard]

Hmm @archmoj

The gl3d_surface-lighting mock should not have changed:

as it has

[archmoj]

I think the image above compares the deleted version with the new version. But if we compare the master version with the new image, there is actually no difference. And the angles are explicitly defined for each axes as expected.

[antoinerg]

Congratulations!