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";
 
@@ -177,7 +177,7 @@ export class SpriteMask extends Renderer {
   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 @@ export class SpriteMask extends Renderer {
     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 { 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;
     }
   }
@@ -269,7 +267,7 @@ export class SpriteRenderer extends Renderer {
     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 @@ 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._basicResources.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);
     }
   }
 
@@ -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";
@@ -8,7 +10,17 @@ import { MeshTopology } from "./graphic/enums/MeshTopology";
 import { VertexElementFormat } from "./graphic/enums/VertexElementFormat";
 import { Material } from "./material";
 import { ModelMesh } from "./mesh";
+import {
+  BlendFactor,
+  BlendOperation,
+  ColorWriteMask,
+  CompareFunction,
+  CullMode,
+  RenderQueueType,
+  StencilOperation
+} from "./shader";
 import { Shader } from "./shader/Shader";
+import { RenderStateElementKey } from "./shader/enums/RenderStateElementKey";
 import { Texture, Texture2D, TextureCube, TextureCubeFace } from "./texture";
 import { Texture2DArray } from "./texture/Texture2DArray";
 import { TextureFormat } from "./texture/enums/TextureFormat";
@@ -17,6 +29,82 @@ import { TextureFormat } from "./texture/enums/TextureFormat";
  * @internal
  */
 export class BasicResources {
+  /** @internal */
+  static _maskReadInsideStencilStates: Record<number, number | boolean> = null;
+  /** @internal */
+  static _maskReadOutsideStencilStates: Record<number, number | boolean> = null;
+  /** @internal */
+  static _maskWriteIncrementStencilStates: Record<number, number | boolean> = null;
+  /** @internal */
+  static _maskWriteDecrementStencilStates: Record<number, number | boolean> = null;
+
+  /** @internal */
+  static _getMaskInteractionStencilStates(
+    maskInteraction: SpriteMaskInteraction
+  ): Record<number, number | boolean> | null {
+    const visibleInsideMask = maskInteraction === SpriteMaskInteraction.VisibleInsideMask;
+    let stencilStates: Record<number, number | boolean>;
+    let compareFunction: CompareFunction;
+
+    if (visibleInsideMask) {
+      stencilStates = BasicResources._maskReadInsideStencilStates;
+      if (stencilStates) {
+        return stencilStates;
+      }
+      BasicResources._maskReadInsideStencilStates = stencilStates = {};
+      compareFunction = CompareFunction.LessEqual;
+    } else {
+      stencilStates = BasicResources._maskReadOutsideStencilStates;
+      if (stencilStates) {
+        return stencilStates;
+      }
+      BasicResources._maskReadOutsideStencilStates = stencilStates = {};
+      compareFunction = CompareFunction.Greater;
+    }
+
+    stencilStates[RenderStateElementKey.StencilStateEnabled] = true;
+    stencilStates[RenderStateElementKey.StencilStateWriteMask] = 0x00;
+    stencilStates[RenderStateElementKey.StencilStateReferenceValue] = 1;
+    stencilStates[RenderStateElementKey.StencilStateCompareFunctionFront] = compareFunction;
+    stencilStates[RenderStateElementKey.StencilStateCompareFunctionBack] = compareFunction;
+
+    return stencilStates;
+  }
+
+  /** @internal */
+  static _getMaskTypeStencilStates(maskType: RenderQueueMaskType): Record<number, number | boolean> | null {
+    const isIncrement = maskType === RenderQueueMaskType.Increment;
+    let stencilStates: Record<number, number | boolean>;
+    let passOperation: StencilOperation;
+
+    if (isIncrement) {
+      stencilStates = BasicResources._maskWriteIncrementStencilStates;
+      if (stencilStates) {
+        return stencilStates;
+      }
+      BasicResources._maskWriteIncrementStencilStates = stencilStates = {};
+      passOperation = StencilOperation.IncrementSaturate;
+    } else {
+      stencilStates = BasicResources._maskWriteDecrementStencilStates;
+      if (stencilStates) {
+        return stencilStates;
+      }
+      BasicResources._maskWriteDecrementStencilStates = stencilStates = {};
+      passOperation = StencilOperation.DecrementSaturate;
+    }
+
+    stencilStates[RenderStateElementKey.StencilStateEnabled] = true;
+    stencilStates[RenderStateElementKey.StencilStatePassOperationFront] = passOperation;
+    stencilStates[RenderStateElementKey.StencilStatePassOperationBack] = passOperation;
+    const failStencilOperation = StencilOperation.Keep;
+    stencilStates[RenderStateElementKey.StencilStateFailOperationFront] = failStencilOperation;
+    stencilStates[RenderStateElementKey.StencilStateFailOperationBack] = failStencilOperation;
+    stencilStates[RenderStateElementKey.StencilStateZFailOperationFront] = failStencilOperation;
+    stencilStates[RenderStateElementKey.StencilStateZFailOperationBack] = failStencilOperation;
+
+    return stencilStates;
+  }
+
   /**
    * Use triangle to blit texture, ref: https://michaldrobot.com/2014/04/01/gcn-execution-patterns-in-full-screen-passes/ .
    */
@@ -29,6 +117,10 @@ export class BasicResources {
   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 +166,10 @@ export class BasicResources {
         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,6 +236,33 @@ export class BasicResources {
     );
     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.blendState.targetBlendState.colorWriteMask = ColorWriteMask.None;
+    renderState.rasterState.cullMode = CullMode.Off;
+    renderState.depthState.enabled = false;
+    material.isGCIgnored = true;
+    return material;
+  }
 }
 
 enum TextureType {

packages/core/src/Camera.ts

@@ -4,6 +4,7 @@ import { Component } from "./Component";
 import { DependentMode, dependentComponents } from "./ComponentsDependencies";
 import { Entity } from "./Entity";
 import { Layer } from "./Layer";
+import { PipelineStage } from "./RenderPipeline";
 import { BasicRenderPipeline } from "./RenderPipeline/BasicRenderPipeline";
 import { PipelineUtils } from "./RenderPipeline/PipelineUtils";
 import { Transform } from "./Transform";
@@ -16,6 +17,7 @@ import { DepthTextureMode } from "./enums/DepthTextureMode";
 import { Downsampling } from "./enums/Downsampling";
 import { MSAASamples } from "./enums/MSAASamples";
 import { ReplacementFailureStrategy } from "./enums/ReplacementFailureStrategy";
+import { SpriteMaskLayer } from "./enums/SpriteMaskLayer";
 import { Shader } from "./shader/Shader";
 import { ShaderData } from "./shader/ShaderData";
 import { ShaderMacroCollection } from "./shader/ShaderMacroCollection";
@@ -603,6 +605,17 @@ export class Camera extends Component {
     const context = engine._renderContext;
     const virtualCamera = this._virtualCamera;
 
+    const lastCamera = context.camera;
+    if (lastCamera) {
+      const scene = lastCamera.scene;
+      if (this.clearFlags & CameraClearFlags.Stencil) {
+        scene._maskManager._preMaskLayer = SpriteMaskLayer.Nothing;
+      } else {
+        scene._maskManager.clearMask(context, PipelineStage.Forward);
+      }
+      scene._stencilManager.clearStencil();
+    }
+
     const transform = this.entity.transform;
     Matrix.multiply(this.projectionMatrix, this.viewMatrix, virtualCamera.viewProjectionMatrix);
     virtualCamera.position.copyFrom(transform.worldPosition);