Creating Cubemaps

The following document goes over the process for assembling Cubemaps using Photoshop.

Creating Cubemaps

To create a Cubemap, all you need is a series of six images that represent the view down the positive and negative directions of the X, Y, and Z coordinates. However, these images will need to be properly assembled and there are some things to consider to make that happen.

When using the NVIDIA Texture Tools plug-in for Photoshop (32bits/Channel, 8.8.8.8 ARGB 32 bpp, unsigned), you will need to arrange your six images in a very particular fashion to generate a Cubemap. The plug-in looks for all six images to be in the same document, side-by-side, and arranged like so:

Positive X-Axis, Negative X-Axis, Positive Y-Axis, Negative Y-Axis, Positive Z-Axis, Negative Z-Axis

Once exported from Photoshop and imported into Unreal Engine 4 (UE4), the editor composites them into a Cubemap for you. However, you will notice that in this example some of the images have very interesting rotation applied. This is because of the way the NVIDIA plug-in assembles the Cubemap from each image.

When imported as a Cubemap and laid out flat in UE4'ss Texture Editor window, the result looks something like this:

It is the special rotation applied to some of the images that allows the sizes of the cube to remain right-side-up.

The quick-and-dirty way to look at this rotation scheme is as follows:

Visualizing Cubemap Image Rotation

It is not always easy to see how to lay out the images of a Cubemap when it is first being created. This method can help you see how to properly lay out the images for use with the NVIDIA Texture Tools plug-in for Photoshop.

Probably the easiest way to visualize the rotation of images for a Cubemap is to imagine yourself lying in the ground staring up with your body aligned to the Cartesian axes. This means you would be looking in the positive Z-Axis direction (up), with the X-Axis pointing to your right, and the Y-Axis pointing upward from the top of your head, like this:

But to see how this orientation plays into the layout of a Cubemap, let us consider these six images that represent a view in six directions.

Currently, all of these images are rotated straight up and down. Some will need to be rotated in order to line up properly. So let us go back to the example where we can imagine ourselves lying down as above. Now, imagine turning your head to your right. This would mean you would be looking down the X-Axis. However, because you are still lying on your back, the view would appear rotated 90 degrees counterclockwise relative to your head, like so:

If you then rotated your head back to the left, you would see this for X-Axis negative:

To look at the positive Y-Axis image, you would have to rotate your head back. This would cause the view to appear upside-down, like so:

To see the negative Y-Axis image, you could look downward toward your feet, and you would see this:

The positive Z-Axis image is fairly easy to visualize, since you were staring up at it when we started:

To view the negative Z-Axis image, you would have to roll yourself over onto your stomach and stare straight down at the floor, so you would see this:

Once you had all of those images created and rotated accordingly, you then need to line them up in a single file in the following order:

X+, X-, Y+, Y-, Z+, Z-

When this has been completed, you will now have an image that should look something like this: