CoderLearningCode
diff --git a/‎src/anim/anim.js
Lines changed: 58 additions & 51 deletions b/‎src/anim/anim.js
Lines changed: 58 additions & 51 deletions
diff --git a/‎src/asset/asset-reference.js
Lines changed: 10 additions & 0 deletions b/‎src/asset/asset-reference.js
Lines changed: 10 additions & 0 deletions
diff --git a/‎src/asset/asset.js
Lines changed: 2 additions & 2 deletions b/‎src/asset/asset.js
Lines changed: 2 additions & 2 deletions
diff --git a/‎src/framework/application.js
Lines changed: 4 additions & 0 deletions b/‎src/framework/application.js
Lines changed: 4 additions & 0 deletions
diff --git a/‎src/framework/components/anim/component.js
Lines changed: 5 additions & 3 deletions b/‎src/framework/components/anim/component.js
Lines changed: 5 additions & 3 deletions
@@ -640,6 +640,26 @@ function DefaultAnimBinder(graph) {
     };
     flatten(graph);
 
+    var findMeshInstances = function (node) {
+
+        // walk up to the first parent node of entity type (skips internal nodes of Model)
+        var object = node;
+        while (object && !(object instanceof Entity)) {
+            object = object.parent;
+        }
+
+        // get meshInstances from either model or render component
+        var meshInstances;
+        if (object) {
+            if (object.render) {
+                meshInstances = object.render.meshInstances;
+            } else if (object.model) {
+                meshInstances = object.model.meshInstances;
+            }
+        }
+        return meshInstances;
+    };
+
     this.nodes = nodes;                 // map of node name -> { node, count }
     this.activeNodes = [];              // list of active nodes
     this.handlers = {
@@ -668,63 +688,50 @@ function DefaultAnimBinder(graph) {
         },
 
         'weights': function (node) {
-            var object = node;
-            while (object && object.constructor !== Entity) {
-                object = object.parent;
-            }
-            if (!object ||
-                !object.model ||
-                !object.model.model ||
-                !object.model.model.morphInstances) {
-                return null;
-            }
-            var meshInstances = object.model.meshInstances;
-            var morphInstance;
-            for (var i = 0; i < meshInstances.length; ++i) {
-                if (meshInstances[i].node.name === node.name) {
-                    morphInstance = meshInstances[i].morphInstance;
-                    break;
+            var meshInstances = findMeshInstances(node);
+            if (meshInstances) {
+                var morphInstance;
+                for (var i = 0; i < meshInstances.length; ++i) {
+                    if (meshInstances[i].node.name === node.name && meshInstances[i].morphInstance) {
+                        morphInstance = meshInstances[i].morphInstance;
+                        break;
+                    }
                 }
-            }
-            if (!morphInstance) {
-                return null;
-            }
-            var func = function (value) {
-                for (var i = 0; i < value.length; ++i) {
-                    morphInstance.setWeight(i, value[i]);
+                if (morphInstance) {
+                    var func = function (value) {
+                        for (var i = 0; i < value.length; ++i) {
+                            morphInstance.setWeight(i, value[i]);
+                        }
+                    };
+                    return new AnimTarget(func, 'vector', morphInstance.morph._targets.length);
                 }
-            };
-            return new AnimTarget(func, 'vector', morphInstance.morph._targets.length);
+            }
+
+            return null;
         },
         'materialTexture': function (node, textureName) {
-            var object = node;
-            while (object && object.constructor !== Entity) {
-                object = object.parent;
-            }
-            if (!object ||
-                !object.model ||
-                !object.model.model) {
-                return null;
-            }
-            var meshInstances = object.model.meshInstances;
-            var meshInstance;
-            for (var i = 0; i < meshInstances.length; ++i) {
-                if (meshInstances[i].node.name === node.name) {
-                    meshInstance = meshInstances[i];
-                    break;
+            var meshInstances = findMeshInstances(node);
+            if (meshInstances) {
+                var meshInstance;
+                for (var i = 0; i < meshInstances.length; ++i) {
+                    if (meshInstances[i].node.name === node.name) {
+                        meshInstance = meshInstances[i];
+                        break;
+                    }
                 }
-            }
-            if (!meshInstance) {
-                return null;
-            }
-            var func = function (value) {
-                var textureAsset = this.animComponent.system.app.assets.get(value[0]);
-                if (textureAsset && textureAsset.resource && textureAsset.type === 'texture') {
-                    meshInstance.material[textureName] = textureAsset.resource;
-                    meshInstance.material.update();
+                if (meshInstance) {
+                    var func = function (value) {
+                        var textureAsset = this.animComponent.system.app.assets.get(value[0]);
+                        if (textureAsset && textureAsset.resource && textureAsset.type === 'texture') {
+                            meshInstance.material[textureName] = textureAsset.resource;
+                            meshInstance.material.update();
+                        }
+                    }.bind(this);
+                    return new AnimTarget(func, 'vector', 1);
                 }
-            }.bind(this);
-            return new AnimTarget(func, 'vector', 1);
+            }
+
+            return null;
         }.bind(this)
     };
 
 
@@ -10,6 +10,7 @@
  * @param {object} [callbacks.load] - The function called when the asset loads load(propertyName, parent, asset).
  * @param {object} [callbacks.add] - The function called when the asset is added to the registry add(propertyName, parent, asset).
  * @param {object} [callbacks.remove] - The function called when the asset is remove from the registry remove(propertyName, parent, asset).
+ * @param {object} [callbacks.unload] - The function called when the asset is unloaded unload(propertyName, parent, asset).
  * @param {object} [scope] - The scope to call the callbacks in
  * @property {number} id Get or set the asset id which this references. One of either id or url must be set to initialize an asset reference.
  * @property {string} url Get or set the asset url which this references. One of either id or url must be called to initialize an asset reference.
@@ -36,13 +37,15 @@ function AssetReference(propertyName, parent, registry, callbacks, scope) {
     this._onAssetLoad = callbacks.load;
     this._onAssetAdd = callbacks.add;
     this._onAssetRemove = callbacks.remove;
+    this._onAssetUnload = callbacks.unload;
 }
 
 AssetReference.prototype._bind = function () {
     if (this.id) {
         if (this._onAssetLoad) this._registry.on("load:" + this.id, this._onLoad, this);
         if (this._onAssetAdd) this._registry.once("add:" + this.id, this._onAdd, this);
         if (this._onAssetRemove) this._registry.on("remove:" + this.id, this._onRemove, this);
+        if (this._onAssetUnload) this._registry.on("unload:" + this.id, this._onUnload, this);
     }
 
     if (this.url) {
@@ -57,6 +60,7 @@ AssetReference.prototype._unbind = function () {
         if (this._onAssetLoad) this._registry.off('load:' + this.id, this._onLoad, this);
         if (this._onAssetAdd) this._registry.off('add:' + this.id, this._onAdd, this);
         if (this._onAssetRemove) this._registry.off('remove:' + this.id, this._onRemove, this);
+        if (this._onAssetUnload) this._registry.off("unload:" + this.id, this._onUnload, this);
     }
     if (this.url) {
         if (this._onAssetLoad) this._registry.off('load:' + this.url, this._onLoad, this);
@@ -70,11 +74,17 @@ AssetReference.prototype._onLoad = function (asset) {
 };
 
 AssetReference.prototype._onAdd = function (asset) {
+    this.asset = asset;
     this._onAssetAdd.call(this._scope, this.propertyName, this.parent, asset);
 };
 
 AssetReference.prototype._onRemove = function (asset) {
     this._onAssetRemove.call(this._scope, this.propertyName, this.parent, asset);
+    this.asset = null;
+};
+
+AssetReference.prototype._onUnload = function (asset) {
+    this._onAssetUnload.call(this._scope, this.propertyName, this.parent, asset);
 };
 
 Object.defineProperty(AssetReference.prototype, 'id', {
 
@@ -43,7 +43,7 @@ var VARIANT_DEFAULT_PRIORITY = ['pvr', 'dxt', 'etc2', 'etc1', 'basis'];
  *     filename: "filename.txt",
  *     url: "/example/filename.txt"
  * };
- * @param {object} [data] - JSON object with additional data about the asset (e.g. for texture and model assets) or contains the asset data itself (e.g. in the case of materials)
+ * @param {object} [data] - JSON object with additional data about the asset. (e.g. for texture and model assets) or contains the asset data itself (e.g. in the case of materials)
  * @param {object} [options] - The asset handler options. For container options see {@link pc.ContainerHandler}
  * @param {boolean} [options.crossOrigin] - For use with texture resources. For browser-supported image formats only, enable cross origin.
  * @example
@@ -61,7 +61,7 @@ var VARIANT_DEFAULT_PRIORITY = ['pvr', 'dxt', 'etc2', 'etc1', 'basis'];
  * @property {string} [file.hash] The MD5 hash of the resource file data and the Asset data field or null if hash was set (e.g from using {@link pc.AssetRegistry#loadFromUrl})
  * @property {ArrayBuffer} [file.contents] Optional file contents. This is faster than wrapping the data
  * in a (base64 encoded) blob. Currently only used by container assets.
- * @property {object} [data] Optional JSON data that contains either the complete resource data (e.g. in the case of a material) or additional data (e.g. in the case of a model it contains mappings from mesh to material)
+ * @property {object} [data] Optional JSON data that contains either the complete resource data. (e.g. in the case of a material) or additional data (e.g. in the case of a model it contains mappings from mesh to material)
  * @property {object} [options] - Optional JSON data that contains the asset handler options.
  * @property {object} resource A reference to the resource when the asset is loaded. e.g. a {@link pc.Texture} or a {@link pc.Model}
  * @property {Array} resources A reference to the resources of the asset when it's loaded. An asset can hold more runtime resources than one e.g. cubemaps
 
@@ -62,6 +62,7 @@ import { HtmlHandler } from '../resources/html.js';
 import { JsonHandler } from '../resources/json.js';
 import { MaterialHandler } from '../resources/material.js';
 import { ModelHandler } from '../resources/model.js';
+import { RenderHandler } from '../resources/render.js';
 import { ResourceLoader } from '../resources/loader.js';
 import { SceneHandler } from '../resources/scene.js';
 import { SceneSettingsHandler } from '../resources/scene-settings.js';
@@ -99,6 +100,7 @@ import { LayoutChildComponentSystem } from './components/layout-child/system.js'
 import { LayoutGroupComponentSystem } from './components/layout-group/system.js';
 import { LightComponentSystem } from './components/light/system.js';
 import { ModelComponentSystem } from './components/model/system.js';
+import { RenderComponentSystem } from './components/render/system.js';
 import { ParticleSystemComponentSystem } from './components/particle-system/system.js';
 import { RigidBodyComponentSystem } from './components/rigid-body/system.js';
 import { ScreenComponentSystem } from './components/screen/system.js';
@@ -714,6 +716,7 @@ function Application(canvas, options) {
     this.loader.addHandler("animclip", new AnimClipHandler());
     this.loader.addHandler("animstategraph", new AnimStateGraphHandler());
     this.loader.addHandler("model", new ModelHandler(this.graphicsDevice, this.scene.defaultMaterial));
+    this.loader.addHandler("render", new RenderHandler(this.assets));
     this.loader.addHandler("material", new MaterialHandler(this));
     this.loader.addHandler("texture", new TextureHandler(this.graphicsDevice, this.assets, this.loader));
     this.loader.addHandler("text", new TextHandler());
@@ -741,6 +744,7 @@ function Application(canvas, options) {
     this.systems.add(new AnimationComponentSystem(this));
     this.systems.add(new AnimComponentSystem(this));
     this.systems.add(new ModelComponentSystem(this));
+    this.systems.add(new RenderComponentSystem(this));
     this.systems.add(new CameraComponentSystem(this));
     this.systems.add(new LightComponentSystem(this));
     if (script.legacy) {
 
@@ -46,12 +46,14 @@ Object.assign(AnimComponent.prototype, {
         data.layers = [];
 
         var graph;
-        var modelComponent = this.entity.model;
-        if (modelComponent) {
-            var m = modelComponent.model;
+        if (this.entity.model) {
+            var m = this.entity.model.model;
             if (m) {
                 graph = m.getGraph();
             }
+        } else {
+            // animating hierarchy without model
+            graph = this.entity;
         }
 
         function addLayer(name, states, transitions, order) {