Resource Loading

Engines usually need to load different resource files. To manage the loading and reading of all files uniformly, we have encapsulated a unified res resource manager in Engine3D that makes it easy for users to load, store, and read various file resources.

Basic Usage

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

Download Progress Callback

Res supports a download progress callback, which can be configured with LoaderFunctions to listen for file loading events callbacks, commonly used for UI loading progress prompts:

let parser = await Engine3D.res.loadGltf('/sample.gltf',{
  // Customize headers, you can modify/add fetch header
  headers: {
    'Authorization': 'Bearer xxxx',
    // ...
  },
  onProgress: (receivedLength:number, contentLength:number, url:string) => {
    // Listen to download progress
  },
  onComplete: (url:string) => {
    // File download completed
  },
  onError: (e) => {
    // File loading error
  },
  onUrl: (url:string) =>{
    // Can modify the original url according to the requirement 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 textures
let brdfLUTTexture = new BitmapTexture2D();
await brdfLUTTexture.load('PBR/BRDFLUT.png');
// Uniform storage
Engine3D.res.addTexture('BRDFLUT', brdfLUTTexture);
// Take out when needed
let brdfLUTTexture = Engine3D.res.getTexture('BRDFLUT');

Material Manager

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

let floorMat = new LitMaterial();
Engine3D.res.addMat('floorMat', floorMat );
// Take out when needed
let floorMat = Engine3D.res.getMat('floorMat');

Prefab Manager

We can also add Object3D nodes to the resource management for easy searching and calling.

let box = new Object3D();
res.addPrefab('box', box);
// Take out 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
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, Engine3D.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 Engine3D.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
Engine3D.startRenderView(view);