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.
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:
skybox_px.jpg | skybox_nx.jpg | skybox_py.jpg | skybox_ny.jpg | skybox_pz.jpg | skybox_nz.jpg |
Notice that the images match seamlessly at the edges of the box:
_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);