@babylonjs/core 7.44.0 → 7.45.0

package/Layers/highlightLayer.js

@@ -4,8 +4,6 @@ import { serialize } from "../Misc/decorators.js";
 import { Observable } from "../Misc/observable.js";
 import { Scene } from "../scene.js";
 import { Vector2 } from "../Maths/math.vector.js";
-import { VertexBuffer } from "../Buffers/buffer.js";
-import { Material } from "../Materials/material.js";
 import { Texture } from "../Materials/Textures/texture.js";
 import { RenderTargetTexture } from "../Materials/Textures/renderTargetTexture.js";
 import { PostProcess } from "../PostProcesses/postProcess.js";
@@ -15,9 +13,11 @@ import { EffectLayer } from "./effectLayer.js";
 
 import { Logger } from "../Misc/logger.js";
 import { RegisterClass } from "../Misc/typeStore.js";
-import { Color4, Color3 } from "../Maths/math.color.js";
+import { Color3 } from "../Maths/math.color.js";
 import { SerializationHelper } from "../Misc/decorators.serialization.js";
 import { GetExponentOfTwo } from "../Misc/tools.functions.js";
+import { ThinHighlightLayer } from "./thinHighlightLayer.js";
+import { ThinGlowBlurPostProcess } from "./thinEffectLayer.js";
 Scene.prototype.getHighlightLayerByName = function (name) {
     for (let index = 0; index < this.effectLayers?.length; index++) {
         if (this.effectLayers[index].name === name && this.effectLayers[index].getEffectName() === HighlightLayer.EffectName) {
@@ -31,14 +31,25 @@ Scene.prototype.getHighlightLayerByName = function (name) {
  * It enforces keeping the most luminous color in the color channel.
  */
 class GlowBlurPostProcess extends PostProcess {
-    constructor(name, direction, kernel, options, camera, samplingMode = Texture.BILINEAR_SAMPLINGMODE, engine, reusable) {
-        super(name, "glowBlurPostProcess", ["screenSize", "direction", "blurWidth"], null, options, camera, samplingMode, engine, reusable);
+    constructor(name, direction, kernel, options, camera = null, samplingMode = Texture.BILINEAR_SAMPLINGMODE, engine, reusable) {
+        const localOptions = {
+            uniforms: ThinGlowBlurPostProcess.Uniforms,
+            size: typeof options === "number" ? options : undefined,
+            camera,
+            samplingMode,
+            engine,
+            reusable,
+            ...options,
+        };
+        super(name, ThinGlowBlurPostProcess.FragmentUrl, {
+            effectWrapper: typeof options === "number" || !options.effectWrapper ? new ThinGlowBlurPostProcess(name, engine, direction, kernel, localOptions) : undefined,
+            ...localOptions,
+        });
         this.direction = direction;
         this.kernel = kernel;
-        this.onApplyObservable.add((effect) => {
-            effect.setFloat2("screenSize", this.width, this.height);
-            effect.setVector2("direction", this.direction);
-            effect.setFloat("blurWidth", this.kernel);
+        this.onApplyObservable.add(() => {
+            this._effectWrapper.textureWidth = this.width;
+            this._effectWrapper.textureHeight = this.height;
         });
     }
     _gatherImports(useWebGPU, list) {
@@ -61,31 +72,57 @@ class GlowBlurPostProcess extends PostProcess {
  * !!! THIS REQUIRES AN ACTIVE STENCIL BUFFER ON THE CANVAS !!!
  */
 export class HighlightLayer extends EffectLayer {
+    /**
+     * The neutral color used during the preparation of the glow effect.
+     * This is black by default as the blend operation is a blend operation.
+     */
+    static get NeutralColor() {
+        return ThinHighlightLayer.NeutralColor;
+    }
+    static set NeutralColor(value) {
+        ThinHighlightLayer.NeutralColor = value;
+    }
+    /**
+     * Specifies whether or not the inner glow is ACTIVE in the layer.
+     */
+    get innerGlow() {
+        return this._thinEffectLayer.innerGlow;
+    }
+    set innerGlow(value) {
+        this._thinEffectLayer.innerGlow = value;
+    }
+    /**
+     * Specifies whether or not the outer glow is ACTIVE in the layer.
+     */
+    get outerGlow() {
+        return this._thinEffectLayer.outerGlow;
+    }
+    set outerGlow(value) {
+        this._thinEffectLayer.outerGlow = value;
+    }
     /**
      * Specifies the horizontal size of the blur.
      */
     set blurHorizontalSize(value) {
-        this._horizontalBlurPostprocess.kernel = value;
-        this._options.blurHorizontalSize = value;
+        this._thinEffectLayer.blurHorizontalSize = value;
     }
     /**
      * Specifies the vertical size of the blur.
      */
     set blurVerticalSize(value) {
-        this._verticalBlurPostprocess.kernel = value;
-        this._options.blurVerticalSize = value;
+        this._thinEffectLayer.blurVerticalSize = value;
     }
     /**
      * Gets the horizontal size of the blur.
      */
     get blurHorizontalSize() {
-        return this._horizontalBlurPostprocess.kernel;
+        return this._thinEffectLayer.blurHorizontalSize;
     }
     /**
      * Gets the vertical size of the blur.
      */
     get blurVerticalSize() {
-        return this._verticalBlurPostprocess.kernel;
+        return this._thinEffectLayer.blurVerticalSize;
     }
     /**
      * Instantiates a new highlight Layer and references it to the scene..
@@ -94,15 +131,7 @@ export class HighlightLayer extends EffectLayer {
      * @param options Sets of none mandatory options to use with the layer (see IHighlightLayerOptions for more information)
      */
     constructor(name, scene, options) {
-        super(name, scene, options !== undefined ? !!options.forceGLSL : false);
-        /**
-         * Specifies whether or not the inner glow is ACTIVE in the layer.
-         */
-        this.innerGlow = true;
-        /**
-         * Specifies whether or not the outer glow is ACTIVE in the layer.
-         */
-        this.outerGlow = true;
+        super(name, scene, options !== undefined ? !!options.forceGLSL : false, new ThinHighlightLayer(name, scene, options));
         /**
          * An event triggered when the highlight layer is being blurred.
          */
@@ -111,10 +140,6 @@ export class HighlightLayer extends EffectLayer {
          * An event triggered when the highlight layer has been blurred.
          */
         this.onAfterBlurObservable = new Observable();
-        this._instanceGlowingMeshStencilReference = HighlightLayer.GlowingMeshStencilReference++;
-        this._meshes = {};
-        this._excludedMeshes = {};
-        this.neutralColor = HighlightLayer.NeutralColor;
         // Warn on stencil
         if (!this._engine.isStencilEnable) {
             Logger.Warn("Rendering the Highlight Layer requires the stencil to be active on the canvas. var engine = new Engine(canvas, antialias, { stencil: true }");
@@ -123,6 +148,7 @@ export class HighlightLayer extends EffectLayer {
         this._options = {
             mainTextureRatio: 0.5,
             blurTextureSizeRatio: 0.5,
+            mainTextureFixedSize: 0,
             blurHorizontalSize: 1.0,
             blurVerticalSize: 1.0,
             alphaBlendingMode: 2,
@@ -130,33 +156,14 @@ export class HighlightLayer extends EffectLayer {
             renderingGroupId: -1,
             mainTextureType: 0,
             forceGLSL: false,
+            isStroke: false,
             ...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,
-            mainTextureType: this._options.mainTextureType,
-        });
+        this._init(this._options);
         // Do not render as long as no meshes have been added
         this._shouldRender = false;
     }
-    async _importShadersAsync() {
-        if (this._shaderLanguage === 1 /* ShaderLanguage.WGSL */) {
-            await Promise.all([
-                import("../ShadersWGSL/glowMapMerge.fragment.js"),
-                import("../ShadersWGSL/glowMapMerge.vertex.js"),
-                import("../ShadersWGSL/glowBlurPostProcess.fragment.js"),
-            ]);
-        }
-        else {
-            await Promise.all([import("../Shaders/glowMapMerge.fragment.js"), import("../Shaders/glowMapMerge.vertex.js"), import("../Shaders/glowBlurPostProcess.fragment.js")]);
-        }
-        await super._importShadersAsync();
-    }
     /**
      * Get the effect name of the layer.
      * @returns The effect name
@@ -173,13 +180,7 @@ export class HighlightLayer extends EffectLayer {
      * @returns The effect created
      */
     _createMergeEffect() {
-        // Effect
-        return this._engine.createEffect("glowMapMerge", [VertexBuffer.PositionKind], ["offset"], ["textureSampler"], this._options.isStroke ? "#define STROKE \n" : undefined, undefined, undefined, undefined, undefined, this._shaderLanguage, this._shadersLoaded
-            ? undefined
-            : async () => {
-                await this._importShadersAsync();
-                this._shadersLoaded = true;
-            });
+        return this._thinEffectLayer._createMergeEffect();
     }
     /**
      * Creates the render target textures and post processes used in the highlight layer.
@@ -207,17 +208,34 @@ export class HighlightLayer extends EffectLayer {
         this._blurTexture.renderParticles = false;
         this._blurTexture.ignoreCameraViewport = true;
         this._textures = [this._blurTexture];
+        this._thinEffectLayer.bindTexturesForCompose = (effect) => {
+            effect.setTexture("textureSampler", this._blurTexture);
+        };
+        this._thinEffectLayer._createTextureAndPostProcesses();
         if (this._options.alphaBlendingMode === 2) {
-            this._downSamplePostprocess = new PassPostProcess("HighlightLayerPPP", this._options.blurTextureSizeRatio, null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine());
+            this._downSamplePostprocess = new PassPostProcess("HighlightLayerPPP", {
+                size: this._options.blurTextureSizeRatio,
+                samplingMode: Texture.BILINEAR_SAMPLINGMODE,
+                engine: this._scene.getEngine(),
+                effectWrapper: this._thinEffectLayer._postProcesses[0],
+            });
             this._downSamplePostprocess.externalTextureSamplerBinding = true;
             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 = new GlowBlurPostProcess("HighlightLayerHBP", new Vector2(1.0, 0), this._options.blurHorizontalSize, {
+                samplingMode: Texture.BILINEAR_SAMPLINGMODE,
+                engine: this._scene.getEngine(),
+                effectWrapper: this._thinEffectLayer._postProcesses[1],
+            });
             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 = new GlowBlurPostProcess("HighlightLayerVBP", new Vector2(0, 1.0), this._options.blurVerticalSize, {
+                samplingMode: Texture.BILINEAR_SAMPLINGMODE,
+                engine: this._scene.getEngine(),
+                effectWrapper: this._thinEffectLayer._postProcesses[2],
+            });
             this._verticalBlurPostprocess.onApplyObservable.add((effect) => {
                 effect.setFloat2("screenSize", blurTextureWidth, blurTextureHeight);
             });
@@ -225,20 +243,30 @@ export class HighlightLayer extends EffectLayer {
         }
         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);
-            const horizontalBlurPostprocess = this._horizontalBlurPostprocess;
-            horizontalBlurPostprocess.width = blurTextureWidth;
-            horizontalBlurPostprocess.height = blurTextureHeight;
-            horizontalBlurPostprocess.externalTextureSamplerBinding = true;
-            horizontalBlurPostprocess.onApplyObservable.add((effect) => {
+                size: {
+                    width: blurTextureWidth,
+                    height: blurTextureHeight,
+                },
+                samplingMode: Texture.BILINEAR_SAMPLINGMODE,
+                engine: this._scene.getEngine(),
+                textureType,
+                effectWrapper: this._thinEffectLayer._postProcesses[0],
+            });
+            this._horizontalBlurPostprocess.width = blurTextureWidth;
+            this._horizontalBlurPostprocess.height = blurTextureHeight;
+            this._horizontalBlurPostprocess.externalTextureSamplerBinding = true;
+            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);
+                size: {
+                    width: blurTextureWidth,
+                    height: blurTextureHeight,
+                },
+                samplingMode: Texture.BILINEAR_SAMPLINGMODE,
+                engine: this._scene.getEngine(),
+                textureType,
+            });
             this._postProcesses = [this._horizontalBlurPostprocess, this._verticalBlurPostprocess];
         }
         this._mainTexture.onAfterUnbindObservable.add(() => {
@@ -259,7 +287,7 @@ export class HighlightLayer extends EffectLayer {
      * @returns whether or not the layer needs stencil enabled during the mesh rendering.
      */
     needStencil() {
-        return true;
+        return this._thinEffectLayer.needStencil();
     }
     /**
      * Checks for the readiness of the element composing the layer.
@@ -268,17 +296,7 @@ export class HighlightLayer extends EffectLayer {
      * @returns true if ready otherwise, false
      */
     isReady(subMesh, useInstances) {
-        const material = subMesh.getMaterial();
-        const mesh = subMesh.getRenderingMesh();
-        if (!material || !mesh || !this._meshes) {
-            return false;
-        }
-        let emissiveTexture = null;
-        const highlightLayerMesh = this._meshes[mesh.uniqueId];
-        if (highlightLayerMesh && highlightLayerMesh.glowEmissiveOnly && material) {
-            emissiveTexture = material.emissiveTexture;
-        }
-        return super._isReady(subMesh, useInstances, emissiveTexture);
+        return this._thinEffectLayer.isReady(subMesh, useInstances);
     }
     /**
      * Implementation specific of rendering the generating effect on the main canvas.
@@ -286,43 +304,13 @@ export class HighlightLayer extends EffectLayer {
      * @param renderIndex
      */
     _internalRender(effect, renderIndex) {
-        // Texture
-        effect.setTexture("textureSampler", this._blurTexture);
-        // Cache
-        const engine = this._engine;
-        engine.cacheStencilState();
-        // Stencil operations
-        engine.setStencilOperationPass(7681);
-        engine.setStencilOperationFail(7680);
-        engine.setStencilOperationDepthFail(7680);
-        // Draw order
-        engine.setStencilMask(0x00);
-        engine.setStencilBuffer(true);
-        engine.setStencilFunctionReference(this._instanceGlowingMeshStencilReference);
-        // 2 passes inner outer
-        if (this.outerGlow && renderIndex === 0) {
-            // the outer glow is rendered the first time _internalRender is called, so when renderIndex == 0 (and only if outerGlow is enabled)
-            effect.setFloat("offset", 0);
-            engine.setStencilFunction(517);
-            engine.drawElementsType(Material.TriangleFillMode, 0, 6);
-        }
-        if (this.innerGlow && renderIndex === 1) {
-            // the inner glow is rendered the second time _internalRender is called, so when renderIndex == 1 (and only if innerGlow is enabled)
-            effect.setFloat("offset", 1);
-            engine.setStencilFunction(514);
-            engine.drawElementsType(Material.TriangleFillMode, 0, 6);
-        }
-        // Restore Cache
-        engine.restoreStencilState();
+        this._thinEffectLayer._internalCompose(effect, renderIndex);
     }
     /**
      * @returns true if the layer contains information to display, otherwise false.
      */
     shouldRender() {
-        if (super.shouldRender()) {
-            return this._meshes ? true : false;
-        }
-        return false;
+        return this._thinEffectLayer.shouldRender();
     }
     /**
      * Returns true if the mesh should render, otherwise false.
@@ -330,14 +318,7 @@ export class HighlightLayer extends EffectLayer {
      * @returns true if it should render otherwise false
      */
     _shouldRenderMesh(mesh) {
-        // Excluded Mesh
-        if (this._excludedMeshes && this._excludedMeshes[mesh.uniqueId]) {
-            return false;
-        }
-        if (!super.hasMesh(mesh)) {
-            return false;
-        }
-        return true;
+        return this._thinEffectLayer._shouldRenderMesh(mesh);
     }
     /**
      * Returns true if the mesh can be rendered, otherwise false.
@@ -346,15 +327,14 @@ export class HighlightLayer extends EffectLayer {
      * @returns true if it can be rendered otherwise false
      */
     _canRenderMesh(mesh, material) {
-        // all meshes can be rendered in the highlight layer, even transparent ones
-        return true;
+        return this._thinEffectLayer._canRenderMesh(mesh, material);
     }
     /**
      * Adds specific effects defines.
      * @param defines The defines to add specifics to.
      */
     _addCustomEffectDefines(defines) {
-        defines.push("#define HIGHLIGHT");
+        this._thinEffectLayer._addCustomEffectDefines(defines);
     }
     /**
      * Sets the required values for both the emissive texture and and the main color.
@@ -363,65 +343,21 @@ export class HighlightLayer extends EffectLayer {
      * @param material
      */
     _setEmissiveTextureAndColor(mesh, subMesh, material) {
-        const 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 = material.emissiveTexture;
-            this._emissiveTextureAndColor.color.set(1.0, 1.0, 1.0, 1.0);
-        }
-        else {
-            this._emissiveTextureAndColor.texture = null;
-        }
+        this._thinEffectLayer._setEmissiveTextureAndColor(mesh, subMesh, material);
     }
     /**
      * 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
      */
     addExcludedMesh(mesh) {
-        if (!this._excludedMeshes) {
-            return;
-        }
-        const meshExcluded = this._excludedMeshes[mesh.uniqueId];
-        if (!meshExcluded) {
-            const obj = {
-                mesh: mesh,
-                beforeBind: null,
-                afterRender: null,
-                stencilState: false,
-            };
-            obj.beforeBind = mesh.onBeforeBindObservable.add((mesh) => {
-                obj.stencilState = mesh.getEngine().getStencilBuffer();
-                mesh.getEngine().setStencilBuffer(false);
-            });
-            obj.afterRender = mesh.onAfterRenderObservable.add((mesh) => {
-                mesh.getEngine().setStencilBuffer(obj.stencilState);
-            });
-            this._excludedMeshes[mesh.uniqueId] = obj;
-        }
+        this._thinEffectLayer.addExcludedMesh(mesh);
     }
     /**
      * Remove a mesh from the exclusion list to let it impact or being impacted by the highlight layer.
      * @param mesh The mesh to highlight
      */
     removeExcludedMesh(mesh) {
-        if (!this._excludedMeshes) {
-            return;
-        }
-        const meshExcluded = this._excludedMeshes[mesh.uniqueId];
-        if (meshExcluded) {
-            if (meshExcluded.beforeBind) {
-                mesh.onBeforeBindObservable.remove(meshExcluded.beforeBind);
-            }
-            if (meshExcluded.afterRender) {
-                mesh.onAfterRenderObservable.remove(meshExcluded.afterRender);
-            }
-        }
-        this._excludedMeshes[mesh.uniqueId] = null;
+        this._thinEffectLayer.removeExcludedMesh(mesh);
     }
     /**
      * Determine if a given mesh will be highlighted by the current HighlightLayer
@@ -429,13 +365,7 @@ export class HighlightLayer extends EffectLayer {
      * @returns true if the mesh will be highlighted by the current HighlightLayer
      */
     hasMesh(mesh) {
-        if (!this._meshes) {
-            return false;
-        }
-        if (!super.hasMesh(mesh)) {
-            return false;
-        }
-        return this._meshes[mesh.uniqueId] !== undefined && this._meshes[mesh.uniqueId] !== null;
+        return this._thinEffectLayer.hasMesh(mesh);
     }
     /**
      * Add a mesh in the highlight layer in order to make it glow with the chosen color.
@@ -444,89 +374,20 @@ export class HighlightLayer extends EffectLayer {
      * @param glowEmissiveOnly Extract the glow from the emissive texture
      */
     addMesh(mesh, color, glowEmissiveOnly = false) {
-        if (!this._meshes) {
-            return;
-        }
-        const 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.onBeforeBindObservable.add((mesh) => {
-                    if (this.isEnabled) {
-                        if (this._excludedMeshes && this._excludedMeshes[mesh.uniqueId]) {
-                            this._defaultStencilReference(mesh);
-                        }
-                        else {
-                            mesh.getScene().getEngine().setStencilFunctionReference(this._instanceGlowingMeshStencilReference);
-                        }
-                    }
-                }),
-                observerDefault: mesh.onAfterRenderObservable.add((mesh) => {
-                    if (this.isEnabled) {
-                        this._defaultStencilReference(mesh);
-                    }
-                }),
-                glowEmissiveOnly: glowEmissiveOnly,
-            };
-            mesh.onDisposeObservable.add(() => {
-                this._disposeMesh(mesh);
-            });
-        }
-        this._shouldRender = true;
+        this._thinEffectLayer.addMesh(mesh, color, glowEmissiveOnly);
     }
     /**
      * Remove a mesh from the highlight layer in order to make it stop glowing.
      * @param mesh The mesh to highlight
      */
     removeMesh(mesh) {
-        if (!this._meshes) {
-            return;
-        }
-        const meshHighlight = this._meshes[mesh.uniqueId];
-        if (meshHighlight) {
-            if (meshHighlight.observerHighlight) {
-                mesh.onBeforeBindObservable.remove(meshHighlight.observerHighlight);
-            }
-            if (meshHighlight.observerDefault) {
-                mesh.onAfterRenderObservable.remove(meshHighlight.observerDefault);
-            }
-            delete this._meshes[mesh.uniqueId];
-        }
-        this._shouldRender = false;
-        for (const meshHighlightToCheck in this._meshes) {
-            if (this._meshes[meshHighlightToCheck]) {
-                this._shouldRender = true;
-                break;
-            }
-        }
+        this._thinEffectLayer.removeMesh(mesh);
     }
     /**
      * Remove all the meshes currently referenced in the highlight layer
      */
     removeAllMeshes() {
-        if (!this._meshes) {
-            return;
-        }
-        for (const uniqueId in this._meshes) {
-            if (Object.prototype.hasOwnProperty.call(this._meshes, uniqueId)) {
-                const mesh = this._meshes[uniqueId];
-                if (mesh) {
-                    this.removeMesh(mesh.mesh);
-                }
-            }
-        }
-    }
-    /**
-     * Force the stencil to the normal expected value for none glowing parts
-     * @param mesh
-     */
-    _defaultStencilReference(mesh) {
-        mesh.getScene().getEngine().setStencilFunctionReference(HighlightLayer.NormalMeshStencilReference);
+        this._thinEffectLayer.removeAllMeshes();
     }
     /**
      * Free any resources and references associated to a mesh.
@@ -535,43 +396,7 @@ export class HighlightLayer extends EffectLayer {
      * @internal
      */
     _disposeMesh(mesh) {
-        this.removeMesh(mesh);
-        this.removeExcludedMesh(mesh);
-    }
-    /**
-     * Dispose the highlight layer and free resources.
-     */
-    dispose() {
-        if (this._meshes) {
-            // Clean mesh references
-            for (const id in this._meshes) {
-                const meshHighlight = this._meshes[id];
-                if (meshHighlight && meshHighlight.mesh) {
-                    if (meshHighlight.observerHighlight) {
-                        meshHighlight.mesh.onBeforeBindObservable.remove(meshHighlight.observerHighlight);
-                    }
-                    if (meshHighlight.observerDefault) {
-                        meshHighlight.mesh.onAfterRenderObservable.remove(meshHighlight.observerDefault);
-                    }
-                }
-            }
-            this._meshes = null;
-        }
-        if (this._excludedMeshes) {
-            for (const id in this._excludedMeshes) {
-                const meshHighlight = this._excludedMeshes[id];
-                if (meshHighlight) {
-                    if (meshHighlight.beforeBind) {
-                        meshHighlight.mesh.onBeforeBindObservable.remove(meshHighlight.beforeBind);
-                    }
-                    if (meshHighlight.afterRender) {
-                        meshHighlight.mesh.onAfterRenderObservable.remove(meshHighlight.afterRender);
-                    }
-                }
-            }
-            this._excludedMeshes = null;
-        }
-        super.dispose();
+        this._thinEffectLayer._disposeMesh(mesh);
     }
     /**
      * Gets the class name of the effect layer
@@ -589,9 +414,10 @@ export class HighlightLayer extends EffectLayer {
         serializationObject.customType = "BABYLON.HighlightLayer";
         // Highlighted meshes
         serializationObject.meshes = [];
-        if (this._meshes) {
-            for (const m in this._meshes) {
-                const mesh = this._meshes[m];
+        const meshes = this._thinEffectLayer._meshes;
+        if (meshes) {
+            for (const m in meshes) {
+                const mesh = meshes[m];
                 if (mesh) {
                     serializationObject.meshes.push({
                         glowEmissiveOnly: mesh.glowEmissiveOnly,
@@ -603,9 +429,10 @@ export class HighlightLayer extends EffectLayer {
         }
         // Excluded meshes
         serializationObject.excludedMeshes = [];
-        if (this._excludedMeshes) {
-            for (const e in this._excludedMeshes) {
-                const excludedMesh = this._excludedMeshes[e];
+        const excludedMeshes = this._thinEffectLayer._excludedMeshes;
+        if (excludedMeshes) {
+            for (const e in excludedMeshes) {
+                const excludedMesh = excludedMeshes[e];
                 if (excludedMesh) {
                     serializationObject.excludedMeshes.push(excludedMesh.mesh.id);
                 }
@@ -645,25 +472,12 @@ export class HighlightLayer extends EffectLayer {
  * Effect Name of the highlight layer.
  */
 HighlightLayer.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.
- */
-HighlightLayer.NeutralColor = new Color4(0, 0, 0, 0);
-/**
- * Stencil value used for glowing meshes.
- */
-HighlightLayer.GlowingMeshStencilReference = 0x02;
-/**
- * Stencil value used for the other meshes in the scene.
- */
-HighlightLayer.NormalMeshStencilReference = 0x01;
 __decorate([
     serialize()
-], HighlightLayer.prototype, "innerGlow", void 0);
+], HighlightLayer.prototype, "innerGlow", null);
 __decorate([
     serialize()
-], HighlightLayer.prototype, "outerGlow", void 0);
+], HighlightLayer.prototype, "outerGlow", null);
 __decorate([
     serialize()
 ], HighlightLayer.prototype, "blurHorizontalSize", null);