Cube Texture

Cube textures (TextureCube) differ from 2D textures in that they have six faces, composed of six 2D textures to form a cube texture.

The underlying sampling method of cube textures is slightly different from that of 2D textures. While 2D textures use 2D coordinates for sampling, cube textures use 3D coordinates, i.e., a direction vector for sampling. For example, using an orange direction vector to sample a texture value from a cube texture would look like this:

Due to this sampling characteristic, cube textures can be used to implement effects such as skyboxes and environmental reflections.

Creation

The editor supports generating cube textures by uploading HDR images. This method allows for HDR color gamut representation and is relatively convenient.

After preparing the HDR image, follow the steps:
Assets Panel -> Right-click Upload -> Select TextureCube (.hdr) -> Choose the corresponding HDR image -> Cube texture asset creation is complete.

Of course, you can also create a cube texture in scripts by loading six textures in the corresponding order.

const cubeTextureResource = {
  type: AssetType.TextureCube,
  urls: [
    "px - right image url",
    "nx - left image url",
    "py - top image url",
    "ny - bottom image url",
    "pz - front image url",
    "nz - back image url",
  ],
};
 
engine.resourceManager.load(cubeTextureResource).then((resource) => {
  // Cube texture supported by the engine
  const cubeTexture = resource;
  // The texture can now be applied to materials or used for other operations
});

Usage

Cube textures are primarily used in skyboxes. For more details, refer to Sky Background.