Refactor mask

packages/core/src/2d/index.ts

@@ -1,5 +1,4 @@
 export { SpriteMaskInteraction } from "./enums/SpriteMaskInteraction";
-export { SpriteMaskLayer } from "./enums/SpriteMaskLayer";
 export { TextHorizontalAlignment, TextVerticalAlignment } from "./enums/TextAlignment";
 export { OverflowMode } from "./enums/TextOverflow";
 export { FontStyle } from "./enums/FontStyle";

packages/core/src/2d/sprite/SpriteMask.ts

@@ -9,9 +9,9 @@ import { SubPrimitiveChunk } from "../../RenderPipeline/SubPrimitiveChunk";
 import { SubRenderElement } from "../../RenderPipeline/SubRenderElement";
 import { Renderer, RendererUpdateFlags } from "../../Renderer";
 import { assignmentClone, ignoreClone } from "../../clone/CloneManager";
+import { SpriteMaskLayer } from "../../enums/SpriteMaskLayer";
 import { ShaderProperty } from "../../shader/ShaderProperty";
 import { SimpleSpriteAssembler } from "../assembler/SimpleSpriteAssembler";
-import { SpriteMaskLayer } from "../enums/SpriteMaskLayer";
 import { SpriteModifyFlags } from "../enums/SpriteModifyFlags";
 import { Sprite } from "./Sprite";
 

packages/core/src/2d/sprite/SpriteRenderer.ts

@@ -8,7 +8,6 @@ import { SubRenderElement } from "../../RenderPipeline/SubRenderElement";
 import { Renderer, RendererUpdateFlags } from "../../Renderer";
 import { assignmentClone, deepClone, ignoreClone } from "../../clone/CloneManager";
 import { ShaderProperty } from "../../shader/ShaderProperty";
-import { CompareFunction } from "../../shader/enums/CompareFunction";
 import { ISpriteAssembler } from "../assembler/ISpriteAssembler";
 import { SimpleSpriteAssembler } from "../assembler/SimpleSpriteAssembler";
 import { SlicedSpriteAssembler } from "../assembler/SlicedSpriteAssembler";
@@ -257,7 +256,6 @@ export class SpriteRenderer extends Renderer {
 
   set maskInteraction(value: SpriteMaskInteraction) {
     if (this._maskInteraction !== value) {
-      this._updateStencilState(this._maskInteraction, value);
       this._maskInteraction = value;
     }
   }
@@ -334,7 +332,7 @@ export class SpriteRenderer extends Renderer {
     }
     // @todo: This question needs to be raised rather than hidden.
     if (material.destroyed) {
-      material = this._engine._spriteDefaultMaterials[this._maskInteraction];
+      material = this._engine._spriteDefaultMaterial;
     }
 
     // Update position
@@ -395,28 +393,6 @@ export class SpriteRenderer extends Renderer {
     this._dirtyUpdateFlag &= ~SpriteRendererUpdateFlags.AutomaticSize;
   }
 
-  private _updateStencilState(from: SpriteMaskInteraction, to: SpriteMaskInteraction): void {
-    const material = this.getMaterial();
-    const { _spriteDefaultMaterials: spriteDefaultMaterials } = this._engine;
-    if (material === spriteDefaultMaterials[from]) {
-      this.setMaterial(spriteDefaultMaterials[to]);
-    } else {
-      const { stencilState } = material.renderState;
-      if (to === SpriteMaskInteraction.None) {
-        stencilState.enabled = false;
-        stencilState.writeMask = 0xff;
-        stencilState.referenceValue = 0;
-        stencilState.compareFunctionFront = stencilState.compareFunctionBack = CompareFunction.Always;
-      } else {
-        stencilState.enabled = true;
-        stencilState.writeMask = 0x00;
-        stencilState.referenceValue = 1;
-        stencilState.compareFunctionFront = stencilState.compareFunctionBack =
-          to === SpriteMaskInteraction.VisibleInsideMask ? CompareFunction.LessEqual : CompareFunction.Greater;
-      }
-    }
-  }
-
   @ignoreClone
   private _onSpriteChange(type: SpriteModifyFlags): void {
     switch (type) {

packages/core/src/2d/text/TextRenderer.ts

@@ -10,7 +10,6 @@ import { Renderer } from "../../Renderer";
 import { TransformModifyFlags } from "../../Transform";
 import { assignmentClone, deepClone, ignoreClone } from "../../clone/CloneManager";
 import { ShaderData, ShaderProperty } from "../../shader";
-import { CompareFunction } from "../../shader/enums/CompareFunction";
 import { ShaderDataGroup } from "../../shader/enums/ShaderDataGroup";
 import { Texture2D } from "../../texture";
 import { FontStyle } from "../enums/FontStyle";
@@ -250,7 +249,6 @@ export class TextRenderer extends Renderer {
   set maskInteraction(value: SpriteMaskInteraction) {
     if (this._maskInteraction !== value) {
       this._maskInteraction = value;
-      this._setDirtyFlagTrue(DirtyFlag.MaskInteraction);
     }
   }
 
@@ -394,11 +392,6 @@ export class TextRenderer extends Renderer {
       return;
     }
 
-    if (this._isContainDirtyFlag(DirtyFlag.MaskInteraction)) {
-      this._updateStencilState();
-      this._setDirtyFlagFalse(DirtyFlag.MaskInteraction);
-    }
-
     if (this._isContainDirtyFlag(DirtyFlag.SubFont)) {
       this._resetSubFont();
       this._setDirtyFlagFalse(DirtyFlag.SubFont);
@@ -437,29 +430,6 @@ export class TextRenderer extends Renderer {
     camera._renderPipeline.pushRenderElement(context, renderElement);
   }
 
-  private _updateStencilState(): void {
-    const material = this.getInstanceMaterial();
-    const stencilState = material.renderState.stencilState;
-    const maskInteraction = this._maskInteraction;
-
-    if (maskInteraction === SpriteMaskInteraction.None) {
-      stencilState.enabled = false;
-      stencilState.writeMask = 0xff;
-      stencilState.referenceValue = 0;
-      stencilState.compareFunctionFront = stencilState.compareFunctionBack = CompareFunction.Always;
-    } else {
-      stencilState.enabled = true;
-      stencilState.writeMask = 0x00;
-      stencilState.referenceValue = 1;
-      const compare =
-        maskInteraction === SpriteMaskInteraction.VisibleInsideMask
-          ? CompareFunction.LessEqual
-          : CompareFunction.Greater;
-      stencilState.compareFunctionFront = compare;
-      stencilState.compareFunctionBack = compare;
-    }
-  }
-
   private _resetSubFont(): void {
     const font = this._font;
     this._subFont = font._getSubFont(this.fontSize, this.fontStyle);
@@ -762,8 +732,7 @@ enum DirtyFlag {
   LocalPositionBounds = 0x2,
   WorldPosition = 0x4,
   WorldBounds = 0x8,
-  MaskInteraction = 0x10,
-  Color = 0x20,
+  Color = 0x10,
 
   Position = LocalPositionBounds | WorldPosition | WorldBounds,
   Font = SubFont | Position

packages/core/src/Engine.ts

@@ -7,7 +7,6 @@ import {
   IXRDevice
 } from "@galacean/engine-design";
 import { Color } from "@galacean/engine-math";
-import { SpriteMaskInteraction } from "./2d";
 import { CharRenderInfo } from "./2d/text/CharRenderInfo";
 import { Font } from "./2d/text/Font";
 import { BasicResources } from "./BasicResources";
@@ -30,7 +29,6 @@ import { Material } from "./material/Material";
 import { ParticleBufferUtils } from "./particle/ParticleBufferUtils";
 import { PhysicsScene } from "./physics/PhysicsScene";
 import { ColliderShape } from "./physics/shape/ColliderShape";
-import { CompareFunction } from "./shader";
 import { Shader } from "./shader/Shader";
 import { ShaderMacro } from "./shader/ShaderMacro";
 import { ShaderMacroCollection } from "./shader/ShaderMacroCollection";
@@ -94,8 +92,6 @@ export class Engine extends EventDispatcher {
   _basicResources: BasicResources;
   /* @internal */
   _spriteDefaultMaterial: Material;
-  /** @internal */
-  _spriteDefaultMaterials: Material[] = [];
   /* @internal */
   _textDefaultMaterial: Material;
   /* @internal */
@@ -239,16 +235,7 @@ export class Engine extends EventDispatcher {
 
     this._canvas = canvas;
 
-    const { _spriteDefaultMaterials: spriteDefaultMaterials } = this;
-    this._spriteDefaultMaterial = spriteDefaultMaterials[SpriteMaskInteraction.None] = this._createSpriteMaterial(
-      SpriteMaskInteraction.None
-    );
-    spriteDefaultMaterials[SpriteMaskInteraction.VisibleInsideMask] = this._createSpriteMaterial(
-      SpriteMaskInteraction.VisibleInsideMask
-    );
-    spriteDefaultMaterials[SpriteMaskInteraction.VisibleOutsideMask] = this._createSpriteMaterial(
-      SpriteMaskInteraction.VisibleOutsideMask
-    );
+    this._spriteDefaultMaterial = this._createSpriteMaterial();
     this._textDefaultMaterial = this._createTextMaterial();
     this._spriteMaskDefaultMaterial = this._createSpriteMaskMaterial();
     this._textDefaultFont = Font.createFromOS(this, "Arial");
@@ -581,7 +568,7 @@ export class Engine extends EventDispatcher {
     return Promise.all(initializePromises).then(() => this);
   }
 
-  private _createSpriteMaterial(maskInteraction: SpriteMaskInteraction): Material {
+  private _createSpriteMaterial(): Material {
     const material = new Material(this, Shader.find("Sprite"));
     const renderState = material.renderState;
     const target = renderState.blendState.targetBlendState;
@@ -591,18 +578,6 @@ export class Engine extends EventDispatcher {
     target.sourceAlphaBlendFactor = BlendFactor.One;
     target.destinationAlphaBlendFactor = BlendFactor.OneMinusSourceAlpha;
     target.colorBlendOperation = target.alphaBlendOperation = BlendOperation.Add;
-    if (maskInteraction !== SpriteMaskInteraction.None) {
-      const stencilState = renderState.stencilState;
-      stencilState.enabled = true;
-      stencilState.writeMask = 0x00;
-      stencilState.referenceValue = 1;
-      const compare =
-        maskInteraction === SpriteMaskInteraction.VisibleInsideMask
-          ? CompareFunction.LessEqual
-          : CompareFunction.Greater;
-      stencilState.compareFunctionFront = compare;
-      stencilState.compareFunctionBack = compare;
-    }
     renderState.depthState.writeEnabled = false;
     renderState.rasterState.cullMode = CullMode.Off;
     renderState.renderQueueType = RenderQueueType.Transparent;
@@ -617,7 +592,6 @@ export class Engine extends EventDispatcher {
     renderState.rasterState.cullMode = CullMode.Off;
     renderState.stencilState.enabled = true;
     renderState.depthState.enabled = false;
-    renderState.renderQueueType = RenderQueueType.Transparent;
     material.isGCIgnored = true;
     return material;
   }

packages/core/src/RenderPipeline/BasicRenderPipeline.ts

@@ -195,6 +195,8 @@ export class BasicRenderPipeline {
     }
 
     transparentQueue.render(context, PipelineStage.Forward);
+    // Reset stencil
+    scene._maskManager.clearMask(context, PipelineStage.Forward);
 
     const postProcessManager = scene._postProcessManager;
     const cameraRenderTarget = camera.renderTarget;

packages/core/src/RenderPipeline/MaskManager.ts

@@ -1,8 +1,10 @@
 import { SpriteMask } from "../2d";
+import { SpriteMaskLayer } from "../enums/SpriteMaskLayer";
 import { RenderQueueType } from "../shader";
 import { DisorderedArray } from "../utils/DisorderedArray";
+import { RenderContext } from "./RenderContext";
 import { RenderQueue } from "./RenderQueue";
-import { SubRenderElement } from "./SubRenderElement";
+import { RenderQueueMaskType } from "./enums/RenderQueueMaskType";
 
 /**
  * @internal
@@ -19,29 +21,74 @@ export class MaskManager {
     return (MaskManager._maskDecrementRenderQueue ||= new RenderQueue(RenderQueueType.Transparent));
   }
 
-  allSpriteMasks = new DisorderedArray<SpriteMask>();
-  preMaskLayer = 0;
+  private _allSpriteMasks = new DisorderedArray<SpriteMask>();
+  private _preMaskLayer = SpriteMaskLayer.Nothing;
 
   addSpriteMask(mask: SpriteMask): void {
-    mask._maskIndex = this.allSpriteMasks.length;
-    this.allSpriteMasks.add(mask);
+    mask._maskIndex = this._allSpriteMasks.length;
+    this._allSpriteMasks.add(mask);
   }
 
   removeSpriteMask(mask: SpriteMask): void {
-    const replaced = this.allSpriteMasks.deleteByIndex(mask._maskIndex);
+    const replaced = this._allSpriteMasks.deleteByIndex(mask._maskIndex);
     replaced && (replaced._maskIndex = mask._maskIndex);
     mask._maskIndex = -1;
   }
 
-  buildMaskRenderElement(
-    element: SubRenderElement,
+  drawMask(context: RenderContext, pipelineStageTagValue: string, maskLayer: SpriteMaskLayer): void {
+    const incrementMaskQueue = MaskManager.getMaskIncrementRenderQueue();
+    incrementMaskQueue.clear();
+    const decrementMaskQueue = MaskManager.getMaskDecrementRenderQueue();
+    decrementMaskQueue.clear();
+
+    this._buildMaskRenderElement(maskLayer, incrementMaskQueue, decrementMaskQueue);
+
+    const engine = context.camera.engine;
+    const batcherManager = engine._batcherManager;
+    incrementMaskQueue.batch(batcherManager);
+    batcherManager.uploadBuffer();
+    incrementMaskQueue.render(context, pipelineStageTagValue, RenderQueueMaskType.Increment);
+    decrementMaskQueue.batch(batcherManager);
+    batcherManager.uploadBuffer();
+    decrementMaskQueue.render(context, pipelineStageTagValue, RenderQueueMaskType.Decrement);
+  }
+
+  clearMask(context: RenderContext, pipelineStageTagValue: string): void {
+    const preMaskLayer = this._preMaskLayer;
+    if (preMaskLayer !== SpriteMaskLayer.Nothing) {
+      const decrementMaskQueue = MaskManager.getMaskDecrementRenderQueue();
+      decrementMaskQueue.clear();
+
+      const masks = this._allSpriteMasks;
+      const maskElements = masks._elements;
+      for (let i = 0, n = masks.length; i < n; i++) {
+        const mask = maskElements[i];
+        mask.influenceLayers & preMaskLayer && decrementMaskQueue.pushRenderElement(mask._renderElement);
+      }
+
+      const batcherManager = context.camera.engine._batcherManager;
+      decrementMaskQueue.batch(batcherManager);
+      batcherManager.uploadBuffer();
+      decrementMaskQueue.render(context, pipelineStageTagValue, RenderQueueMaskType.Decrement);
+
+      this._preMaskLayer = SpriteMaskLayer.Nothing;
+    }
+  }
+
+  destroy(): void {
+    const allSpriteMasks = this._allSpriteMasks;
+    allSpriteMasks.length = 0;
+    allSpriteMasks.garbageCollection();
+  }
+
+  private _buildMaskRenderElement(
+    curMaskLayer: SpriteMaskLayer,
     incrementMaskQueue: RenderQueue,
     decrementMaskQueue: RenderQueue
   ): void {
-    const preMaskLayer = this.preMaskLayer;
-    const curMaskLayer = element.component._maskLayer;
+    const preMaskLayer = this._preMaskLayer;
     if (preMaskLayer !== curMaskLayer) {
-      const masks = this.allSpriteMasks;
+      const masks = this._allSpriteMasks;
       const commonLayer = preMaskLayer & curMaskLayer;
       const reduceLayer = preMaskLayer & ~curMaskLayer;
       const maskElements = masks._elements;
@@ -59,11 +106,7 @@ export class MaskManager {
           decrementMaskQueue.pushRenderElement(mask._renderElement);
         }
       }
-      this.preMaskLayer = curMaskLayer;
+      this._preMaskLayer = curMaskLayer;
     }
   }
-
-  destroy(): void {
-    this.allSpriteMasks.length = 0;
-  }
 }