# Skyboxes with high-res textures

**URL:** <https://forum.babylonjs.com/t/skyboxes-with-high-res-textures/48087>\
**Category:** Questions\
**Tags:** environment, sky, skybox, photodome\
**Created:** [February 16, 2024, 6:53pm UTC](https://forum.babylonjs.com/t/skyboxes-with-high-res-textures/48087 "2024-02-16T18:53:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![HowdyLuda](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/howdyluda/32/32298_2.png) [@HowdyLuda](https://forum.babylonjs.com/u/HowdyLuda)\
**Post date:** [February 16, 2024, 6:53pm UTC](https://forum.babylonjs.com/t/skyboxes-with-high-res-textures/48087/1 "2024-02-16T18:53:45Z")

</div>

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](https://www.babylonjs.com/tools/ibl/)).

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?

---

<div class="post-metadata">

**Author:** ![ericwood73](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ericwood73/32/22967_2.png) [@ericwood73](https://forum.babylonjs.com/u/ericwood73)\
**Post date:** [February 17, 2024, 7:49pm UTC](https://forum.babylonjs.com/t/skyboxes-with-high-res-textures/48087/2 "2024-02-17T19:49:11Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![HowdyLuda](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/howdyluda/32/32298_2.png) [@HowdyLuda](https://forum.babylonjs.com/u/HowdyLuda)\
**Post date:** [February 22, 2024, 12:59am UTC](https://forum.babylonjs.com/t/skyboxes-with-high-res-textures/48087/3 "2024-02-22T00:59:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![xiehangyun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/xiehangyun/32/30777_2.png) [@xiehangyun](https://forum.babylonjs.com/u/xiehangyun)\
**Post date:** [February 22, 2024, 8:43am UTC](https://forum.babylonjs.com/t/skyboxes-with-high-res-textures/48087/5 "2024-02-22T08:43:30Z")

</div>

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)](https://playground.babylonjs.com/#064AUB#71)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [February 22, 2024, 11:43pm UTC](https://forum.babylonjs.com/t/skyboxes-with-high-res-textures/48087/6 "2024-02-22T23:43:36Z")

</div>

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.