Light

If Texture is like applying a drawing to an object's surface, Light is the 'vitality' that gives three-dimensionality and depth to that object. All lights in RedGPU are managed integratedly through the LightManager, allowing dramatic direction by combining various light sources.

1. LightManager

Creating a light alone does not affect the screen. It must be registered in the lightManager of the Scene for the engine to include it in calculations.

[Default Lighting State]

If no light is set, the scene will be in total darkness. However, adding AmbientLight at a very low intensity allows you to check at least the outline of shadow areas where direct light does not reach.

// Add directional light (Multiple allowed)
scene.lightManager.addDirectionalLight(directionalLight);

// Add point light (Multiple allowed)
scene.lightManager.addPointLight(pointLight);

2. Main Types of Lighting

RedGPU provides four types of light sources with different physical characteristics. It's important to understand the characteristics of each light and combine them appropriately.

Type	Features	Main Usage	Analogy
AmbientLight	Shines uniformly from all directions	Softening shadows, overall brightness correction	Fill light
DirectionalLight	Parallel light (Sunlight)	Global lighting, shadow generation	The Sun
PointLight	Spreads from a single point	Emphasizing specific areas, distance-based attenuation	Light bulb
SpotLight	Concentrated cone-shaped light	Highlight lighting, theatrical stage effects	Flashlight

2.1 AmbientLight

Light that shines uniformly from all directions.

• Features: Has no position or direction, and no shadows are created. Used for correction to slightly brighten dark areas where light does not reach.

2.2 DirectionalLight

Light that shines in parallel in a specific direction from an infinitely far distance like the sun.

• Features: Direction is constant regardless of position, and it is the most representative light source that can create shadows.

2.3 PointLight

Light that spreads in all directions from a point in space.

• Features: Attenuation occurs where brightness decreases in proportion to the square of the distance. The radius property determines the range the light reaches.

2.4 SpotLight

A light source that shines a cone-shaped light in a specific direction from a specific point.

• Features: Creates concentrated lighting effects by adjusting the light angle and outer softness (exponent).

[Material Attention]

ColorMaterial is not affected by light and outputs only a single color. To see lighting effects, you must use a glossy/textured material such as PhongMaterial or PBRMaterial.

3. Practice: Diverse Lighting Configuration

Place a floor and multiple spheres, and implement an effect where light spreads in space by moving two PointLights of different colors.

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. Blue PointLight
    const blueLight = new RedGPU.Light.PointLight('#0000ff', 2.0);
    blueLight.radius = 15;
    scene.lightManager.addPointLight(blueLight);

    // 2. Red PointLight
    const redLight = new RedGPU.Light.PointLight('#ff0000', 2.0);
    redLight.radius = 15;
    scene.lightManager.addPointLight(redLight);

    // 3. Create floor and objects (Use PhongMaterial)
    const material = new RedGPU.Material.PhongMaterial(redGPUContext);
    
    // Floor
    const floor = new RedGPU.Display.Mesh(
        redGPUContext,
        new RedGPU.Primitive.Ground(redGPUContext, 30, 30),
        material
    );
    scene.addChild(floor);

    // Place 25 spheres
    const sphereGeometry = new RedGPU.Primitive.Sphere(redGPUContext, 1, 32, 32);
    for (let i = 0; i < 25; i++) {
        const mesh = new RedGPU.Display.Mesh(redGPUContext, sphereGeometry, material);
        mesh.x = (i % 5 - 2) * 4;
        mesh.z = (Math.floor(i / 5) - 2) * 4;
        scene.addChild(mesh);
    }

    const controller = new RedGPU.Camera.OrbitController(redGPUContext);
    controller.distance = 25;

    const view = new RedGPU.Display.View3D(redGPUContext, scene, controller);
    redGPUContext.addView(view);

    const renderer = new RedGPU.Renderer();
    
    // 4. Lighting animation
    renderer.start(redGPUContext, (time) => {
        const t = time / 1000;
        blueLight.x = Math.sin(t) * 10;
        blueLight.z = Math.cos(t) * 10;
        blueLight.y = Math.sin(t * 0.5) * 5 + 5;

        redLight.x = Math.sin(t + 3.14) * 10;
        redLight.z = Math.cos(t + 3.14) * 10;
        redLight.y = Math.cos(t * 0.5) * 5 + 5;
    });
});

Live Demo

Observe the changes in light on the surface of objects as the light source position moves.

Key Summary

• Manage all light sources by registering and controlling them via LightManager.
• To see lighting effects, you must use glossy materials such as PhongMaterial or PBRMaterial.
• DirectionalLight is suitable for global lighting, while PointLight / SpotLight are suitable for highlight lighting.

Next Learning Recommendation

Where there is light, there is shadow. Learn about the shadow system that completes a realistic sense of space.

• Shadow