RedGPU V4.4.0-Alpha

English

한국어

English

한국어

Appearance

Scene ​

If View3D is the 'window' that displays a view, Scene is the 'stage' unfolding beyond that window. It serves as the root container (Object3DContainer) of the Scene Graph that centrally manages all 3D display objects (Mesh, Group3D, etc.), lighting, shadows, natural environments, and physics engines placed in 3D space.

1. Architecture and Role ​

Beyond acting as a simple container, Scene performs the following core roles:

  • 3D Object Hierarchy Management: Manages parent-child tree structures (children) of 3D objects to render via addChild(child) and removeChild(child).
  • Integrated Lighting & Shadow Control: Centrally manages scene-wide light sources and shadow quality through the built-in lightManager and shadowManager.
  • Natural Environment & Simulation Integration: Binds and controls open-world terrain (landscape), water bodies (addWater), global wind (windManager), and physics engines (physicsEngine) per scene.

2. Basic Usage ​

The fundamental role of Scene is to hold the 3D objects and lights to be rendered. Created 3D objects must be added via scene.addChild() to appear on screen, and light sources are registered through scene.lightManager.

javascript
import * as RedGPU from "https://redcamel.github.io/RedGPU/dist/index.js";

const canvas = document.getElementById('redgpu-canvas');

RedGPU.init(canvas, (redGPUContext) => {
    const scene = new RedGPU.Display.Scene();

    // 1. Register light (LightManager)
    const dirLight = new RedGPU.Light.DirectionalLight();  
    scene.lightManager.addDirectionalLight(dirLight);

    // 2. Add 3D object (addChild)
    const mesh = new RedGPU.Display.Mesh(
        redGPUContext, 
        new RedGPU.Primitive.TorusKnot(redGPUContext, 2, 0.6, 128, 32),
        new RedGPU.Material.PhongMaterial(redGPUContext, '#ff0055')
    );
    scene.addChild(mesh);

    // 3. Connect view and start rendering
    const controller = new RedGPU.Camera.OrbitController(redGPUContext);
    const view = new RedGPU.Display.View3D(redGPUContext, scene, controller);
    view.grid = true;
    view.axis = true;
    redGPUContext.addView(view);

    const renderer = new RedGPU.Renderer();
    renderer.start(redGPUContext, () => {
        mesh.rotationY += 1;
        mesh.rotationX += 0.5;
    });
});

Live Demo ​

3. Custom Scene Background Color ​

By default, viewports use redGPUContext.backgroundColor. Enabling scene.useBackgroundColor = true applies an independent background color (ColorRGBA) specific to that Scene.

javascript
scene.useBackgroundColor = true;
scene.backgroundColor.setColorByHEX('#1a1a2e');

4. Sharing a Scene Across Views ​

Connecting a single Scene instance to multiple View3D instances renders the same 3D space simultaneously from different camera viewpoints.

javascript
const sharedScene = new RedGPU.Display.Scene();

const mainView = new RedGPU.Display.View3D(redGPUContext, sharedScene, mainCamera);
const subView = new RedGPU.Display.View3D(redGPUContext, sharedScene, subCamera);

Next Steps ​

Now that the Scene (stage) is ready, we need to define the viewpoint looking at that stage. Let's explore Camera, which projects 3D space onto a 2D screen.

  • Camera: Projecting 3D space onto a 2D screen and controlling camera viewpoints