AssetReference Loading Progress

🌵 Needle Engine
1

Is there a way to get the progress when lazy loading additional glb files (prefabs or scenes)? I’ve scene the sceneswitcher script and it’s loadingscene but there seems to be nothing that displays progress bars or percentages.

2

Hello! To achieve loading progress updates while lazy loading additional GLB files, you can extend the existing SceneSwitcher or implement a custom loading mechanism to report progress. Here’s a general approach in pseudocode:

  1. Track Loading Events: Use events or callbacks during the loading of the GLB files.
  2. Calculate Progress: Maintain a progress variable that updates based on the loading stages (e.g., number of loaded assets vs. total assets).
  3. Display Progress: Use a UI component (like a progress bar) to visually represent the loading progress.

Here’s a sample code implementation:

import { LoadManager, SceneManager, UIComponent } from "@needle-tools/engine";

class CustomSceneLoader {
    constructor(totalAssets) {
        this.totalAssets = totalAssets;
        this.loadedAssets = 0;
        this.progressBar = new UIComponent(); // Create or reference your progress bar UI component
    }

    loadAsset(assetName) {
        LoadManager.loadGLB(assetName, (progress) => {
            this.updateProgress(progress);
        }).then(() => {
            this.assetLoaded();
        });
    }

    assetLoaded() {
        this.loadedAssets++;
        this.updateProgressDisplay();
        if (this.loadedAssets === this.totalAssets) {
            this.onAllAssetsLoaded();
        }
    }

    updateProgress(progress) {
        this.progressBar.setValue(progress); // Update your progress bar
    }

    updateProgressDisplay() {
        const percentage = (this.loadedAssets / this.totalAssets) * 100;
        console.log(`Loading Progress: ${percentage.toFixed(2)}%`);
        this.updateProgress(percentage / 100); // Assuming progress bar expects a value between 0 and 1
    }

    onAllAssetsLoaded() {
        console.log('All assets loaded!');
        // Handle post-loading logic here
    }
}

// Example usage:
const sceneLoader = new CustomSceneLoader(totalAssets);
totalAssets.forEach(asset => sceneLoader.loadAsset(asset));

This code outlines a simple asset loader that tracks loading progress for multiple GLB assets and updates a UI progress bar accordingly. You might need to adjust it to fit into your existing project structure and UI system.

For specific functionalities or better integration, please let me know more details about your current implementation or framework used.

3 replies left
thread_N3MFHEk6g51Npvy22V69vvzi
Reply to this message to continue the conversation

3

Give me a rewrite of this script to display the progress of this awaitable instantiation:

import { AssetReference, Behaviour, GameObject, InstantiateOptions, serializable } from "@needle-tools/engine"
import { Object3D, Object3DEventMap } from "three";
export class InstantiateOnStart extends Behaviour { 
    @serializable(AssetReference)
    myPrefab?: AssetReference;

    
    async start() {
        const options = new InstantiateOptions();
        options.parent = this.gameObject;
        options.rotation?.copy(this.gameObject.quaternion);
        options.position?.copy(this.gameObject.position);
        await this.myPrefab?.instantiate(options);
    }
}
4

Hello! To rewrite the InstantiateOnStart script to display the progress of the awaitable instantiation, you can monitor the instantiation process and update a progress variable or UI accordingly. Here’s how you can implement it:

import { AssetReference, Behaviour, GameObject, InstantiateOptions, serializable } from "@needle-tools/engine";
import { Object3D } from "three";

export class InstantiateOnStart extends Behaviour { 
    @serializable(AssetReference)
    myPrefab?: AssetReference;

    async start() {
        const options = new InstantiateOptions();
        options.parent = this.gameObject;
        options.rotation?.copy(this.gameObject.quaternion);
        options.position?.copy(this.gameObject.position);

        // Initializing the loading progress UI component (e.g. a progress bar)
        const loadingBar = document.getElementById('loadingBar'); // Assume a progress bar exists in your HTML
        loadingBar.style.width = '0%'; // Set initial progress

        // Start loading and instantiate the prefab
        await this.updateLoadingProgress(loadingBar, this.myPrefab, options);
    }

    async updateLoadingProgress(loadingBar: HTMLElement, assetReference?: AssetReference, options?: InstantiateOptions) {
        if (!assetReference) return;

        return new Promise((resolve) => {
            const progressStep = 100 / 10; // Assuming 10 total chunks for loading
            let progress = 0;

            // Simulating loading process. Replace this with actual loading logic.
            const intervalId = setInterval(async () => {
                if (progress < 100) {
                    progress += progressStep; // Increment progress
                    loadingBar.style.width = `${progress}%`; // Update progress bar UI
                } else {
                    clearInterval(intervalId);
                    await assetReference.instantiate(options); // Instantiate once loading is complete
                    loadingBar.style.width = '100%'; // Ensure it shows full width on completion
                    resolve();
                }
            }, 100); // Simulating loading every 100ms
        });
    }
}

In this code:

  • We create an HTML progress bar element loadingBar.
  • The updateLoadingProgress function simulates the loading of the asset, updating the progress bar at regular intervals.
  • Adjust the loading process simulation part according to how the assets are actually being loaded.

Make sure to set up your HTML/CSS to accommodate the progress bar visually. If you need any further adjustments or specific implementations, please let me know!

2 replies left
thread_N3MFHEk6g51Npvy22V69vvzi
Reply to this message to continue the conversation

5

okay sorry, but I want @Marcel_Wiessler back :wink:

6

The SceneSwitcher has a progress event that you could just use