RedGPU V4.4.0-Alpha

English

한국어

English

한국어

Appearance

GLTF Loader ​

While you can create basic shapes with Primitives, high-quality assets such as detailed characters or buildings need to be created in external 3D tools (Blender, Maya, etc.) and then imported. RedGPU provides the GLTFLoader, which supports loading the web 3D standard format glTF (GL Transmission Format) 2.0.

1. Loading a Model ​

Creating a GLTFLoader instance asynchronously loads and parses the file. Once complete, add loader.resultMesh passed to the callback function to the Scene.

javascript
new RedGPU.GLTFLoader(
    redGPUContext, 
    'https://.../DamagedHelmet.glb', // Model path
    (loader) => {
        // Add the loaded root mesh (resultMesh) to the scene
        scene.addChild(loader.resultMesh);
    }
);
  • resultMesh: The root Mesh object containing the loaded model hierarchy.
  • parsingResult: Detailed parsed data including materials, textures, and animations.

TIP

Since most glTF models use PBRMaterial, we recommend configuring IBL environment lighting on view.ibl for realistic metallic reflections and shading.

2. Practical Example: Environment Light and Model Loading ​

An example of setting up an environment with IBL and loading a metallic helmet model.

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

RedGPU.init(canvas, (redGPUContext) => {
    const scene = new RedGPU.Display.Scene();
    const controller = new RedGPU.Camera.OrbitController(redGPUContext);
    controller.distance = 3;

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

    // 1. Configure IBL and SkyBox
    const ibl = new RedGPU.Resource.IBL(
        redGPUContext,
        'https://redcamel.github.io/RedGPU/examples/assets/hdr/2k/the_sky_is_on_fire_2k.hdr'
    );
    view.ibl = ibl;
    view.skybox = new RedGPU.Display.SkyBox(redGPUContext, ibl.environmentTexture);

    // 2. Load GLTF Model
    new RedGPU.GLTFLoader(
        redGPUContext,
        'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main/Models/DamagedHelmet/glTF-Binary/DamagedHelmet.glb',
        (loader) => {
            scene.addChild(loader.resultMesh);
        }
    );

    const renderer = new RedGPU.Renderer();
    renderer.start(redGPUContext);
});

Live Demo ​

Next Steps ​

Learn how to render thousands of identical objects with high performance in a single draw call.