[Tutorial] How To Convert HDRI To Roblox Skybox

INTRODUCTION


Hello people, this is my first ever tutorial on the Dev forum. If there is an error, please let me know.

So in this tutorial, I will be teaching you how to converting HDRI into Skybox. So you might ask, “Why should I use wasted my time find HDRI and converting it?” well, there are few reasons you should. First of all, there is a wide variety of HDRI you can get on the internet. For example, there is HDRIHAVEN, HDRMAPS, and many more. HDRI will make your game look good with high-quality HDRI that up to 8k. Let begin with step one



STEP ONE

First of all, we need to find a website that provides free HDRI that we can use. I mostly prefer to use HDRIHAVEN, but let me know if you have any you like. For today tutorial, I will use this HDRI as an example

After that, scroll down and click download (Make sure to download on 4k or higher)

After doing that, we can start converting our HDRI into Skybox so it can be used in Roblox

Recently I just discovered this awesome Github make by matheowis. HDRI to CubeMap, so what cool about this Github? it allows you to preview the HDRI to the skybox, like this

68747470733a2f2f6d617468656f7769732e6769746875622e696f2f6173736574732f2f484452492d746f5f437562656d61702f637562656d6170322e676966


STEP TWO

In step two, I will teach you how to converting HDRI into skybox using this Github. When you at the site. Click the (UPLOAD) button then you will see your HDRI. You also can play with exposure in case you want it to be more bright or dark.

I will leave it as default for now. After you are done adjusting the exposure, make sure to click save
make sure to click the third option when saving (the one highlighted) + also save it piece resolution in 4096 instead of 256 because it will provide better quality

Make sure the bar finish, and then click save


STEP THREE

In step three, I will show how to import it into Roblox, quite complicated but ok

Open up any place in Roblox Studio, then open up this panel (Asset Manager)

Click bulk import and select all the images of HDRI that you convert.

image

Then go to explorer panel, find lighting and add sky.

image

Alright, on this part, put the image name base on this list.

NX put it into BK
NY put it into DN
PX put it into FT
NZ put it into LF
PZ put it into RT
PY put it into UP

Like this

Same apply to another image. Repeat that until you finish, and for me, here how it will look like

That all for this tutorial, idk it might be bored lol so uh it up to you if u want follow it or not. anyways see ya, also if you need help let me know

111 Likes

Nice tutorial my buddy, keep it up.

2 Likes

Great tutorial :clap: :clap:!
The only thing I would change is that you should send us a link to the website.

3 Likes

Oh, sorry, I miss this; thanks for letting me know

1 Like

Thanks for your little tutorial, always nice to learn new things. The reason for it being not so high quality might be because you might not have set piece resolution higher. I would set this to 1024 because i believe that’s the maximum size that can be uploaded to Roblox. Again making sure the HDRI is over 4K :grin:

7 Likes

Lmao, thank you for the solution. I did not realise that you can change the resolution, lmao

Heyyyy I re-write entire stuff cause why not

Thanks for this tutorial! I wanted this from hours.

Woooooow
is so coool you are Genius

1 Like

That is so useful, Now I learned something. Thank you!

the current site is now polyhaven.com since they rebranded so tip to change that
also put a disclaimer that going up to 8k to export makes it have a weird black border around it

Thank you for this tutorial. I came here from your other post talking AI to help with skybox and referencing skybox.blockadelabs.com.