Merge origin/main into origin/dev

CHANGELOG.md

@@ -7,6 +7,12 @@
 - 主版本号：含有破坏性更新和新特性，不在发布周期内。
 
 ---
+## 1.1.2
+
+`2023-12-19`
+
+- Fix: Render bugs caused by diff algorithm and pre-comp. [#53](https://github.com/galacean/effects-runtime/pull/53) @RGCHN
+
 ## 1.1.1
 
 `2023-12-14`

README-zh_CN.md

@@ -12,6 +12,11 @@
 
 ![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
 
+<h3>所见 · 即所得</h3>
+<img height="320" src="https://mdn.alipayobjects.com/huamei_klifp9/afts/img/A*BrMIQqkmbKEAAAAAAAAAAAAADvV6AQ/original">
+<img height="320" src="https://mdn.alipayobjects.com/huamei_klifp9/afts/img/A*VHMAR6Vq_8wAAAAAAAAAAAAADvV6AQ/original">
+<img height="320" src="https://mdn.alipayobjects.com/huamei_klifp9/afts/img/A*UwMWT4uY6jsAAAAAAAAAAAAADvV6AQ/original">
+
 [github-issues-url]: https://github.com/galacean/effects-runtime/issues
 </div>
 

README.md

@@ -12,6 +12,11 @@ It can load and render cool animation effects, The APIs provided by effects-core
 
 ![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
 
+<h3>What you see is what you get</h3>
+<img height="320" src="https://mdn.alipayobjects.com/huamei_klifp9/afts/img/A*BrMIQqkmbKEAAAAAAAAAAAAADvV6AQ/original">
+<img height="320" src="https://mdn.alipayobjects.com/huamei_klifp9/afts/img/A*VHMAR6Vq_8wAAAAAAAAAAAAADvV6AQ/original">
+<img height="320" src="https://mdn.alipayobjects.com/huamei_klifp9/afts/img/A*UwMWT4uY6jsAAAAAAAAAAAAADvV6AQ/original">
+
 [github-issues-url]: https://github.com/galacean/effects-runtime/issues
 </div>
 

package.json

@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@commitlint/cli": "^13.2.1",
-    "@commitlint/config-conventional": "^13.2.0",
+    "@commitlint/config-conventional": "^18.4.3",
     "@manypkg/get-packages": "^2.2.0",
     "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-inject": "^5.0.5",
@@ -61,10 +61,10 @@
     "rollup-plugin-typescript2": "^0.34.1",
     "simple-git": "^3.19.1",
     "tslib": "^2.6.2",
-    "typedoc": "^0.25.3",
+    "typedoc": "^0.25.4",
     "typescript": "^5.2.2",
     "vite": "^4.4.9",
     "vite-plugin-externals": "^0.6.2",
-    "vite-tsconfig-paths": "^4.2.0"
+    "vite-tsconfig-paths": "^4.2.2"
   }
 }

packages/effects-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-core",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Galacean Effects runtime core for the web",
   "module": "./dist/index.mjs",
   "main": "./dist/index.js",

packages/effects-core/src/composition-source-manager.ts

@@ -39,7 +39,7 @@ export class CompositionSourceManager implements Disposable {
   imgUsage: Record<string, number[]>;
   textures: Texture[];
   jsonScene?: spec.JSONScene;
-  mask: number;
+  mask = 0;
   textureOptions: Record<string, any>[];
 
   constructor (
@@ -76,7 +76,6 @@ export class CompositionSourceManager implements Disposable {
     this.totalTime = totalTime ?? 0;
     this.imgUsage = imgUsage ?? {};
     this.textures = cachedTextures;
-    this.mask = 0;
     listOrder = 0;
     this.textureOptions = textureOptions;
     this.sourceContent = this.getContent(this.composition);
@@ -103,7 +102,7 @@ export class CompositionSourceManager implements Disposable {
 
   private assembleItems (composition: spec.Composition) {
     const items: any[] = [];
-    let mask = this.mask;
+    let mask = this.mask++;
 
     if (isNaN(mask)) {
       mask = 0;
@@ -131,13 +130,7 @@ export class CompositionSourceManager implements Disposable {
             renderContent.renderer = this.changeTex(renderContent.renderer);
 
             if (!renderContent.renderer.mask) {
-              const maskMode = renderContent.renderer.maskMode;
-
-              if (maskMode === spec.MaskMode.MASK) {
-                renderContent.renderer.mask = ++mask;
-              } else if (maskMode === spec.MaskMode.OBSCURED || maskMode === spec.MaskMode.REVERSE_OBSCURED) {
-                renderContent.renderer.mask = mask;
-              }
+              this.processMask(renderContent.renderer, this.mask);
             }
 
             const split = renderContent.splits && !renderContent.textureSheetAnimation && renderContent.splits[0];
@@ -185,18 +178,21 @@ export class CompositionSourceManager implements Disposable {
 
           // 处理预合成的渲染顺序
           if (option.type === spec.ItemType.composition) {
+            const maskRef = ++this.mask;
             const refId = (item.content as spec.CompositionContent).options.refId;
 
             if (!this.refCompositions.get(refId)) {
               throw new Error('Invalid Ref Composition id: ' + refId);
             }
+            const ref = this.getContent(this.refCompositions.get(refId)!);
+
             if (!this.refCompositionProps.has(refId)) {
-              this.refCompositionProps.set(refId, this.getContent(this.refCompositions.get(refId)!) as unknown as VFXItemProps);
+              this.refCompositionProps.set(refId, ref as unknown as VFXItemProps);
             }
-            const ref = this.refCompositionProps.get(refId)!;
 
             ref.items.forEach((item: Record<string, any>) => {
               item.listIndex = listOrder++;
+              this.processMask(item.content, maskRef);
             });
             option.items = ref.items;
 
@@ -240,6 +236,19 @@ export class CompositionSourceManager implements Disposable {
     }
   }
 
+  /**
+   * 处理蒙版和遮挡关系写入 stencil 的 ref 值
+   */
+  private processMask (renderer: Record<string, number>, maskRef: number) {
+    if (!renderer.mask) {
+      const maskMode: spec.MaskMode = renderer.maskMode;
+
+      if (maskMode !== spec.MaskMode.NONE) {
+        renderer.mask = maskRef;
+      }
+    }
+  }
+
   dispose (): void {
     this.textureOptions = [];
     this.textures = [];

packages/effects-core/src/plugins/sprite/sprite-mesh.ts

@@ -194,24 +194,20 @@ export class SpriteMesh {
     const uSizeStart = start + 4;
     const uQuatStart = start + 8;
     const uColorStart = start + 12;
-
-    if (!selfData.visible && !init) {
-      mainDataArray[uSizeStart + 2] = -1;
-
-      return;
-    }
-
-    const uColor = selfData.color || [mainDataArray[uColorStart], mainDataArray[uColorStart + 1], mainDataArray[uColorStart + 2], mainDataArray[uColorStart + 3]];
-
-    // if (selfData.startSize) {
-    //   selfData.transform.scaleBy(1 / selfData.startSize[0], 1 / selfData.startSize[1], 1);
-    // }
-
     const tempPos = new Vector3();
     const tempQuat = new Quaternion();
     const tempScale = new Vector3();
+    const uColor = selfData.color || [mainDataArray[uColorStart], mainDataArray[uColorStart + 1], mainDataArray[uColorStart + 2], mainDataArray[uColorStart + 3]];
 
-    selfData.transform.assignWorldTRS(tempPos, tempQuat, tempScale);
+    if (selfData.visible) {
+      selfData.transform.assignWorldTRS(tempPos, tempQuat, tempScale);
+    } else {
+      if (!init) {
+        mainDataArray[uSizeStart + 2] = -1;
+
+        return;
+      }
+    }
 
     const uPos = [...tempPos.toArray(), 0];
     const uSize = [...tempScale.toArray(), 0];

packages/effects-helper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-helper",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Galacean Effects runtime helper for the web",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

packages/effects-threejs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-threejs",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Galacean Effects runtime threejs plugin for the web",
   "module": "./dist/index.mjs",
   "main": "./dist/index.js",

packages/effects-webgl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-webgl",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Galacean Effects runtime webgl for the web",
   "types": "./dist/index.d.ts",
   "files": [

packages/effects/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Galacean Effects runtime player for the web",
   "module": "./dist/index.mjs",
   "main": "./dist/index.js",

plugin-packages/alipay-downgrade/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-plugin-alipay-downgrade",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Galacean Effects player downgrade plugin for Alipay",
   "module": "./dist/index.mjs",
   "main": "./dist/index.js",

plugin-packages/editor-gizmo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-plugin-editor-gizmo",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Galacean Effects player editor gizmo plugin",
   "module": "./dist/index.mjs",
   "main": "./dist/index.js",

plugin-packages/model/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-plugin-model",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Galacean Effects player model plugin",
   "module": "./dist/index.mjs",
   "main": "./dist/index.js",
@@ -50,8 +50,8 @@
     "@galacean/effects": "workspace:*",
     "@galacean/effects-plugin-editor-gizmo": "workspace:*",
     "@vvfx/resource-detection": "0.4.2-alpha.22",
-    "@types/hammerjs": "^2.0.41",
+    "@types/hammerjs": "^2.0.45",
     "fpsmeter": "^0.3.1",
-    "hammerjs": "^2.0.6"
+    "hammerjs": "^2.0.8"
   }
 }

plugin-packages/orientation-transformer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-plugin-orientation-transformer",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Galacean Effects player orientation transformer plugin",
   "module": "./dist/index.mjs",
   "main": "./dist/index.js",

plugin-packages/spine/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-plugin-spine",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Galacean Effects player spine plugin",
   "module": "./dist/index.mjs",
   "main": "./dist/index.js",