Changing dynamically the skybox reflection texture

Questions
1

good day, so I have around my models a skybox with a nice texture of clouds, etc, all good

    var skybox = MeshBuilder.CreateBox("skyBox", {size:5000.0}, scene);
    var skyboxMaterial = new StandardMaterial("skyBox", scene);
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new CubeTexture(texturesPath+"skybox", scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;
    skyboxMaterial.diffuseColor = new Color3(0, 0, 0);
    skyboxMaterial.specularColor = new Color3(0, 0, 0);
    skybox.material = skyboxMaterial;

say that I want to allow user to show or hide that clouds texture in the skybox, so that we either see the clouds or we just see the default flat blue solid background in the skybox,

how could I dynamically turn on and off that clouds texture and switch it when needed by a solid color?

thank you :slight_smile:

2

If you just need to see a solid color, just show/hide the “skyBox” mesh and set your scene clearColor as you want.

If you want an alternate skybox texture, switch them in the reflectionTexture property.

const textureOne = new CubeTexture(texturesPath+"skybox1", scene);
const textureTwo = new CubeTexture(texturesPath+"skybox2", scene);

skyboxMaterial.reflectionTexture = textureOne;
3

You can also set skyboxMaterial.reflectionTexture = null to remove the cube texture from your material.

4

@Vinc3r @Evgeni_Popov thank you very much for your help, what you both suggest works and it works well. I have however an odd issue. In my code depending on the value of a state variable I want to switch the skybox texture to a different texture or to a solid color, like this:

if (props.skyState === 0){
skybox.visibility = 0;
scene.clearColor = new Color3(0.02, 0.02, 0.04);
props.toggleSky();
}

else if (props.skyState === 1){
skybox.visibility = 1;
skyboxMaterial.reflectionTexture = skyTexture2;
props.toggleSky();
}

else if (props.skyState === 2){
skybox.visibility = 1;
skyboxMaterial.reflectionTexture = skyTexture;
props.toggleSky();
}

and the textures were previously defined as:
skyTexture=new CubeTexture(texturesPath+“lc”, scene);
skyTexture2=new CubeTexture(texturesPath+“skybox4”, scene);

now, all of this works well, the switches happen perfectly all good.
But the odd thing is that:

  • The initial original texture looks all perfectly blended, the 6 images of that texture blend in their 360 degrees perfectly.

  • Oddly, when switching to a different texture like the TropicalSunnyDay one, you can see the separations between each of the 6 pictures of the texture, they are not blending with each other well.

This does not happen if that texture is the first original one of the project. It happens when switching from a texture to a different texture. Do I have to do something extra for the new texture to be applied correctly in the skybox?

thank you :slight_smile:

5

@Vinc3r @Evgeni_Popov
therefore if for example i set texture ‘TropicalSunnyDay’ as the initial one, then it looks perfect.
But if I set a different one as the original one, and later on I switch the texture to ‘TropicalSunnyDay’, then the switch happens well but the texture looks wrong, I can see the seams edges between the 6 parts of the texture, is this because i need to update the lighting of the skybox with some command or something similar?

6

Try to force wrapU & V to be in clamp mode, also check if your textures are in power of two.

7

@Vinc3r the textures are the standard ones that come with the playground, not created by me, so obviously they are good textures as they are provided by babylon.js :slight_smile:
regarding the wrapU&V to be in clamp mode, so you mean to do something like this?
texture.wrapU=0
will give it a try thank you

8

It seems it does work (wait for 2s before the skybox is changed):

https://playground.babylonjs.com/#UU7RQ#1066

You should not have anything special to do for this to work, as the PG demonstrates.

9

@Evgeni_Popov thank you very much Evgeni, its odd, works great yes in the playground you sent, but fails for me, probably because in my app im doing quite a few more things around that, its a large react app so its diffficult for me to extract the relevant stuff to a playground mmm, i will try to identify what other stuff could be interfering with it, thank you very much again

10

@Evgeni_Popov very odd basically what happens is that when switching to a different texture, in my case the 6 parts of the texture appear in the wrong positions, the bottom appears up and the up bottom for example

11

@Evgeni_Popov found solution, all I had to do was to repeat the line of the coordinatesMode every time i make the change and now it works well, thank you :slight_smile:

skyTexture2.coordinatesMode = Texture.SKYBOX_MODE;
skyboxMaterial.reflectionTexture = skyTexture2;

1 Like