Skyboxes with high-res textures

Questions
, , ,
1

Hello,

I’ve been working on creating beautiful skyboxes in my game, and I’m hoping that the skybox texture will double as the IBL environment texture for simplicity and resource savings.

I’m also using the Babylon IBL tool so I can easily convert hi-res HDR images into .env files (Babylon.js Texture Tools).

But that tool only outputs very low-res images, and the skies therefore look very bad.

Is there a way to use high-res .env files, or does that cause performance issues for IBL? Should I just use cube maps instead for this? Are 360 photo domes the best way to use high-res textures on a skybox?

2

I think that env’s are optimized for file size since they are only used for reflections. You won’t get good results trying to use them as a skybox.

For skybox using hdr, you probably want to do something like https://playground.babylonjs.com/#114YPX#5. Note that this can dramatically increase your load, so what I would probably do is use an env initially, load the hdr in the background using an HdrCubeTextureAssetTask and then replace the reflection texture once it is loaded.

3

Thank you for that! The docs only mention PhotoDome and CubeTexture (at least that I noticed) - I should have probed the APIs more deeply to find HDRCubeTexture.

5

CubeTexture can create skyboxes in 4k resolution.
Then use ReflectionProbe to create a lower resolution environment texture.
In addition, after my actual testing, it takes a long time for a high-resolution HDRCubeTexture to be created and ready to go.
RenderTargetTexture Water Sphere | Babylon.js Playground (babylonjs.com)

6

Yes it is long cause it generates required harmonics to render the PBR which is a pretty slow CPU operation.

I would advise to convert in env whenever possible.

1 Like