Skybox

Skybox is a technique for representing an infinite background in 3D space. It is rendered by creating a SkyBox object and assigning it to the skybox property of a View3D.

1. Basic Usage

Unlike general meshes, a SkyBox is not added to the Scene but is connected directly to a View3D.

// 1. Create a SkyBox (Texture required)
const skybox = new RedGPU.Display.SkyBox(redGPUContext, texture);

// 2. Apply to a View (Required)
view.skybox = skybox;

2. Texture Creation Methods

There are two main methods for creating textures to be applied to a SkyBox. We'll look at them in order, starting with IBL, the most recommended method, followed by traditional CubeMaps.

2.1 Using IBL Resources (Recommended)

When a RedGPU.Resource.IBL object is created, an Environment Texture is automatically generated internally. This method utilizes that texture for the SkyBox.

• Pros: You get Physically Based Lighting (Diffuse and Specular) data that perfectly matches the background.
• Usage: A modern method mainly used to achieve the most realistic rendering results.

[HDR File Usage Guide]

To use a single HDR (.hdr) panorama image as a skybox in RedGPU, you must go through IBL. SkyBoxes require cube-formatted data, and IBL automatically converts 2D panoramas into cubemaps.

// Create IBL (Lighting data + background texture created)
const ibl = new RedGPU.Resource.IBL(
    redGPUContext, 
    '/RedGPU/examples/assets/hdr/2k/the_sky_is_on_fire_2k.hdr'
);

// Use the environmentTexture inside IBL as the SkyBox
const skybox = new RedGPU.Display.SkyBox(redGPUContext, ibl.environmentTexture);

2.2 6 Images (CubeTexture)

A traditional method of combining 6 standard images (JPG, PNG, etc.)—top, bottom, left, right, front, and back—to create a CubeTexture. The image array must be passed in the following order: px, nx, py, ny, pz, nz.

• Pros: Resources are easy to obtain and intuitive to understand.
• Cons: It is difficult to achieve realistic lighting effects as it does not contain HDR information.

const cubeTexture = new RedGPU.Resource.CubeTexture(redGPUContext, [
    './posx.jpg', './negx.jpg', 
    './posy.jpg', './negy.jpg', 
    './posz.jpg', './negz.jpg'
]);

const skybox = new RedGPU.Display.SkyBox(redGPUContext, cubeTexture);

3. Comparison of Implementation Methods

Category	Using IBL (Recommended)	CubeTexture
Source	1 HDR image	6 images
Type	IBLCubeTexture	CubeTexture
Lighting Data	Yes (Auto-generated)	No
Main Usage	Background + PBR Lighting	Simple background

4. Live Demo

A. IBL Method (Including Lighting)

B. CubeMap Method (6 Images)

Key Summary

• A SkyBox is set on a view (View3D) to render the background.
• If realistic lighting is required, it is best to use an environment texture created via IBL.
• Use HDRTexture or CubeTexture for a simple background.

Next Steps

• IBL