Refactor sprite mask system

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 { 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";
 
@@ -177,7 +177,7 @@
   constructor(entity: Entity) {
     super(entity);
     SimpleSpriteAssembler.resetData(this);
-    this.setMaterial(this._engine._spriteMaskDefaultMaterial);
+    this.setMaterial(this._engine._basicResources.spriteMaskDefaultMaterial);
     this.shaderData.setFloat(SpriteMask._alphaCutoffProperty, this._alphaCutoff);
     this._renderElement = new RenderElement();
     this._renderElement.addSubRenderElement(new SubRenderElement());
@@ -261,7 +261,7 @@
     const { _engine: engine } = this;
     // @todo: This question needs to be raised rather than hidden.
     if (material.destroyed) {
-      material = engine._spriteMaskDefaultMaterial;
+      material = engine._basicResources.spriteMaskDefaultMaterial;
     }
 
     // Update position

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

@@ -8,7 +8,6 @@
 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 @@
 
   set maskInteraction(value: SpriteMaskInteraction) {
     if (this._maskInteraction !== value) {
-      this._updateStencilState(this._maskInteraction, value);
       this._maskInteraction = value;
     }
   }
@@ -269,7 +267,7 @@
     super(entity);
     this.drawMode = SpriteDrawMode.Simple;
     this._dirtyUpdateFlag |= SpriteRendererUpdateFlags.Color;
-    this.setMaterial(this._engine._spriteDefaultMaterial);
+    this.setMaterial(this._engine._basicResources.spriteDefaultMaterial);
     this._onSpriteChange = this._onSpriteChange.bind(this);
     //@ts-ignore
     this._color._onValueChanged = this._onColorChanged.bind(this);
@@ -334,7 +332,7 @@
     }
     // @todo: This question needs to be raised rather than hidden.
     if (material.destroyed) {
-      material = this._engine._spriteDefaultMaterials[this._maskInteraction];
+      material = this._engine._basicResources.spriteDefaultMaterial;
     }
 
     // Update position
@@ -395,28 +393,6 @@
     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);
     }
   }
 
@@ -294,7 +292,7 @@ export class TextRenderer extends Renderer {
     const { engine } = this;
     this._font = engine._textDefaultFont;
     this._addResourceReferCount(this._font, 1);
-    this.setMaterial(engine._textDefaultMaterial);
+    this.setMaterial(engine._basicResources.textDefaultMaterial);
     //@ts-ignore
     this._color._onValueChanged = this._onColorChanged.bind(this);
   }
@@ -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/BasicResources.ts

@@ -1,4 +1,6 @@
+import { SpriteMaskInteraction } from "./2d";
 import { Engine } from "./Engine";
+import { RenderQueueMaskType } from "./RenderPipeline/enums/RenderQueueMaskType";
 import { ContentRestorer } from "./asset/ContentRestorer";
 import { Buffer } from "./graphic/Buffer";
 import { VertexElement } from "./graphic/VertexElement";
@@ -9,6 +11,14 @@
 import { Material } from "./material";
 import { ModelMesh } from "./mesh";
 import { Shader } from "./shader/Shader";
+import { BlendFactor } from "./shader/enums/BlendFactor";
+import { BlendOperation } from "./shader/enums/BlendOperation";
+import { ColorWriteMask } from "./shader/enums/ColorWriteMask";
+import { CompareFunction } from "./shader/enums/CompareFunction";
+import { CullMode } from "./shader/enums/CullMode";
+import { RenderQueueType } from "./shader/enums/RenderQueueType";
+import { RenderStateElementKey } from "./shader/enums/RenderStateElementKey";
+import { StencilOperation } from "./shader/enums/StencilOperation";
 import { Texture, Texture2D, TextureCube, TextureCubeFace } from "./texture";
 import { Texture2DArray } from "./texture/Texture2DArray";
 import { TextureFormat } from "./texture/enums/TextureFormat";
@@ -17,6 +27,75 @@
  * @internal
  */
 export class BasicResources {
+  private static _maskReadInsideRenderStates: RenderStateElementMap = null;
+  private static _maskReadOutsideRenderStates: RenderStateElementMap = null;
+  private static _maskWriteIncrementRenderStates: RenderStateElementMap = null;
+  private static _maskWriteDecrementRenderStates: RenderStateElementMap = null;
+
+  static getMaskInteractionRenderStates(maskInteraction: SpriteMaskInteraction): RenderStateElementMap {
+    const visibleInsideMask = maskInteraction === SpriteMaskInteraction.VisibleInsideMask;
+    let renderStates: RenderStateElementMap;
+    let compareFunction: CompareFunction;
+
+    if (visibleInsideMask) {
+      renderStates = BasicResources._maskReadInsideRenderStates;
+      if (renderStates) {
+        return renderStates;
+      }
+      BasicResources._maskReadInsideRenderStates = renderStates = <RenderStateElementMap>{};
+      compareFunction = CompareFunction.LessEqual;
+    } else {
+      renderStates = BasicResources._maskReadOutsideRenderStates;
+      if (renderStates) {
+        return renderStates;
+      }
+      BasicResources._maskReadOutsideRenderStates = renderStates = <RenderStateElementMap>{};
+      compareFunction = CompareFunction.Greater;
+    }
+
+    renderStates[RenderStateElementKey.StencilStateEnabled] = true;
+    renderStates[RenderStateElementKey.StencilStateWriteMask] = 0x00;
+    renderStates[RenderStateElementKey.StencilStateReferenceValue] = 1;
+    renderStates[RenderStateElementKey.StencilStateCompareFunctionFront] = compareFunction;
+    renderStates[RenderStateElementKey.StencilStateCompareFunctionBack] = compareFunction;
+
+    return renderStates;
+  }
+
+  static getMaskTypeRenderStates(maskType: RenderQueueMaskType): RenderStateElementMap {
+    const isIncrement = maskType === RenderQueueMaskType.Increment;
+    let renderStates: RenderStateElementMap;
+    let passOperation: StencilOperation;
+
+    if (isIncrement) {
+      renderStates = BasicResources._maskWriteIncrementRenderStates;
+      if (renderStates) {
+        return renderStates;
+      }
+      BasicResources._maskWriteIncrementRenderStates = renderStates = <RenderStateElementMap>{};
+      passOperation = StencilOperation.IncrementSaturate;
+    } else {
+      renderStates = BasicResources._maskWriteDecrementRenderStates;
+      if (renderStates) {
+        return renderStates;
+      }
+      BasicResources._maskWriteDecrementRenderStates = renderStates = <RenderStateElementMap>{};
+      passOperation = StencilOperation.DecrementSaturate;
+    }
+
+    renderStates[RenderStateElementKey.StencilStateEnabled] = true;
+    renderStates[RenderStateElementKey.StencilStatePassOperationFront] = passOperation;
+    renderStates[RenderStateElementKey.StencilStatePassOperationBack] = passOperation;
+    const failStencilOperation = StencilOperation.Keep;
+    renderStates[RenderStateElementKey.StencilStateFailOperationFront] = failStencilOperation;
+    renderStates[RenderStateElementKey.StencilStateFailOperationBack] = failStencilOperation;
+    renderStates[RenderStateElementKey.StencilStateZFailOperationFront] = failStencilOperation;
+    renderStates[RenderStateElementKey.StencilStateZFailOperationBack] = failStencilOperation;
+    renderStates[RenderStateElementKey.BlendStateColorWriteMask0] = ColorWriteMask.None;
+
+    return renderStates;
+  }
+
   /**
    * Use triangle to blit texture, ref: https://michaldrobot.com/2014/04/01/gcn-execution-patterns-in-full-screen-passes/ .
    */
@@ -29,6 +108,10 @@
   readonly whiteTexture2DArray: Texture2DArray;
   readonly uintWhiteTexture2D: Texture2D;
 
+  readonly spriteDefaultMaterial: Material;
+  readonly textDefaultMaterial: Material;
+  readonly spriteMaskDefaultMaterial: Material;
+
   constructor(engine: Engine) {
     // prettier-ignore
     const vertices = new Float32Array([
@@ -74,6 +157,10 @@
         whitePixel32
       );
     }
+
+    this.spriteDefaultMaterial = this._create2DMaterial(engine, Shader.find("Sprite"));
+    this.textDefaultMaterial = this._create2DMaterial(engine, Shader.find("Text"));
+    this.spriteMaskDefaultMaterial = this._createSpriteMaskMaterial(engine);
   }
 
   private _createBlitMesh(engine: Engine, vertices: Float32Array): ModelMesh {
@@ -140,10 +227,38 @@
     );
     return texture as T;
   }
+
+  private _create2DMaterial(engine: Engine, shader: Shader): Material {
+    const material = new Material(engine, shader);
+    const renderState = material.renderState;
+    const target = renderState.blendState.targetBlendState;
+    target.enabled = true;
+    target.sourceColorBlendFactor = BlendFactor.SourceAlpha;
+    target.destinationColorBlendFactor = BlendFactor.OneMinusSourceAlpha;
+    target.sourceAlphaBlendFactor = BlendFactor.One;
+    target.destinationAlphaBlendFactor = BlendFactor.OneMinusSourceAlpha;
+    target.colorBlendOperation = target.alphaBlendOperation = BlendOperation.Add;
+    renderState.depthState.writeEnabled = false;
+    renderState.rasterState.cullMode = CullMode.Off;
+    renderState.renderQueueType = RenderQueueType.Transparent;
+    material.isGCIgnored = true;
+    return material;
+  }
+
+  private _createSpriteMaskMaterial(engine: Engine): Material {
+    const material = new Material(engine, Shader.find("SpriteMask"));
+    const renderState = material.renderState;
+    renderState.rasterState.cullMode = CullMode.Off;
+    renderState.depthState.enabled = false;
+    material.isGCIgnored = true;
+    return material;
+  }
 }
 
 enum TextureType {
   Texture2D,
   TextureCube,
   Texture2DArray
 }
+
+type RenderStateElementMap = Record<RenderStateElementKey, number | boolean>;