refactor(mask): add e2d

e2e/case/spriteMask-customStencil.ts

@@ -0,0 +1,178 @@
+/**
+ * @title SpriteMaskCustomStencil
+ * @category SpriteMask
+ */
+
+import {
+  AssetType,
+  Camera,
+  CompareFunction,
+  Layer,
+  Script,
+  Sprite,
+  SpriteMask,
+  SpriteMaskInteraction,
+  SpriteRenderer,
+  StencilOperation,
+  Texture2D,
+  Vector3,
+  WebGLEngine
+} from "@galacean/engine";
+import { initScreenshot, updateForE2E } from "./.mockForE2E";
+
+// Create engine
+WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
+  engine.canvas.resizeByClientSize();
+
+  // Create root entity
+  const rootEntity = engine.sceneManager.activeScene.createRootEntity();
+
+  // Create camera
+  const cameraEntity = rootEntity.createChild("Camera");
+  cameraEntity.transform.setPosition(0, 0, 50);
+  const camera = cameraEntity.addComponent(Camera);
+  camera.cullingMask = Layer.Layer0;
+
+  // Create sprite and mask
+  engine.resourceManager
+    .load([
+      {
+        // Sprite texture
+        url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*rgNGR4Vb7lQAAAAAAAAAAAAAARQnAQ",
+        type: AssetType.Texture2D
+      },
+      {
+        // Mask texture
+        url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*qyhFT5Un5AgAAAAAAAAAAAAAARQnAQ",
+        type: AssetType.Texture2D
+      }
+    ])
+    .then((textures: Texture2D[]) => {
+      const pos = new Vector3();
+      const scale = new Vector3();
+
+      // Create sprites.
+      const sprite = new Sprite(engine, textures[0]);
+      const maskSprite = new Sprite(engine, textures[1]);
+
+      // create a sprite renderer, and write stencil
+      pos.set(0, 0, 0);
+      scale.set(5, 5, 5);
+      const writeStencilSR = addSpriteRenderer(
+        pos,
+        scale,
+        sprite,
+        SpriteMaskInteraction.None,
+        Layer.Layer0,
+        Layer.Layer0,
+        0
+      );
+      const writeStencilMaterial = writeStencilSR.getInstanceMaterial();
+      const writeStencilState = writeStencilMaterial.renderState.stencilState;
+      writeStencilState.enabled = true;
+      writeStencilState.writeMask = 0xff;
+      writeStencilState.passOperationFront = StencilOperation.IncrementSaturate;
+
+      // create a sprite renderer, mask interaction is none, and read stencil
+      pos.set(3, 3, 0);
+      const readStencilSR = addSpriteRenderer(
+        pos,
+        scale,
+        sprite,
+        SpriteMaskInteraction.None,
+        Layer.Layer0,
+        Layer.Layer0,
+        1
+      );
+      readStencilSR.color.set(1, 0, 0, 1);
+      const readStencilMaterial = readStencilSR.getInstanceMaterial();
+      const readStencilState = readStencilMaterial.renderState.stencilState;
+      readStencilState.enabled = true;
+      readStencilState.referenceValue = 1;
+      readStencilState.compareFunctionFront = CompareFunction.LessEqual;
+      readStencilState.compareFunctionBack = CompareFunction.LessEqual;
+
+      // create a sprite renderer, mask interaction is not none
+      pos.set(5, -3, 0);
+      const maskSR = addSpriteRenderer(
+        pos,
+        scale,
+        sprite,
+        SpriteMaskInteraction.VisibleOutsideMask,
+        Layer.Layer0,
+        Layer.Layer0,
+        2
+      );
+      maskSR.color.set(0, 1, 0, 1);
+
+      // create a sprite mask
+      pos.set(20, 0, 0);
+      addMask(pos, maskSprite, Layer.Layer0, Layer.Layer0);
+
+      // create a sprite renderer, and read stencil
+      pos.set(20, 10, 0);
+      scale.set(3, 3, 3);
+      const readStencilSR2 = addSpriteRenderer(
+        pos,
+        scale,
+        sprite,
+        SpriteMaskInteraction.None,
+        Layer.Layer0,
+        Layer.Layer0,
+        4
+      );
+      readStencilSR2.color.set(1, 0.5, 0.8, 1);
+      const readStencilMaterial2 = readStencilSR2.getInstanceMaterial();
+      const readStencilState2 = readStencilMaterial2.renderState.stencilState;
+      readStencilState2.enabled = true;
+      readStencilState2.referenceValue = 1;
+      readStencilState2.compareFunctionFront = CompareFunction.Greater;
+      readStencilState2.compareFunctionBack = CompareFunction.Greater;
+
+      updateForE2E(engine, 100, 100);
+      initScreenshot(engine, camera);
+    });
+
+  engine.run();
+
+  /**
+   * Add sprite renderer and set mask interaction and layer.
+   */
+  function addSpriteRenderer(
+    pos: Vector3,
+    scale: Vector3,
+    sprite: Sprite,
+    maskInteraction: SpriteMaskInteraction,
+    maskLayer: number,
+    layer: number,
+    priority: number
+  ): SpriteRenderer {
+    const entity = rootEntity.createChild("Sprite");
+    entity.layer = layer;
+    const renderer = entity.addComponent(SpriteRenderer);
+    const { transform } = entity;
+
+    transform.position = pos;
+    transform.scale = scale;
+    renderer.sprite = sprite;
+    renderer.maskInteraction = maskInteraction;
+    renderer.maskLayer = maskLayer;
+    renderer.priority = priority;
+
+    return renderer;
+  }
+
+  /**
+   * Add sprite mask and set influence layers, include mask animation script.
+   */
+  function addMask<T extends Script>(pos: Vector3, sprite: Sprite, layer: number, influenceLayers: number): void {
+    const entity = rootEntity.createChild(`Mask`);
+    entity.layer = layer;
+    const mask = entity.addComponent(SpriteMask);
+
+    // entity.addComponent(scriptType);
+    entity.transform.position = pos;
+    mask.sprite = sprite;
+    mask.influenceLayers = influenceLayers;
+  }
+});

e2e/config.ts

@@ -213,6 +213,13 @@ export const E2E_CONFIG = {
       threshold: 0.2
     }
   },
+  SpriteMask: {
+    CustomStencil: {
+      category: "SpriteMask",
+      caseFileName: "spriteMask-customStencil",
+      threshold: 0.3
+    }
+  },
   Text: {
     TypedText: {
       category: "Text",