Cube Texture

The difference between a cube texture (TextureCube) and a 2D texture is that it has 6 faces, which means a cube texture is composed of 6 2D textures.

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

Because of this sampling characteristic, cube textures can be used to achieve effects such as skyboxes and environment reflections.

Creation

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

After preparing the HDR, follow the path Asset Panel -> Right-click Upload -> Select TextureCube(.hdr) -> Choose the corresponding HDR map -> Cube texture asset creation completed.

Similarly, in the script, you can also get the corresponding cube texture by loading six textures in the correct order.

const cubeTextureResource = {
  type: AssetType.TextureCube,
  urls: [
    "px - right 图片 url",
    "nx - left 图片 url",
    "py - top 图片 url",
    "ny - bottom 图片 url",
    "pz - front 图片 url",
    "nz - back 图片 url",
  ],
};
 
engine.resourceManager.load(cubeTextureResource).then((resource) => {
  // 引擎支持的立方纹理
  const cubeTexture = resource;
  // 接下来可以将纹理应用到材质上或者进行其他操作
});

Usage

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