Converting HDRI into SKYBOX

Hello, guys, this is my first ever tutorial in dev forum, and also my main language is not English, so there will be some grammar mistake but ok.
Alright in this tutorial I’m gonna show you how to convert HDRI to SKYBOX. Like you all know HDRI got some pretty good scenery that gonna fit in you environment design.

First of all, we gonna go to some free HDRI site to get some good HDRI to convert it. I recommend you guys go to this site https://hdrihaven.com/hdris/?c=night since everything in here is free to use, oh also if u want to support them u can join their Patreon.

I’m gonna use this HDRI has an example in this toturial but it up to you to choose which one that fits in you game

after you that go to download tabs and choose 8k because if u choose something below it, it gonna be so blurry lol
image

After you download the HDRI, what you need to do next is gonna go to this site
https://matheowis.github.io/HDRI-to-CubeMap/
So how this work, it gonna make you HDRI into cube map which is gonna be look something like this
68747470733a2f2f6d617468656f7769732e6769746875622e696f2f6173736574732f2f484452492d746f5f437562656d61702f637562656d6170322e676966
Look cool right?

After you in there click on this
image

And then choose HDRI you download
image

And it is gonna be look something like this


Oh you also can adjust the exposure to make it look wow in my case I’m gonna keep it at 8.95

After that click
image

This one important there will be tree layout and what layout you need to choose is this one


The one with the arrow

Click it and wait for the process
image
After the proses done click save

You will get some file like this and what you need to do is extract it.
image

AFTER THIS ALL WHAT YOU NEED TO DO IS GO TO YOU ROBLOX STUDIO FOR UPLOADING IT

Click on the asset manager
image

Click Image
image

Click this icon
image

Click the file that you just extract and click all the image
image
After that click open and wait for Roblox to approve you picture
After it been approved

Click Lighting
image

Click Sky
image

Go to properties and remove all skybox texture expect Moon Texture And Sun Texture

The next part is a little tricky, so I wound advice you to take seriously on this part.

When you import it, you gonna get a name like this
image
Alright let me tell you what all the name mean

NX means Negative X or -X
NY mean Negative Y or -Y
NZ mean Negative Z or -Z
PY mean Positive Y or +Y
PZ mean Positive Z or +Z

So on this part what you need to do is put NX, NY, NZ, PY and PZ into the SKY texture
Here where it all goes

image

BK = NX
DN = NY
FT = PX
LF = NZ
RT = PZ
UP = PY

AND HERE YOU GO THE RESULT FOR IT


Idk why it looks so blurry, but if someone knows, please tell me how I can fix this

So that all for this toturial I would like to thank to

HDRI for their work on making high-quality HDRI
Matheowis for amazing work on the software

Again this is my first toturial, it not very clean or easy to understand but I’m trying my best for this
I hope this gonna helping you, If you need help you can dm me on discord G00GLE#1714

17 Likes

That looks very realistic, good job.

1 Like

Definitely bookmarking this thanks! Also does it always come at that pixelated?

2 Likes

I dont know man why this one is pixelated, how about try download the hdri on 16k and see if it still happen

2 Likes

It’s blurry because Roblox has a image size limit of 1024x1024. There’s no point in downloading any HDRI higher than 1k.

1 Like

Oh, I see so how I can fix this?

You can’t, but you can like this feature request if you want them to add it (and maybe make a reply with your usecase if you’re allowed to reply)

1 Like

It is a very good tutorial for those who want to create an HDRI skybox even if we remember that an HDRI uses an image with 360 degree rotation to simulate the light and reflections of the scene.

1 Like