The around of the circled buttons in object menu can be weird

[takahirox]

Description

The around of the circled buttons in object menu can be weird.

To Reproduce

1. Go to hubs.mozilla.com
2. Place a thin object
3. Make an angle and move it to a certain position
4. Point the object and press space to open an object menu
5. Observe that the around of the circled buttons in object menu can be weird

I'm really not sure the exact factor which causes this problem. If you can't reproduce the problem, please further try to move or rotate the object, or try another object.

Expected behavior

They are rendered correctly

Screenshots

Hardware

• Device: Desktop
• OS: Windows
• Browser: Chrome

Additional context

Could be render order issue?

[johnshaughnessy]

This happens because both the button and the avatar images are transparent and sorted by the distance from the camera along its forward ray. With spector js you can see how if the button is drawn first, it will "cut out" of the avatar image, but buttons drawn afterwards will render correctly:

To fix this problem in general, I think we'd need to implement a per-pixel (or per-fragment) depth / transparency technique in the shader.

[johnshaughnessy]

I believe these all share the same underlying problem:

#3431
#1979
#4416
#4417

[takahirox]

If that's the case, probably it may be easily resolved by letting depthWrite false. It is the same approach the new Three.js glTF loader does. Let me try.

[takahirox]

Note to self:

• Button background is rendered with aframe-slice9-component
• Avatar image is rendered with our media-views component
• Text content in the buttons are rendered with our hubs-text component
• Icons are rendered with our sprites system

[takahirox]

I realized that I misunderstood one thing.

The involved components are transparent but the transparency seems for alpha clipping. The contents themselves (e.g. texts, icons) are opaque (alpha=1).

The depthWrite=false approach doesn't work for opaque objects. We need to think of other workarounds.

Perhaps controlling the render order with Three.js Object3D.renderOrder may be the easiest solution?

[takahirox]

I may have came up with an easier solution. Introducing alphaTest to slice9 can resolve this problem.

The screenshot of alphaTest: 0.1 for rounded-text-button. See that the clone button doesn't have problem.

But it doesn't resolve #4416.