Sky

The sky is a type of background drawn before the camera renders. This type of background is useful for 3D games and applications because it provides a sense of depth, making the environment appear much larger than its actual size. The sky itself can contain any objects (such as clouds, mountains, buildings, and other unreachable objects) to create the feeling of a distant three-dimensional environment. Galacean can also use the sky to produce realistic ambient lighting in the scene. For more details, refer to Baking.

In sky mode, developers can set material and mesh themselves. With Galacean's built-in skybox and procedural sky, you can set the desired sky effect with one click.

Setting the Skybox

In the editor, simply follow these steps to set the skybox for the background:

1. Create Skybox Texture

You can download free HDR maps from Poly Haven or BimAnt HDRI

A skybox texture is a cube texture. After preparing the HDR, follow the path Asset Panel -> Right-click Upload -> Select TextureCube(.hdr) -> Choose the corresponding HDR map -> Cube texture asset creation complete.

2. Create Skybox Material

After creating the cube texture asset, follow the path Asset Panel -> Right-click Create -> Select Material -> Select the generated asset -> Inspector Panel -> Click the Shader property in the Base section -> Select Sky Box -> Click HDR in the Base section -> Choose the cube texture created in the first step to create the skybox material.

3. Set the Skybox

Finally, follow the path Hierarchy Panel -> Select Scene -> Inspector Panel -> Background section -> Set Mode to Sky -> Select the material created in the second step -> Set Mesh to the built-in Cuboid to see the background of the scene change to the skybox.

Code to Set Skybox

// 创建天空盒纹理
const textureCube = await engine.resourceManager.load<TextureCube>({
  urls: [
    "px - right 图片 url",
    "nx - left 图片 url",
    "py - top 图片 url",
    "ny - bottom 图片 url",
    "pz - front 图片 url",
    "nz - back 图片 url",
  ],
  type: AssetType.TextureCube,
});
// 创建天空盒材质
const skyMaterial = new SkyBoxMaterial(engine);
skyMaterial.texture = textureCube;
// 设置天空盒
const background = scene.background;
background.mode = BackgroundMode.Sky;
background.sky.material = skyMaterial;
background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);

Setting Procedural Sky

Procedural sky is the default background in 3D projects in the editor. You can also follow the path Hierarchy Panel -> Select Scene -> Inspector Panel -> Background section -> Set Mode to Sky -> Select the built-in SkyMat material -> Set Mesh to the built-in Sphere

Code to Set Procedural Sky

// 创建大气散射材质
const skyMaterial = new SkyProceduralMaterial(engine);
// 设置天空盒
const background = scene.background;
background.mode = BackgroundMode.Sky;
background.sky.material = skyMaterial;
background.sky.mesh = PrimitiveMesh.createSphere(engine);

Properties

In the atmospheric scattering material's Inspector Panel, you can see many adjustable properties:

The built-in atmospheric scattering material cannot have its properties freely adjusted; developers can create and adjust their own.