Skybox visibility effecting AdvancedDynamicTexture transparency

It is expected if the skybox has skybox.renderingGroupId = 0 - the same as the plane.

plane.renderingGroupId = 1

solves this issue - https://playground.babylonjs.com/#UU7RQ#4329

The issue occurs because of the combination of skybox.infiniteDistance = true and the rendering order of the scene. Here’s why it happens:

  1. Infinite Distance Effect: When you set skybox.infiniteDistance = true, the skybox is rendered as if it’s infinitely far away, meaning it’s not affected by the camera’s position. This is achieved by rendering the skybox in a special way where it’s always “behind” everything else.
  2. Rendering Groups: You’ve set skybox.renderingGroupId = 0 (which is the default), and your plane with the dynamic texture is also in rendering group 0 (default). The AdvancedDynamicTexture creates a mesh that’s rendered in the same group.
  3. Alpha/Transparency Interaction: The skybox has visibility = 0.5, making it semi-transparent. When infiniteDistance is true, the rendering of transparent objects can sometimes interfere with other objects in the same rendering group, causing unexpected blending.

So you have several choices here:

  • Move the plane to a different rendering group.
  • Remove the skybox’s transparency (if acceptable).
  • Keep infiniteDistance false (as you’ve noticed this works).
1 Like