Merge pull request #819 from galacean/feat/2.2

Merge origin/feat/2.2 into origin/main

package.json

@@ -36,9 +36,9 @@
     "@rollup/plugin-inject": "^5.0.5",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-replace": "^6.0.1",
     "@swc/core": "^1.4.13",
-    "@swc/helpers": "^0.5.8",
+    "@swc/helpers": "^0.5.15",
     "@types/chai": "4.3.14",
     "@types/chai-spies": "1.0.6",
     "@types/mocha": "10.0.1",
@@ -62,13 +62,13 @@
     "minimist": "^1.2.8",
     "pnpm": "^8.15.7",
     "rimraf": "^3.0.2",
-    "rollup": "^2.79.1",
+    "rollup": "^2.79.2",
     "rollup-plugin-swc3": "^0.11.0",
     "simple-git": "^3.19.1",
     "tslib": "^2.6.2",
     "typedoc": "^0.25.12",
     "typescript": "^5.3.3",
-    "vite": "^4.5.3",
+    "vite": "^4.5.5",
     "vite-plugin-externals": "^0.6.2",
     "vite-tsconfig-paths": "^4.2.2"
   }

packages/effects-core/src/asset-manager.ts

@@ -278,16 +278,16 @@ export class AssetManager implements Disposable {
     images: spec.ImageSource[],
     compressedTexture: COMPRESSED_TEXTURE = 0,
   ): Promise<ImageLike[]> {
-    const { useCompressedTexture, variables } = this.options;
+    const { useCompressedTexture, variables, disableWebP, disableAVIF } = this.options;
     const baseUrl = this.baseUrl;
     const jobs = images.map(async (img, idx: number) => {
       const { url: png, webp, avif } = img;
       // eslint-disable-next-line compat/compat
       const imageURL = new URL(png, baseUrl).href;
       // eslint-disable-next-line compat/compat
-      const webpURL = webp && new URL(webp, baseUrl).href;
+      const webpURL = (!disableWebP && webp) ? new URL(webp, baseUrl).href : undefined;
       // eslint-disable-next-line compat/compat
-      const avifURL = avif && new URL(avif, baseUrl).href;
+      const avifURL = (!disableAVIF && avif) ? new URL(avif, baseUrl).href : undefined;
 
       const id = img.id;
 

packages/effects-core/src/comp-vfx-item.ts

@@ -4,9 +4,8 @@ import { Vector3 } from '@galacean/effects-math/es/core/vector3';
 import * as spec from '@galacean/effects-specification';
 import { Behaviour } from './components';
 import type { CompositionHitTestOptions } from './composition';
-import type { Region, TrackAsset } from './plugins';
+import type { Region, TimelinePlayable, TrackAsset } from './plugins';
 import { HitTestType } from './plugins';
-import type { Playable } from './plugins/cal/playable-graph';
 import { PlayableGraph } from './plugins/cal/playable-graph';
 import { TimelineAsset } from './plugins/timeline';
 import { generateGUID, noop } from './utils';
@@ -34,15 +33,15 @@ export class CompositionComponent extends Behaviour {
   private reusable = false;
   private sceneBindings: SceneBinding[] = [];
   private timelineAsset: TimelineAsset;
-  private timelinePlayable: Playable;
+  private timelinePlayable: TimelinePlayable;
   private graph: PlayableGraph = new PlayableGraph();
 
   override onStart (): void {
     if (!this.timelineAsset) {
       this.timelineAsset = new TimelineAsset(this.engine);
     }
     this.resolveBindings();
-    this.timelinePlayable = this.timelineAsset.createPlayable(this.graph);
+    this.timelinePlayable = this.timelineAsset.createPlayable(this.graph) as TimelinePlayable;
 
     // 重播不销毁元素
     if (this.item.endBehavior !== spec.EndBehavior.destroy) {
@@ -75,7 +74,8 @@ export class CompositionComponent extends Behaviour {
 
     // The properties of the object may change dynamically,
     // so reset the track binding to avoid invalidation of the previously obtained binding object.
-    this.resolveBindings();
+    // this.resolveBindings();
+    this.timelinePlayable.evaluate();
     this.graph.evaluate(dt);
   }
 
@@ -224,6 +224,24 @@ export class CompositionComponent extends Behaviour {
     return regions;
   }
 
+  /**
+   * 设置当前合成子元素的渲染顺序
+   * @internal
+   */
+  setChildrenRenderOrder (startOrder: number): number {
+    for (const item of this.items) {
+      item.renderOrder = startOrder++;
+
+      const subCompositionComponent = item.getComponent(CompositionComponent);
+
+      if (subCompositionComponent) {
+        startOrder = subCompositionComponent.setChildrenRenderOrder(startOrder);
+      }
+    }
+
+    return startOrder;
+  }
+
   override fromData (data: any): void {
     super.fromData(data);
 

packages/effects-core/src/components/shape-component.ts

@@ -112,6 +112,7 @@ void main() {
     if (this.animated) {
       this.buildPath(this.data);
       this.buildGeometryFromPath(this.path.shapePath);
+      this.animated = false;
     }
   }
 

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

@@ -9,8 +9,6 @@ import type { Texture } from './texture';
 import type { Disposable } from './utils';
 import type { VFXItemData } from './asset-loader';
 
-let listOrder = 0;
-
 interface RendererOptionsWithMask extends spec.RendererOptions {
   mask?: number,
 }
@@ -75,7 +73,6 @@ export class CompositionSourceManager implements Disposable {
     this.pluginSystem = pluginSystem;
     this.totalTime = totalTime ?? 0;
     this.textures = cachedTextures;
-    listOrder = 0;
     this.sourceContent = this.getContent(this.composition);
   }
 
@@ -115,8 +112,6 @@ export class CompositionSourceManager implements Disposable {
       const itemProps = sourceItemData;
 
       if (passRenderLevel(sourceItemData.renderLevel, this.renderLevel)) {
-        itemProps.listIndex = listOrder++;
-
         if (
           itemProps.type === spec.ItemType.sprite ||
           itemProps.type === spec.ItemType.particle ||

packages/effects-core/src/composition.ts

@@ -290,6 +290,7 @@ export class Composition extends EventEmitter<CompositionEvent<Composition>> imp
     this.rootComposition.createContent();
 
     this.buildItemTree(this.rootItem);
+    this.rootComposition.setChildrenRenderOrder(0);
     this.pluginSystem.resetComposition(this, this.renderFrame);
   }
 

packages/effects-core/src/math/value-getters/value-getter.ts

@@ -440,8 +440,8 @@ export class BezierCurve extends ValueGetter<number> {
         timeInterval,
         valueInterval,
         curve,
-        timeStart:Number(s.x),
-        timeEnd:Number(e.x),
+        timeStart: Number(s.x),
+        timeEnd: Number(e.x),
       };
     }
     this.keyTimeData = Object.keys(this.curveMap);
@@ -576,9 +576,9 @@ export class BezierCurve extends ValueGetter<number> {
   }
 
   override getMaxTime (): number {
-    const keyTimeData = Object.keys(this.curveMap);
+    const keyTimeData = this.keyTimeData;
 
-    return Number(keyTimeData[keyTimeData.length - 1].split('&')[1]);
+    return this.curveMap[keyTimeData[keyTimeData.length - 1]].timeEnd;
   }
 }
 
@@ -643,8 +643,13 @@ export class BezierCurvePath extends ValueGetter<Vector3> {
     valueInterval: number,
     // 路径曲线
     pathCurve: BezierPath,
+    timeStart: number,
+    timeEnd: number,
   }>;
 
+  keys: number[][];
+  keyTimeData: string[];
+
   override onCreate (props: spec.BezierCurvePathValue) {
     const [keyframes, points, controlPoints] = props;
 
@@ -672,21 +677,23 @@ export class BezierCurvePath extends ValueGetter<Vector3> {
         valueInterval,
         easingCurve,
         pathCurve: pathCurve,
+        timeStart: Number(s.x),
+        timeEnd: Number(e.x),
       };
     }
-
+    this.keyTimeData = Object.keys(this.curveSegments);
   }
 
   override getValue (time: number): Vector3 {
     const t = numberToFix(time, 5);
     let perc = 0, point = new Vector3();
-    const keyTimeData = Object.keys(this.curveSegments);
+    const keyTimeData = this.keyTimeData;
 
     if (!keyTimeData.length) {
       return point;
     }
-    const keyTimeStart = Number(keyTimeData[0].split('&')[0]);
-    const keyTimeEnd = Number(keyTimeData[keyTimeData.length - 1].split('&')[1]);
+    const keyTimeStart = this.curveSegments[keyTimeData[0]].timeStart;
+    const keyTimeEnd = this.curveSegments[keyTimeData[keyTimeData.length - 1]].timeEnd;
 
     if (t <= keyTimeStart) {
       const pathCurve = this.curveSegments[keyTimeData[0]].pathCurve;
@@ -705,7 +712,8 @@ export class BezierCurvePath extends ValueGetter<Vector3> {
     }
 
     for (let i = 0; i < keyTimeData.length; i++) {
-      const [xMin, xMax] = keyTimeData[i].split('&');
+      const xMin = this.curveSegments[keyTimeData[i]].timeStart;
+      const xMax = this.curveSegments[keyTimeData[i]].timeEnd;
 
       if (t >= Number(xMin) && t < Number(xMax)) {
         const bezierPath = this.curveSegments[keyTimeData[i]].pathCurve;
@@ -732,9 +740,9 @@ export class BezierCurvePath extends ValueGetter<Vector3> {
   }
 
   override getMaxTime (): number {
-    const keyTimeData = Object.keys(this.curveSegments);
+    const keyTimeData = this.keyTimeData;
 
-    return Number(keyTimeData[keyTimeData.length - 1].split('&')[1]);
+    return this.curveSegments[keyTimeData[keyTimeData.length - 1]].timeEnd;
   }
 }
 

packages/effects-core/src/plugins/cal/animation-stream.ts

@@ -1,4 +1,4 @@
-import { AnimationPlayable } from './animation-playable';
+import type { AnimationPlayable } from './animation-playable';
 
 export class AnimationStream {
   private playable: AnimationPlayable;
@@ -22,13 +22,13 @@ export class AnimationStream {
     return this.curveValues[componentType + propertyName];
   }
 
-  getInputStream (index: number): AnimationStream | undefined {
-    const inputPlayable = this.playable.getInput(index);
+  // getInputStream (index: number): AnimationStream | undefined {
+  //   const inputPlayable = this.playable.getInput(index);
 
-    if (inputPlayable instanceof AnimationPlayable) {
-      return inputPlayable.animationStream;
-    }
-  }
+  //   if (inputPlayable instanceof AnimationPlayable) {
+  //     return inputPlayable.animationStream;
+  //   }
+  // }
 }
 
 export interface AnimationCurveValue {

packages/effects-core/src/plugins/cal/calculate-item.ts

@@ -6,7 +6,7 @@ import type { ValueGetter } from '../../math';
 import { VFXItem } from '../../vfx-item';
 import { ParticleSystem } from '../particle/particle-system';
 import { ParticleBehaviourPlayableAsset } from '../particle/particle-vfx-item';
-import { TrackAsset } from '../timeline';
+import { ParticleTrack, TrackAsset } from '../timeline';
 import type { TimelineAsset } from '../timeline';
 
 /**
@@ -45,7 +45,7 @@ export class ObjectBindingTrack extends TrackAsset {
 
     // 添加粒子动画 clip // TODO 待移除
     if (boundItem.getComponent(ParticleSystem)) {
-      const particleTrack = timelineAsset.createTrack(TrackAsset, this, 'ParticleTrack');
+      const particleTrack = timelineAsset.createTrack(ParticleTrack, this, 'ParticleTrack');
 
       particleTrack.boundObject = this.boundObject;
       const particleClip = particleTrack.createClip(ParticleBehaviourPlayableAsset);