add first (unstable) version of asset bundle to replace preload slot in scene

Author: Sascha Braun

samples/views/Demo.ts

@@ -98,6 +98,8 @@ export default class About extends Vue {
   }
 
   public created() {
+    console.log("scene", this.scene1);
+
     let idx = 0;
     for (let x = 0; x < 5; ++x) {
       for (let z = 0; z < 5; ++z) {
@@ -111,8 +113,10 @@ export default class About extends Vue {
       }
     }
 
-    this.cubeFactory = async () => {
+    this.cubeFactory = async (app: Application) => {
       // await new Promise(r => setTimeout(r, 2000));
+      // return new THREE.CylinderBufferGeometry(1, 1, 1, 6, 6);
+
       return new THREE.BoxBufferGeometry(1, 1, 1);
     };
     this.planeFactory = async () => {

samples/views/Demo.vue

@@ -24,26 +24,30 @@
       <three>
         <renderer :canvas="canvas" camera="main" :scene="activeScene" antialias shadows/>
 
-        <scene name="scene1" @load="startLoading" @load-progress="loadingProgress" @loaded="finishLoading">
-          <template slot="preload">
-            <div>
-              <texture name="crateTex" src="/assets/textures/crate.jpg"/>
-              <material name="cubeMat" :factory="cubeMaterialFactory"/>
+        <asset-bundle name="PolygonMini" preload>
+          <texture name="PolygonMini_Tex" src="/assets/textures/PolygonMinis_Texture_01.png"/>
 
-              <texture name="PolygonMini_Tex" src="/assets/textures/PolygonMinis_Texture_01.png"/>
-              <material name="PolygonMini_Mat" :factory="polygonMaterialFactory"/>
+          <material name="PolygonMini_Mat" :factory="polygonMaterialFactory"/>
 
-              <geometry name="cube" :factory="cubeFactory"/>
+          <model name="grassModel" src="/assets/models/SM_Env_Grass_01.fbx" materials="PolygonMini_Mat"/>
+          <model name="PM_column" src="/assets/models/SM_Tile_Hex_Column_02.fbx" materials="PolygonMini_Mat"/>
+          <model name="PM_flat" src="/assets/models/SM_Tile_Hex_Flat_01.fbx" materials="PolygonMini_Mat"/>
+        </asset-bundle>
 
-              <model name="grassModel" src="/assets/models/SM_Env_Grass_01.fbx" materials="PolygonMini_Mat"/>
-              <model name="PM_column" src="/assets/models/SM_Tile_Hex_Column_02.fbx" materials="PolygonMini_Mat"/>
-              <model name="PM_flat" src="/assets/models/SM_Tile_Hex_Flat_01.fbx" materials="PolygonMini_Mat"/>
-            </div>
+        <asset-bundle name="Crate" preload>
+          <texture name="crateTex" src="/assets/textures/crate.jpg"/>
+          <material name="cubeMat" :factory="cubeMaterialFactory"/>
+          <geometry name="cube" :factory="cubeFactory"/>
+        </asset-bundle>
 
-            <geometry name="plane" :factory="planeFactory"/>
-            <material name="waterMat" :factory="waterMaterialFactory"/>
+        <asset-bundle dependencies="Crate" name="Scene1" preload>
 
-          </template>
+          <geometry name="plane" :factory="planeFactory"/>
+          <material name="waterMat" :factory="waterMaterialFactory"/>
+
+        </asset-bundle>
+
+        <scene name="scene1" assets="PolygonMini, Scene1, Crate, Crate" @load="startLoading" @load-progress="loadingProgress" @loaded="finishLoading">
 
           <fog exp2/>
 
@@ -114,7 +118,7 @@
 
         </scene>
 
-        <scene name="scene2" @load="startLoading" @load-progress="loadingProgress" @loaded="finishLoading">
+        <scene name="scene2" assets="PolygonMini, Scene1, Crate, Crate" @load="startLoading" @load-progress="loadingProgress" @loaded="finishLoading">
           <!-- <template slot="preload">
             <material name="scene2_mat" :factory="materialFactory"/>
             <geometry name="scene2_field" :factory="geometryFactory"/>

src/components/AssetBundle.ts

@@ -0,0 +1,97 @@
+import Vue, { VNode } from "vue";
+import { Component, Mixins, Prop } from "vue-property-decorator";
+
+import { AssetBundle as Bundle } from "../core";
+import { isThreeAssetComponent, ThreeComponent } from "./base";
+
+@Component
+export class AssetBundle extends Mixins(ThreeComponent) {
+  @Prop({ type: String, default: "" })
+  public name!: string;
+
+  @Prop({ type: Boolean, default: false })
+  public preload!: boolean;
+
+  @Prop({ type: [String, Array], default: () => [] })
+  public dependencies!: string | string[];
+
+  private m_isActive = false;
+  private m_bundle!: Bundle;
+
+  public mounted() {
+    const manager = this.app().assets;
+    this.m_bundle = manager.createBundle(this.name);
+    this.m_bundle.onload = this.onLoadBundle;
+    this.m_bundle.onunload = this.onUnloadBundle;
+    // TODO handle preload on / off
+    // this.m_bundle.preload = this.preload;
+  }
+
+  public beforeDestroy() {
+    const manager = this.app().assets;
+    manager.deleteBundle(this.name);
+  }
+
+  public render(h: any) {
+    if (!this.m_isActive) {
+      return null;
+    }
+    return h("div", this.$slots.default);
+  }
+
+  private async onLoadBundle(): Promise<void> {
+    this.m_isActive = true;
+
+    const bundles = this.getBundles(this.dependencies);
+    const deps = this.m_bundle.registerDependencies(bundles);
+
+    await Vue.nextTick();
+    await deps;
+
+    console.log("load assets for bundle ", this.name);
+
+    this.registerAssets(this.$slots.default);
+  }
+
+  private async onUnloadBundle() {
+    this.m_isActive = false;
+  }
+
+  private registerAssets(nodes: VNode[] | undefined) {
+    if (nodes) {
+      for (const node of nodes) {
+        const component = node.componentInstance;
+        if (component && isThreeAssetComponent(component)) {
+          this.m_bundle.registerAsset(component.asset);
+        }
+        this.registerAssets(node.children);
+      }
+    }
+  }
+
+  private getBundles(dependencies: string | string[]): Bundle[] {
+    const manager = this.app().assets;
+    const bundles: Bundle[] = [];
+
+    if (!dependencies) {
+      return bundles;
+    }
+    if (typeof dependencies === "string") {
+      dependencies = dependencies.split(",").map(mat => mat.trim());
+    }
+    if (!Array.isArray(dependencies)) {
+      throw new Error(
+        `AssetBundle "${
+          this.name
+        }" could not be loaded: "dependencies" have to be either a string or an array`
+      );
+    }
+    (dependencies as string[]).forEach(dep => {
+      const bundle = manager.getBundle(dep);
+      if (bundle) {
+        bundles.push(bundle);
+      }
+    });
+    return bundles;
+  }
+}

src/components/Model.ts

@@ -15,7 +15,7 @@ export class Model extends Mixins(ThreeComponent, ThreeAssetComponent) {
   @Prop({ type: String })
   public src!: string;
 
-  @Prop({ default: [] })
+  @Prop({ type: [String, Array], default: () => [] })
   public materials!: string | string[];
 
   public async created() {

src/components/Scene.ts

@@ -2,14 +2,18 @@ import * as THREE from "three";
 import { VNode } from "vue";
 import { Component, Mixins, Prop, Provide, Vue, Watch } from "vue-property-decorator";
 
-import { AssetType } from "../types";
-import { isThreeAssetComponent, ThreeAssetComponent, ThreeComponent } from "./base";
+import { AssetBundle } from "../core";
+import { AssetType, OnLoadAssetBundleData } from "../types";
+import { isThreeAssetComponent, ThreeComponent } from "./base";
 
 @Component
 export class Scene extends Mixins(ThreeComponent) {
   @Prop({ type: String, default: "" })
   public name!: string;
 
+  @Prop({ type: [String, Array], default: () => [] })
+  public assets!: string | string[];
+
   @Provide("scene")
   private provideScene = this.getScene;
 
@@ -20,6 +24,7 @@ export class Scene extends Mixins(ThreeComponent) {
   private m_isActive = false;
   private m_isReady = false;
   private m_scene?: THREE.Scene;
+  private m_bundle!: AssetBundle;
 
   @Watch("name")
   private watchName() {
@@ -36,11 +41,15 @@ export class Scene extends Mixins(ThreeComponent) {
     // deactive children
     this.m_isReady = false;
 
+    console.log("scene bundle unuse");
+
+    await this.m_bundle.unuse();
     await Vue.nextTick();
 
     if (this.m_scene) {
       this.app().sceneManager.remove(this.m_scene.name);
     }
+
     this.m_isActive = false;
     this.m_scene = undefined;
   }
@@ -51,8 +60,6 @@ export class Scene extends Mixins(ThreeComponent) {
 
     // tell the component to render the component (see render)
     this.m_isActive = true;
-    // wait for preload components to load...
-    await Vue.nextTick();
 
     // now preload
     await this.preloadAssets();
@@ -61,40 +68,60 @@ export class Scene extends Mixins(ThreeComponent) {
   }
 
   public mounted() {
+    this.m_bundle = new AssetBundle(this.app());
+    this.m_bundle.onload = async () => {
+      const bundles = this.getBundles(this.assets);
+      console.log("scene load bundles", bundles);
+      await this.m_bundle.registerDependencies(bundles);
+    };
+
     const manager = this.app().sceneManager;
     manager.on("activate", this.onSceneActivate);
     manager.on("deactivate", this.onSceneDeactivate);
     this.watchName();
   }
 
   public beforeDestroy() {
+    this.m_bundle.unuse();
+
     const manager = this.app().sceneManager;
     manager.off("activate", this.onSceneActivate);
     manager.off("deactivate", this.onSceneDeactivate);
     this.onDeactivate();
   }
 
   public render(h: any) {
-    if (!this.m_isActive) {
+    if (!this.m_isActive || !this.m_isReady) {
       return null;
     }
 
-    return h("div", [
-      h("div", this.$slots.preload),
-      h("div", this.m_isReady ? this.$slots.default : null)
-    ]);
+    return h("div", this.$slots.default);
   }
 
   private async preloadAssets() {
     this.$emit("load");
 
-    const data: { counter: number; assets: Array<Promise<AssetType>> } = {
-      assets: [],
-      counter: 0
+    const data = {
+      count: 0,
+      amount: 0
+    };
+
+    const progressListener = () => {
+      ++data.amount;
+      console.log(data.amount, data.count);
+      this.$emit("load-progress", data.amount, data.count);
     };
-    this.recursivePreload(data, this.$slots.preload);
 
-    await Promise.all(data.assets);
+    await this.m_bundle.use(progressListener);
+
+    // we can now count assets to be loaded..
+    data.count = AssetBundle.countAssets([this.m_bundle]);
+
+    console.log("count", data.count);
+
+    await this.m_bundle.isReady();
+
+    console.log("loaded!");
     this.$emit("loaded");
   }
 
@@ -111,23 +138,29 @@ export class Scene extends Mixins(ThreeComponent) {
     this.onDeactivate();
   };
 
-  private recursivePreload(
-    data: { counter: number; assets: Array<Promise<AssetType>> },
-    nodes: VNode[] | undefined
-  ) {
-    if (nodes) {
-      for (const node of nodes) {
-        const component = node.componentInstance;
-        if (component && isThreeAssetComponent(component)) {
-          const p = component.asset.then(asset => {
-            ++data.counter;
-            this.$emit("load-progress", data.counter, data.assets.length);
-            return asset;
-          });
-          data.assets.push(p);
-        }
-        this.recursivePreload(data, node.children);
-      }
+  private getBundles(dependencies: string | string[]): AssetBundle[] {
+    const manager = this.app().assets;
+    const bundles: AssetBundle[] = [];
+
+    if (!dependencies) {
+      return bundles;
+    }
+    if (typeof dependencies === "string") {
+      dependencies = dependencies.split(",").map(mat => mat.trim());
     }
+    if (!Array.isArray(dependencies)) {
+      throw new Error(
+        `AssetBundle "${
+          this.name
+        }" could not be loaded: "dependencies" have to be either a string or an array`
+      );
+    }
+    (dependencies as string[]).forEach(dep => {
+      const bundle = manager.getBundle(dep);
+      if (bundle) {
+        bundles.push(bundle);
+      }
+    });
+    return bundles;
   }
 }

src/components/index.ts

@@ -12,5 +12,6 @@ export * from "./Grid";
 export * from "./Axes";
 export * from "./Model";
 export * from "./Renderer";
+export * from "./AssetBundle";
 
 export * from "./properties";

src/core/Application.ts

@@ -16,7 +16,7 @@ export class Application {
   public readonly sceneManager = new SceneManager();
   public readonly cameraManager = new CameraManager();
   public readonly renderers = new RendererManager(this);
-  public readonly assets = new AssetManager();
+  public readonly assets = new AssetManager(this);
   public readonly inputs = new InputManager();
 
   private _disposed = false;