Rotate a scenes background skybox texture

Questions
1

How would one rotate a background texture (skybox) in the render loop?

      var skybox_imgs = [
    skybox_url+"right."+format,
    skybox_url+"left."+format,
    skybox_url+"top."+format,
    skybox_url+"bottom."+format,
    skybox_url+"front."+format,
    skybox_url+"back."+format
  ];
  var cubeTextureloader = new THREE.CubeTextureLoader();
  var sb = cubeTextureloader.load(skybox_imgs);
  this.scene.background = sb;

aka, how to rotate the texture of this.scene.background

2

I’ve seen there were lots of topics about this on github, but I believe this feature did not end up being implemented. Have a look at

3

Yes, the related PR was not merged because of performance concerns. To support this, you have to rotate the input vector of textureCube() for each fragment. When rotating ordinary textures, you only transform uv-coordinates in the vertex shader.

However, when I’ve read the source code of Babylon.js correctly, the engine supports rotating cube textures (at least around the Y axis) by transforming the reflection vector in the fragment shader.

Live demo: https://www.babylonjs-playground.com/#UU7RQ#447

4

Ah that’s too bad. Some skyboxes can have a nice effect when they are slowly rotation.

I remember seeing a way to apply a skybox to a cube (instead of scene background)? Is there any performance or aesthetic compromise by doing this? Anything bad about the cube approach?

I guess the one tricky thing about using the cube is the user can zoom all the way out. Must limit zoom somehow.

5

Well, you have to handle the setup by yourself. When using Scene.background, the engine is doing this for you.

6

Also if you rotate a cube, objects using envMaps wont have their reflections updated and will be out of sync

2 Likes