@babylonjs/core 7.42.0 → 7.43.0

package/Layers/glowLayer.js

@@ -2,19 +2,16 @@ import { __decorate } from "../tslib.es6.js";
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { serialize } from "../Misc/decorators.js";
 import { Scene } from "../scene.js";
-import { Vector2 } from "../Maths/math.vector.js";
-import { VertexBuffer } from "../Buffers/buffer.js";
 import { Texture } from "../Materials/Textures/texture.js";
 import { RenderTargetTexture } from "../Materials/Textures/renderTargetTexture.js";
-import { Material } from "../Materials/material.js";
 import { BlurPostProcess } from "../PostProcesses/blurPostProcess.js";
 import { EffectLayer } from "./effectLayer.js";
 
 import { RegisterClass } from "../Misc/typeStore.js";
-import { Color4 } from "../Maths/math.color.js";
 import "../Layers/effectLayerSceneComponent.js";
 import { SerializationHelper } from "../Misc/decorators.serialization.js";
 import { GetExponentOfTwo } from "../Misc/tools.functions.js";
+import { ThinGlowLayer } from "./thinGlowLayer.js";
 Scene.prototype.getGlowLayerByName = function (name) {
     for (let index = 0; index < this.effectLayers?.length; index++) {
         if (this.effectLayers[index].name === name && this.effectLayers[index].getEffectName() === GlowLayer.EffectName) {
@@ -31,37 +28,53 @@ Scene.prototype.getGlowLayerByName = function (name) {
  * Documentation: https://doc.babylonjs.com/features/featuresDeepDive/mesh/glowLayer
  */
 export class GlowLayer extends EffectLayer {
+    /**
+     * Effect Name of the layer.
+     */
+    static get EffectName() {
+        return ThinGlowLayer.EffectName;
+    }
     /**
      * Sets the kernel size of the blur.
      */
     set blurKernelSize(value) {
-        if (value === this._options.blurKernelSize) {
-            return;
-        }
-        this._options.blurKernelSize = value;
-        const effectiveKernel = this._getEffectiveBlurKernelSize();
-        this._horizontalBlurPostprocess1.kernel = effectiveKernel;
-        this._verticalBlurPostprocess1.kernel = effectiveKernel;
-        this._horizontalBlurPostprocess2.kernel = effectiveKernel;
-        this._verticalBlurPostprocess2.kernel = effectiveKernel;
+        this._thinGlowLayer.blurKernelSize = value;
     }
     /**
      * Gets the kernel size of the blur.
      */
     get blurKernelSize() {
-        return this._options.blurKernelSize;
+        return this._thinGlowLayer.blurKernelSize;
     }
     /**
      * Sets the glow intensity.
      */
     set intensity(value) {
-        this._intensity = value;
+        this._thinGlowLayer.intensity = value;
     }
     /**
      * Gets the glow intensity.
      */
     get intensity() {
-        return this._intensity;
+        return this._thinGlowLayer.intensity;
+    }
+    /**
+     * Callback used to let the user override the color selection on a per mesh basis
+     */
+    get customEmissiveColorSelector() {
+        return this._thinGlowLayer.customEmissiveColorSelector;
+    }
+    set customEmissiveColorSelector(value) {
+        this._thinGlowLayer.customEmissiveColorSelector = value;
+    }
+    /**
+     * Callback used to let the user override the texture selection on a per mesh basis
+     */
+    get customEmissiveTextureSelector() {
+        return this._thinGlowLayer.customEmissiveTextureSelector;
+    }
+    set customEmissiveTextureSelector(value) {
+        this._thinGlowLayer.customEmissiveTextureSelector = value;
     }
     /**
      * Instantiates a new glow Layer and references it to the scene.
@@ -70,12 +83,9 @@ export class GlowLayer extends EffectLayer {
      * @param options Sets of none mandatory options to use with the layer (see IGlowLayerOptions for more information)
      */
     constructor(name, scene, options) {
-        super(name, scene);
-        this._intensity = 1.0;
-        this._includedOnlyMeshes = [];
-        this._excludedMeshes = [];
-        this._meshesUsingTheirOwnMaterials = [];
-        this.neutralColor = new Color4(0, 0, 0, 1);
+        const thinGlowLayer = new ThinGlowLayer(name, scene, options);
+        super(name, scene, false, thinGlowLayer);
+        this._thinGlowLayer = thinGlowLayer;
         // Adapt options
         this._options = {
             mainTextureRatio: GlowLayer.DefaultTextureRatio,
@@ -91,28 +101,7 @@ export class GlowLayer extends EffectLayer {
             ...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,
-            generateStencilBuffer: this._options.generateStencilBuffer,
-        });
-    }
-    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();
+        this._init(this._options);
     }
     /**
      * Get the effect name of the layer.
@@ -127,22 +116,13 @@ export class GlowLayer extends EffectLayer {
      * to the main canvas at the end of the scene rendering.
      */
     _createMergeEffect() {
-        let defines = "#define EMISSIVE \n";
-        if (this._options.ldrMerge) {
-            defines += "#define LDR \n";
-        }
-        // Effect
-        return this._engine.createEffect("glowMapMerge", [VertexBuffer.PositionKind], ["offset"], ["textureSampler", "textureSampler2"], defines, undefined, undefined, undefined, undefined, this.shaderLanguage, this._shadersLoaded
-            ? undefined
-            : async () => {
-                await this._importShadersAsync();
-                this._shadersLoaded = true;
-            });
+        return this._thinGlowLayer._createMergeEffect();
     }
     /**
      * Creates the render target textures and post processes used in the glow layer.
      */
     _createTextureAndPostProcesses() {
+        this._thinGlowLayer._renderPassId = this._mainTexture.renderPassId;
         let blurTextureWidth = this._mainTextureDesiredSize.width;
         let blurTextureHeight = this._mainTextureDesiredSize.height;
         blurTextureWidth = this._engine.needPOTTextures ? GetExponentOfTwo(blurTextureWidth, this._maxSize) : blurTextureWidth;
@@ -175,35 +155,60 @@ export class GlowLayer extends EffectLayer {
         this._blurTexture2.renderParticles = false;
         this._blurTexture2.ignoreCameraViewport = true;
         this._textures = [this._blurTexture1, this._blurTexture2];
-        const effectiveKernel = this._getEffectiveBlurKernelSize();
-        this._horizontalBlurPostprocess1 = new BlurPostProcess("GlowLayerHBP1", new Vector2(1.0, 0), effectiveKernel, {
+        this._thinGlowLayer.bindTexturesForCompose = (effect) => {
+            effect.setTexture("textureSampler", this._blurTexture1);
+            effect.setTexture("textureSampler2", this._blurTexture2);
+            effect.setFloat("offset", this.intensity);
+        };
+        this._thinGlowLayer._createTextureAndPostProcesses();
+        const thinBlurPostProcesses1 = this._thinGlowLayer._postProcesses[0];
+        this._horizontalBlurPostprocess1 = new BlurPostProcess("GlowLayerHBP1", thinBlurPostProcesses1.direction, thinBlurPostProcesses1.kernel, {
+            samplingMode: Texture.BILINEAR_SAMPLINGMODE,
+            engine: this._scene.getEngine(),
             width: blurTextureWidth,
             height: blurTextureHeight,
-        }, null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, textureType);
+            textureType,
+            effectWrapper: thinBlurPostProcesses1,
+        });
         this._horizontalBlurPostprocess1.width = blurTextureWidth;
         this._horizontalBlurPostprocess1.height = blurTextureHeight;
         this._horizontalBlurPostprocess1.externalTextureSamplerBinding = true;
         this._horizontalBlurPostprocess1.onApplyObservable.add((effect) => {
             effect.setTexture("textureSampler", this._mainTexture);
         });
-        this._verticalBlurPostprocess1 = new BlurPostProcess("GlowLayerVBP1", new Vector2(0, 1.0), effectiveKernel, {
+        const thinBlurPostProcesses2 = this._thinGlowLayer._postProcesses[1];
+        this._verticalBlurPostprocess1 = new BlurPostProcess("GlowLayerVBP1", thinBlurPostProcesses2.direction, thinBlurPostProcesses2.kernel, {
+            samplingMode: Texture.BILINEAR_SAMPLINGMODE,
+            engine: this._scene.getEngine(),
             width: blurTextureWidth,
             height: blurTextureHeight,
-        }, null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, textureType);
-        this._horizontalBlurPostprocess2 = new BlurPostProcess("GlowLayerHBP2", new Vector2(1.0, 0), effectiveKernel, {
+            textureType,
+            effectWrapper: thinBlurPostProcesses2,
+        });
+        const thinBlurPostProcesses3 = this._thinGlowLayer._postProcesses[2];
+        this._horizontalBlurPostprocess2 = new BlurPostProcess("GlowLayerHBP2", thinBlurPostProcesses3.direction, thinBlurPostProcesses3.kernel, {
+            samplingMode: Texture.BILINEAR_SAMPLINGMODE,
+            engine: this._scene.getEngine(),
             width: blurTextureWidth2,
             height: blurTextureHeight2,
-        }, null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, textureType);
+            textureType,
+            effectWrapper: thinBlurPostProcesses3,
+        });
         this._horizontalBlurPostprocess2.width = blurTextureWidth2;
         this._horizontalBlurPostprocess2.height = blurTextureHeight2;
         this._horizontalBlurPostprocess2.externalTextureSamplerBinding = true;
         this._horizontalBlurPostprocess2.onApplyObservable.add((effect) => {
             effect.setTexture("textureSampler", this._blurTexture1);
         });
-        this._verticalBlurPostprocess2 = new BlurPostProcess("GlowLayerVBP2", new Vector2(0, 1.0), effectiveKernel, {
+        const thinBlurPostProcesses4 = this._thinGlowLayer._postProcesses[3];
+        this._verticalBlurPostprocess2 = new BlurPostProcess("GlowLayerVBP2", thinBlurPostProcesses4.direction, thinBlurPostProcesses4.kernel, {
+            samplingMode: Texture.BILINEAR_SAMPLINGMODE,
+            engine: this._scene.getEngine(),
             width: blurTextureWidth2,
             height: blurTextureHeight2,
-        }, null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, textureType);
+            textureType,
+            effectWrapper: thinBlurPostProcesses4,
+        });
         this._postProcesses = [this._horizontalBlurPostprocess1, this._verticalBlurPostprocess1, this._horizontalBlurPostprocess2, this._verticalBlurPostprocess2];
         this._postProcesses1 = [this._horizontalBlurPostprocess1, this._verticalBlurPostprocess1];
         this._postProcesses2 = [this._horizontalBlurPostprocess2, this._verticalBlurPostprocess2];
@@ -224,13 +229,6 @@ export class GlowLayer extends EffectLayer {
             pp.autoClear = false;
         });
     }
-    /**
-     * @returns The blur kernel size used by the glow.
-     * Note: The value passed in the options is divided by 2 for back compatibility.
-     */
-    _getEffectiveBlurKernelSize() {
-        return this._options.blurKernelSize / 2;
-    }
     /**
      * Checks for the readiness of the element composing the layer.
      * @param subMesh the mesh to check for
@@ -238,13 +236,7 @@ export class GlowLayer extends EffectLayer {
      * @returns true if ready otherwise, false
      */
     isReady(subMesh, useInstances) {
-        const material = subMesh.getMaterial();
-        const mesh = subMesh.getRenderingMesh();
-        if (!material || !mesh) {
-            return false;
-        }
-        const emissiveTexture = material.emissiveTexture;
-        return super._isReady(subMesh, useInstances, emissiveTexture);
+        return this._thinGlowLayer.isReady(subMesh, useInstances);
     }
     /**
      * @returns whether or not the layer needs stencil enabled during the mesh rendering.
@@ -259,25 +251,14 @@ export class GlowLayer extends EffectLayer {
      * @returns true if it can be rendered otherwise false
      */
     _canRenderMesh(mesh, material) {
-        return true;
+        return this._thinGlowLayer._canRenderMesh(mesh, material);
     }
     /**
      * Implementation specific of rendering the generating effect on the main canvas.
      * @param effect The effect used to render through
      */
     _internalRender(effect) {
-        // Texture
-        effect.setTexture("textureSampler", this._blurTexture1);
-        effect.setTexture("textureSampler2", this._blurTexture2);
-        effect.setFloat("offset", this._intensity);
-        // Cache
-        const engine = this._engine;
-        const previousStencilBuffer = engine.getStencilBuffer();
-        // Draw order
-        engine.setStencilBuffer(false);
-        engine.drawElementsType(Material.TriangleFillMode, 0, 6);
-        // Draw order
-        engine.setStencilBuffer(previousStencilBuffer);
+        this._thinGlowLayer._internalCompose(effect);
     }
     /**
      * Sets the required values for both the emissive texture and and the main color.
@@ -286,34 +267,7 @@ export class GlowLayer extends EffectLayer {
      * @param material
      */
     _setEmissiveTextureAndColor(mesh, subMesh, material) {
-        let textureLevel = 1.0;
-        if (this.customEmissiveTextureSelector) {
-            this._emissiveTextureAndColor.texture = this.customEmissiveTextureSelector(mesh, subMesh, material);
-        }
-        else {
-            if (material) {
-                this._emissiveTextureAndColor.texture = material.emissiveTexture;
-                if (this._emissiveTextureAndColor.texture) {
-                    textureLevel = this._emissiveTextureAndColor.texture.level;
-                }
-            }
-            else {
-                this._emissiveTextureAndColor.texture = null;
-            }
-        }
-        if (this.customEmissiveColorSelector) {
-            this.customEmissiveColorSelector(mesh, subMesh, material, this._emissiveTextureAndColor.color);
-        }
-        else {
-            if (material.emissiveColor) {
-                const emissiveIntensity = material.emissiveIntensity ?? 1;
-                textureLevel *= emissiveIntensity;
-                this._emissiveTextureAndColor.color.set(material.emissiveColor.r * textureLevel, material.emissiveColor.g * textureLevel, material.emissiveColor.b * textureLevel, material.alpha);
-            }
-            else {
-                this._emissiveTextureAndColor.color.set(this.neutralColor.r, this.neutralColor.g, this.neutralColor.b, this.neutralColor.a);
-            }
-        }
+        this._thinGlowLayer._setEmissiveTextureAndColor(mesh, subMesh, material);
     }
     /**
      * Returns true if the mesh should render, otherwise false.
@@ -321,52 +275,42 @@ export class GlowLayer extends EffectLayer {
      * @returns true if it should render otherwise false
      */
     _shouldRenderMesh(mesh) {
-        return this.hasMesh(mesh);
+        return this._thinGlowLayer._shouldRenderMesh(mesh);
     }
     /**
      * Adds specific effects defines.
      * @param defines The defines to add specifics to.
      */
     _addCustomEffectDefines(defines) {
-        defines.push("#define GLOW");
+        this._thinGlowLayer._addCustomEffectDefines(defines);
     }
     /**
      * Add a mesh in the exclusion list to prevent it to impact or being impacted by the glow layer.
      * @param mesh The mesh to exclude from the glow layer
      */
     addExcludedMesh(mesh) {
-        if (this._excludedMeshes.indexOf(mesh.uniqueId) === -1) {
-            this._excludedMeshes.push(mesh.uniqueId);
-        }
+        this._thinGlowLayer.addExcludedMesh(mesh);
     }
     /**
      * Remove a mesh from the exclusion list to let it impact or being impacted by the glow layer.
      * @param mesh The mesh to remove
      */
     removeExcludedMesh(mesh) {
-        const index = this._excludedMeshes.indexOf(mesh.uniqueId);
-        if (index !== -1) {
-            this._excludedMeshes.splice(index, 1);
-        }
+        this._thinGlowLayer.removeExcludedMesh(mesh);
     }
     /**
      * Add a mesh in the inclusion list to impact or being impacted by the glow layer.
      * @param mesh The mesh to include in the glow layer
      */
     addIncludedOnlyMesh(mesh) {
-        if (this._includedOnlyMeshes.indexOf(mesh.uniqueId) === -1) {
-            this._includedOnlyMeshes.push(mesh.uniqueId);
-        }
+        this._thinGlowLayer.addIncludedOnlyMesh(mesh);
     }
     /**
      * Remove a mesh from the Inclusion list to prevent it to impact or being impacted by the glow layer.
      * @param mesh The mesh to remove
      */
     removeIncludedOnlyMesh(mesh) {
-        const index = this._includedOnlyMeshes.indexOf(mesh.uniqueId);
-        if (index !== -1) {
-            this._includedOnlyMeshes.splice(index, 1);
-        }
+        this._thinGlowLayer.removeIncludedOnlyMesh(mesh);
     }
     /**
      * Determine if a given mesh will be used in the glow layer
@@ -374,18 +318,7 @@ export class GlowLayer extends EffectLayer {
      * @returns true if the mesh will be highlighted by the current glow layer
      */
     hasMesh(mesh) {
-        if (!super.hasMesh(mesh)) {
-            return false;
-        }
-        // Included Mesh
-        if (this._includedOnlyMeshes.length) {
-            return this._includedOnlyMeshes.indexOf(mesh.uniqueId) !== -1;
-        }
-        // Excluded Mesh
-        if (this._excludedMeshes.length) {
-            return this._excludedMeshes.indexOf(mesh.uniqueId) === -1;
-        }
-        return true;
+        return this._thinGlowLayer.hasMesh(mesh);
     }
     /**
      * Defines whether the current material of the mesh should be use to render the effect.
@@ -393,37 +326,21 @@ export class GlowLayer extends EffectLayer {
      * @returns true if the material of the mesh should be use to render the effect
      */
     _useMeshMaterial(mesh) {
-        // Specific case of material supporting glow directly
-        if (mesh.material?._supportGlowLayer) {
-            return true;
-        }
-        if (this._meshesUsingTheirOwnMaterials.length == 0) {
-            return false;
-        }
-        return this._meshesUsingTheirOwnMaterials.indexOf(mesh.uniqueId) > -1;
+        return this._thinGlowLayer._useMeshMaterial(mesh);
     }
     /**
      * Add a mesh to be rendered through its own material and not with emissive only.
      * @param mesh The mesh for which we need to use its material
      */
     referenceMeshToUseItsOwnMaterial(mesh) {
-        mesh.resetDrawCache(this._mainTexture.renderPassId);
-        this._meshesUsingTheirOwnMaterials.push(mesh.uniqueId);
-        mesh.onDisposeObservable.add(() => {
-            this._disposeMesh(mesh);
-        });
+        this._thinGlowLayer.referenceMeshToUseItsOwnMaterial(mesh);
     }
     /**
      * Remove a mesh from being rendered through its own material and not with emissive only.
      * @param mesh The mesh for which we need to not use its material
      */
     unReferenceMeshFromUsingItsOwnMaterial(mesh) {
-        let index = this._meshesUsingTheirOwnMaterials.indexOf(mesh.uniqueId);
-        while (index >= 0) {
-            this._meshesUsingTheirOwnMaterials.splice(index, 1);
-            index = this._meshesUsingTheirOwnMaterials.indexOf(mesh.uniqueId);
-        }
-        mesh.resetDrawCache(this._mainTexture.renderPassId);
+        this._thinGlowLayer.unReferenceMeshFromUsingItsOwnMaterial(mesh, this._mainTexture.renderPassId);
     }
     /**
      * Free any resources and references associated to a mesh.
@@ -432,8 +349,7 @@ export class GlowLayer extends EffectLayer {
      * @internal
      */
     _disposeMesh(mesh) {
-        this.removeIncludedOnlyMesh(mesh);
-        this.removeExcludedMesh(mesh);
+        this._thinGlowLayer._disposeMesh(mesh);
     }
     /**
      * Gets the class name of the effect layer
@@ -452,9 +368,10 @@ export class GlowLayer extends EffectLayer {
         let index;
         // Included meshes
         serializationObject.includedMeshes = [];
-        if (this._includedOnlyMeshes.length) {
-            for (index = 0; index < this._includedOnlyMeshes.length; index++) {
-                const mesh = this._scene.getMeshByUniqueId(this._includedOnlyMeshes[index]);
+        const includedOnlyMeshes = this._thinGlowLayer._includedOnlyMeshes;
+        if (includedOnlyMeshes.length) {
+            for (index = 0; index < includedOnlyMeshes.length; index++) {
+                const mesh = this._scene.getMeshByUniqueId(includedOnlyMeshes[index]);
                 if (mesh) {
                     serializationObject.includedMeshes.push(mesh.id);
                 }
@@ -462,9 +379,10 @@ export class GlowLayer extends EffectLayer {
         }
         // Excluded meshes
         serializationObject.excludedMeshes = [];
-        if (this._excludedMeshes.length) {
-            for (index = 0; index < this._excludedMeshes.length; index++) {
-                const mesh = this._scene.getMeshByUniqueId(this._excludedMeshes[index]);
+        const excludedMeshes = this._thinGlowLayer._excludedMeshes;
+        if (excludedMeshes.length) {
+            for (index = 0; index < excludedMeshes.length; index++) {
+                const mesh = this._scene.getMeshByUniqueId(excludedMeshes[index]);
                 if (mesh) {
                     serializationObject.excludedMeshes.push(mesh.id);
                 }
@@ -499,10 +417,6 @@ export class GlowLayer extends EffectLayer {
         return gl;
     }
 }
-/**
- * Effect Name of the layer.
- */
-GlowLayer.EffectName = "GlowLayer";
 /**
  * The default blur kernel size used for the glow.
  */