fix asset preloading

update bundle assets registration

Author: Sascha Braun

samples/views/Demo.vue

@@ -47,9 +47,11 @@
 
 
         <asset-bundle name="Crate" preload>
-          <texture name="crateTex" src="/assets/textures/crate.jpg"/>
-          <standard-material name="cubeMat" map="crateTex"/>
-          <geometry name="cube" :factory="cubeFactory"/>
+          <div>
+            <texture name="crateTex" src="/assets/textures/crate.jpg"/>
+            <standard-material name="cubeMat" map="crateTex"/>
+            <geometry name="cube" :factory="cubeFactory"/>
+          </div>
         </asset-bundle>
 
         <asset-bundle dependencies="Crate" name="Scene1" preload>

samples/views/StandardMaterial.ts

@@ -23,21 +23,34 @@ export default class StandardMaterial extends Vue {
   @Prop({ type: Number, default: 0.01 })
   public metalness!: number;
 
-  public factory: MaterialFactory | null = null;
+  public async factory(app: Application) {
+    let texture;
+    if (this.map) {
+      texture = await app.assets.textures.get(this.map);
+    }
+
+    const mat = new MeshStandardMaterial({
+      color: this.color,
+      metalness: this.metalness
+    });
+    mat.map = texture as Texture;
+    return mat;
+  }
 
   public created() {
-    this.factory = async (app: Application) => {
-      let texture;
-      if (this.map) {
-        texture = await app.assets.textures.get(this.map);
-      }
-
-      const mat = new MeshStandardMaterial({
-        color: this.color,
-        metalness: this.metalness
-      });
-      mat.map = texture as Texture;
-      return mat;
-    };
+    console.log("standard material created", this.name);
+    // this.factory = async (app: Application) => {
+    //   let texture;
+    //   if (this.map) {
+    //     texture = await app.assets.textures.get(this.map);
+    //   }
+    //   const mat = new MeshStandardMaterial({
+    //     color: this.color,
+    //     metalness: this.metalness
+    //   });
+    //   mat.map = texture as Texture;
+    //   console.log("standard material created");
+    //   return mat;
+    // };
   }
 }

src/v2/components/AssetBundle.ts

@@ -1,8 +1,7 @@
-import Vue, { VNode } from "vue";
-import { Component, Mixins, Prop } from "vue-property-decorator";
+import { Component, Mixins, Prop, Provide, Vue } from "vue-property-decorator";
 
 import { BundleHandle } from "../core";
-import { AppComponent, isAssetComponent } from "../mixins";
+import { AppComponent } from "../mixins";
 import { stringToArray } from "../utils/toArray";
 
 @Component
@@ -16,6 +15,13 @@ export class AssetBundle extends Mixins(AppComponent) {
   @Prop({ type: [String, Array], default: () => [] })
   public dependencies!: string | string[];
 
+  @Provide("bundle")
+  private provideBundle = this.getBundle;
+
+  private getBundle() {
+    return this.m_bundle;
+  }
+
   private m_active = false;
   private m_bundle!: BundleHandle;
 
@@ -48,24 +54,20 @@ export class AssetBundle extends Mixins(AppComponent) {
     await Vue.nextTick();
     await deps;
 
-    this.registerAssets(this.$slots.default);
+    console.log("registered bundle", this.name, this.m_bundle.countAssets());
   }
 
   private async onUnload(): Promise<void> {
     this.m_active = false;
     await Vue.nextTick();
-  }
 
-  private registerAssets(nodes: VNode[] | undefined) {
-    if (nodes) {
-      for (const node of nodes) {
-        const component = node.componentInstance;
-        if (component && isAssetComponent(component)) {
-          this.m_bundle.registerAsset(component.asset);
-        }
-        this.registerAssets(node.children);
-      }
-    }
+    const assets = this.app().assets;
+    console.log(
+      assets.textures.size(),
+      assets.materials.size(),
+      assets.geometries.size(),
+      assets.models.size()
+    );
   }
 
   private getBundles(pDependencies: string | string[]): BundleHandle[] {

src/v2/components/Camera.ts

@@ -1,9 +1,8 @@
-import { Component, Mixins, Prop, Provide } from "vue-property-decorator";
+import { Component, Mixins, Prop, Provide, Vue } from "vue-property-decorator";
 
 import { CameraFactory, CameraHandle } from "../core";
 import { ObjectComponent } from "../mixins";
 
-
 @Component
 export class Camera extends Mixins(ObjectComponent) {
   @Prop({ required: true, type: String })
@@ -27,6 +26,7 @@ export class Camera extends Mixins(ObjectComponent) {
   };
   public onDeactivate = async () => {
     this.m_active = false;
+    await Vue.nextTick();
   };
 
   public async created() {
@@ -41,10 +41,13 @@ export class Camera extends Mixins(ObjectComponent) {
     this.m_camera.onDeactivate.on(this.onDeactivate);
 
     this.m_active = true;
+
+    console.log("camera created", this.name);
   }
 
   public beforeDestroy() {
     this.app().cameras.dispose(this.name);
+    console.log("camera disposed", this.name);
   }
 
   public render(h: any) {

src/v2/components/Geometry.ts

@@ -12,13 +12,17 @@ export class Geometry extends Mixins(AssetComponent) {
   public factory!: GeometryFactory;
 
   public async created() {
-    this.asset = this.factory(this.app());
-    this.app().assets.geometries.set(this.name, this.asset as Promise<
-      GeometryType
-    >);
+    const geometry = this.factory(this.app());
+    if (this.bundle()) {
+      this.bundle()!.registerAsset(this.name, geometry);
+    }
+    this.app().assets.geometries.set(this.name, geometry);
   }
 
   public async beforeDestroy() {
+    if (this.bundle()) {
+      this.bundle()!.unregisterAsset(this.name);
+    }
     this.app().assets.geometries.dispose(this.name);
   }
 

src/v2/components/Material.ts

@@ -12,14 +12,20 @@ export class Material extends Mixins(AssetComponent) {
   private factory!: MaterialFactory;
 
   public created() {
-    this.asset = this.factory(this.app());
-    this.app().assets.materials.set(this.name, this.asset as Promise<
-      MaterialType
-    >);
+    const material = this.factory(this.app());
+    if (this.bundle()) {
+      this.bundle()!.registerAsset(this.name, material);
+    }
+    this.app().assets.materials.set(this.name, material);
+    console.log("material created", this.name);
   }
 
   public async beforeDestroy() {
+    if (this.bundle()) {
+      this.bundle()!.unregisterAsset(this.name);
+    }
     this.app().assets.materials.dispose(this.name);
+    console.log("material disposed", this.name);
   }
 
   public render(h: any) {

src/v2/components/Model.ts

@@ -18,9 +18,10 @@ export class Model extends Mixins(AssetComponent) {
   @Prop({ type: [String, Array], default: () => [] })
   public materials!: string | string[];
 
+  private m_model!: Promise<ModelType>;
+
   public async created() {
     const app = this.app();
-
     if (!this.factory && !this.src) {
       throw new Error(
         `Model "${
@@ -30,17 +31,25 @@ export class Model extends Mixins(AssetComponent) {
     }
 
     if (this.src) {
-      this.asset = app.loader.load(this.src, this.name);
+      this.m_model = app.loader.load(this.src, this.name) as Promise<ModelType>;
     } else {
-      this.asset = this.factory(app);
+      this.m_model = this.factory(app);
     }
     this.overrideMaterials();
 
-    app.assets.models.set(this.name, this.asset as Promise<ModelType>);
+    if (this.bundle()) {
+      this.bundle()!.registerAsset(this.name, this.m_model);
+    }
+    app.assets.models.set(this.name, this.m_model);
+    console.log("model created", this.name);
   }
 
   public async beforeDestroy() {
+    if (this.bundle()) {
+      this.bundle()!.unregisterAsset(this.name);
+    }
     this.app().assets.models.dispose(this.name);
+    console.log("model disposed", this.name);
   }
 
   public render(h: any) {
@@ -50,7 +59,7 @@ export class Model extends Mixins(AssetComponent) {
   private overrideMaterials() {
     const materials = this.getMaterialPromises(this.materials);
     if (materials) {
-      this.asset = this.asset.then(async asset => {
+      this.m_model = this.m_model.then(async asset => {
         const mats = await Promise.all(materials);
         const model = asset as ModelType;
 

src/v2/components/Texture.ts

@@ -14,24 +14,35 @@ export class Texture extends Mixins(AssetComponent) {
   @Prop({ type: String })
   public src?: string;
 
+  private m_texture!: Promise<TextureType>;
+
   public created() {
     const app = this.app();
     if (this.factory) {
-      this.asset = this.factory(app);
+      this.m_texture = this.factory(app);
     } else if (this.src) {
-      this.asset = app.loader.texture(this.src, this.name);
+      this.m_texture = app.loader.texture(this.src, this.name);
     } else {
       throw new Error(
         `Texture "${
           this.name
         }" could not be loaded: no "src" or "factory" props given`
       );
     }
-    app.assets.textures.set(this.name, this.asset as Promise<TextureType>);
+
+    if (this.bundle()) {
+      this.bundle()!.registerAsset(this.name, this.m_texture);
+    }
+    app.assets.textures.set(this.name, this.m_texture);
+    console.log("texture created", this.name);
   }
 
   public async beforeDestroy() {
+    if (this.bundle()) {
+      this.bundle()!.unregisterAsset(this.name);
+    }
     this.app().assets.textures.dispose(this.name);
+    console.log("texture disposed", this.name);
   }
 
   public render(h: any) {

src/v2/core/AssetMap.ts

@@ -1,4 +1,4 @@
-import { HandlerMapErrors } from "./Errors";
+import { AssetMapErrors, HandlerMapErrors } from "./Errors";
 
 interface DisposableAsset {
   dispose?: () => void;
@@ -7,9 +7,14 @@ interface DisposableAsset {
 export class AssetMap<T> {
   protected _data = new Map<string, Promise<T>>();
 
+  public size() {
+    return this._data.size;
+  }
+
   public set(name: string, asset: Promise<T>): void {
     if (this._data.has(name)) {
-      throw HandlerMapErrors.ALREADY_EXISTS;
+      console.log("asset already exists in map", name);
+      throw AssetMapErrors.ALREADY_EXISTS;
     }
     this._data.set(name, asset);
   }
@@ -25,9 +30,10 @@ export class AssetMap<T> {
       return;
     }
 
-    const handler = this._data.get(name);
-    if (handler) {
-      this.disposeHook(handler);
+    const asset = this._data.get(name);
+    if (asset) {
+      this.disposeHook(asset);
+      this._data.delete(name);
     }
   }