Creating a skybox from a photograph

From Custom Map Makers Wiki
Revision as of 11:53, 4 December 2011 by John (talk | contribs) (Create a grid)
Jump to: navigation, search

Introduction and sources

This tutorial is done in, and assumes familiarity with, Photoshop, but I can't see why the same principles wouldn't work in other image editors.

The picture used in it was taken from here.

The skybox from the tutorial is available in .TGA and Source format here.


Before we get started

I should point out that this method is quite inefficient, as while there won't be any seams that are outright visible, there will be somewhat noticeable distortion around the edges of each skybox face; this is due to a lack of proper 90-degree field-of-view in the 2D image. Probably the best method out there for working with 2D imagery would be to texture a sphere in a modeling program with the reference picture, and rendering out six cameras for each direction; this would fix the perspective issue.

Instead, this method should be used for quick mock-ups, or if there is no other option, as it is largely useful for incoherent images, such as outer space.

Find an image

Make sure the reference image is a nice, high resolution; skyboxes use textures that are usually 1024x1024 pixels each.

In my case, I will use a picture of a nebula I took from Wikipedia; the image is a monstrous 2730x2940 pixels, but is not big enough to contain six 1024^2 faces, so I will have to downsize the faces to the next availbe power of two: 512x512.

Sky tut01.jpg

Create a grid

Open up the image in Photoshop and, using Guides, begin laying down a grid of regular 1024x1024 (or, in my case, 512x512) squares.

Sky tut02.jpg

Plan out your skybox

Look at your image and decide which area you want to use for the skybox. In this tutorial, I will use the Vertical Cross cubemap configuration, which is generally useful for quickly deducing the final skybox layout, but there is no best configuration; the other formations are described here

Sky tut03.jpg.

For my nebula, I offset the image a bit so the bright center would move into the box that corresponds with the up direction (the ceiling) of the skybox.

Sky tut04.jpg

Cover up seams

This is probably the longest, somewhat complicated, and labor-intesive step, so come prepared.

With your skybox planned out, all that's left is making all of the faces blend seamlessly with one another. Here is a diagram showing which face edges must blend with which: