Creating new and fresh Skyboxes

development

#1

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

image

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.
image

Then we will go in the control panel to set the “World” :earth_americas:. We will create a Node and make sure it’s set to “Background”.

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.
image

At this point, you can import your HDRI under the Open button. Go find your image and press Open Image.
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 image. 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.
image

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°.
image

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
image

Let it render, should look like this:

Save the image somewhere as a png file and name it properly! Something like SkyRight, SkyUp, etc.
image

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.

WARNING

Learned during the making of this tutorial ahaha. Avoid being banned for your images:

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:

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: https://www.roblox.com/library/1899233888/Nature-Gazebo-Sky

Blender template I made: https://drive.google.com/open?id=12JoNEZ7zcS98mqKMea1FU6GJTG1IrBfd


#2

Fantastic tutorial! I never considered using Blender to accomplish this, I’ll definitely try it out.


#3

Great and informative tutorial


#4

Duuuuuuude. Bookmarked. I’m sharing this with every person I know.


#5

Awesome! Really helped thanks (:


#6

This is great!

I have been creating some sky-boxes in Cinema 4D for a while too.

If anyone would like to take a copy of the template project I use for making sky-boxes in Cinema 4D, feel free to take it here: https://www.dropbox.com/s/id1bfv50j02xnmp/SkyboxCamera.c4d?dl=0.

As I haven’t used C4D for a long time, I haven’t made this into a proper plugin / tool or whatever, so you might have to import your project into this one and render it.

Basically it just renders 6 images labled like so;

001 - Back
002 - Down
003 - Front
004 - Left
005 - Right
006 - Top

If anyone wants to edit it and make it a tool or something, feel free.


#7

wat?! its that easy?! Thank you


#8

XJyemeI


#9

Really helpful tutorial!

I tried using OpenGL Render Image instead of Cycles render (cause its faster), and the assembly + everything else worked as expected.

Oh and here’s the skybox that I made thanks to your tutorial:


#10

Very cool tutorial, thanks for posting!


#11

Blender will automatically render all six images for you if make a new texture and set it as an Environment map. You don’t need to set camera parameters or manually angle the camera yourself, you just hit scene render and Blender does all that as a pre-render step.


#12

Where do the images save to?


#13

Holy crap dude, this is outstanding. Definite +1 from me. I’ve already got ideas in my head.


#14

Great, I’ll take a look at this later today! I’ll keep most of the tutorial this way however, because I want people to understand the concepts in case they’re using another program, probably will add a collapsed edit for Blender once I figure it out. Also, it’s complimentary with another tutorial I’ll be writing shortly.

Thank you!

Also thanks for the positive feedback everyone!


#15

Check out the tutorials at KatsBits, there are ones for cycles and non-cycles workflow, and both use Blender’s built-in cubemap generator. Your way is going to be less prone to orientation mistakes than using Blender’s generator, which requires you to rotate two of the panels in order to match the orientation of a Roblox skybox. But if you have a lot of skyboxes to make, the other way can be a huge time saver, so worth knowing both options.