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:
- 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. - 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. - Alpha/Transparency Interaction: The skybox has
visibility = 0.5
, making it semi-transparent. WheninfiniteDistance
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).