@combeenation/3d-viewer 5.2.0-alpha5 → 6.1.0-beta1

package/src/api/manager/sceneManager.ts

@@ -1,127 +1,132 @@
-import { Event } from '../classes/event';
-import { Parameter } from '../classes/parameter';
-import { ParameterObservable } from '../classes/parameterObservable';
-import { SpecStorage } from '../store/specStorage';
-import { changeEnvironment } from '../util/babylonHelper';
-import { mergeMaps } from '../util/resourceHelper';
-import { Camera } from '@babylonjs/core/Cameras/camera';
-import { Scene as BabylonScene } from '@babylonjs/core/scene';
-import { cloneDeep, concat, merge } from 'lodash-es';
-
-export class SceneManager extends ParameterObservable {
-  protected readonly _parameterObservers: Map<string, ParameterObserver[]> = new Map();
-
-  /**
-   * Constructor.
-   */
-  protected constructor(public scene: BabylonScene) {
-    super();
-    this.addParameterObservers();
-  }
-
-  /**
-   * Creates a {@link SceneManager} based on given BabylonJS scene.
-   */
-  public static async create(scene: BabylonScene): Promise<SceneManager> {
-    const sceneManager = new SceneManager(scene);
-    await sceneManager.bootstrapParameters(SpecStorage.get<ParameterBag>('scene.parameters'));
-    return sceneManager;
-  }
-
-  /**
-   * The active `Camera`.
-   */
-  get activeCamera(): Camera {
-    if (!this.scene.activeCamera) {
-      throw new Error('Scene has no active camera.');
-    }
-    return this.scene.activeCamera;
-  }
-
-  /**
-   * Places the given {@link ParameterBag} in the {@link SceneManager}'s parameters, replaces all patterns in the
-   * {@link StructureJson} and broadcasts all {@link ParameterObserver}s.
-   *
-   * @emit {@link Event.SCENE_PARAMETER_COMMITTED}
-   */
-  public async commitParameters(parameters?: ParameterBag): Promise<SceneManager> {
-    if (!parameters) {
-      parameters = {};
-    }
-    const oldParameters = cloneDeep(this.parameters);
-    merge(this.parameters, parameters);
-
-    // handle parameter observers
-    let observerPromises: Promise<void | ParameterObserver>[] = [];
-    for (const parameter in this.parameters) {
-      const oldParameterValue = oldParameters[parameter];
-      const newParameterValue = this.parameters[parameter];
-      this.assertParameter(Parameter.declarations, parameter, newParameterValue);
-      if (oldParameterValue === newParameterValue) {
-        continue;
-      }
-      // parameter changed
-      const parameterObservers = mergeMaps(this._parameterObservers, this.parameterObservers);
-      if (parameterObservers.has(parameter)) {
-        const observers = parameterObservers.get(parameter)!;
-        observerPromises = concat(
-          observerPromises,
-          observers.map(observer => {
-            const observerResult = observer(this, oldParameterValue, newParameterValue);
-            const observerPromise = Promise.resolve(observerResult);
-            observerPromise.then(() => {
-              this.broadcastEvent(
-                Event.SCENE_PARAMETER_COMMITTED,
-                this,
-                parameter,
-                oldParameterValue,
-                newParameterValue
-              );
-            });
-            return observerPromise;
-          })
-        );
-      }
-    }
-    await Promise.all(observerPromises);
-    return this;
-  }
-
-  protected addParameterObservers(): SceneManager {
-    const handleEnvParamChange = (manager: SceneManager) => {
-      const params = {
-        color: manager.parameters[Parameter.ENVIRONMENT_COLOR],
-        intensity: manager.parameters[Parameter.ENVIRONMENT_INTENSITY],
-        env: manager.parameters[Parameter.ENVIRONMENT],
-        background: manager.parameters[Parameter.ENVIRONMENT_BACKGROUND],
-        rotation: manager.parameters[Parameter.ENVIRONMENT_ROTATION],
-        useDefault: manager.parameters[Parameter.ENVIRONMENT_USEDEFAULT],
-      };
-      const envDef: EnvironmentDefinition = {
-        environmentColor: params.color ? Parameter.parseColor(params.color) : undefined,
-        environmentIntensity: params.intensity !== undefined ? Parameter.parseNumber(params.intensity) : undefined,
-        environment: params.env ? (params.env as string) : undefined,
-        environmentBackground: params.background ? (params.background as string) : undefined,
-        environmentRotation: params.rotation !== undefined ? Parameter.parseNumber(params.rotation) : undefined,
-        environmentUseDefault: params.useDefault ? Parameter.parseBoolean(params.useDefault) : undefined,
-      };
-      changeEnvironment(manager.scene, envDef);
-    };
-
-    this._parameterObservers.set(Parameter.ENVIRONMENT_COLOR, [handleEnvParamChange]);
-    this._parameterObservers.set(Parameter.ENVIRONMENT_ROTATION, [handleEnvParamChange]);
-    this._parameterObservers.set(Parameter.ENVIRONMENT_USEDEFAULT, [handleEnvParamChange]);
-    this._parameterObservers.set(Parameter.ENVIRONMENT, [handleEnvParamChange]);
-    this._parameterObservers.set(Parameter.ENVIRONMENT_BACKGROUND, [handleEnvParamChange]);
-    this._parameterObservers.set(Parameter.ENVIRONMENT_INTENSITY, [handleEnvParamChange]);
-    return this;
-  }
-
-  /**
-   * Bootstrapping for parameters. It sets the `parametersInitialized` to true for all ancestors.
-   */
-  protected async bootstrapParameters(parameters?: ParameterBag): Promise<SceneManager> {
-    await this.commitParameters(merge(cloneDeep(this.parameters), parameters));
-    return this;
-  }
-}
+import { Event } from '../classes/event';
+import { Parameter } from '../classes/parameter';
+import { ParameterObservable } from '../classes/parameterObservable';
+import { SpecStorage } from '../store/specStorage';
+import { changeEnvironment } from '../util/babylonHelper';
+import { mergeMaps } from '../util/resourceHelper';
+import { TextureLoadManager } from './textureLoadManager';
+import { Camera } from '@babylonjs/core/Cameras/camera';
+import { Scene as BabylonScene } from '@babylonjs/core/scene';
+import { cloneDeep, concat, merge } from 'lodash-es';
+
+export class SceneManager extends ParameterObservable {
+  protected readonly _parameterObservers: Map<string, ParameterObserver[]> = new Map();
+
+  protected _textureLoadManager: TextureLoadManager | null = null;
+
+  /**
+   * Constructor.
+   */
+  protected constructor(public scene: BabylonScene) {
+    super();
+    this._textureLoadManager = TextureLoadManager.create(scene);
+    this.addParameterObservers();
+  }
+
+  /**
+   * Creates a {@link SceneManager} based on given BabylonJS scene.
+   */
+  public static async create(scene: BabylonScene): Promise<SceneManager> {
+    const sceneManager = new SceneManager(scene);
+
+    await sceneManager.bootstrapParameters(SpecStorage.get<ParameterBag>('scene.parameters'));
+    return sceneManager;
+  }
+
+  /**
+   * The active `Camera`.
+   */
+  get activeCamera(): Camera {
+    if (!this.scene.activeCamera) {
+      throw new Error('Scene has no active camera.');
+    }
+    return this.scene.activeCamera;
+  }
+
+  /**
+   * Places the given {@link ParameterBag} in the {@link SceneManager}'s parameters, replaces all patterns in the
+   * {@link StructureJson} and broadcasts all {@link ParameterObserver}s.
+   *
+   * @emit {@link Event.SCENE_PARAMETER_COMMITTED}
+   */
+  public async commitParameters(parameters?: ParameterBag): Promise<SceneManager> {
+    if (!parameters) {
+      parameters = {};
+    }
+    const oldParameters = cloneDeep(this.parameters);
+    merge(this.parameters, parameters);
+
+    // handle parameter observers
+    let observerPromises: Promise<void | ParameterObserver>[] = [];
+    for (const parameter in this.parameters) {
+      const oldParameterValue = oldParameters[parameter];
+      const newParameterValue = this.parameters[parameter];
+      this.assertParameter(Parameter.declarations, parameter, newParameterValue);
+      if (oldParameterValue === newParameterValue) {
+        continue;
+      }
+      // parameter changed
+      const parameterObservers = mergeMaps(this._parameterObservers, this.parameterObservers);
+      if (parameterObservers.has(parameter)) {
+        const observers = parameterObservers.get(parameter)!;
+        observerPromises = concat(
+          observerPromises,
+          observers.map(observer => {
+            const observerResult = observer(this, oldParameterValue, newParameterValue);
+            const observerPromise = Promise.resolve(observerResult);
+            observerPromise.then(() => {
+              this.broadcastEvent(
+                Event.SCENE_PARAMETER_COMMITTED,
+                this,
+                parameter,
+                oldParameterValue,
+                newParameterValue
+              );
+            });
+            return observerPromise;
+          })
+        );
+      }
+    }
+    await Promise.all(observerPromises);
+    return this;
+  }
+
+  protected addParameterObservers(): SceneManager {
+    const handleEnvParamChange = (manager: SceneManager, oldValue: ParameterValue, newValue: ParameterValue) => {
+      const params = {
+        color: manager.parameters[Parameter.ENVIRONMENT_COLOR],
+        intensity: manager.parameters[Parameter.ENVIRONMENT_INTENSITY],
+        env: manager.parameters[Parameter.ENVIRONMENT],
+        background: manager.parameters[Parameter.ENVIRONMENT_BACKGROUND],
+        rotation: manager.parameters[Parameter.ENVIRONMENT_ROTATION],
+        useDefault: manager.parameters[Parameter.ENVIRONMENT_USEDEFAULT],
+      };
+      const envDef: EnvironmentDefinition = {
+        environmentColor: params.color ? Parameter.parseColor(params.color) : undefined,
+        environmentIntensity: params.intensity !== undefined ? Parameter.parseNumber(params.intensity) : undefined,
+        environment: params.env ? (params.env as string) : undefined,
+        environmentBackground: params.background ? (params.background as string) : undefined,
+        environmentRotation: params.rotation !== undefined ? Parameter.parseNumber(params.rotation) : undefined,
+        environmentUseDefault: params.useDefault ? Parameter.parseBoolean(params.useDefault) : undefined,
+      };
+      changeEnvironment(manager.scene, envDef);
+    };
+
+    this._parameterObservers.set(Parameter.ENVIRONMENT_COLOR, [handleEnvParamChange]);
+    this._parameterObservers.set(Parameter.ENVIRONMENT_ROTATION, [handleEnvParamChange]);
+    this._parameterObservers.set(Parameter.ENVIRONMENT_USEDEFAULT, [handleEnvParamChange]);
+    this._parameterObservers.set(Parameter.ENVIRONMENT, [handleEnvParamChange]);
+    this._parameterObservers.set(Parameter.ENVIRONMENT_BACKGROUND, [handleEnvParamChange]);
+    this._parameterObservers.set(Parameter.ENVIRONMENT_INTENSITY, [handleEnvParamChange]);
+    return this;
+  }
+
+  /**
+   * Bootstrapping for parameters. It sets the `parametersInitialized` to true for all ancestors.
+   */
+  protected async bootstrapParameters(parameters?: ParameterBag): Promise<SceneManager> {
+    await this.commitParameters(merge(cloneDeep(this.parameters), parameters));
+    return this;
+  }
+}

package/src/api/manager/textureLoadManager.ts

@@ -0,0 +1,95 @@
+import { Event } from '../classes/event';
+import { EventBroadcaster } from '../classes/eventBroadcaster';
+import { isFullyInitializedTexture } from '../util/babylonHelper';
+import { sleep } from '../util/resourceHelper';
+import { BaseTexture } from '@babylonjs/core/Materials/Textures/baseTexture';
+import { Scene as BabylonScene } from '@babylonjs/core/scene';
+
+/**
+ * Keeps track of all texture loading/ready states and fires {@link Event.TEXTURE_LOADING_START} and
+ * {@link Event.TEXTURE_LOADING_END} events.
+ */
+export class TextureLoadManager extends EventBroadcaster {
+  // We're keeping track of all "loading textures" in this map ourselves instead of relying on information from
+  // `scene.textures` as that proved to be rather unreliable for our use cases.
+  // E.g. see this forums post for some more information:
+  // https://forum.babylonjs.com/t/using-scene-createdefaultenvironment-removes-textures-from-scene/35267
+  private readonly _loadingTextures: Map<number, BaseTexture> = new Map();
+
+  // Whenever we fire the {@link Event.TEXTURE_LOADING_START} event, we're starting a polling service which checks all
+  // x ms if all awaited textures are in "ready state" or not.
+  // This is basically just an additional safety net in addition to our `onLoadObservable`s and was added to prevent
+  // situations where a {@link Event.TEXTURE_LOADING_START} event is fired without an accompanying
+  // {@link Event.TEXTURE_LOADING_EVENT} as that is a situation which can lead to load masks being endlessly shown in a
+  // cfgr.
+  // In theory this shouldn't be necessary, but we've already discovered some quirks and inconsistent behavior around
+  // the texture load observables etc. and I felt more save with this safety net in place.
+  private _readyStatePollingIntervalMs = 200;
+  private _readyStatePollingId = 0;
+
+  private constructor(public scene: BabylonScene) {
+    super();
+    this.scene.onNewTextureAddedObservable.add(this.onTextureAdded.bind(this));
+  }
+
+  public static create(scene: BabylonScene): TextureLoadManager {
+    const loadMgr = new TextureLoadManager(scene);
+    return loadMgr;
+  }
+
+  private startReadyStatePollingIfNeeded() {
+    if (!this._readyStatePollingId) {
+      this._readyStatePollingId = window.setInterval(
+        this.checkLoadingTexturesState.bind(this),
+        this._readyStatePollingIntervalMs
+      );
+    }
+  }
+
+  private endReadyStatePollingIfNeeded() {
+    if (this._readyStatePollingId) {
+      window.clearInterval(this._readyStatePollingId);
+      this._readyStatePollingId = 0;
+    }
+  }
+
+  /**
+   * Checks the "ready state" of all textures inside the `this._loadingTextures` map, removes the ready ones and fires
+   * the {@link Event.TEXTURE_LOADING_END} event if no more textures are loading (i.e. "not ready").
+   */
+  private checkLoadingTexturesState() {
+    const allTexturesReadyBefore = !this._loadingTextures.size;
+    if (allTexturesReadyBefore) return;
+
+    // Remove textures which are in "ready state" from the map
+    for (const [id, texture] of this._loadingTextures) {
+      if (texture.isReady()) this._loadingTextures.delete(id);
+    }
+
+    const allTexturesReadyAfter = !this._loadingTextures.size;
+    if (allTexturesReadyAfter) {
+      this.broadcastEvent(Event.TEXTURE_LOADING_END);
+      this.endReadyStatePollingIfNeeded();
+    }
+  }
+
+  private async onTextureAdded(texture: BaseTexture) {
+    // Workaround:
+    // The texture object is not fully created when the added observable is called. E.g. the function
+    // `onLoadObservable` is not there at that point.
+    // More details: https://forum.babylonjs.com/t/basetexture-whenallready-returns-too-early/34501/4
+    await sleep(0);
+
+    // Some textures are already in "ready state" after the sleep -> We don't care for them anymore as well as for
+    // textures which don't come with an `onLoadObservable` (i.e. not of class {@link Texture}).
+    if (texture.isReady() || !isFullyInitializedTexture(texture)) return;
+
+    const noCurrentLoadingTextures = this._loadingTextures.size <= 0;
+    if (noCurrentLoadingTextures) {
+      this.broadcastEvent(Event.TEXTURE_LOADING_START);
+      this.startReadyStatePollingIfNeeded();
+    }
+    this._loadingTextures.set(texture.uniqueId, texture);
+    texture.onLoadObservable.addOnce((texture: Texture) => this.checkLoadingTexturesState());
+  }
+}