Use one image for a skybox and make it look "seamless"

Questions
1

Hi all!
Is there a way to flip the texture of some faces in a skybox?
The purpose is to make a skybox with a single image and to make it look more or less seamless by flipping a couple of the images. Like the Front and Right images for example. The top and bottom will never match up, but it should look pretty good going around if two of them can be flipped horizontally.

ps. the individual images show up weird in the inspector (and there’s a 404 error for an image with a malformed path in the console), although the skybox renders completely fine!

Screenshot 2022-12-20 at 9.27.31 PM
Screenshot 2022-12-20 at 9.27.31 PM584×1572 113 KB

2

Hello!

You can alter the UVs of your BackgroundSkybox or you can rotate the texture itself using:

texture.uAng
texture.vAng

1 Like
3

The CubeTexture is expecting an array of string for the extensions parameter, not an array of Texture:

https://www.babylonjs-playground.com/#T32V41#49

As @roland said, I think you will need to update the uvs of each face of the skybox to achieve what you want to do.

2 Likes
4

If you have an image edit app (i.e. photoshop) I would advise you would stick with the skybox cube wrap.
If you unfold the cube from the skybox, all horizontal faces form just one panoramic image so it’s ez to make it look seamless. For the top and bottom however, there’s a little trick. The skybox requires a 90° rotation of PY and a -90° rotation of NY faces. What I do is I create dynamic objects for these, so I can work on the texture and next it gets rotated in place when I update the dynamic object. The integration is simply worked with gradient masks.
If you want I could share my psd template with you with the containers, rulers and base masks for integration (which you can still improve depending on your design). It’s still wip as I’m planning to script it and all masks are not yet done. But since I have to do it shortly anyways, I could take a bit of time for that and next share it with you, if it can be of help to you

Capture d’écran 2022-12-21 à 13.37.49
Capture d’écran 2022-12-21 à 13.37.491511×883 215 KB

.
skybox_tiling_view

2 Likes
5

Hm. So then i would need to construct the skybox differently in order to be able to adjust the UV of each individual face, right?

Whereas CubeTexture gives me only one texture and texture.vAng applies to the entire texture rather than to an individual face. Correct?

@mawa thks for the tips! I’m trying to create the skybox from a user supplied image dynamically (From Stable Diffusion), so can’t take it into photoshop. But you got me thinking about how to build that all out dynamically.

6

You can call convertToFlatShadedMesh() on the skybox mesh to make sure each face has its own set of 3 vertices and update the uv coordinates of these vertices to achieve what you want.