Skybox visibility effecting AdvancedDynamicTexture transparency

Bugs
1

see here

if I increase the skybox visibility the AdvancedDynamicTexture transparency also increases.
If I make skybox visibility 0 or 1 , AdvancedDynamicTexture becomes fully opaque

Is this expected behavior, bug?

Anyway to avoid skybox effecting AdvancedDynamicTexture ?

2

Looks like setting
skybox.infiniteDistance
to true is creating this issue.
Again, is this expected ?

3

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
4

I will use
plane.renderingGroupId = 1

BTW
setting
scene.useRightHandedSystem = true;
ends up mirroring the text in the TextBlock
see

anyway to fix that?

5 
plane.rotation.y = BABYLON.Tools.ToRadians(180)

Example - https://playground.babylonjs.com/#UU7RQ#4331

1 Like
6

it works but feels like a hack.
GUI should respect right , left handedness.

7

The matter is that here it is just your camera which turns 180 degrees with handedness change, so you just see the back of the plane.

8

AdvancedDynamicTexture.CreateFullscreenUI respects handedness
see

To be consistent so should
AdvancedDynamicTexture.CreateForMesh

9

The matter is that you see your plane from the backside, if you don’t change the settings of ArcRotate camera. I mean, this relates to a mesh, not to GUI.

10

No.
Camera is still facing the plane from the front.
Changing handedness just flips the x axis.

Instead of
plane.rotation.y = BABYLON.Tools.ToRadians(180)

you can do
plane.scaling.y = -1;

11

This is also possible and, I would say, more robust :slight_smile:

By the way, do you have any plans to embed Havok in your CharacterController?

12

CharacterController is a not built on top of any pyhsics engine.
So no plans to embed Havok into it.
I did see the Havok based character controller released with 8.x.
Might look into adding a character mesh and animation to that but not now.
Before that I would first like to address few issues with my current CharacterController like quick fall detection, accurate step and slope detection , better step sound sync
Don’t get much time these days,
Hoping with AI code assist I might be able to squeeze out more code.

13

Here is the small snippet for the possible impovement of camera elasticity.

    if (this._camera.radius > (this._camera.lowerRadiusLimit as number)) {
      if (this._cameraElastic) this._snapCamera();
      // Here is the additional part - labris
      // Will put camRad into class property later
      if (this._snapCamera()) {
        // If camera is snapping - do nothing
      } else {
        //  gradually increase the camera radius only if avatar is moving
        if (this._camera.radius < this.camRad) {
          if (this.anyMovement()) {
            this._camera.radius += 0.02; // this step also should be done as property, later
          }
        }
      }
    }
1 Like