Merge pull request #4052 from julien-moreau/master

Now serialize effect layers in scene serializer + parse in babylon file loader

dist/preview release/what's new.md

@@ -112,6 +112,7 @@
 - Add support for normalized and non-float data to `Buffer` and `VertexBuffer`. ([bghgary](https://github.com/bghgary)]
 - Added unlit material extension support to glTF 2.0 loader. ([bghgary](https://github.com/bghgary))
 - (Viewer) Viewer's declaration file automatically generated ([RaananW](https://github.com/RaananW))
+- New serialize and parse functions for effect layers (Highlight and Glow layers) ([julien-moreau](https://github.com/julien-moreau))
 
 ## Bug fixes
 

src/Layer/babylon.effectLayer.ts

@@ -176,6 +176,12 @@
         public abstract _disposeMesh(mesh: Mesh): void;
 
         /**
+         * Serializes this layer (Glow or Highlight for example)
+         * @returns a serialized layer object
+         */
+        public abstract serialize?(): any;
+
+        /**
          * Initializes the effect layer with the required options.
          * @param options Sets of none mandatory options to use with the layer (see IEffectLayerOptions for more information)
          */
@@ -670,5 +676,18 @@
          public getClassName(): string {
             return "EffectLayer";
         }
+
+        /**
+         * Creates an effect layer from parsed effect layer data
+         * @param parsedEffectLayer defines effect layer data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing the effect layer information
+         * @returns a parsed effect Layer
+         */
+        public static Parse(parsedEffectLayer: any, scene: Scene, rootUrl: string): EffectLayer {
+            var effectLayerType = Tools.Instantiate(parsedEffectLayer.customType);
+            
+            return effectLayerType.Parse(parsedEffectLayer, scene, rootUrl);
+        }
     }
 } 

src/Layer/babylon.glowLayer.ts

@@ -88,7 +88,7 @@
             return this._intensity;
         }
 
-        @serialize('options')
+        @serialize("options")
         private _options: IGlowLayerOptions;
 
         private _intensity: number = 1.0;
@@ -460,6 +460,8 @@
          */
         public serialize(): any {
             var serializationObject = SerializationHelper.Serialize(this);
+            serializationObject.customType = "BABYLON.GlowLayer";
+
             var index;
 
             // Included meshes

src/Layer/babylon.highlightLayer.ts

@@ -141,11 +141,13 @@
         /**
          * Specifies whether or not the inner glow is ACTIVE in the layer.
          */
+        @serialize()
         public innerGlow: boolean = true;
 
         /**
          * Specifies whether or not the outer glow is ACTIVE in the layer.
          */
+        @serialize()
         public outerGlow: boolean = true;
 
         /**
@@ -165,6 +167,7 @@
         /**
          * Gets the horizontal size of the blur.
          */
+        @serialize()
         public get blurHorizontalSize(): number {
             return this._horizontalBlurPostprocess.kernel
         }
@@ -172,6 +175,7 @@
         /**
          * Gets the vertical size of the blur.
          */
+        @serialize()
         public get blurVerticalSize(): number {
             return this._verticalBlurPostprocess.kernel;
         }
@@ -188,6 +192,7 @@
 
         private _instanceGlowingMeshStencilReference = HighlightLayer.GlowingMeshStencilReference++;
 
+        @serialize("options")
         private _options: IHighlightLayerOptions;
         private _downSamplePostprocess: PassPostProcess;
         private _horizontalBlurPostprocess: GlowBlurPostProcess;
@@ -668,5 +673,86 @@
 
             super.dispose();
         }
+
+        /**
+          * Gets the class name of the effect layer
+          * @returns the string with the class name of the effect layer
+          */
+         public getClassName(): string {
+            return "HighlightLayer";
+        }
+
+        /**
+         * Serializes this Highlight layer
+         * @returns a serialized Highlight layer object
+         */
+        public serialize(): any {
+            var serializationObject = SerializationHelper.Serialize(this);
+            serializationObject.customType = "BABYLON.HighlightLayer";
+
+            // Highlighted meshes
+            serializationObject.meshes = [];
+
+            if (this._meshes) {
+                for (var m in this._meshes) {
+                    var mesh = this._meshes[m];
+
+                    if (mesh) {
+                        serializationObject.meshes.push({
+                            glowEmissiveOnly: mesh.glowEmissiveOnly,
+                            color: mesh.color.asArray(),
+                            meshId: mesh.mesh.id
+                        });
+                    }
+                }
+            }
+
+            // Excluded meshes
+            serializationObject.excludedMeshes = [];
+
+            if (this._excludedMeshes) {
+                for (var e in this._excludedMeshes) {
+                    var excludedMesh = this._excludedMeshes[e];
+
+                    if (excludedMesh) {
+                        serializationObject.excludedMeshes.push(excludedMesh.mesh.id);
+                    }
+                }
+            }
+
+            return serializationObject;
+        }
+
+        /**
+         * Creates a Highlight layer from parsed Highlight layer data
+         * @param parsedHightlightLayer defines the Highlight layer data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing the Highlight layer information
+         * @returns a parsed Highlight layer
+         */
+        public static Parse(parsedHightlightLayer: any, scene: Scene, rootUrl: string): HighlightLayer {
+            var hl = SerializationHelper.Parse(() => new HighlightLayer(parsedHightlightLayer.name, scene, parsedHightlightLayer.options), parsedHightlightLayer, scene, rootUrl);
+            var index;
+
+            // Excluded meshes
+            for (index = 0; index < parsedHightlightLayer.excludedMeshes.length; index++) {
+                var mesh = scene.getMeshByID(parsedHightlightLayer.excludedMeshes[index]);
+                if (mesh) {
+                    hl.addExcludedMesh(<Mesh> mesh);
+                }
+            }
+
+            // Included meshes
+            for (index = 0; index < parsedHightlightLayer.meshes.length; index++) {
+                var highlightedMesh = parsedHightlightLayer.meshes[index];
+                var mesh = scene.getMeshByID(highlightedMesh.meshId);
+
+                if (mesh) {
+                    hl.addMesh(<Mesh> mesh, Color3.FromArray(highlightedMesh.color), highlightedMesh.glowEmissiveOnly);
+                }
+            }
+
+            return hl;
+        }
     }
 } 

src/Loading/Plugins/babylon.babylonFileLoader.ts

@@ -357,6 +357,14 @@
                 }
             }
 
+            // Effect layers
+            if (parsedData.effectLayers) {
+                for (index = 0; index < parsedData.effectLayers.length; index++) {
+                    var effectLayer = EffectLayer.Parse(parsedData.effectLayers[index], scene, rootUrl);
+                    container.effectLayers.push(effectLayer);
+                }
+            }
+
             // Actions (scene)
             if (parsedData.actions !== undefined && parsedData.actions !== null) {
                 ActionManager.Parse(parsedData.actions, null, scene);

src/Tools/babylon.sceneSerializer.ts

@@ -305,6 +305,16 @@
                 }
             }
 
+            // Effect layers
+            serializationObject.effectLayers = [];
+
+            for (index = 0; index < scene.effectLayers.length; index++) {
+                var layer = scene.effectLayers[index];
+                if (layer.serialize) {
+                    serializationObject.effectLayers.push(layer.serialize());
+                }
+            }
+
             return serializationObject;
         }
 

src/babylon.assetContainer.ts

@@ -71,6 +71,10 @@ module BABYLON {
          * Textures to keep.
          */
         public textures = new Array<Texture>();
+        /**
+         * Effect layers to keep.
+         */
+        public effectLayers = new Array<EffectLayer>();
     }
 
     /**
@@ -151,6 +155,10 @@ module BABYLON {
          * Textures populated in the container.
          */
         public textures = new Array<Texture>();
+        /**
+         * Effect layers populated in the container.
+         */
+        public effectLayers = new Array<EffectLayer>();
 
         /**
          * Instantiates an AssetContainer.
@@ -212,7 +220,10 @@ module BABYLON {
                 this.scene.mainSoundTrack.AddSound(o);
             });
             this.textures.forEach((o) => {
-                this.scene.addTexture
+                this.scene.addTexture(o);
+            });
+            this.effectLayers.forEach((o) => {
+                this.scene.addEffectLayer(o);
             });
         }
 
@@ -270,6 +281,9 @@ module BABYLON {
             this.textures.forEach((o) => {
                 this.scene.removeTexture(o);
             });
+            this.effectLayers.forEach((o) => {
+                this.scene.removeEffectLayer(o);
+            });
         }
 
         private _moveAssets<T>(sourceAssets: T[], targetAssets: T[], keepAssets: T[]): void {
@@ -314,6 +328,7 @@ module BABYLON {
             this._moveAssets(this.scene.mainSoundTrack.soundCollection, this.sounds, keepAssets.sounds);
             this._moveAssets(this.scene.transformNodes, this.transformNodes, keepAssets.transformNodes);
             this._moveAssets(this.scene.textures, this.textures, keepAssets.textures);
+            this._moveAssets(this.scene.effectLayers, this.effectLayers, keepAssets.effectLayers);
 
             this.removeAllFromScene();
         }

src/babylon.scene.ts

@@ -3075,6 +3075,21 @@
             return index;
         }
 
+        
+        /**
+         * Removes the given effect layer from this scene.
+         * @param toRemove defines the effect layer to remove
+         * @returns the index of the removed effect layer
+         */    
+        public removeEffectLayer(toRemove: EffectLayer): number {
+            var index = this.effectLayers.indexOf(toRemove);
+            if (index !== -1) {
+                this.effectLayers.splice(index, 1);
+            }
+
+            return index;
+        }
+
         /**
          * Removes the given texture from this scene.
          * @param toRemove The texture to remove
@@ -3198,6 +3213,14 @@
         }
 
         /**
+         * Adds the given effect layer to this scene
+         * @param newEffectLayer defines the effect layer to add
+         */     
+        public addEffectLayer(newEffectLayer: EffectLayer): void {
+            this.effectLayers.push(newEffectLayer);
+        }
+
+        /**
          * Adds the given action manager to this scene
          * @param newActionManager The action manager to add
          */