Babylon.js/src/Layer/highlightLayer.ts

import { serialize, SerializationHelper } from "Tools/decorators";
import { Observer, Observable } from "Tools/observable";
import { Tools } from "Tools/tools";
import { Nullable } from "types";
import { Camera } from "Cameras/camera";
import { Scene } from "scene";
import { Vector2, Color3, Color4 } from "Math/math";
import { Engine } from "Engine/engine";
import { VertexBuffer } from "Mesh/buffer";
import { SubMesh } from "Mesh/subMesh";
import { AbstractMesh } from "Mesh/abstractMesh";
import { Mesh } from "Mesh/mesh";
import { Effect } from "Materials/effect";
import { Material } from "Materials/material";
import { Texture } from "Materials/Textures/texture";
import { RenderTargetTexture } from "Materials/Textures/renderTargetTexture";
import { PostProcess, PostProcessOptions } from "PostProcess/postProcess";
import { PassPostProcess } from "PostProcess/passPostProcess";
import { BlurPostProcess } from "PostProcess/blurPostProcess";
import { _TimeToken } from "Instrumentation/timeToken";
import { _DepthCullingState, _StencilState, _AlphaState } from "States";
import { EffectLayer } from "./effectLayer";
import { AbstractScene } from "abstractScene";

declare module "abstractScene" {
    export interface AbstractScene {
        /**
         * Return a the first highlight layer of the scene with a given name.
         * @param name The name of the highlight layer to look for.
         * @return The highlight layer if found otherwise null.
         */
        getHighlightLayerByName(name: string): Nullable<HighlightLayer>;
    }
}

    AbstractScene.prototype.getHighlightLayerByName = function(name: string): Nullable<HighlightLayer> {
        for (var index = 0; index < this.effectLayers.length; index++) {
            if (this.effectLayers[index].name === name && this.effectLayers[index].getEffectName() === HighlightLayer.EffectName) {
                return (<any>this.effectLayers[index]) as HighlightLayer;
            }
        }

        return null;
    };

    /**
     * Special Glow Blur post process only blurring the alpha channel
     * It enforces keeping the most luminous color in the color channel.
     */
    class GlowBlurPostProcess extends PostProcess {
        constructor(name: string, public direction: Vector2, public kernel: number, options: number | PostProcessOptions, camera: Nullable<Camera>, samplingMode: number = Texture.BILINEAR_SAMPLINGMODE, engine?: Engine, reusable?: boolean) {
            super(name, "glowBlurPostProcess", ["screenSize", "direction", "blurWidth"], null, options, camera, samplingMode, engine, reusable);

            this.onApplyObservable.add((effect: Effect) => {
                effect.setFloat2("screenSize", this.width, this.height);
                effect.setVector2("direction", this.direction);
                effect.setFloat("blurWidth", this.kernel);
            });
        }
    }

    /**
     * Highlight layer options. This helps customizing the behaviour
     * of the highlight layer.
     */
    export interface IHighlightLayerOptions {
        /**
         * Multiplication factor apply to the canvas size to compute the render target size
         * used to generated the glowing objects (the smaller the faster).
         */
        mainTextureRatio: number;

        /**
         * Enforces a fixed size texture to ensure resize independant blur.
         */
        mainTextureFixedSize?: number;

        /**
         * Multiplication factor apply to the main texture size in the first step of the blur to reduce the size
         * of the picture to blur (the smaller the faster).
         */
        blurTextureSizeRatio: number;

        /**
         * How big in texel of the blur texture is the vertical blur.
         */
        blurVerticalSize: number;

        /**
         * How big in texel of the blur texture is the horizontal blur.
         */
        blurHorizontalSize: number;

        /**
         * Alpha blending mode used to apply the blur. Default is combine.
         */
        alphaBlendingMode: number;

        /**
         * The camera attached to the layer.
         */
        camera: Nullable<Camera>;

        /**
         * Should we display highlight as a solid stroke?
         */
        isStroke?: boolean;

        /**
         * The rendering group to draw the layer in.
         */
        renderingGroupId: number;
    }

    /**
     * Storage interface grouping all the information required for glowing a mesh.
     */
    interface IHighlightLayerMesh {
        /**
         * The glowy mesh
         */
        mesh: Mesh;
        /**
         * The color of the glow
         */
        color: Color3;
        /**
         * The mesh render callback use to insert stencil information
         */
        observerHighlight: Nullable<Observer<Mesh>>;
        /**
         * The mesh render callback use to come to the default behavior
         */
        observerDefault: Nullable<Observer<Mesh>>;
        /**
         * If it exists, the emissive color of the material will be used to generate the glow.
         * Else it falls back to the current color.
         */
        glowEmissiveOnly: boolean;
    }

    /**
     * Storage interface grouping all the information required for an excluded mesh.
     */
    interface IHighlightLayerExcludedMesh {
        /**
         * The glowy mesh
         */
        mesh: Mesh;
        /**
         * The mesh render callback use to prevent stencil use
         */
        beforeRender: Nullable<Observer<Mesh>>;
        /**
         * The mesh render callback use to restore previous stencil use
         */
        afterRender: Nullable<Observer<Mesh>>;
    }

    /**
     * The highlight layer Helps adding a glow effect around a mesh.
     *
     * Once instantiated in a scene, simply use the pushMesh or removeMesh method to add or remove
     * glowy meshes to your scene.
     *
     * !!! THIS REQUIRES AN ACTIVE STENCIL BUFFER ON THE CANVAS !!!
     */
    export class HighlightLayer extends EffectLayer {
        /**
         * Effect Name of the highlight layer.
         */
        public static readonly EffectName = "HighlightLayer";

        /**
         * The neutral color used during the preparation of the glow effect.
         * This is black by default as the blend operation is a blend operation.
         */
        public static NeutralColor: Color4 = new Color4(0, 0, 0, 0);

        /**
         * Stencil value used for glowing meshes.
         */
        public static GlowingMeshStencilReference = 0x02;

        /**
         * Stencil value used for the other meshes in the scene.
         */
        public static NormalMeshStencilReference = 0x01;

        /**
         * 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;

        /**
         * Specifies the horizontal size of the blur.
         */
        public set blurHorizontalSize(value: number) {
            this._horizontalBlurPostprocess.kernel = value;
        }

        /**
         * Specifies the vertical size of the blur.
         */
        public set blurVerticalSize(value: number) {
            this._verticalBlurPostprocess.kernel = value;
        }

        /**
         * Gets the horizontal size of the blur.
         */
        @serialize()
        public get blurHorizontalSize(): number {
            return this._horizontalBlurPostprocess.kernel;
        }

        /**
         * Gets the vertical size of the blur.
         */
        @serialize()
        public get blurVerticalSize(): number {
            return this._verticalBlurPostprocess.kernel;
        }

        /**
         * An event triggered when the highlight layer is being blurred.
         */
        public onBeforeBlurObservable = new Observable<HighlightLayer>();

        /**
         * An event triggered when the highlight layer has been blurred.
         */
        public onAfterBlurObservable = new Observable<HighlightLayer>();

        private _instanceGlowingMeshStencilReference = HighlightLayer.GlowingMeshStencilReference++;

        @serialize("options")
        private _options: IHighlightLayerOptions;
        private _downSamplePostprocess: PassPostProcess;
        private _horizontalBlurPostprocess: GlowBlurPostProcess;
        private _verticalBlurPostprocess: GlowBlurPostProcess;
        private _blurTexture: RenderTargetTexture;

        private _meshes: Nullable<{ [id: string]: Nullable<IHighlightLayerMesh> }> = {};
        private _excludedMeshes: Nullable<{ [id: string]: Nullable<IHighlightLayerExcludedMesh> }> = {};

        /**
         * Instantiates a new highlight Layer and references it to the scene..
         * @param name The name of the layer
         * @param scene The scene to use the layer in
         * @param options Sets of none mandatory options to use with the layer (see IHighlightLayerOptions for more information)
         */
        constructor(public name: string, scene: Scene, options?: Partial<IHighlightLayerOptions>) {
            super(name, scene);
            this.neutralColor = HighlightLayer.NeutralColor;

            // Warn on stencil
            if (!this._engine.isStencilEnable) {
                Tools.Warn("Rendering the Highlight Layer requires the stencil to be active on the canvas. var engine = new Engine(canvas, antialias, { stencil: true }");
            }

            // Adapt options
            this._options = {
                mainTextureRatio: 0.5,
                blurTextureSizeRatio: 0.5,
                blurHorizontalSize: 1.0,
                blurVerticalSize: 1.0,
                alphaBlendingMode: Engine.ALPHA_COMBINE,
                camera: null,
                renderingGroupId: -1,
                ...options,
            };

            // Initialize the layer
            this._init({
                alphaBlendingMode: this._options.alphaBlendingMode,
                camera: this._options.camera,
                mainTextureFixedSize: this._options.mainTextureFixedSize,
                mainTextureRatio: this._options.mainTextureRatio,
                renderingGroupId: this._options.renderingGroupId
            });

            // Do not render as long as no meshes have been added
            this._shouldRender = false;
        }

        /**
         * Get the effect name of the layer.
         * @return The effect name
         */
        public getEffectName(): string {
            return HighlightLayer.EffectName;
        }

        /**
         * Create the merge effect. This is the shader use to blit the information back
         * to the main canvas at the end of the scene rendering.
         */
        protected _createMergeEffect(): Effect {
            // Effect
            return this._engine.createEffect("glowMapMerge",
                [VertexBuffer.PositionKind],
                ["offset"],
                ["textureSampler"],
                this._options.isStroke ? "#define STROKE \n" : undefined);

        }

        /**
         * Creates the render target textures and post processes used in the highlight layer.
         */
        protected _createTextureAndPostProcesses(): void {
            var blurTextureWidth = this._mainTextureDesiredSize.width * this._options.blurTextureSizeRatio;
            var blurTextureHeight = this._mainTextureDesiredSize.height * this._options.blurTextureSizeRatio;
            blurTextureWidth = this._engine.needPOTTextures ? Tools.GetExponentOfTwo(blurTextureWidth, this._maxSize) : blurTextureWidth;
            blurTextureHeight = this._engine.needPOTTextures ? Tools.GetExponentOfTwo(blurTextureHeight, this._maxSize) : blurTextureHeight;

            var textureType = 0;
            if (this._engine.getCaps().textureHalfFloatRender) {
                textureType = Engine.TEXTURETYPE_HALF_FLOAT;
            }
            else {
                textureType = Engine.TEXTURETYPE_UNSIGNED_INT;
            }

            this._blurTexture = new RenderTargetTexture("HighlightLayerBlurRTT",
                {
                    width: blurTextureWidth,
                    height: blurTextureHeight
                },
                this._scene,
                false,
                true,
                textureType);
            this._blurTexture.wrapU = Texture.CLAMP_ADDRESSMODE;
            this._blurTexture.wrapV = Texture.CLAMP_ADDRESSMODE;
            this._blurTexture.anisotropicFilteringLevel = 16;
            this._blurTexture.updateSamplingMode(Texture.TRILINEAR_SAMPLINGMODE);
            this._blurTexture.renderParticles = false;
            this._blurTexture.ignoreCameraViewport = true;

            this._textures = [this._blurTexture];

            if (this._options.alphaBlendingMode === Engine.ALPHA_COMBINE) {
                this._downSamplePostprocess = new PassPostProcess("HighlightLayerPPP", this._options.blurTextureSizeRatio,
                    null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine());
                this._downSamplePostprocess.onApplyObservable.add((effect) => {
                    effect.setTexture("textureSampler", this._mainTexture);
                });

                this._horizontalBlurPostprocess = new GlowBlurPostProcess("HighlightLayerHBP", new Vector2(1.0, 0), this._options.blurHorizontalSize, 1,
                    null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine());
                this._horizontalBlurPostprocess.onApplyObservable.add((effect) => {
                    effect.setFloat2("screenSize", blurTextureWidth, blurTextureHeight);
                });

                this._verticalBlurPostprocess = new GlowBlurPostProcess("HighlightLayerVBP", new Vector2(0, 1.0), this._options.blurVerticalSize, 1,
                    null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine());
                this._verticalBlurPostprocess.onApplyObservable.add((effect) => {
                    effect.setFloat2("screenSize", blurTextureWidth, blurTextureHeight);
                });

                this._postProcesses = [this._downSamplePostprocess, this._horizontalBlurPostprocess, this._verticalBlurPostprocess];
            }
            else {
                this._horizontalBlurPostprocess = new BlurPostProcess("HighlightLayerHBP", new Vector2(1.0, 0), this._options.blurHorizontalSize / 2, {
                    width: blurTextureWidth,
                    height: blurTextureHeight
                },
                    null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, textureType);
                this._horizontalBlurPostprocess.width = blurTextureWidth;
                this._horizontalBlurPostprocess.height = blurTextureHeight;
                this._horizontalBlurPostprocess.onApplyObservable.add((effect) => {
                    effect.setTexture("textureSampler", this._mainTexture);
                });

                this._verticalBlurPostprocess = new BlurPostProcess("HighlightLayerVBP", new Vector2(0, 1.0), this._options.blurVerticalSize / 2, {
                    width: blurTextureWidth,
                    height: blurTextureHeight
                },
                    null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, textureType);

                this._postProcesses = [this._horizontalBlurPostprocess, this._verticalBlurPostprocess];
            }

            this._mainTexture.onAfterUnbindObservable.add(() => {
                this.onBeforeBlurObservable.notifyObservers(this);

                let internalTexture = this._blurTexture.getInternalTexture();
                if (internalTexture) {
                    this._scene.postProcessManager.directRender(
                        this._postProcesses,
                        internalTexture,
                        true);
                }

                this.onAfterBlurObservable.notifyObservers(this);
            });

            // Prevent autoClear.
            this._postProcesses.map((pp) => { pp.autoClear = false; });
        }

        /**
         * Returns wether or nood the layer needs stencil enabled during the mesh rendering.
         */
        public needStencil(): boolean {
            return true;
        }

        /**
         * Checks for the readiness of the element composing the layer.
         * @param subMesh the mesh to check for
         * @param useInstances specify wether or not to use instances to render the mesh
         * @param emissiveTexture the associated emissive texture used to generate the glow
         * @return true if ready otherwise, false
         */
        public isReady(subMesh: SubMesh, useInstances: boolean): boolean {
            let material = subMesh.getMaterial();
            let mesh = subMesh.getRenderingMesh();

            if (!material || !mesh || !this._meshes) {
                return false;
            }

            let emissiveTexture: Nullable<Texture> = null;
            let highlightLayerMesh = this._meshes[mesh.uniqueId];

            if (highlightLayerMesh && highlightLayerMesh.glowEmissiveOnly && material) {
                emissiveTexture = (<any>material).emissiveTexture;
            }
            return super._isReady(subMesh, useInstances, emissiveTexture);
        }

        /**
         * Implementation specific of rendering the generating effect on the main canvas.
         * @param effect The effect used to render through
         */
        protected _internalRender(effect: Effect): void {
            // Texture
            effect.setTexture("textureSampler", this._blurTexture);

            // Cache
            var engine = this._engine;
            var previousStencilBuffer = engine.getStencilBuffer();
            var previousStencilFunction = engine.getStencilFunction();
            var previousStencilMask = engine.getStencilMask();
            var previousStencilOperationPass = engine.getStencilOperationPass();
            var previousStencilOperationFail = engine.getStencilOperationFail();
            var previousStencilOperationDepthFail = engine.getStencilOperationDepthFail();
            var previousStencilReference = engine.getStencilFunctionReference();

            // Stencil operations
            engine.setStencilOperationPass(Engine.REPLACE);
            engine.setStencilOperationFail(Engine.KEEP);
            engine.setStencilOperationDepthFail(Engine.KEEP);

            // Draw order
            engine.setStencilMask(0x00);
            engine.setStencilBuffer(true);
            engine.setStencilFunctionReference(this._instanceGlowingMeshStencilReference);

            // 2 passes inner outer
            if (this.outerGlow) {
                effect.setFloat("offset", 0);
                engine.setStencilFunction(Engine.NOTEQUAL);
                engine.drawElementsType(Material.TriangleFillMode, 0, 6);
            }
            if (this.innerGlow) {
                effect.setFloat("offset", 1);
                engine.setStencilFunction(Engine.EQUAL);
                engine.drawElementsType(Material.TriangleFillMode, 0, 6);
            }

            // Restore Cache
            engine.setStencilFunction(previousStencilFunction);
            engine.setStencilMask(previousStencilMask);
            engine.setStencilBuffer(previousStencilBuffer);
            engine.setStencilOperationPass(previousStencilOperationPass);
            engine.setStencilOperationFail(previousStencilOperationFail);
            engine.setStencilOperationDepthFail(previousStencilOperationDepthFail);
            engine.setStencilFunctionReference(previousStencilReference);
        }

        /**
         * Returns true if the layer contains information to display, otherwise false.
         */
        public shouldRender(): boolean {
            if (super.shouldRender()) {
                return this._meshes ? true : false;
            }

            return false;
        }

        /**
         * Returns true if the mesh should render, otherwise false.
         * @param mesh The mesh to render
         * @returns true if it should render otherwise false
         */
        protected _shouldRenderMesh(mesh: Mesh): boolean {
            // Excluded Mesh
            if (this._excludedMeshes && this._excludedMeshes[mesh.uniqueId]) {
                return false;
            }

            if (!super.hasMesh(mesh)) {
                return false;
            }

            return true;
        }

        /**
         * Sets the required values for both the emissive texture and and the main color.
         */
        protected _setEmissiveTextureAndColor(mesh: Mesh, subMesh: SubMesh, material: Material): void {
            var highlightLayerMesh = this._meshes![mesh.uniqueId];
            if (highlightLayerMesh) {
                this._emissiveTextureAndColor.color.set(
                    highlightLayerMesh.color.r,
                    highlightLayerMesh.color.g,
                    highlightLayerMesh.color.b,
                    1.0);
            }
            else {
                this._emissiveTextureAndColor.color.set(
                    this.neutralColor.r,
                    this.neutralColor.g,
                    this.neutralColor.b,
                    this.neutralColor.a);
            }

            if (highlightLayerMesh && highlightLayerMesh.glowEmissiveOnly && material) {
                this._emissiveTextureAndColor.texture = (<any>material).emissiveTexture;
                this._emissiveTextureAndColor.color.set(
                    1.0,
                    1.0,
                    1.0,
                    1.0);
            }
            else {
                this._emissiveTextureAndColor.texture = null;
            }

        }

        /**
         * Add a mesh in the exclusion list to prevent it to impact or being impacted by the highlight layer.
         * @param mesh The mesh to exclude from the highlight layer
         */
        public addExcludedMesh(mesh: Mesh) {
            if (!this._excludedMeshes) {
                return;
            }

            var meshExcluded = this._excludedMeshes[mesh.uniqueId];
            if (!meshExcluded) {
                this._excludedMeshes[mesh.uniqueId] = {
                    mesh: mesh,
                    beforeRender: mesh.onBeforeRenderObservable.add((mesh: Mesh) => {
                        mesh.getEngine().setStencilBuffer(false);
                    }),
                    afterRender: mesh.onAfterRenderObservable.add((mesh: Mesh) => {
                        mesh.getEngine().setStencilBuffer(true);
                    }),
                };
            }
        }

        /**
          * Remove a mesh from the exclusion list to let it impact or being impacted by the highlight layer.
          * @param mesh The mesh to highlight
          */
        public removeExcludedMesh(mesh: Mesh) {
            if (!this._excludedMeshes) {
                return;
            }

            var meshExcluded = this._excludedMeshes[mesh.uniqueId];
            if (meshExcluded) {
                if (meshExcluded.beforeRender) {
                    mesh.onBeforeRenderObservable.remove(meshExcluded.beforeRender);
                }

                if (meshExcluded.afterRender) {
                    mesh.onAfterRenderObservable.remove(meshExcluded.afterRender);
                }
            }

            this._excludedMeshes[mesh.uniqueId] = null;
        }

        /**
         * Determine if a given mesh will be highlighted by the current HighlightLayer
         * @param mesh mesh to test
         * @returns true if the mesh will be highlighted by the current HighlightLayer
         */
        public hasMesh(mesh: AbstractMesh): boolean {
            if (!this._meshes) {
                return false;
            }

            if (!super.hasMesh(mesh)) {
                return false;
            }

            return this._meshes[mesh.uniqueId] !== undefined && this._meshes[mesh.uniqueId] !== null;
        }

        /**
         * Add a mesh in the highlight layer in order to make it glow with the chosen color.
         * @param mesh The mesh to highlight
         * @param color The color of the highlight
         * @param glowEmissiveOnly Extract the glow from the emissive texture
         */
        public addMesh(mesh: Mesh, color: Color3, glowEmissiveOnly = false) {
            if (!this._meshes) {
                return;
            }

            var meshHighlight = this._meshes[mesh.uniqueId];
            if (meshHighlight) {
                meshHighlight.color = color;
            }
            else {
                this._meshes[mesh.uniqueId] = {
                    mesh: mesh,
                    color: color,
                    // Lambda required for capture due to Observable this context
                    observerHighlight: mesh.onBeforeRenderObservable.add((mesh: Mesh) => {
                        if (this._excludedMeshes && this._excludedMeshes[mesh.uniqueId]) {
                            this._defaultStencilReference(mesh);
                        }
                        else {
                            mesh.getScene().getEngine().setStencilFunctionReference(this._instanceGlowingMeshStencilReference);
                        }
                    }),
                    observerDefault: mesh.onAfterRenderObservable.add(this._defaultStencilReference),
                    glowEmissiveOnly: glowEmissiveOnly
                };

                mesh.onDisposeObservable.add(() => {
                    this._disposeMesh(mesh);
                });
            }

            this._shouldRender = true;
        }

        /**
         * Remove a mesh from the highlight layer in order to make it stop glowing.
         * @param mesh The mesh to highlight
         */
        public removeMesh(mesh: Mesh) {
            if (!this._meshes) {
                return;
            }

            var meshHighlight = this._meshes[mesh.uniqueId];
            if (meshHighlight) {

                if (meshHighlight.observerHighlight) {
                    mesh.onBeforeRenderObservable.remove(meshHighlight.observerHighlight);
                }

                if (meshHighlight.observerDefault) {
                    mesh.onAfterRenderObservable.remove(meshHighlight.observerDefault);
                }
                delete this._meshes[mesh.uniqueId];
            }

            this._shouldRender = false;
            for (var meshHighlightToCheck in this._meshes) {
                if (this._meshes[meshHighlightToCheck]) {
                    this._shouldRender = true;
                    break;
                }
            }
        }

        /**
         * Force the stencil to the normal expected value for none glowing parts
         */
        private _defaultStencilReference(mesh: Mesh) {
            mesh.getScene().getEngine().setStencilFunctionReference(HighlightLayer.NormalMeshStencilReference);
        }

        /**
         * Free any resources and references associated to a mesh.
         * Internal use
         * @param mesh The mesh to free.
         * @hidden
         */
        public _disposeMesh(mesh: Mesh): void {
            this.removeMesh(mesh);
            this.removeExcludedMesh(mesh);
        }

        /**
         * Dispose the highlight layer and free resources.
         */
        public dispose(): void {
            if (this._meshes) {
                // Clean mesh references
                for (let id in this._meshes) {
                    let meshHighlight = this._meshes[id];
                    if (meshHighlight && meshHighlight.mesh) {

                        if (meshHighlight.observerHighlight) {
                            meshHighlight.mesh.onBeforeRenderObservable.remove(meshHighlight.observerHighlight);
                        }

                        if (meshHighlight.observerDefault) {
                            meshHighlight.mesh.onAfterRenderObservable.remove(meshHighlight.observerDefault);
                        }
                    }
                }
                this._meshes = null;
            }

            if (this._excludedMeshes) {
                for (let id in this._excludedMeshes) {
                    let meshHighlight = this._excludedMeshes[id];
                    if (meshHighlight) {

                        if (meshHighlight.beforeRender) {
                            meshHighlight.mesh.onBeforeRenderObservable.remove(meshHighlight.beforeRender);
                        }

                        if (meshHighlight.afterRender) {
                            meshHighlight.mesh.onAfterRenderObservable.remove(meshHighlight.afterRender);
                        }
                    }
                }
                this._excludedMeshes = null;
            }

            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;
        }
    }