SOGS progress events

src/framework/parsers/sogs.js

@@ -4,6 +4,41 @@ import { GSplatResource } from '../../scene/gsplat/gsplat-resource.js';
 import { GSplatSogsData } from '../../scene/gsplat/gsplat-sogs-data.js';
 import { GSplatSogsResource } from '../../scene/gsplat/gsplat-sogs-resource.js';
 
+// combine the progress updates from multiple assets
+// and fire process events on the target
+const combineProgress = (target, assets) => {
+    const map = new Map();
+
+    const fire = () => {
+        let loaded = 0;
+        let total = 0;
+
+        map.forEach((value) => {
+            loaded += value.loaded;
+            total += value.total;
+        });
+
+        target.fire('progress', loaded, total);
+    };
+
+    assets.forEach((asset) => {
+        const progress = (loaded, total) => {
+            map.set(asset, { loaded, total });
+            fire();
+        };
+
+        const done = () => {
+            asset.off('progress', progress);
+            asset.off('load', done);
+            asset.off('error', done);
+        };
+
+        asset.on('progress', progress);
+        asset.on('load', done);
+        asset.on('error', done);
+    });
+};
+
 /**
  * @import { AppBase } from '../app-base.js'
  * @import { ResourceHandlerCallback } from '../handlers/handler.js'
@@ -56,6 +91,8 @@ class SogsParser {
             });
         });
 
+        combineProgress(asset, subs.map(sub => textures[sub]).flat());
+
         // wait for all textures to complete loading
         await Promise.allSettled(promises);
 

src/framework/parsers/texture/img.js

@@ -61,7 +61,7 @@ class ImgParser extends TextureParser {
         }
 
         if (this.device.supportsImageBitmap) {
-            this._loadImageBitmap(url.load, url.original, crossOrigin, handler);
+            this._loadImageBitmap(url.load, url.original, crossOrigin, handler, asset);
         } else {
             this._loadImage(url.load, url.original, crossOrigin, handler);
         }
@@ -125,12 +125,13 @@ class ImgParser extends TextureParser {
         image.src = url;
     }
 
-    _loadImageBitmap(url, originalUrl, crossOrigin, callback) {
+    _loadImageBitmap(url, originalUrl, crossOrigin, callback, asset) {
         const options = {
             cache: true,
             responseType: 'blob',
             retry: this.maxRetries > 0,
-            maxRetries: this.maxRetries
+            maxRetries: this.maxRetries,
+            progress: asset
         };
         http.get(url, options, (err, blob) => {
             if (err) {

src/platform/net/http.js

@@ -5,6 +5,10 @@ import { URI } from '../../core/uri.js';
 
 import { math } from '../../core/math/math.js';
 
+/**
+ * @import { EventHandler } from '../../core/event-handler.js';
+ */
+
 /**
  * @callback HttpResponseCallback
  * Callback used by {@link Http#get}, {@link Http#post}, {@link Http#put}, {@link Http#del}, and
@@ -82,6 +86,7 @@ class Http {
      * @param {boolean} [options.retry] - If true then if the request fails it will be retried with an exponential backoff.
      * @param {number} [options.maxRetries] - If options.retry is true this specifies the maximum number of retries. Defaults to 5.
      * @param {number} [options.maxRetryDelay] - If options.retry is true this specifies the maximum amount of time to wait between retries in milliseconds. Defaults to 5000.
+     * @param {EventHandler} [options.progress] - Object to use for firing progress events.
      * @param {HttpResponseCallback} callback - The callback used when the response has returned. Passed (err, data)
      * where data is the response (format depends on response type: text, Object, ArrayBuffer, XML) and
      * err is the error code.
@@ -99,7 +104,28 @@ class Http {
             callback = options;
             options = {};
         }
-        return this.request('GET', url, options, callback);
+
+        const result = this.request('GET', url, options, callback);
+
+        const { progress } = options;
+        if (progress) {
+            const handler = (event) => {
+                if (event.lengthComputable) {
+                    progress.fire('progress', event.loaded, event.total);
+                }
+            };
+            const endHandler = (event) => {
+                handler(event);
+                result.removeEventListener('loadstart', handler);
+                result.removeEventListener('progress', handler);
+                result.removeEventListener('loadend', endHandler);
+            };
+            result.addEventListener('loadstart', handler);
+            result.addEventListener('progress', handler);
+            result.addEventListener('loadend', endHandler);
+        }
+
+        return result;
     }
 
     /**