Update e2e base image and correct threshold (#2775)

* refactor: update e2e base image and correct threshold
2026-06-09 01:03:09 +08:00 · 2025-08-06 15:49:53 +08:00
parent 2d0ecc3e77
commit 2e915a01d6
24 changed files with 169 additions and 102 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -85,6 +85,7 @@ jobs:
      matrix:
        node-version: [22.x]
        shard: [1/4, 2/4, 3/4, 4/4]
+      fail-fast: false

    steps:
      - uses: actions/checkout@v3
--- a/e2e/config.ts
+++ b/e2e/config.ts
@@ -3,84 +3,100 @@ export const E2E_CONFIG = {
    additive: {
      category: "Animator",
      caseFileName: "animator-additive",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    blendShape: {
      category: "Animator",
      caseFileName: "animator-blendShape",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.01
    },
    blendShapeQuantization: {
      category: "Animator",
      caseFileName: "animator-blendShape-quantization",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.05
    },
    crossfade: {
      category: "Animator",
      caseFileName: "animator-crossfade",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    customAnimationClip: {
      category: "Animator",
      caseFileName: "animator-customAnimationClip",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    customBlendShape: {
      category: "Animator",
      caseFileName: "animator-customBlendShape",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    multiSubMeshBlendShape: {
      category: "Animator",
      caseFileName: "animator-multiSubMeshBlendShape",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    event: {
      category: "Animator",
      caseFileName: "animator-event",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.00146
    },
    play: {
      category: "Animator",
      caseFileName: "animator-play",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    playBackWards: {
      category: "Animator",
      caseFileName: "animator-play-backwards",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    playBeforeActive: {
      category: "Animator",
      caseFileName: "animator-play-beforeActive",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    reuse: {
      category: "Animator",
      caseFileName: "animator-reuse",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    stateMachineScript: {
      category: "Animator",
      caseFileName: "animator-stateMachineScript",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    stateMachine: {
      category: "Animator",
      caseFileName: "animator-stateMachine",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    }
  },
  GLTF: {
    meshopt: {
      category: "GLTF",
      caseFileName: "gltf-meshopt",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.055
    },
    blendShape: {
      category: "GLTF",
      caseFileName: "gltf-blendshape",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.05
    }
  },

@@ -88,253 +104,299 @@ export const E2E_CONFIG = {
    blendMode: {
      category: "Material",
      caseFileName: "material-blendMode",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.02
    },
    "blinn-phong": {
      category: "Material",
      caseFileName: "material-blinn-phong",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.36
    },
    "pbr-clearcoat": {
      category: "Material",
      caseFileName: "material-pbr-clearcoat",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.12
    },
    "pbr-specular": {
      category: "Material",
      caseFileName: "material-pbr-specular",
-      threshold: 0
+      threshold: 0,
+      diffPercentage: 0.055
    },
    pbr: {
      category: "Material",
      caseFileName: "material-pbr",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.004
    },
    shaderLab: {
      category: "Material",
      caseFileName: "material-shaderLab",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    shaderLabMRT: {
      category: "Material",
      caseFileName: "shaderLab-mrt",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    shaderReplacement: {
      category: "Material",
      caseFileName: "material-shaderReplacement",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.049
    },
    unlit: {
      category: "Material",
      caseFileName: "material-unlit",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.033
    },
    "shaderLab-renderState": {
      category: "Material",
      caseFileName: "shaderLab-renderState",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    LUT: {
      category: "Material",
      caseFileName: "material-LUT",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    }
  },
  Texture: {
    sRGB: {
      category: "Texture",
      caseFileName: "texture-sRGB-KTX2",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.072
    },
    R8G8: {
      category: "Texture",
      caseFileName: "texture-R8G8",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    KTX2HDR: {
      category: "Texture",
      caseFileName: "texture-hdr-ktx2",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    }
  },
  Shadow: {
    basic: {
      category: "Shadow",
      caseFileName: "shadow-basic",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.008
    },
    transparent: {
      category: "Shadow",
      caseFileName: "shadow-transparent",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.044
    }
  },
  Primitive: {
    capsule: {
      category: "Primitive",
      caseFileName: "primitive-capsule",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.0016
    },
    cone: {
      category: "Primitive",
      caseFileName: "primitive-cone",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.0029
    },
    cuboid: {
      category: "Primitive",
      caseFileName: "primitive-cuboid",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.0016
    },
    cylinder: {
      category: "Primitive",
      caseFileName: "primitive-cylinder",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.0036
    },
    plane: {
      category: "Primitive",
      caseFileName: "primitive-plane",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.0016
    },
    sphere: {
      category: "Primitive",
      caseFileName: "primitive-sphere",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.0058
    },
    torus: {
      category: "Primitive",
      caseFileName: "primitive-torus",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    }
  },
  Camera: {
    opaqueTexture: {
      category: "Camera",
      caseFileName: "camera-opaque-texture",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    fxaa: {
      category: "Camera",
      caseFileName: "camera-fxaa",
-      threshold: 0.01
+      threshold: 0,
+      diffPercentage: 0.161
    }
  },
  Physics: {
    "physx-collision": {
      category: "Physics",
      caseFileName: "physx-collision",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    "LitePhysics Collision Group": {
      category: "Physics",
      caseFileName: "litePhysics-collision-group",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    "PhysXPhysics Collision Group": {
      category: "Physics",
      caseFileName: "physx-collision-group",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    "PhysXPhysics Custom Url": {
      category: "Physics",
      caseFileName: "physx-customUrl",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    }
  },
  Particle: {
    particleDream: {
      category: "Particle",
      caseFileName: "particleRenderer-dream",
-      threshold: 0.1
+      threshold: 0.005,
+      diffPercentage: 0.015
    },
    particleFire: {
      category: "Particle",
      caseFileName: "particleRenderer-fire",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.064
    },
    forceOverLifetime: {
      category: "Particle",
      caseFileName: "particleRenderer-force",
-      threshold: 0.1
+      threshold: 0.005,
+      diffPercentage: 0.0054
    },
    textureSheetAnimation: {
      category: "Particle",
      caseFileName: "particleRenderer-textureSheetAnimation",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    particleShapeMesh: {
      category: "Particle",
      caseFileName: "particleRenderer-shape-mesh",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.0073
    },
    particleEmissive: {
      category: "Particle",
      caseFileName: "particleRenderer-emissive",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    }
  },
  PostProcess: {
    HDRBloomACES: {
      category: "PostProcess",
      caseFileName: "postProcess-HDR-bloom-ACES",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.148
    },
    HDRBloomNeutral: {
      category: "PostProcess",
      caseFileName: "postProcess-HDR-bloom-neutral",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.066
    },
    LDRBloomNeutral: {
      category: "PostProcess",
      caseFileName: "postProcess-LDR-bloom-neutral",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.097
    },
    customPass: {
      category: "PostProcess",
      caseFileName: "postProcess-customPass",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.025
    }
  },
  SpriteMask: {
    CustomStencil: {
      category: "SpriteMask",
      caseFileName: "spriteMask-customStencil",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0.0024
    }
  },
  Text: {
    TypedText: {
      category: "Text",
      caseFileName: "text-typed",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    }
  },
  Other: {
    ProjectLoader: {
      category: "Advance",
      caseFileName: "project-loader",
-      threshold: 0.1
+      threshold: 0.01,
+      diffPercentage: 0.0016
    },
    MultiSceneClear: {
      category: "Advance",
      caseFileName: "multi-scene-clear",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    MultiSceneNoClear: {
      category: "Advance",
      caseFileName: "multi-scene-no-clear",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },
    MultiCameraNoClear: {
      category: "Advance",
      caseFileName: "multi-camera-no-clear",
-      threshold: 0.1
+      threshold: 0,
+      diffPercentage: 0
    },

    CanvasTransparency: {
      category: "Advance",
      caseFileName: "canvas-transparency",
-      threshold: 0.01
+      threshold: 0,
+      diffPercentage: 0.044
    }
  }
 };
--- a/e2e/fixtures/originImage/Advance_canvas-transparency.jpg
+++ b/e2e/fixtures/originImage/Advance_canvas-transparency.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:54db7f7bd9fc93db317984b98a2bc42f6540141d304d50d27998b38cf092bc34
-size 882432
+oid sha256:879d9050c0f57d91b7a9275ee6c6260a977a706225c80da868f38cc3dfda0a3d
+size 882390
--- a/e2e/fixtures/originImage/Advance_project-loader.jpg
+++ b/e2e/fixtures/originImage/Advance_project-loader.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6f022e368274dfd08527cf7b97a2d9996824f7487839d49f968ee5ddab0dbae1
-size 496249
+oid sha256:b7bbf3c2ece5405ed366db8eb17f5d6eb2c5cd8e1cb52d37b609b1d720e2b658
+size 496189
--- a/e2e/fixtures/originImage/Animator_animator-additive.jpg
+++ b/e2e/fixtures/originImage/Animator_animator-additive.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6253add68af3212718ce3618d5126eef33f97cc803f0938a341ea05bbb039d77
-size 46507
+oid sha256:1adb816d9ea9066fe1fc1ecd401efb55b7ab148b5f09ff9f9970977f3d982b55
+size 46514
--- a/e2e/fixtures/originImage/Animator_animator-crossfade.jpg
+++ b/e2e/fixtures/originImage/Animator_animator-crossfade.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:982212568253b105eb0b7dbfc68df4d502ad012e07243091e1a3cabf00fa5010
-size 45922
+oid sha256:ce0fa7c24059a11e2c9dcbfe1cbfb96d47c4a61fc33c9f2aee5a7210a447ed28
+size 45900
--- a/e2e/fixtures/originImage/Animator_animator-event.jpg
+++ b/e2e/fixtures/originImage/Animator_animator-event.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f0a709fa4ccacfd8364c091a48288731af221e784c64844cb746bd9f1fc04f0c
-size 45044
+oid sha256:af2293ba1a6071a70487e166933f2a205a2c3933dd43d821221c232346f2299c
+size 45053
--- a/e2e/fixtures/originImage/Animator_animator-multiSubMeshBlendShape.jpg
+++ b/e2e/fixtures/originImage/Animator_animator-multiSubMeshBlendShape.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:45e9f5d073e8eaa2ec4e0b1f2a92a52e3d9531d358b28546be4a421921a498c3
+oid sha256:9d3cc43b9c0d057cb49f168ad2219e2aebea1e9a662a11b47179963f042e4fce
 size 82692
--- a/e2e/fixtures/originImage/Animator_animator-play-backwards.jpg
+++ b/e2e/fixtures/originImage/Animator_animator-play-backwards.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5ed22ce5a1d500941352239ac22816a7907445b1142b941f6ae1d6ea16b21f42
-size 45673
+oid sha256:238ac9c20e5a17e257a8c56e55a05d6b6edb06eea8ed48cc90ce808e6d87a4c9
+size 45685
--- a/e2e/fixtures/originImage/Animator_animator-play-beforeActive.jpg
+++ b/e2e/fixtures/originImage/Animator_animator-play-beforeActive.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8d49b3be67e1601574c57633a94b3fd7be9d73a36b6a123703e943af374feeb3
-size 48089
+oid sha256:438b20674478756bf15f33bdff799ca878f1900c8eeee5236b85a420e1fee2c4
+size 48112
--- a/e2e/fixtures/originImage/Animator_animator-play.jpg
+++ b/e2e/fixtures/originImage/Animator_animator-play.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:552818f5d489814854437b53d32ba62edd693dad540eb26e1c41a564e01c4455
-size 46861
+oid sha256:9492e07bb2e64d2c33a508fc6f4eec96e9a363ef28bd5c5c328477932bfafb67
+size 46838
--- a/e2e/fixtures/originImage/Animator_animator-reuse.jpg
+++ b/e2e/fixtures/originImage/Animator_animator-reuse.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e389aec60c43e6e125f4d3b254f8b91987230f1fd034fee37e3f78be47b7f046
+oid sha256:519a3a14c054f7d172649f0b44c6c9e81120506dcbf3a52574c30e33a5d937be
 size 38535
--- a/e2e/fixtures/originImage/Animator_animator-stateMachine.jpg
+++ b/e2e/fixtures/originImage/Animator_animator-stateMachine.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:245162bd6d96dad5513a80db889cceaa197008853074b93f6648c7a82f11c1c4
-size 42173
+oid sha256:3a90fbf6ad074b7e240920f9d7963763d28de66657a5bfed8c97845c87c5bc1a
+size 42167
--- a/e2e/fixtures/originImage/Animator_animator-stateMachineScript.jpg
+++ b/e2e/fixtures/originImage/Animator_animator-stateMachineScript.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3597d7bbb558cf982e309e40d82980989b883ee842e22d59dc07bf94af2d261c
-size 42449
+oid sha256:36ef11cb358983ecf7e757a2f1d786601f9d7d1729d68fc3aa68f35c8f2ab2c8
+size 42477
--- a/e2e/fixtures/originImage/Camera_camera-fxaa.jpg
+++ b/e2e/fixtures/originImage/Camera_camera-fxaa.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:641a632da6d3f7748503687c12987fb5bcc13f0f92e76c5a069b0a377de50759
-size 383586
+oid sha256:9b9b186c627efa47417a578dff600c8d168c4e0b960b3b67dec46bf732ba41cf
+size 383593
--- a/e2e/fixtures/originImage/Camera_camera-opaque-texture.jpg
+++ b/e2e/fixtures/originImage/Camera_camera-opaque-texture.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:85512297e487f83f0839a32b97f0bc0d1eafe68045264bfad8ebe50c6f77e855
+oid sha256:117630eb1ee3936ff4f190123995c00c06d158d698073d11ad3f1ab1d7a7deb8
 size 47538
--- a/e2e/fixtures/originImage/GLTF_gltf-meshopt.jpg
+++ b/e2e/fixtures/originImage/GLTF_gltf-meshopt.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:13b4e7b6ff440912dce32f50d235e094ef7d1e2cbcebfe4bc234d8987fe5f3ab
-size 116017
+oid sha256:8a3f699af80a6343be924981f3a6684e0efbac60d4d27a083d9cba7ff6f49a45
+size 115980
--- a/e2e/fixtures/originImage/Material_material-pbr-clearcoat.jpg
+++ b/e2e/fixtures/originImage/Material_material-pbr-clearcoat.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8975e1d607a506e46e3fd93cb290d59ddb9473c4b0f5f4b0405adc15b7429d32
-size 297609
+oid sha256:87be5b88daae25a9200b0653f533ed3252dc6a10847533db4a2a88132bfad060
+size 297653
--- a/e2e/fixtures/originImage/Material_material-pbr-specular.jpg
+++ b/e2e/fixtures/originImage/Material_material-pbr-specular.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9efb728013d4668b491454b4faa08fcf69831612d8fcd0d55476e479d064e7aa
-size 286733
+oid sha256:84efb5e90b9b86ba4fb07c9044f6cb3f33454c7e384d026e4d64e9e6dfa8cd33
+size 286758
--- a/e2e/fixtures/originImage/Particle_particleRenderer-fire.jpg
+++ b/e2e/fixtures/originImage/Particle_particleRenderer-fire.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a7491f48c3ff3060ba5d17ec17e483933835f28cd42e323cea11cb0544cf0afe
-size 129913
+oid sha256:189c50cb8cfad8631d4f51c9913a1e366d63710f626afd4891446eba4d232ac3
+size 129908
--- a/e2e/fixtures/originImage/Shadow_shadow-basic.jpg
+++ b/e2e/fixtures/originImage/Shadow_shadow-basic.jpg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e393bf1d8085c3e34f4497730456d999d369b2a34844c3c4e27bdb9b4c36e4c2
-size 114914
+oid sha256:a534db421cf83c1dda187021d057bcea64edeaf82381c584a6dfd996c6b418c0
+size 114871
--- a/e2e/fixtures/originImage/Texture_texture-hdr-ktx2.jpg
+++ b/e2e/fixtures/originImage/Texture_texture-hdr-ktx2.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9057f12c0599af0c832846535dc80ce96586e4b555f5d99a354e45751646457c
+size 42855
--- a/e2e/tests/index.spec.ts
+++ b/e2e/tests/index.spec.ts
@@ -10,11 +10,12 @@ function createTestsForCategory(categoryName: string, categoryConfig: CategoryCo
  test.describe(categoryName, () => {
    Object.entries(categoryConfig).forEach(([caseName, config]: [string, TestCaseConfig]) => {
      test(caseName, async ({ page }) => {
-        const { category, caseFileName, threshold } = config;
+        const { category, caseFileName, threshold, diffPercentage } = config;
        await screenshotWithThreshold(page, {
          category,
          name: caseFileName,
-          threshold
+          threshold,
+          diffPercentage
        });
      });
    });
--- a/e2e/utils/screenshot.ts
+++ b/e2e/utils/screenshot.ts
@@ -6,10 +6,11 @@ export interface ScreenshotOptions {
  category: string;
  name: string;
  threshold?: number;
+  diffPercentage?: number;
 }

 export async function screenshotWithThreshold(page: Page, options: ScreenshotOptions) {
-  const { category, name, threshold = 0.1 } = options;
+  const { category, name, threshold = 0, diffPercentage = 0 } = options;
  const imageName = `${category}_${name}.jpg`;
  const testId = `${category}_${name}`;
  const startTime = Date.now();
@@ -69,9 +70,8 @@ export async function screenshotWithThreshold(page: Page, options: ScreenshotOpt
    threshold,
    antialiasing: true
  });
-
  //@ts-ignore
-  if (result.match === false && result.diffPercentage <= 0.1) {
+  if (result.match === false && result.diffPercentage <= diffPercentage) {
    //@ts-ignore
    result.match = true;
  }