Merge pull request #726 from playcanvas/variants

Variants

build/dependencies.txt

@@ -169,6 +169,7 @@
 ../src/resources/parser/json-model.js
 ../src/resources/parser/scene.js
 ../src/asset/asset.js
+../src/asset/asset-variants.js
 ../src/asset/asset-registry.js
 ../src/backwards-compatibility.js
 ../src/scene/immediate.js

src/asset/asset-registry.js

@@ -299,16 +299,17 @@ pc.extend(pc, function () {
                 return;
             }
 
-            var load = !!(asset.file);
-            var open = !load;
+            var load = !! asset.file;
+
+            var file = asset.getPreferredFile();
 
             var _load = function () {
                 var url = asset.getFileUrl();
 
                 // add file hash to avoid caching
-                if (asset.type !== 'script' && asset.file.hash) {
+                if (asset.type !== 'script' && file.hash) {
                     var separator = url.indexOf('?') !== -1 ? '&' : '?';
-                    url += separator + 't=' + asset.file.hash;
+                    url += separator + 't=' + file.hash;
                 }
 
                 asset.loading = true;
@@ -344,9 +345,8 @@ pc.extend(pc, function () {
 
                     self.fire("load", asset);
                     self.fire("load:" + asset.id, asset);
-                    if (asset.file) {
-                        self.fire("load:url:" + asset.file.url, asset);
-                    }
+                    if (file && file.url)
+                        self.fire("load:url:" + file.url, asset);
                     asset.fire("load", asset);
                 });
             };
@@ -364,20 +364,18 @@ pc.extend(pc, function () {
 
                 self.fire("load", asset);
                 self.fire("load:" + asset.id, asset);
-                if (asset.file) {
-                    self.fire("load:url:" + asset.file.url, asset);
-                }
+                if (file && file.url)
+                    self.fire("load:url:" + file.url, asset);
                 asset.fire("load", asset);
             };
 
             // check for special case for cubemaps
-            if (asset.file && asset.type === "cubemap") {
+            if (file && asset.type === "cubemap") {
                 load = false;
-                open = false;
                 // loading prefiltered cubemap data
                 var url = asset.getFileUrl();
                 var separator = url.indexOf('?') !== -1 ? '&' : '?';
-                url += separator + asset.file.hash;
+                url += separator + file.hash;
 
                 this._loader.load(url, "texture", function (err, texture) {
                     if (!err) {
@@ -400,7 +398,7 @@ pc.extend(pc, function () {
                 });
             }
 
-            if (!asset.file) {
+            if (! file) {
                 _open();
             } else if (load) {
                 this.fire("load:start", asset);

src/asset/asset-variants.js

@@ -0,0 +1,55 @@
+pc.extend(pc, function () {
+
+    var properties = [ ];
+
+    var AssetVariants = function(asset) {
+        this.asset = asset;
+    };
+
+    var defineVariantProperty = function(name) {
+        var field = '_' + name;
+        properties.push(field);
+
+        Object.defineProperty(AssetVariants.prototype, name, {
+            get: function() {
+                return this[field] || null;
+            },
+            set: function(value) {
+                if (!! this[field] !== !! value || (this[field] && value && this[field].hash !== value.hash)) {
+                    var old = this[field];
+
+                    if (value) {
+                        this[field] = {
+                            url: value.url,
+                            filename: value.filename,
+                            size: value.size,
+                            hash: value.hash,
+                            opt: value.opt || 0
+                        };
+                    } else {
+                        this[field] = null;
+                    }
+
+                    if (this.asset.file) {
+                        this.asset.fire('change', this.asset, 'file', this.asset._file, this.asset._file);
+                        this.asset.reload();
+                    }
+                }
+            }
+        });
+    };
+
+
+    // texture
+    defineVariantProperty('dxt');
+
+    AssetVariants.prototype.clear = function() {
+        for(var i = 0; i < properties.length; i++)
+            this[properties[i]] = null;
+    };
+
+
+    return {
+        AssetVariants: AssetVariants
+    };
+}());

src/asset/asset.js

@@ -56,23 +56,19 @@ pc.extend(pc, function () {
     var Asset = function (name, type, file, data) {
         this._id = ++assetIdCounter;
 
-        this.name = arguments[0];
-        this.type = arguments[1];
+        this.name = name || '';
+        this.type = type;
         this.tags = new pc.Tags(this);
         this._preload = false;
 
-        this._file = arguments[2] ? {
-            filename: file.filename,
-            size: file.size,
-            hash: file.hash,
-            url: file.url
-        } : null;
+        this.variants = new pc.AssetVariants(this);
 
-        this._data = arguments[3] || {};
+        this._file = null;
+        this._data = data || { };
 
         // This is where the loaded resource will be
         // this.resource = null;
-        this._resources = [];
+        this._resources = [ ];
 
         // is resource loaded
         this.loaded = false;
@@ -81,6 +77,8 @@ pc.extend(pc, function () {
         this.registry = null;
 
         pc.events.attach(this);
+
+        if (file) this.file = file;
     };
 
     /**
@@ -126,13 +124,28 @@ pc.extend(pc, function () {
         * var img = "<img src='" + assets[0].getFileUrl() + "'>";
         */
         getFileUrl: function () {
-            if (!this.file || !this.file.url) {
+            var file = this.getPreferredFile();
+
+            if (! file || ! file.url)
+                return null;
+
+            return this.registry && this.registry.prefix &&
+                ! ABSOLUTE_URL.test(file.url) ? this.registry.prefix + file.url : file.url;
+        },
+
+        getPreferredFile: function() {
+            if (! this.file)
                 return null;
+
+            if (this.type === 'texture') {
+                var device = this.registry._loader.getHandler('texture')._device;
+
+                if (this.variants.dxt && device.extCompressedTextureS3TC) {
+                    return this.variants.dxt;
+                }
             }
 
-            return this.registry && this.registry.prefix && !ABSOLUTE_URL.test(this.file.url) ?
-                   this.registry.prefix + this.file.url :
-                   this.file.url;
+            return this.file;
         },
 
         /**
@@ -159,6 +172,19 @@ pc.extend(pc, function () {
             }
         },
 
+        reload: function() {
+            // no need to be reloaded
+            if (! this.loaded)
+                return;
+
+            if (this.type === 'cubemap') {
+                this.registry._loader.patch(this, this.registry);
+            } else {
+                this.loaded = false;
+                this.registry.load(this);
+            }
+        },
+
         /**
         * @function
         * @name pc.Asset#unload
@@ -195,20 +221,47 @@ pc.extend(pc, function () {
         set: function (value) {
             // fire change event when the file changes
             // so that we reload it if necessary
-            var old = this._file;
-            this._file = value;
-
-            // check if we set a new file or if the hash has changed
-            if (! value || ! old || (value && old && value.hash !== old.hash)) {
-                this.fire('change', this, 'file', value, old);
-
-                // trigger reloading
-                if (this.loaded) {
-                    if (this.type === 'cubemap') {
-                        this.registry._loader.patch(this, this.registry);
-                    } else {
-                        this.loaded = false;
-                        this.registry.load(this);
+            // set/unset file property of file hash been changed
+
+            if (!! value !== !! this._file || (value && this._file && value.hash !== this._file)) {
+                if (value) {
+                    if (! this._file)
+                        this._file = { };
+
+                    this._file.url = value.url;
+                    this._file.filename = value.filename;
+                    this._file.hash = value.hash;
+                    this._file.size = value.size;
+                    this._file.variants = this.variants;
+
+                    if (value.hasOwnProperty('variants')) {
+                        this.variants.clear();
+
+                        if (value.variants) {
+                            for(var key in value.variants) {
+                                if (! value.variants[key])
+                                    continue;
+
+                                this.variants[key] = value.variants[key];
+                            }
+                        }
+                    }
+
+                    this.fire('change', this, 'file', this._file, this._file);
+                    this.reload();
+                } else {
+                    this._file = null;
+                    this.variants.clear();
+                }
+            } else if (value && this._file && value.hasOwnProperty('variants')) {
+                this.variants.clear();
+
+                if (value.variants) {
+                    for(var key in value.variants) {
+                        if (! value.variants[key])
+                            continue;
+
+                        this.variants[key] = value.variants[key];
                     }
                 }
             }

src/resources/texture.js

@@ -186,6 +186,7 @@ pc.extend(pc, function () {
 
                 var requiredMips = Math.round(Math.log2(Math.max(width, height)) + 1);
                 var cantLoad = !format || (mips !== requiredMips && compressed);
+
                 if (cantLoad) {
                     var errEnd = ". Empty texture will be created instead.";
                     if (!format) {