Skyboxes

About Skyboxes

A simulated sky can be added to a scene using a "skybox" (wikipedia). A skybox is a large standard cube surrounding the scene, with a sky image painted on each face. (Images are a lot easier and faster to render than 3D objects, and just as good for far-distant scenery.)

In Babylon.js, skyboxes typically use CubeTexture as a pseudo-reflection texture on a large cube.

Creating a CubeTexture

The CubeTexture constructor takes a base URL and (by default) appends "_px.jpg", "_nx.jpg", "_py.jpg", "_ny.jpg", "_pz.jpg" and "_nz.jpg" to load the +x, -x, +y, -y, +z, and -z facing sides of the cube. (These suffixes may be customized if needed.)

CubeTexture images need to be .jpg format (unless the suffixes are customized) and square. For efficiency, use a power of 2 size, like 1024x1024.

Diagram of X/Y/Z axes and CubeTexture sides

Note, despite being a "Texture", CubeTexture can ONLY be used with reflectionTexture and refractionTexture, NOT other Material properties like diffuseTexture. See below for the appropriate settings for a skybox.

Making or Finding Skybox Images

This is an example set of skybox images:

some clouds
more clouds
the sun overhead
solid gray
more clouds
more clouds
some clouds
skybox_px.jpg
more clouds
skybox_nx.jpg
the sun overhead
skybox_py.jpg
solid gray
skybox_nx.jpg
more clouds
skybox_pz.jpg
more clouds
skybox_nx.jpg

Notice that the images match seamlessly at the edges of the box:

some clouds
adjacent clouds
adjacent clouds
adjacent clouds
wrapping around to the original clouds
_nz
_nx
_pz
_px
_nz (again)

You can search the web for "skybox images" to find many examples. These are often a single image of an unfolded cube, which you would need to slice into the six separate images for CubeTexture to load. The cube textures in the playground library may also be useful, and they are already in the appropriate format.

Making the Skybox

Cube textures must be applied using reflectionTexture even though skyboxes are not actually reflections; set coordinatesMode to SKYBOX_MODE to paint the texture directly on the cube rather than simulating reflection.

Within the playground you can copy and paste the following into your scene:

var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:1000.0}, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skybox.material = skyboxMaterial;

To use your own skybox images, make them web-accessible (a localhost server is okay), and change the BABYLON.CubeTexture call:

skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("URL TO IMAGE DIRECTORY/COMMON PART OF IMAGE FILENAMES", scene);
Simple Skybox Example

Further reading

Reflections and Refractions
Learn all about reflection and refraction in Babylon.js.
Reflections and Refractions