Resource Loading

The engine usually needs to load different resource files. In order to uniformly manage the loading and reading of all files, we have encapsulated a unified res resource manager on the engine instance, which makes it easy for users to load, store, and read various file resources.

Basic Usage

// Load a 2D texture
let texture = await engine.res.loadTexture('path/to/image.png');
// Load a GLTF/GLB model
let gltf = await engine.res.loadGltf('path/to/model.gltf');
let glb = await engine.res.loadGltf('path/to/model.glb');

Download Progress Callback

res supports a download progress callback. We can configure LoaderFunctions to listen for file loading event callbacks, which is commonly used for UI loading progress prompts:

let parser = await engine.res.loadGltf('/sample.gltf',{
  // You can customize the fetch request headers, for example to add Authorization
  headers: {
    'Authorization': 'Bearer xxxx',
    // ...
  },
  onProgress: (receivedLength:number, contentLength:number, url:string) => {
    // Listen for the download progress
  },
  onComplete: (url:string) => {
    // File download completed
  },
  onError: (e) => {
    // File loading error
  },
  onUrl: (url:string) =>{
    // You can modify the original url according to your needs and return a custom path
  }
});

Texture Manager

We can store the loaded textures uniformly in the res resource pool and read them directly when needed, making it easy to centrally download and manage textures

// Pre-download the texture
let brdfLUTTexture = new BitmapTexture2D();
await brdfLUTTexture.load('PBR/BRDFLUT.png');
// Store uniformly
engine.res.addTexture('BRDFLUT', brdfLUTTexture);
// Retrieve when needed
let brdfLUTTexture = engine.res.getTexture('BRDFLUT');

Material Manager

Similarly, add all kinds of materials uniformly to the material manager for easy later use

let floorMat = new LitMaterial();
engine.res.addMat('floorMat', floorMat );
// Retrieve when needed
let floorMat = engine.res.getMat('floorMat');

Prefab Manager

You can also add Object3D nodes to the resource manager for easy searching and calling

let box = new Object3D();
res.addPrefab('box', box);
// Retrieve when needed
let box = res.getPrefab('box');

Example

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<

import { Engine3D, Scene3D, Object3D, Camera3D, View3D, DirectLight, HoverCameraController, Color, AtmosphericComponent } from '@orillusion/core';

// initializa engine
let engine = await Engine3D.init();
// create new scene as root node
let scene3D: Scene3D = new Scene3D();
scene3D.addComponent(AtmosphericComponent);
// create camera
let cameraObj: Object3D = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
// adjust camera view
camera.perspective(60, engine.aspect, 1, 5000.0);
// set camera controller
let controller = cameraObj.addComponent(HoverCameraController);
controller.setCamera(0, -20, 15);
// add camera node
scene3D.addChild(cameraObj);
// create light
let light: Object3D = new Object3D();
// add direct light component
let component: DirectLight = light.addComponent(DirectLight);
// adjust lighting
light.rotationX = 45;
light.rotationY = 30;
component.lightColor = new Color(1.0, 1.0, 1.0, 1.0);
component.intensity = 1;
// add light object
scene3D.addChild(light);

let button = document.createElement('button');
button.setAttribute('style', 'position:fixed;top:calc(50% - 20px);left:0;right:0;width:150px;padding:10px;font-size:16px;margin:auto;');
button.innerHTML = 'Load Model';
document.body.appendChild(button);

button.onclick = async () => {
    button.onclick = null;
    // load model
    let dragon = await engine.res.loadGltf('https://cdn.orillusion.com/PBR/DragonAttenuation/DragonAttenuation.gltf', {
        onProgress: (receivedLength: number, contentLength: number, url: string) => {
            if (!url.match(/\.bin$/)) return;
            button.innerHTML = 'Loading ' + ((receivedLength / contentLength) * 100).toFixed(0) + '%';
        },
        onComplete: (url: string) => {
            if (!url.match(/\.bin$/)) return;
            button.innerHTML = 'Model Loaded!';
            setTimeout(() => {
                button.remove();
            }, 1000);
        }
    });
    scene3D.addChild(dragon);
};

let view = new View3D();
view.scene = scene3D;
view.camera = camera;
// start render
engine.startRenderView(view);