This tutorial will explain how you can convert HDRIs (High Dynamic Range Images) to skyboxes for use in Roblox using Blender, however any other 3d software is capable of doing this. Eventually, we might get support from Roblox with actual HDRIs, especially with the Future is Bright update, but for now this is the way to go. I warn you, this is a long procedure but I added some files at the bottom to make things more simple. However reading this is very useful to understand many things.
What is an HDRI
HDRIs are mostly used in CGI as a map for lighting and reflections. They’re usually skies or various environments and might look weird to the normal user:
More technical about HDRI:
They’re made with a camera either capturing the reflection of a chrome ball or with a pivot around the lens. After some technical photoshop (or other software such as HDRShop), the result is an image that’s made to be mapped on a sphere. What else? Those images are captures at different brightness and capsuled together in a large image, usually 32bit. Usually they’re either .exr or .hdri files. This depth, however, is useless in our case. Feel free to look on the internet for more information!
But where do you get those HDRIs? Everywhere on the internet! You are responsible of your downloads or purchases, so be careful. Note that they are very heavy image files, not your typical compressed jpeg!
For this tutorial, now would be time to go find one for your HDR sky.
Projection Concept
An HDRI is a sphere. A skybox is obviously a box. We have to fake a projection with cameras. In order words, we’ll place a camera at the center of the world and it will look around the HDRI (sphere) and give us back square and flat images (the box). We’ll setup cameras so they give us exactly what we need.
All we need is some logic now. Let’s get started in blender!
Blender Environment Setup
Take note that I am not a blender user, however for the sake of it, Blender is the most accessible for everyone so I decided use it. Every other modern 3d software is plenty capable of doing so in 2018 (C4D, 3ds Max, Maya, Modo, etc).
My blender startup template is empty at first, however if you have a camera, feel free to keep it for later.
In the top panel, we will change Blender Render to be using Blender’s modern renderer: Cycles.
Then we will go in the control panel to set the “World” . We will create a Node and make sure it’s set to “Background”.
https://i.gyazo.com/3ee57ad0104e43e79f2ea33db1a6ff52.mp4
We will be using an Environment Texture instead of a Color. Environment Texture basically means an HDRI or other mapped environments. Different software will use different terms.
At this point, you can import your HDRI under the Open button. Go find your image and press Open Image.
Now, nothing seems to have happened! It’s only because the display in the viewport doesn’t show it. I’d recommend turning it on to know what you are doing later on the road. Blender hides little plus around, there’s one on the top right of the viewport . Pressing it should open a menu. There will be a tab for Display, checking World Background will load the HDRI in there (might take a couple seconds…). Now you can understand a bit more what’s going on!
Blender Camera Setup
Now we have to setup cameras so they simulate a box. We’ll do Shift+A and create a Camera. We will want to make sure for simplicity to put it in the center of the world with a normal rotation. This is how I set it up, simple, efficient, clean:
Now, we’ll make sure the camera is a square and all of it’s parameter are fine so the images blend as they should. Under the render settings, we will be using a 2048x2048 image to render with 100% of it. The render will be very fast anyway since there’s not much calculations to render this.
After that, we need to make sure we can do a great cube out of it. We’ll make it so the focal length of the camera is 45° and the sensor size is 90°.
That’s about it for the camera. Just as an example if you wonder what all those settings do: the camera will be able to make a box when rotating it:
Mapping and Rendering
Here’s a template you can use to make sure what you will make next makes sense.
Now in your blender world, you will need to align your camera to what you will consider to be Right. I think it’s probably the best starting point. I usually try to get an orientation of the world with it. The train is going in this direction so I’ll say this is the front. I’ll align my camera to the right (following the template). Note that it’s counter intuitive. Right is at the left of the front.
You can press 0 on your numpad to get in the camera view. Then press the Render Button
Let it render, should look like this:
https://i.gyazo.com/660e34916eba032806ebad8d4e574738.mp4
Save the image somewhere as a png file and name it properly! Something like SkyRight, SkyUp, etc.
Press Esc to go back in the 3d view.
Now you have to do every single part of the cube according to the mapping. Rotate the camera and place it accordingly. Start with the Up and Down and then all sides are much easier to produce. Make sure your rotations are on point, meaning that they must be 90° precisely from each other to blend properly.
Note: I changed my HDRI of the train to a nature one, to make sure there wasn’t any text because I didn’t want another warning that would probably end up being a ban… It’s a a less beautiful one but at least I won’t banned ahaha!
You can import your images (6) to Roblox using either decals or in-game. Feel free to edit some images, make sure that you don’t edit the edges so they blend well!
Put them in a skybox with their name like they should! In Roblox:
https://i.gyazo.com/65976664447312ae7bcf351146e854f4.mp4
Also feel free to remove the sun so it’s not weird, some HDRI have it already. Have fun, can’t wait to see more different skyboxes in the community!
I’d also invite everyone to share their skyboxes here for the community :)!
Here’s mine: Nature Gazebo Sky - Roblox
Blender template I made: CustomSkybox.blend - Google Drive