Fix wrong transparent object menu buttons and texts

[takahirox]

This PR fixes #4416 and #4417 by applying alphaTest to slice9 component and making slice9 opaque for object menu buttons.

The screenshot of this PR. Please compare with the ones in #4416 and #4417.

Currently slice9 component doesn't have alphaTest attribute so I made my fork.

If this change looks good and we merge, I will make a PR to slice9 component. When it will be merged, I will update package.json and package-lock.json.

The mechanism of the problems

• The text is placed in front of the slice9 component and the slice9 component is placed in front of an object
• Currently all of them are somehow transparent and farther objects should be render first
• Three.js determines the render order by checking the distance of objects from the camera to generally the center of the objects
• If object group in which the text, the slice9 component, and the object are involved, is rotated and/or it is far from the camera, Three.js can wrongly determine the render order and render the texts or slice9 earlier than others (This is the limitation of the current efficient but non-perfect render order decision algorithm of Three.js)
• If it the wrong render order happens overlapped areas of slice9 and object are not rendered because of depth test. This is the reason why currently texts and the around of slice9 can be transparent to background

How to solve

• The slice9 component seems to be expected to be transparent because the component renders to the plane geometry mesh and uses alpha blend to cut off the four corners
• But for that purpose, using alphaTest should be smarter and more efficient than alpha blend (=transparent). So I introduced alphaTest attribute to the slice9 component and it resolves The around of the circled buttons in object menu can be weird #4417 because the four corner will be discorded in the shader and (my understanding is) the depth will not be written neither.
• With alphaTest, we can make the slice9 components for the object menu opaque. In Three.js opaque objects are rendered earlier than transparent object. So the render order between texts (transparent) and slice9 (opaque) will be always correct and The contents of the buttons in object menu can be tranaparent #4416 will be fixed.

Note

• The font we currently use seems to require transparent. So opaque texts can't be a solution unless we change the font.

[takahirox]

Updated the PR comment.

[netpro2k]

The edges of the buttons definitely look a bit messier with this since they can't be anti-aliased but I think its a reasonable tradeoff, and things overall look better than with the bugs. Ultimately I think we want to rethink how our menus work pretty fundamentally (if we even want them at all) so this seems like a good near term fix.

[takahirox]

The edges of the buttons definitely look a bit messier with this since they can't be anti-aliased

Ah, good catch. But yeah I think the tradeoff is acceptable and this solution is reasonable.