@galacean/effects-threejs 2.0.4 → 2.1.0-alpha.1

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.0.4
+ * Version: v2.1.0-alpha.1
  */
 
 'use strict';
@@ -4629,87 +4629,115 @@ function getDirectStore(target) {
  */ var Component = /*#__PURE__*/ function(EffectsObject) {
     _inherits(Component, EffectsObject);
     function Component() {
-        return EffectsObject.apply(this, arguments);
-    }
-    var _proto = Component.prototype;
-    _proto.onAttached = function onAttached() {};
-    _proto.onDestroy = function onDestroy() {};
-    _proto.fromData = function fromData(data) {
-        EffectsObject.prototype.fromData.call(this, data);
-        if (data.item) {
-            this.item = data.item;
-        }
-    };
-    _proto.dispose = function dispose() {
-        this.onDestroy();
-        if (this.item) {
-            removeItem(this.item.components, this);
-        }
-    };
-    _create_class(Component, [
-        {
-            key: "transform",
-            get: /**
-   * 附加到的 VFXItem 对象 Transform 组件
-   */ function get() {
-                return this.item.transform;
-            }
-        }
-    ]);
-    return Component;
-}(EffectsObject);
-/**
- * @since 2.0.0
- */ var Behaviour = /*#__PURE__*/ function(Component) {
-    _inherits(Behaviour, Component);
-    function Behaviour() {
         var _this;
-        _this = Component.apply(this, arguments) || this;
+        _this = EffectsObject.apply(this, arguments) || this;
         _this.isAwakeCalled = false;
         _this.isStartCalled = false;
+        _this.isEnableCalled = false;
         _this._enabled = true;
         return _this;
     }
-    var _proto = Behaviour.prototype;
+    var _proto = Component.prototype;
     /**
    * 生命周期函数，初始化后调用，生命周期内只调用一次
-   */ _proto.awake = function awake() {
+   */ _proto.onAwake = function onAwake() {
     // OVERRIDE
     };
     /**
-   * 在每次设置 enabled 为 true 时触发
+   * 在 enabled 变为 true 时触发
    */ _proto.onEnable = function onEnable() {
     // OVERRIDE
     };
     /**
+   * 在 enabled 变为 false 时触发
+   */ _proto.onDisable = function onDisable() {
+    // OVERRIDE
+    };
+    /**
    * 生命周期函数，在第一次 update 前调用，生命周期内只调用一次
-   */ _proto.start = function start() {
+   */ _proto.onStart = function onStart() {
     // OVERRIDE
     };
     /**
    * 生命周期函数，每帧调用一次
-   */ _proto.update = function update(dt) {
+   */ _proto.onUpdate = function onUpdate(dt) {
     // OVERRIDE
     };
     /**
    * 生命周期函数，每帧调用一次，在 update 之后调用
-   */ _proto.lateUpdate = function lateUpdate(dt) {
+   */ _proto.onLateUpdate = function onLateUpdate(dt) {
     // OVERRIDE
     };
-    _proto.onAttached = function onAttached() {
-        this.item.itemBehaviours.push(this);
-        if (!this.isAwakeCalled) {
-            this.awake();
-            this.isAwakeCalled = true;
+    /**
+   * 生命周期函数，在组件销毁时调用
+   */ _proto.onDestroy = function onDestroy() {
+    // OVERRIDE
+    };
+    /**
+   * @internal
+   */ _proto.enable = function enable() {
+        if (this.item.composition) {
+            this.item.composition.sceneTicking.addComponent(this);
+            this.isEnableCalled = true;
+        }
+        this.onEnable();
+    };
+    /**
+   * @internal
+   */ _proto.disable = function disable() {
+        this.onDisable();
+        if (this.item.composition) {
+            this.isEnableCalled = false;
+            this.item.composition.sceneTicking.removeComponent(this);
+        }
+    };
+    _proto.setVFXItem = function setVFXItem(item) {
+        this.item = item;
+        if (item.isDuringPlay) {
+            if (!this.isAwakeCalled) {
+                this.onAwake();
+                this.isAwakeCalled = true;
+            }
+            if (item.getVisible() && this.enabled) {
+                this.start();
+                this.enable();
+            }
+        }
+    };
+    _proto.fromData = function fromData(data) {
+        EffectsObject.prototype.fromData.call(this, data);
+        if (data.item) {
+            this.item = data.item;
         }
     };
     _proto.dispose = function dispose() {
+        if (this.isEnableCalled) {
+            this.disable();
+        }
+        if (this.isAwakeCalled) {
+            this.isAwakeCalled = false;
+            this.onDestroy();
+        }
         if (this.item) {
-            removeItem(this.item.itemBehaviours, this);
+            removeItem(this.item.components, this);
         }
-        Component.prototype.dispose.call(this);
     };
-    _create_class(Behaviour, [
+    _proto.start = function start() {
+        if (this.isStartCalled) {
+            return;
+        }
+        this.isStartCalled = true;
+        this.onStart();
+    };
+    _create_class(Component, [
+        {
+            key: "transform",
+            get: /**
+   * 附加到的 VFXItem 对象 Transform 组件
+   */ function get() {
+                return this.item.transform;
+            }
+        },
         {
             key: "isActiveAndEnabled",
             get: /**
@@ -4724,24 +4752,46 @@ function getDirectStore(target) {
                 return this._enabled;
             },
             set: function set(value) {
-                this._enabled = value;
-                if (value) {
-                    if (this.isActiveAndEnabled) {
-                        this.onEnable();
-                    }
-                    if (!this.isStartCalled) {
-                        this.start();
-                        this.isStartCalled = true;
+                if (this.enabled !== value) {
+                    this._enabled = value;
+                    if (value) {
+                        if (this.isActiveAndEnabled) {
+                            this.enable();
+                            if (!this.isStartCalled) {
+                                this.onStart();
+                                this.isStartCalled = true;
+                            }
+                        }
+                    } else {
+                        if (this.isEnableCalled) {
+                            this.disable();
+                        }
                     }
                 }
             }
         }
     ]);
-    return Behaviour;
-}(Component);
+    return Component;
+}(EffectsObject);
 __decorate([
     serialize()
-], Behaviour.prototype, "_enabled", void 0);
+], Component.prototype, "_enabled", void 0);
+/**
+ * @since 2.0.0
+ */ var Behaviour = /*#__PURE__*/ function(Component) {
+    _inherits(Behaviour, Component);
+    function Behaviour() {
+        return Component.apply(this, arguments);
+    }
+    var _proto = Behaviour.prototype;
+    _proto.setVFXItem = function setVFXItem(item) {
+        Component.prototype.setVFXItem.call(this, item);
+    };
+    _proto.dispose = function dispose() {
+        Component.prototype.dispose.call(this);
+    };
+    return Behaviour;
+}(Component);
 
 /**
  * 所有渲染组件的基类
@@ -4751,19 +4801,14 @@ __decorate([
     function RendererComponent() {
         var _this;
         _this = Component.apply(this, arguments) || this;
-        _this.isStartCalled = false;
         _this.materials = [];
         _this._priority = 0;
-        _this._enabled = true;
         return _this;
     }
     var _proto = RendererComponent.prototype;
-    _proto.onEnable = function onEnable() {};
-    _proto.start = function start() {};
-    _proto.update = function update(dt) {};
-    _proto.lateUpdate = function lateUpdate(dt) {};
     _proto.render = function render(renderer) {};
-    _proto.onAttached = function onAttached() {
+    _proto.setVFXItem = function setVFXItem(item) {
+        Component.prototype.setVFXItem.call(this, item);
         this.item.rendererComponents.push(this);
     };
     _proto.fromData = function fromData(data) {
@@ -4788,26 +4833,6 @@ __decorate([
                 this._priority = value;
             }
         },
-        {
-            key: "enabled",
-            get: function get() {
-                return this._enabled;
-            },
-            set: function set(value) {
-                this._enabled = value;
-                if (value) {
-                    this.onEnable();
-                }
-            }
-        },
-        {
-            key: "isActiveAndEnabled",
-            get: /**
-   * 组件是否可以更新，true 更新，false 不更新
-   */ function get() {
-                return this.item.getVisible() && this.enabled;
-            }
-        },
         {
             key: "material",
             get: function get() {
@@ -4830,9 +4855,6 @@ __decorate([
 __decorate([
     serialize()
 ], RendererComponent.prototype, "_priority", void 0);
-__decorate([
-    serialize()
-], RendererComponent.prototype, "_enabled", void 0);
 
 /**
  * 抽象插件类
@@ -4876,7 +4898,7 @@ exports.CameraController = /*#__PURE__*/ function(Behaviour) {
         return _this;
     }
     var _proto = CameraController.prototype;
-    _proto.update = function update() {
+    _proto.onUpdate = function onUpdate() {
         if (this.item.composition && this.item.transform.getValid()) {
             var camera = this.item.composition.camera;
             camera.near = this.options.near;
@@ -10036,8 +10058,13 @@ var RandomValue = /*#__PURE__*/ function(ValueGetter) {
         this.min = props[0];
         this.max = props[1];
     };
-    _proto.getValue = function getValue(time) {
-        return randomInRange(this.min, this.max);
+    _proto.getValue = function getValue(time, seed) {
+        var randomSeed = seed != null ? seed : Math.random();
+        return this.min + randomSeed * (this.max - this.min);
+    };
+    _proto.getIntegrateValue = function getIntegrateValue(t0, t1, timeScale) {
+        var seed = timeScale != null ? timeScale : 1.0;
+        return (this.min + seed * (this.max - this.min)) * (t1 - t0);
     };
     _proto.toUniform = function toUniform() {
         return new Float32Array([
@@ -11564,7 +11591,7 @@ var itemFrag = "precision highp float;varying vec4 vColor;varying vec2 vTexCoord
 
 var particleFrag = "#version 100\nprecision mediump float;vec4 blendColor(vec4 color,vec4 vc,float mode){vec4 ret=color*vc;float alpha=ret.a;if(mode==1.){ret.rgb*=alpha;}else if(mode==2.){ret.rgb*=alpha;ret.a=dot(ret.rgb,vec3(0.33333333));}else if(mode==3.){alpha=color.r*alpha;ret=vec4(vc.rgb*alpha,alpha);}return ret;}\n#define PATICLE_SHADER 1\nvarying float vLife;varying vec2 vTexCoord;varying vec4 vColor;uniform vec3 emissionColor;uniform float emissionIntensity;uniform sampler2D uMaskTex;uniform vec4 uColorParams;uniform vec2 uTexOffset;\n#ifdef COLOR_OVER_LIFETIME\nuniform sampler2D uColorOverLifetime;\n#endif\n#ifdef USE_SPRITE\nvarying vec4 vTexCoordBlend;\n#endif\nvarying float vSeed;\n#ifdef PREVIEW_BORDER\nuniform vec4 uPreviewColor;\n#endif\n#ifdef USE_SPRITE\nvec4 getTextureColor(sampler2D tex,vec2 texCoord){if(vTexCoordBlend.w>0.){return mix(texture2D(tex,texCoord),texture2D(tex,vTexCoordBlend.xy+texCoord),vTexCoordBlend.z);}return texture2D(tex,texCoord);}\n#else\n#define getTextureColor texture2D\n#endif\n#ifndef WEBGL2\n#define round(a) floor(0.5+a)\n#endif\n#ifdef PREVIEW_BORDER\nvoid main(){gl_FragColor=uPreviewColor;}\n#else\nvoid main(){vec4 color=vec4(1.0);vec4 tempColor=vColor;vec2 texOffset=uTexOffset;if(vLife<0.){discard;}if(uColorParams.x>0.0){color=getTextureColor(uMaskTex,vTexCoord);}\n#ifdef COLOR_OVER_LIFETIME\n#ifndef ENABLE_VERTEX_TEXTURE\ntempColor*=texture2D(uColorOverLifetime,vec2(vLife,0.));\n#endif\n#endif\ncolor=blendColor(color,tempColor,round(uColorParams.y));if(color.a<=0.01&&uColorParams.w>0.){float _at=texture2D(uMaskTex,vTexCoord+texOffset).a+texture2D(uMaskTex,vTexCoord+texOffset*-1.).a;if(_at<=0.02){discard;}}vec3 emission=emissionColor*pow(2.0,emissionIntensity);color=vec4(pow(pow(color.rgb,vec3(2.2))+emission,vec3(1.0/2.2)),color.a);gl_FragColor=color;}\n#endif\n";
 
-var particleVert = "#version 100\nprecision mediump float;\n#define SHADER_VERTEX 1\n#define PATICLE_SHADER 1\n#ifdef SHADER_VERTEX\n#define CURVE_VALUE_TEXTURE uVCurveValueTexture\n#define CURVE_VALUE_ARRAY uVCurveValues\n#define CURVE_VALUE_COUNT VERT_CURVE_VALUE_COUNT\n#define FRAG_CURVE_VALUE_COUNT 0\n#else\n#define CURVE_VALUE_TEXTURE uFCurveValueTexture\n#define CURVE_VALUE_ARRAY uFCurveValues\n#define CURVE_VALUE_COUNT FRAG_CURVE_VALUE_COUNT\n#define VERT_CURVE_VALUE_COUNT 0\n#endif\n#if CURVE_VALUE_COUNT > 0\n#if LOOKUP_TEXTURE_CURVE\nuniform sampler2D CURVE_VALUE_TEXTURE;const float uCurveCount=1./float(CURVE_VALUE_COUNT);\n#define lookup_curve(i) texture2D(CURVE_VALUE_TEXTURE,vec2(float(i) * uCurveCount,0.))\n#else\nuniform vec4 CURVE_VALUE_ARRAY[CURVE_VALUE_COUNT];\n#define lookup_curve(i) CURVE_VALUE_ARRAY[i]\n#endif\n#else\n#define lookup_curve(i) vec4(0.)\n#endif\n#ifdef WEBGL2\n#define ITR_END (count + 1)\n#else\n#define ITR_END MAX_C\n#endif\n#define NONE_CONST_INDEX 1\n#ifdef SHADER_VERTEX\nattribute float aSeed;varying float vSeed;\n#endif\n#ifdef SHADER_VERTEX\n#define MAX_C VERT_MAX_KEY_FRAME_COUNT\n#else\n#define MAX_C FRAG_MAX_KEY_FRAME_COUNT\n#endif\nmat4 cubicBezierMatrix=mat4(1.0,-3.0,3.0,-1.0,0.0,3.0,-6.0,3.0,0.0,0.0,3.0,-3.0,0.0,0.0,0.0,1.0);float cubicBezier(float t,float y1,float y2,float y3,float y4){vec4 tVec=vec4(1.0,t,t*t,t*t*t);vec4 yVec=vec4(y1,y2,y3,y4);vec4 result=tVec*cubicBezierMatrix*yVec;return result.x+result.y+result.z+result.w;}float binarySearchT(float x,float x1,float x2,float x3,float x4){float left=0.0;float right=1.0;float mid=0.0;float computedX;for(int i=0;i<8;i++){mid=(left+right)*0.5;computedX=cubicBezier(mid,x1,x2,x3,x4);if(abs(computedX-x)<0.0001){break;}else if(computedX>x){right=mid;}else{left=mid;}}return mid;}float valueFromBezierCurveFrames(float time,float frameStart,float frameCount){int start=int(frameStart);int count=int(frameCount-1.);for(int i=0;i<ITR_END;i+=2){if(i>=count){break;}vec4 k0=lookup_curve(i+start);vec4 k1=lookup_curve(i+1+start);if(i==0&&time<k0.x){return k0.y;}if(i==int(frameCount-2.)&&time>=k1.x){return k1.y;}if(time>=k0.x&&time<=k1.x){float t=(time-k0.x)/(k1.x-k0.x);float nt=binarySearchT(time,k0.x,k0.z,k1.z,k1.x);return cubicBezier(nt,k0.y,k0.w,k1.w,k1.y);}}}float evaluteLineSeg(float t,vec2 p0,vec2 p1){return p0.y+(p1.y-p0.y)*(t-p0.x)/(p1.x-p0.x);}float valueFromLineSegs(float time,float frameStart,float frameCount){int start=int(frameStart);int count=int(frameCount-1.);int end=start+count;for(int i=0;i<ITR_END;i++){if(i>count){return lookup_curve(i).w;}vec4 seg=lookup_curve(i+start);vec2 p0=seg.xy;vec2 p1=seg.zw;if(time>=p0.x&&time<=p1.x){return evaluteLineSeg(time,p0,p1);}vec2 p2=lookup_curve(i+start+1).xy;if(time>p1.x&&time<=p2.x){return evaluteLineSeg(time,p1,p2);}}return lookup_curve(0).y;}float getValueFromTime(float time,vec4 value){float type=value.x;if(type==0.){return value.y;}if(type==1.){return mix(value.y,value.z,time/value.w);}if(type==3.){return valueFromLineSegs(time,value.y,value.z);}if(type==4.){return mix(value.y,value.z,aSeed);}if(type==5.){return valueFromBezierCurveFrames(time,value.z,value.w);}return 0.;}float calculateMovement(float t,vec2 p1,vec2 p2,vec2 p3,vec2 p4){float movement=0.0;float h=(t-p1.x)*0.05;for(int i=0;i<=20;i++){float t=float(i)*h;float nt=binarySearchT(t,p1.x,p2.x,p3.x,p4.x);float y=cubicBezier(nt,p1.y,p2.y,p3.y,p4.y);float weight=(i==0||i==20)? 1.0 :(mod(float(i),2.)!=0.)? 4.0 : 2.0;movement+=weight*y;}movement*=h/3.;return movement;}float integrateFromBezierCurveFrames(float time,float frameStart,float frameCount){int start=int(frameStart);int count=int(frameCount-1.);float ret=0.;for(int i=0;i<ITR_END;i+=2){vec4 k0=lookup_curve(i+start);vec4 k1=lookup_curve(i+1+start);if(i==0&&time<k0.x){return ret;}vec2 p1=vec2(k0.x,k0.y);vec2 p2=vec2(k0.z,k0.w);vec2 p3=vec2(k1.z,k1.w);vec2 p4=vec2(k1.x,k1.y);if(time>=k1.x){ret+=calculateMovement(k1.x,p1,p2,p3,p4);}if(time>=k0.x&&time<k1.x){return ret+calculateMovement(time,p1,p2,p3,p4);}}return ret;}float integrateByTimeLineSeg(float t,vec2 p0,vec2 p1){float t0=p0.x;float t1=p1.x;float y0=p0.y;float y1=p1.y;vec4 tSqr=vec4(t,t,t0,t0);tSqr=tSqr*tSqr;vec4 a=vec4(2.*t,3.,-t0,3.)*tSqr;float t1y0=t1*y0;vec4 b=vec4(y0-y1,t0*y1-t1y0,2.*y0+y1,t1y0);float r=dot(a,b);return r/(t0-t1)*0.16666667;}float integrateLineSeg(float time,vec2 p0,vec2 p1){float h=time-p0.x;float y0=p0.y;return(y0+y0+(p1.y-y0)*h/(p1.x-p0.x))*h/2.;}float integrateFromLineSeg(float time,float frameStart,float frameCount){if(time==0.){return 0.;}int start=int(frameStart);int count=int(frameCount-1.);float ret=0.;for(int i=0;i<ITR_END;i++){if(i>count){return ret;}vec4 ks=lookup_curve(i+start);vec2 k0=ks.xy;vec2 k1=ks.zw;if(time>k0.x&&time<=k1.x){return ret+integrateLineSeg(time,k0,k1);}ret+=integrateLineSeg(k1.x,k0,k1);vec2 k2=lookup_curve(i+start+1).xy;if(time>k1.x&&time<=k2.x){return ret+integrateLineSeg(time,k1,k2);}ret+=integrateLineSeg(k2.x,k1,k2);}return ret;}float integrateByTimeFromLineSeg(float time,float frameStart,float frameCount){if(time==0.){return 0.;}int start=int(frameStart);int count=int(frameCount-1.);float ret=0.;for(int i=0;i<ITR_END;i++){if(i>count){return ret;}vec4 ks=lookup_curve(i+start);vec2 k0=ks.xy;vec2 k1=ks.zw;if(time>k0.x&&time<=k1.x){return ret+integrateByTimeLineSeg(time,k0,k1);}ret+=integrateByTimeLineSeg(k1.x,k0,k1);vec2 k2=lookup_curve(i+start+1).xy;if(time>k1.x&&time<=k2.x){return ret+integrateByTimeLineSeg(time,k1,k2);}ret+=integrateByTimeLineSeg(k2.x,k1,k2);}return ret;}float getIntegrateFromTime0(float t1,vec4 value){float type=value.x;if(type==0.){return value.y*t1;}if(type==1.){vec2 p0=vec2(0.,value.y);vec2 p1=vec2(value.w,value.z);return integrateLineSeg(t1,p0,p1);}if(type==3.){return integrateFromLineSeg(t1,value.y,value.z);}if(type==4.){return mix(value.y,value.z,aSeed)*t1;}if(type==5.){return integrateFromBezierCurveFrames(t1,value.z,value.w);}return 0.;}float getIntegrateByTimeFromTime(float t0,float t1,vec4 value){float type=value.x;if(type==0.){return value.y*(t1*t1-t0*t0)/2.;}else if(type==1.){vec2 p0=vec2(0.,value.y);vec2 p1=vec2(value.w,value.z);return integrateByTimeLineSeg(t1,p0,p1)-integrateByTimeLineSeg(t0,p0,p1);}if(type==3.){return integrateByTimeFromLineSeg(t1,value.y,value.z)-integrateByTimeFromLineSeg(t0,value.y,value.z);}if(type==4.){return mix(value.y,value.z,aSeed)*(t1*t1-t0*t0)/2.;}if(type==5.){return integrateFromBezierCurveFrames(t1,value.z,value.w)-integrateFromBezierCurveFrames(t0,value.z,value.w);}return 0.;}const float d2r=3.141592653589793/180.;attribute vec3 aPos;attribute vec4 aOffset;attribute vec3 aVel;attribute vec3 aRot;attribute vec4 aColor;attribute vec3 aDirX;attribute vec3 aDirY;\n#ifdef USE_SPRITE\nattribute vec3 aSprite;uniform vec4 uSprite;struct UVDetail{vec2 uv0;vec3 uv1;};UVDetail getSpriteUV(vec2 uv,float lifeTime);varying vec4 vTexCoordBlend;\n#endif\n#ifdef FINAL_TARGET\nuniform vec3 uFinalTarget;uniform vec4 uForceCurve;\n#endif\nuniform mat4 effects_ObjectToWorld;uniform mat4 effects_MatrixV;uniform mat4 effects_MatrixVP;uniform vec4 uParams;uniform vec4 uAcceleration;uniform vec4 uGravityModifierValue;uniform vec4 uOpacityOverLifetimeValue;\n#ifdef ROT_X_LIFETIME\nuniform vec4 uRXByLifeTimeValue;\n#endif\n#ifdef ROT_Y_LIFETIME\nuniform vec4 uRYByLifeTimeValue;\n#endif\n#ifdef ROT_Z_LIFETIME\nuniform vec4 uRZByLifeTimeValue;\n#endif\n#ifdef COLOR_OVER_LIFETIME\nuniform sampler2D uColorOverLifetime;\n#endif\n#if LINEAR_VEL_X + LINEAR_VEL_Y + LINEAR_VEL_Z\n#if LINEAR_VEL_X\nuniform vec4 uLinearXByLifetimeValue;\n#endif\n#if LINEAR_VEL_Y\nuniform vec4 uLinearYByLifetimeValue;\n#endif\n#if LINEAR_VEL_Z\nuniform vec4 uLinearZByLifetimeValue;\n#endif\n#endif\n#ifdef SPEED_OVER_LIFETIME\nuniform vec4 uSpeedLifetimeValue;\n#endif\n#if ORB_VEL_X + ORB_VEL_Y + ORB_VEL_Z\n#if ORB_VEL_X\nuniform vec4 uOrbXByLifetimeValue;\n#endif\n#if ORB_VEL_Y\nuniform vec4 uOrbYByLifetimeValue;\n#endif\n#if ORB_VEL_Z\nuniform vec4 uOrbZByLifetimeValue;\n#endif\nuniform vec3 uOrbCenter;\n#endif\nuniform vec4 uSizeByLifetimeValue;\n#ifdef SIZE_Y_BY_LIFE\nuniform vec4 uSizeYByLifetimeValue;\n#endif\nvarying float vLife;varying vec4 vColor;varying vec2 vTexCoord;\n#ifdef ENV_EDITOR\nuniform vec4 uEditorTransform;\n#endif\nvec3 calOrbitalMov(float _life,float _dur){vec3 orb=vec3(0.0);\n#ifdef AS_ORBITAL_MOVEMENT\n#define FUNC(a) getValueFromTime(_life,a)\n#else\n#define FUNC(a) getIntegrateFromTime0(_life,a) * _dur\n#endif\n#if ORB_VEL_X\norb.x=FUNC(uOrbXByLifetimeValue);\n#endif\n#if ORB_VEL_Y\norb.y=FUNC(uOrbYByLifetimeValue);\n#endif\n#if ORB_VEL_Z\norb.z=FUNC(uOrbZByLifetimeValue);\n#endif\n#undef FUNC\nreturn orb;}vec3 calLinearMov(float _life,float _dur){vec3 mov=vec3(0.0);\n#ifdef AS_LINEAR_MOVEMENT\n#define FUNC(a) getValueFromTime(_life,a)\n#else\n#define FUNC(a) getIntegrateFromTime0(_life,a) * _dur\n#endif\n#if LINEAR_VEL_X\nmov.x=FUNC(uLinearXByLifetimeValue);\n#endif\n#if LINEAR_VEL_Y\nmov.y=FUNC(uLinearYByLifetimeValue);\n#endif\n#if LINEAR_VEL_Z\nmov.z=FUNC(uLinearZByLifetimeValue);\n#endif\n#undef FUNC\nreturn mov;}mat3 mat3FromRotation(vec3 rotation){vec3 sinR=sin(rotation*d2r);vec3 cosR=cos(rotation*d2r);return mat3(cosR.z,-sinR.z,0.,sinR.z,cosR.z,0.,0.,0.,1.)*mat3(cosR.y,0.,sinR.y,0.,1.,0.,-sinR.y,0,cosR.y)*mat3(1.,0.,0.,0,cosR.x,-sinR.x,0.,sinR.x,cosR.x);}\n#ifdef USE_SPRITE\nUVDetail getSpriteUV(vec2 uv,float lifeTime){float t=fract(clamp((lifeTime-aSprite.x)/aSprite.y,0.0,1.)*aSprite.z);float frame=uSprite.z*t;float frameIndex=max(ceil(frame)-1.,0.);float row=floor((frameIndex+0.1)/uSprite.x);float col=frameIndex-row*uSprite.x;vec2 retUV=(vec2(col,row)+uv)/uSprite.xy;UVDetail ret;if(uSprite.w>0.){float blend=frame-frameIndex;float frameIndex1=min(ceil(frame),uSprite.z-1.);float row1=floor((frameIndex1+0.1)/uSprite.x);float col1=frameIndex1-row1*uSprite.x;vec2 coord=(vec2(col1,row1)+uv)/uSprite.xy-retUV;ret.uv1=vec3(coord.x,1.-coord.y,blend);}ret.uv0=vec2(retUV.x,1.-retUV.y);return ret;}\n#endif\nvec3 calculateTranslation(vec3 vel,float t0,float t1,float dur){float dt=t1-t0;float d=getIntegrateByTimeFromTime(0.,dt,uGravityModifierValue);vec3 acc=uAcceleration.xyz*d;\n#ifdef SPEED_OVER_LIFETIME\nreturn vel*getIntegrateFromTime0(dt/dur,uSpeedLifetimeValue)*dur+acc;\n#endif\nreturn vel*dt+acc;}mat3 transformFromRotation(vec3 rot,float _life,float _dur){vec3 rotation=rot;\n#ifdef ROT_LIFETIME_AS_MOVEMENT\n#define FUNC1(a) getValueFromTime(_life,a)\n#else\n#define FUNC1(a) getIntegrateFromTime0(_life,a) * _dur\n#endif\n#ifdef ROT_X_LIFETIME\nrotation.x+=FUNC1(uRXByLifeTimeValue);\n#endif\n#ifdef ROT_Y_LIFETIME\nrotation.y+=FUNC1(uRYByLifeTimeValue);\n#endif\n#ifdef ROT_Z_LIFETIME\nrotation.z+=FUNC1(uRZByLifeTimeValue);\n#endif\nif(dot(rotation,rotation)==0.0){return mat3(1.0);}\n#undef FUNC1\nreturn mat3FromRotation(rotation);}void main(){float time=uParams.x-aOffset.z;float dur=aOffset.w;if(time<0.||time>dur){gl_Position=vec4(-3.,-3.,-3.,1.);}else{float life=clamp(time/dur,0.0,1.0);vLife=life;\n#ifdef USE_SPRITE\nUVDetail uvD=getSpriteUV(aOffset.xy,time);vTexCoord=uvD.uv0;vTexCoordBlend=vec4(uvD.uv1,uSprite.w);\n#else\nvTexCoord=aOffset.xy;\n#endif\nvColor=aColor;\n#ifdef COLOR_OVER_LIFETIME\n#ifdef ENABLE_VERTEX_TEXTURE\nvColor*=texture2D(uColorOverLifetime,vec2(life,0.));\n#endif\n#endif\nvColor.a*=clamp(getValueFromTime(life,uOpacityOverLifetimeValue),0.,1.);vec3 size=vec3(vec2(getValueFromTime(life,uSizeByLifetimeValue)),1.0);\n#ifdef SIZE_Y_BY_LIFE\nsize.y=getValueFromTime(life,uSizeYByLifetimeValue);\n#endif\nvec3 point=transformFromRotation(aRot,life,dur)*(aDirX*size.x+aDirY*size.y);vec3 pt=calculateTranslation(aVel,aOffset.z,uParams.x,dur);vec3 _pos=aPos+pt;\n#if ORB_VEL_X + ORB_VEL_Y + ORB_VEL_Z\n_pos=mat3FromRotation(calOrbitalMov(life,dur))*(_pos-uOrbCenter);_pos+=uOrbCenter;\n#endif\n#if LINEAR_VEL_X + LINEAR_VEL_Y + LINEAR_VEL_Z\n_pos.xyz+=calLinearMov(life,dur);\n#endif\n#ifdef FINAL_TARGET\nfloat force=getValueFromTime(life,uForceCurve);vec4 pos=vec4(mix(_pos,uFinalTarget,force),1.);\n#else\nvec4 pos=vec4(_pos,1.0);\n#endif\n#if RENDER_MODE == 1\npos.xyz+=point;pos=effects_ObjectToWorld*pos;\n#elif RENDER_MODE == 3\npos=effects_ObjectToWorld*pos;pos.xyz+=effects_MatrixV[0].xyz*point.x+effects_MatrixV[2].xyz*point.y;\n#elif RENDER_MODE == 2\npos=effects_ObjectToWorld*pos;pos.xy+=point.xy;\n#elif RENDER_MODE == 0\npos=effects_ObjectToWorld*pos;pos.xyz+=effects_MatrixV[0].xyz*point.x+effects_MatrixV[1].xyz*point.y;\n#endif\ngl_Position=effects_MatrixVP*pos;vSeed=aSeed;gl_PointSize=6.0;\n#ifdef ENV_EDITOR\ngl_Position=vec4(gl_Position.xy*uEditorTransform.xy+uEditorTransform.zw*gl_Position.w,gl_Position.zw);\n#endif\n}}";
+var particleVert = "#version 100\nprecision mediump float;\n#define SHADER_VERTEX 1\n#define PATICLE_SHADER 1\n#ifdef SHADER_VERTEX\n#define CURVE_VALUE_TEXTURE uVCurveValueTexture\n#define CURVE_VALUE_ARRAY uVCurveValues\n#define CURVE_VALUE_COUNT VERT_CURVE_VALUE_COUNT\n#define FRAG_CURVE_VALUE_COUNT 0\n#else\n#define CURVE_VALUE_TEXTURE uFCurveValueTexture\n#define CURVE_VALUE_ARRAY uFCurveValues\n#define CURVE_VALUE_COUNT FRAG_CURVE_VALUE_COUNT\n#define VERT_CURVE_VALUE_COUNT 0\n#endif\n#if CURVE_VALUE_COUNT > 0\n#if LOOKUP_TEXTURE_CURVE\nuniform sampler2D CURVE_VALUE_TEXTURE;const float uCurveCount=1./float(CURVE_VALUE_COUNT);\n#define lookup_curve(i) texture2D(CURVE_VALUE_TEXTURE,vec2(float(i) * uCurveCount,0.))\n#else\nuniform vec4 CURVE_VALUE_ARRAY[CURVE_VALUE_COUNT];\n#define lookup_curve(i) CURVE_VALUE_ARRAY[i]\n#endif\n#else\n#define lookup_curve(i) vec4(0.)\n#endif\n#ifdef WEBGL2\n#define ITR_END (count + 1)\n#else\n#define ITR_END MAX_C\n#endif\n#define NONE_CONST_INDEX 1\n#ifdef SHADER_VERTEX\nattribute float aSeed;varying float vSeed;\n#endif\n#ifdef SHADER_VERTEX\n#define MAX_C VERT_MAX_KEY_FRAME_COUNT\n#else\n#define MAX_C FRAG_MAX_KEY_FRAME_COUNT\n#endif\nmat4 cubicBezierMatrix=mat4(1.0,-3.0,3.0,-1.0,0.0,3.0,-6.0,3.0,0.0,0.0,3.0,-3.0,0.0,0.0,0.0,1.0);float cubicBezier(float t,float y1,float y2,float y3,float y4){vec4 tVec=vec4(1.0,t,t*t,t*t*t);vec4 yVec=vec4(y1,y2,y3,y4);vec4 result=tVec*cubicBezierMatrix*yVec;return result.x+result.y+result.z+result.w;}float binarySearchT(float x,float x1,float x2,float x3,float x4){float left=0.0;float right=1.0;float mid=0.0;float computedX;for(int i=0;i<8;i++){mid=(left+right)*0.5;computedX=cubicBezier(mid,x1,x2,x3,x4);if(abs(computedX-x)<0.0001){break;}else if(computedX>x){right=mid;}else{left=mid;}}return mid;}float valueFromBezierCurveFrames(float time,float frameStart,float frameCount){int start=int(frameStart);int count=int(frameCount-1.);for(int i=0;i<ITR_END;i+=2){if(i>=count){break;}vec4 k0=lookup_curve(i+start);vec4 k1=lookup_curve(i+1+start);if(i==0&&time<k0.x){return k0.y;}if(i==int(frameCount-2.)&&time>=k1.x){return k1.y;}if(time>=k0.x&&time<=k1.x){float t=(time-k0.x)/(k1.x-k0.x);float nt=binarySearchT(time,k0.x,k0.z,k1.z,k1.x);return cubicBezier(nt,k0.y,k0.w,k1.w,k1.y);}}}float evaluteLineSeg(float t,vec2 p0,vec2 p1){return p0.y+(p1.y-p0.y)*(t-p0.x)/(p1.x-p0.x);}float valueFromLineSegs(float time,float frameStart,float frameCount){int start=int(frameStart);int count=int(frameCount-1.);int end=start+count;for(int i=0;i<ITR_END;i++){if(i>count){return lookup_curve(i).w;}vec4 seg=lookup_curve(i+start);vec2 p0=seg.xy;vec2 p1=seg.zw;if(time>=p0.x&&time<=p1.x){return evaluteLineSeg(time,p0,p1);}vec2 p2=lookup_curve(i+start+1).xy;if(time>p1.x&&time<=p2.x){return evaluteLineSeg(time,p1,p2);}}return lookup_curve(0).y;}float getValueFromTime(float time,vec4 value){float type=value.x;if(type==0.){return value.y;}if(type==1.){return mix(value.y,value.z,time/value.w);}if(type==3.){return valueFromLineSegs(time,value.y,value.z);}if(type==4.){return mix(value.y,value.z,aSeed);}if(type==5.){return valueFromBezierCurveFrames(time,value.z,value.w);}return 0.;}float calculateMovement(float t,vec2 p1,vec2 p2,vec2 p3,vec2 p4){float movement=0.0;float h=(t-p1.x)*0.05;for(int i=0;i<=20;i++){float t=float(i)*h;float nt=binarySearchT(t,p1.x,p2.x,p3.x,p4.x);float y=cubicBezier(nt,p1.y,p2.y,p3.y,p4.y);float weight=(i==0||i==20)? 1.0 :(mod(float(i),2.)!=0.)? 4.0 : 2.0;movement+=weight*y;}movement*=h/3.;return movement;}float integrateFromBezierCurveFrames(float time,float frameStart,float frameCount){int start=int(frameStart);int count=int(frameCount-1.);float ret=0.;for(int i=0;i<ITR_END;i+=2){vec4 k0=lookup_curve(i+start);vec4 k1=lookup_curve(i+1+start);if(i==0&&time<k0.x){return ret;}vec2 p1=vec2(k0.x,k0.y);vec2 p2=vec2(k0.z,k0.w);vec2 p3=vec2(k1.z,k1.w);vec2 p4=vec2(k1.x,k1.y);if(time>=k1.x){ret+=calculateMovement(k1.x,p1,p2,p3,p4);}if(time>=k0.x&&time<k1.x){return ret+calculateMovement(time,p1,p2,p3,p4);}}return ret;}float integrateByTimeLineSeg(float t,vec2 p0,vec2 p1){float t0=p0.x;float t1=p1.x;float y0=p0.y;float y1=p1.y;vec4 tSqr=vec4(t,t,t0,t0);tSqr=tSqr*tSqr;vec4 a=vec4(2.*t,3.,-t0,3.)*tSqr;float t1y0=t1*y0;vec4 b=vec4(y0-y1,t0*y1-t1y0,2.*y0+y1,t1y0);float r=dot(a,b);return r/(t0-t1)*0.16666667;}float integrateLineSeg(float time,vec2 p0,vec2 p1){float h=time-p0.x;float y0=p0.y;return(y0+y0+(p1.y-y0)*h/(p1.x-p0.x))*h/2.;}float integrateFromLineSeg(float time,float frameStart,float frameCount){if(time==0.){return 0.;}int start=int(frameStart);int count=int(frameCount-1.);float ret=0.;for(int i=0;i<ITR_END;i++){if(i>count){return ret;}vec4 ks=lookup_curve(i+start);vec2 k0=ks.xy;vec2 k1=ks.zw;if(time>k0.x&&time<=k1.x){return ret+integrateLineSeg(time,k0,k1);}ret+=integrateLineSeg(k1.x,k0,k1);vec2 k2=lookup_curve(i+start+1).xy;if(time>k1.x&&time<=k2.x){return ret+integrateLineSeg(time,k1,k2);}ret+=integrateLineSeg(k2.x,k1,k2);}return ret;}float integrateByTimeFromLineSeg(float time,float frameStart,float frameCount){if(time==0.){return 0.;}int start=int(frameStart);int count=int(frameCount-1.);float ret=0.;for(int i=0;i<ITR_END;i++){if(i>count){return ret;}vec4 ks=lookup_curve(i+start);vec2 k0=ks.xy;vec2 k1=ks.zw;if(time>k0.x&&time<=k1.x){return ret+integrateByTimeLineSeg(time,k0,k1);}ret+=integrateByTimeLineSeg(k1.x,k0,k1);vec2 k2=lookup_curve(i+start+1).xy;if(time>k1.x&&time<=k2.x){return ret+integrateByTimeLineSeg(time,k1,k2);}ret+=integrateByTimeLineSeg(k2.x,k1,k2);}return ret;}float getIntegrateFromTime0(float t1,vec4 value){float type=value.x;if(type==0.){return value.y*t1;}if(type==1.){vec2 p0=vec2(0.,value.y);vec2 p1=vec2(value.w,value.z);return integrateLineSeg(t1,p0,p1);}if(type==3.){return integrateFromLineSeg(t1,value.y,value.z);}if(type==4.){return mix(value.y,value.z,aSeed)*t1;}if(type==5.){return integrateFromBezierCurveFrames(t1,value.z,value.w);}return 0.;}float getIntegrateByTimeFromTime(float t0,float t1,vec4 value){float type=value.x;if(type==0.){return value.y*(t1*t1-t0*t0)/2.;}else if(type==1.){vec2 p0=vec2(0.,value.y);vec2 p1=vec2(value.w,value.z);return integrateByTimeLineSeg(t1,p0,p1)-integrateByTimeLineSeg(t0,p0,p1);}if(type==3.){return integrateByTimeFromLineSeg(t1,value.y,value.z)-integrateByTimeFromLineSeg(t0,value.y,value.z);}if(type==4.){return mix(value.y,value.z,aSeed)*(t1*t1-t0*t0)/2.;}if(type==5.){return integrateFromBezierCurveFrames(t1,value.z,value.w)-integrateFromBezierCurveFrames(t0,value.z,value.w);}return 0.;}const float d2r=3.141592653589793/180.;attribute vec3 aPos;attribute vec4 aOffset;attribute vec4 aColor;attribute vec3 aDirX;attribute vec3 aDirY;attribute vec3 aTranslation;attribute vec3 aRotation0;attribute vec3 aRotation1;attribute vec3 aRotation2;attribute vec3 aLinearMove;\n#ifdef USE_SPRITE\nattribute vec3 aSprite;uniform vec4 uSprite;struct UVDetail{vec2 uv0;vec3 uv1;};UVDetail getSpriteUV(vec2 uv,float lifeTime);varying vec4 vTexCoordBlend;\n#endif\n#ifdef FINAL_TARGET\nuniform vec3 uFinalTarget;uniform vec4 uForceCurve;\n#endif\nuniform mat4 effects_ObjectToWorld;uniform mat4 effects_MatrixV;uniform mat4 effects_MatrixVP;uniform vec4 uParams;uniform vec4 uOpacityOverLifetimeValue;\n#ifdef COLOR_OVER_LIFETIME\nuniform sampler2D uColorOverLifetime;\n#endif\nuniform vec4 uOrbXByLifetimeValue;uniform vec4 uOrbYByLifetimeValue;uniform vec4 uOrbZByLifetimeValue;uniform vec3 uOrbCenter;uniform vec4 uSizeByLifetimeValue;\n#ifdef SIZE_Y_BY_LIFE\nuniform vec4 uSizeYByLifetimeValue;\n#endif\nvarying float vLife;varying vec4 vColor;varying vec2 vTexCoord;\n#ifdef ENV_EDITOR\nuniform vec4 uEditorTransform;\n#endif\nvec3 calOrbitalMov(float _life,float _dur){vec3 orb=vec3(0.0);\n#ifdef AS_ORBITAL_MOVEMENT\n#define FUNC(a) getValueFromTime(_life,a)\n#else\n#define FUNC(a) getIntegrateFromTime0(_life,a) * _dur\n#endif\n#if ORB_VEL_X\norb.x=FUNC(uOrbXByLifetimeValue);\n#endif\n#if ORB_VEL_Y\norb.y=FUNC(uOrbYByLifetimeValue);\n#endif\n#if ORB_VEL_Z\norb.z=FUNC(uOrbZByLifetimeValue);\n#endif\n#undef FUNC\nreturn orb;}mat3 mat3FromRotation(vec3 rotation){vec3 sinR=sin(rotation*d2r);vec3 cosR=cos(rotation*d2r);return mat3(cosR.z,-sinR.z,0.,sinR.z,cosR.z,0.,0.,0.,1.)*mat3(cosR.y,0.,sinR.y,0.,1.,0.,-sinR.y,0,cosR.y)*mat3(1.,0.,0.,0,cosR.x,-sinR.x,0.,sinR.x,cosR.x);}\n#ifdef USE_SPRITE\nUVDetail getSpriteUV(vec2 uv,float lifeTime){float t=fract(clamp((lifeTime-aSprite.x)/aSprite.y,0.0,1.)*aSprite.z);float frame=uSprite.z*t;float frameIndex=max(ceil(frame)-1.,0.);float row=floor((frameIndex+0.1)/uSprite.x);float col=frameIndex-row*uSprite.x;vec2 retUV=(vec2(col,row)+uv)/uSprite.xy;UVDetail ret;if(uSprite.w>0.){float blend=frame-frameIndex;float frameIndex1=min(ceil(frame),uSprite.z-1.);float row1=floor((frameIndex1+0.1)/uSprite.x);float col1=frameIndex1-row1*uSprite.x;vec2 coord=(vec2(col1,row1)+uv)/uSprite.xy-retUV;ret.uv1=vec3(coord.x,1.-coord.y,blend);}ret.uv0=vec2(retUV.x,1.-retUV.y);return ret;}\n#endif\nvoid main(){float time=uParams.x-aOffset.z;float dur=aOffset.w;if(time<0.||time>dur){gl_Position=vec4(-3.,-3.,-3.,1.);}else{float life=clamp(time/dur,0.0,1.0);vLife=life;\n#ifdef USE_SPRITE\nUVDetail uvD=getSpriteUV(aOffset.xy,time);vTexCoord=uvD.uv0;vTexCoordBlend=vec4(uvD.uv1,uSprite.w);\n#else\nvTexCoord=aOffset.xy;\n#endif\nvColor=aColor;\n#ifdef COLOR_OVER_LIFETIME\n#ifdef ENABLE_VERTEX_TEXTURE\nvColor*=texture2D(uColorOverLifetime,vec2(life,0.));\n#endif\n#endif\nvColor.a*=clamp(getValueFromTime(life,uOpacityOverLifetimeValue),0.,1.);vec3 size=vec3(vec2(getValueFromTime(life,uSizeByLifetimeValue)),1.0);\n#ifdef SIZE_Y_BY_LIFE\nsize.y=getValueFromTime(life,uSizeYByLifetimeValue);\n#endif\nmat3 aRotation=mat3(aRotation0,aRotation1,aRotation2);vec3 point=aRotation*(aDirX*size.x+aDirY*size.y);vec3 _pos=aPos+aTranslation;\n#if ORB_VEL_X + ORB_VEL_Y + ORB_VEL_Z\n_pos=mat3FromRotation(calOrbitalMov(life,dur))*(_pos-uOrbCenter);_pos+=uOrbCenter;\n#endif\n_pos.xyz+=aLinearMove;\n#ifdef FINAL_TARGET\nfloat force=getValueFromTime(life,uForceCurve);vec4 pos=vec4(mix(_pos,uFinalTarget,force),1.);\n#else\nvec4 pos=vec4(_pos,1.0);\n#endif\n#if RENDER_MODE == 1\npos.xyz+=point;pos=effects_ObjectToWorld*pos;\n#elif RENDER_MODE == 3\npos=effects_ObjectToWorld*pos;pos.xyz+=effects_MatrixV[0].xyz*point.x+effects_MatrixV[2].xyz*point.y;\n#elif RENDER_MODE == 2\npos=effects_ObjectToWorld*pos;pos.xy+=point.xy;\n#elif RENDER_MODE == 0\npos=effects_ObjectToWorld*pos;pos.xyz+=effects_MatrixV[0].xyz*point.x+effects_MatrixV[1].xyz*point.y;\n#endif\ngl_Position=effects_MatrixVP*pos;vSeed=aSeed;gl_PointSize=6.0;\n#ifdef ENV_EDITOR\ngl_Position=vec4(gl_Position.xy*uEditorTransform.xy+uEditorTransform.zw*gl_Position.w,gl_Position.zw);\n#endif\n}}";
 
 var trailVert = "#version 100\nprecision mediump float;\n#define SHADER_VERTEX 1\n#ifdef SHADER_VERTEX\n#define CURVE_VALUE_TEXTURE uVCurveValueTexture\n#define CURVE_VALUE_ARRAY uVCurveValues\n#define CURVE_VALUE_COUNT VERT_CURVE_VALUE_COUNT\n#define FRAG_CURVE_VALUE_COUNT 0\n#else\n#define CURVE_VALUE_TEXTURE uFCurveValueTexture\n#define CURVE_VALUE_ARRAY uFCurveValues\n#define CURVE_VALUE_COUNT FRAG_CURVE_VALUE_COUNT\n#define VERT_CURVE_VALUE_COUNT 0\n#endif\n#if CURVE_VALUE_COUNT > 0\n#if LOOKUP_TEXTURE_CURVE\nuniform sampler2D CURVE_VALUE_TEXTURE;const float uCurveCount=1./float(CURVE_VALUE_COUNT);\n#define lookup_curve(i) texture2D(CURVE_VALUE_TEXTURE,vec2(float(i) * uCurveCount,0.))\n#else\nuniform vec4 CURVE_VALUE_ARRAY[CURVE_VALUE_COUNT];\n#define lookup_curve(i) CURVE_VALUE_ARRAY[i]\n#endif\n#else\n#define lookup_curve(i) vec4(0.)\n#endif\n#ifdef WEBGL2\n#define ITR_END (count + 1)\n#else\n#define ITR_END MAX_C\n#endif\n#define NONE_CONST_INDEX 1\n#ifdef SHADER_VERTEX\nattribute float aSeed;varying float vSeed;\n#endif\n#ifdef SHADER_VERTEX\n#define MAX_C VERT_MAX_KEY_FRAME_COUNT\n#else\n#define MAX_C FRAG_MAX_KEY_FRAME_COUNT\n#endif\nmat4 cubicBezierMatrix=mat4(1.0,-3.0,3.0,-1.0,0.0,3.0,-6.0,3.0,0.0,0.0,3.0,-3.0,0.0,0.0,0.0,1.0);float cubicBezier(float t,float y1,float y2,float y3,float y4){vec4 tVec=vec4(1.0,t,t*t,t*t*t);vec4 yVec=vec4(y1,y2,y3,y4);vec4 result=tVec*cubicBezierMatrix*yVec;return result.x+result.y+result.z+result.w;}float binarySearchT(float x,float x1,float x2,float x3,float x4){float left=0.0;float right=1.0;float mid=0.0;float computedX;for(int i=0;i<8;i++){mid=(left+right)*0.5;computedX=cubicBezier(mid,x1,x2,x3,x4);if(abs(computedX-x)<0.0001){break;}else if(computedX>x){right=mid;}else{left=mid;}}return mid;}float valueFromBezierCurveFrames(float time,float frameStart,float frameCount){int start=int(frameStart);int count=int(frameCount-1.);for(int i=0;i<ITR_END;i+=2){if(i>=count){break;}vec4 k0=lookup_curve(i+start);vec4 k1=lookup_curve(i+1+start);if(i==0&&time<k0.x){return k0.y;}if(i==int(frameCount-2.)&&time>=k1.x){return k1.y;}if(time>=k0.x&&time<=k1.x){float t=(time-k0.x)/(k1.x-k0.x);float nt=binarySearchT(time,k0.x,k0.z,k1.z,k1.x);return cubicBezier(nt,k0.y,k0.w,k1.w,k1.y);}}}float evaluteLineSeg(float t,vec2 p0,vec2 p1){return p0.y+(p1.y-p0.y)*(t-p0.x)/(p1.x-p0.x);}float valueFromLineSegs(float time,float frameStart,float frameCount){int start=int(frameStart);int count=int(frameCount-1.);int end=start+count;for(int i=0;i<ITR_END;i++){if(i>count){return lookup_curve(i).w;}vec4 seg=lookup_curve(i+start);vec2 p0=seg.xy;vec2 p1=seg.zw;if(time>=p0.x&&time<=p1.x){return evaluteLineSeg(time,p0,p1);}vec2 p2=lookup_curve(i+start+1).xy;if(time>p1.x&&time<=p2.x){return evaluteLineSeg(time,p1,p2);}}return lookup_curve(0).y;}float getValueFromTime(float time,vec4 value){float type=value.x;if(type==0.){return value.y;}if(type==1.){return mix(value.y,value.z,time/value.w);}if(type==3.){return valueFromLineSegs(time,value.y,value.z);}if(type==4.){return mix(value.y,value.z,aSeed);}if(type==5.){return valueFromBezierCurveFrames(time,value.z,value.w);}return 0.;}attribute vec4 aPos;attribute vec3 aDir;attribute vec3 aInfo;attribute vec4 aColor;attribute float aTime;\n#ifdef ATTR_TRAIL_START\nattribute float aTrailStart;\n#else\nuniform float uTrailStart[64];attribute float aTrailStartIndex;\n#endif\nuniform mat4 effects_MatrixInvV;uniform mat4 effects_ObjectToWorld;uniform mat4 effects_MatrixVP;uniform vec4 uTextureMap;uniform float uTime;uniform vec4 uParams;uniform vec4 uColorParams;uniform vec4 uOpacityOverLifetimeValue;uniform vec4 uWidthOverTrail;\n#ifdef COLOR_OVER_TRAIL\nuniform sampler2D uColorOverTrail;\n#endif\n#ifdef COLOR_OVER_LIFETIME\nuniform sampler2D uColorOverLifetime;\n#endif\nvarying float vLife;varying vec2 vTexCoord;varying vec4 vColor;\n#ifdef ENV_EDITOR\nuniform vec4 uEditorTransform;\n#endif\nvoid main(){vec4 _pa=effects_MatrixVP*vec4(aPos.xyz,1.);vec4 _pb=effects_MatrixVP*vec4(aPos.xyz+aDir,1.);vec2 dir=normalize(_pb.xy/_pb.w-_pa.xy/_pa.w);vec2 screen_xy=vec2(-dir.y,dir.x);vec4 pos=effects_ObjectToWorld*vec4(aPos.xyz,1.);\n#ifdef ATTR_TRAIL_START\nfloat ts=aTrailStart;\n#else\nfloat ts=uTrailStart[int(aTrailStartIndex)];\n#endif\nfloat trail=(ts-aInfo.y)/uParams.y;float width=aPos.w*getValueFromTime(trail,uWidthOverTrail)/max(abs(screen_xy.x),abs(screen_xy.y));pos.xyz+=(effects_MatrixInvV[0].xyz*screen_xy.x+effects_MatrixInvV[1].xyz*screen_xy.y)*width;float time=min((uTime-aTime)/aInfo.x,1.0);gl_Position=effects_MatrixVP*pos;vColor=aColor;\n#ifdef COLOR_OVER_LIFETIME\n#ifdef ENABLE_VERTEX_TEXTURE\nvColor*=texture2D(uColorOverLifetime,vec2(time,0.));\n#endif\n#endif\n#ifdef COLOR_OVER_TRAIL\nvColor*=texture2D(uColorOverTrail,vec2(trail,0.));\n#endif\nvColor.a*=clamp(getValueFromTime(time,uOpacityOverLifetimeValue),0.,1.);vLife=time;vTexCoord=uTextureMap.xy+vec2(trail,aInfo.z)*uTextureMap.zw;vSeed=aSeed;\n#ifdef ENV_EDITOR\ngl_Position=vec4(gl_Position.xy*uEditorTransform.xy+uEditorTransform.zw*gl_Position.w,gl_Position.zw);\n#endif\n}";
 
@@ -13274,7 +13301,7 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         return _this;
     }
     var _proto = InteractComponent.prototype;
-    _proto.start = function start() {
+    _proto.onStart = function onStart() {
         var _this = this;
         var options = this.item.props.content.options;
         var env = this.item.engine.renderer.env;
@@ -13310,8 +13337,11 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
             }
         };
     };
-    _proto.update = function update(dt) {
+    _proto.onUpdate = function onUpdate(dt) {
         var _this_previewContent;
+        if (!this.isActiveAndEnabled) {
+            return;
+        }
         (_this_previewContent = this.previewContent) == null ? void 0 : _this_previewContent.updateMesh();
         if (!this.hasBeenAddedToComposition && this.item.composition) {
             var options = this.item.props.content.options;
@@ -13654,6 +13684,9 @@ function _assert_this_initialized(self) {
         this.outputs = [];
         this.playState = 0;
         this.traversalMode = 0;
+        /**
+   * 当前本地播放的时间
+   */ this.time = 0;
         graph.addPlayable(this);
         this.inputs = new Array(inputCount);
         this.inputOuputPorts = new Array(inputCount);
@@ -14099,10 +14132,10 @@ exports.SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
         this.material.setVector2("_Size", this.transform.size);
         renderer.drawGeometry(geo, material);
     };
-    _proto.start = function start() {
+    _proto.onStart = function onStart() {
         this.item.getHitTestParams = this.getHitTestParams;
     };
-    _proto.update = function update(dt) {
+    _proto.onUpdate = function onUpdate(dt) {
         if (!this.isManualTimeSet) {
             this.frameAnimationTime += dt / 1000;
             this.isManualTimeSet = false;
@@ -16525,17 +16558,18 @@ function getTrailMeshShader(trails, particleMaxCount, name, gpuCapability, env)
         return _this;
     }
     var _proto = ParticleSystemRenderer.prototype;
-    _proto.start = function start() {
+    _proto.onStart = function onStart() {
         this._priority = this.item.renderOrder;
         this.particleMesh.gravityModifier.scaleXCoord(this.item.duration);
         for(var _iterator = _create_for_of_iterator_helper_loose(this.meshes), _step; !(_step = _iterator()).done;){
             var mesh = _step.value;
-            mesh.start();
+            mesh.onStart();
         }
     };
-    _proto.update = function update(dt) {
+    _proto.onUpdate = function onUpdate(dt) {
         var time = this.particleMesh.time;
         this.particleMesh.mesh.material.setVector4("uParams", new Vector4(time, this.item.duration, 0, 0));
+        this.particleMesh.onUpdate(dt);
     };
     _proto.render = function render(renderer) {
         for(var _iterator = _create_for_of_iterator_helper_loose(this.meshes), _step; !(_step = _iterator()).done;){
@@ -16550,6 +16584,7 @@ function getTrailMeshShader(trails, particleMaxCount, name, gpuCapability, env)
     };
     _proto.updateTime = function updateTime(now, delta) {
         this.particleMesh.time = now;
+        // this.particleMesh.onUpdate(delta);
         if (this.trailMesh) {
             this.trailMesh.time = now;
             this.trailMesh.onUpdate(delta);
@@ -16760,7 +16795,7 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
     _proto.getTextures = function getTextures() {
         return this.renderer.getTextures();
     };
-    _proto.start = function start() {
+    _proto.startEmit = function startEmit() {
         if (!this.started || this.ended) {
             this.reset();
             this.started = true;
@@ -16786,7 +16821,7 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
         this.frozen = false;
         this.ended = false;
     };
-    _proto.onUpdate = function onUpdate(delta) {
+    _proto.update = function update(delta) {
         var _this = this;
         if (this.started && !this.frozen) {
             var now = this.lastUpdate + delta / 1000;
@@ -17586,7 +17621,7 @@ function randomArrItem(arr, keepArr) {
         this.particleSystem = boundObject.getComponent(exports.ParticleSystem);
         if (this.particleSystem) {
             this.particleSystem.name = boundObject.name;
-            this.particleSystem.start();
+            this.particleSystem.startEmit();
             this.particleSystem.initEmitterTransform();
         }
     };
@@ -17603,7 +17638,7 @@ function randomArrItem(arr, keepArr) {
             if (Math.abs(this.time - this.lastTime) < 0.001) {
                 deltaTime = 0;
             }
-            particleSystem.onUpdate(deltaTime);
+            particleSystem.update(deltaTime);
         }
         this.lastTime = this.time;
     };
@@ -17656,6 +17691,7 @@ var particleUniformTypeMap = {
 var ParticleMesh = /*#__PURE__*/ function() {
     function ParticleMesh(engine, props) {
         this.particleCount = 0;
+        this.VERT_MAX_KEY_FRAME_COUNT = 0;
         var _engine_renderer;
         var env = ((_engine_renderer = engine.renderer) != null ? _engine_renderer : {}).env;
         var speedOverLifetime = props.speedOverLifetime, colorOverLifetime = props.colorOverLifetime, linearVelOverLifetime = props.linearVelOverLifetime, orbitalVelOverLifetime = props.orbitalVelOverLifetime, sizeOverLifetime = props.sizeOverLifetime, rotationOverLifetime = props.rotationOverLifetime, sprite = props.sprite, gravityModifier = props.gravityModifier, maxCount = props.maxCount, textureFlip = props.textureFlip, useSprite = props.useSprite, name = props.name, gravity = props.gravity, forceTarget = props.forceTarget, side = props.side, occlusion = props.occlusion, anchor = props.anchor, blending = props.blending, maskMode = props.maskMode, mask = props.mask, transparentOcclusion = props.transparentOcclusion, meshSlots = props.meshSlots, _props_renderMode = props.renderMode, renderMode = _props_renderMode === void 0 ? 0 : _props_renderMode, _props_diffuse = props.diffuse, diffuse = _props_diffuse === void 0 ? Texture.createWithData(engine) : _props_diffuse;
@@ -17874,6 +17910,7 @@ var ParticleMesh = /*#__PURE__*/ function() {
             "FRAG_MAX_KEY_FRAME_COUNT",
             fragmentKeyFrameMeta.max
         ]);
+        this.VERT_MAX_KEY_FRAME_COUNT = vertexKeyFrameMeta.max;
         var fragment = particleFrag;
         var originalVertex = "#define LOOKUP_TEXTURE_CURVE " + vertex_lookup_texture + "\n" + particleVert;
         var vertex = originalVertex;
@@ -17982,6 +18019,7 @@ var ParticleMesh = /*#__PURE__*/ function() {
         this.orbitalVelOverLifetime = orbitalVelOverLifetime;
         this.orbitalVelOverLifetime = orbitalVelOverLifetime;
         this.gravityModifier = gravityModifier;
+        this.rotationOverLifetime = rotationOverLifetime;
         this.maxCount = maxCount;
         // this.duration = duration;
         this.textureOffsets = textureFlip ? [
@@ -18046,15 +18084,232 @@ var ParticleMesh = /*#__PURE__*/ function() {
         // @ts-expect-error
         geometry.setIndexData(new index.constructor(0));
     };
+    _proto.onUpdate = function onUpdate(dt) {
+        var aPosArray = this.geometry.getAttributeData("aPos"); // vector3
+        var aVelArray = this.geometry.getAttributeData("aVel"); // vector3
+        var aOffsetArray = this.geometry.getAttributeData("aOffset");
+        var aRotArray = this.geometry.getAttributeData("aRot"); // vector3
+        var aSeedArray = this.geometry.getAttributeData("aSeed"); // float
+        // const uParams = this.mesh.material.getVector4('uParams');
+        // if (!uParams) {
+        //   return;
+        // }
+        var localTime = new Float32Array([
+            this.time
+        ])[0];
+        var particleCount = Math.ceil(aPosArray.length / 12);
+        // calculate particle translation
+        var aTranslationArray = this.geometry.getAttributeData("aTranslation");
+        if (aTranslationArray.length < particleCount * 3) {
+            aTranslationArray = new Float32Array(particleCount * 3);
+        }
+        var velocity = new Vector3(0, 0, 0);
+        for(var i = 0; i < particleCount; i++){
+            var velOffset = i * 12 + 3;
+            velocity.set(aVelArray[velOffset], aVelArray[velOffset + 1], aVelArray[velOffset + 2]);
+            var trans = this.calculateTranslation(velocity, aOffsetArray[i * 4 + 2], localTime, aOffsetArray[i * 4 + 3]);
+            var aTranslationOffset = i * 3;
+            aTranslationArray[aTranslationOffset] = trans.x;
+            aTranslationArray[aTranslationOffset + 1] = trans.y;
+            aTranslationArray[aTranslationOffset + 2] = trans.z;
+        }
+        this.geometry.setAttributeData("aTranslation", aTranslationArray);
+        // calculate particle rotation
+        var aRotationArray = this.geometry.getAttributeData("aRotation0");
+        if (aRotationArray.length < particleCount * 9) {
+            aRotationArray = new Float32Array(particleCount * 9);
+        }
+        for(var i1 = 0; i1 < particleCount; i1++){
+            var time = localTime - aOffsetArray[i1 * 4 + 2];
+            var duration = aOffsetArray[i1 * 4 + 3];
+            var life = clamp$1(time / duration, 0.0, 1.0);
+            var aRotOffset = i1 * 8;
+            var aRot = new Vector3(aRotArray[aRotOffset], aRotArray[aRotOffset + 1], aRotArray[aRotOffset + 2]);
+            var aSeed = aSeedArray[i1 * 8 + 3];
+            var aRotation = this.transformFromRotation(aRot, life, duration, aSeed);
+            var aRotationOffset = i1 * 9;
+            var matrixArray = aRotation.toArray();
+            aRotationArray.set(matrixArray, aRotationOffset);
+        }
+        this.geometry.setAttributeData("aRotation0", aRotationArray);
+        // calculate linear movement
+        var aLinearMoveArray = this.geometry.getAttributeData("aLinearMove");
+        if (aLinearMoveArray.length < particleCount * 3) {
+            aLinearMoveArray = new Float32Array(particleCount * 3);
+        }
+        for(var i2 = 0; i2 < particleCount; i2++){
+            var time1 = localTime - aOffsetArray[i2 * 4 + 2];
+            var duration1 = aOffsetArray[i2 * 4 + 3];
+            // const life = math.clamp(time / duration, 0.0, 1.0);
+            var aSeed1 = aSeedArray[i2 * 8 + 3];
+            var linearMove = this.calLinearMov(time1, duration1, aSeed1);
+            var aLinearMoveOffset = i2 * 3;
+            aLinearMoveArray[aLinearMoveOffset] = linearMove.x;
+            aLinearMoveArray[aLinearMoveOffset + 1] = linearMove.y;
+            aLinearMoveArray[aLinearMoveOffset + 2] = linearMove.z;
+        }
+        this.geometry.setAttributeData("aLinearMove", aLinearMoveArray);
+    };
     _proto.minusTime = function minusTime(time) {
-        var data = this.geometry.getAttributeData("aOffset");
-        assertExist(data);
-        for(var i = 0; i < data.length; i += 4){
-            data[i + 2] -= time;
+        var aOffset = this.geometry.getAttributeData("aOffset");
+        for(var i = 0; i < aOffset.length; i += 4){
+            aOffset[i + 2] -= time;
         }
-        this.geometry.setAttributeData("aOffset", data);
+        this.geometry.setAttributeData("aOffset", aOffset);
         this.time -= time;
     };
+    _proto.calculateTranslation = function calculateTranslation(velocity, t0, t1, duration) {
+        var uAcceleration = this.mesh.material.getVector4("uAcceleration");
+        var uGravityModifierValue = this.mesh.material.getVector4("uGravityModifierValue");
+        if (!uAcceleration || !uGravityModifierValue) {
+            return new Vector3();
+        }
+        var dt = t1 - t0; // 相对delay的时间
+        var d = this.gravityModifier.getIntegrateByTime(0, dt);
+        var acc = [
+            uAcceleration.x * d,
+            uAcceleration.y * d,
+            uAcceleration.z * d
+        ];
+        // ret.addScaledVector(velData, speedIntegrate);
+        // ret.addScaledVector(acc, d);
+        // speedIntegrate = speedOverLifetime.getIntegrateValue(0, time, duration);
+        if (this.speedOverLifetime) {
+            // dt / dur 归一化
+            var speed = this.speedOverLifetime.getIntegrateValue(0, dt, duration);
+            return velocity.clone().multiply(speed).add(acc);
+        }
+        return velocity.clone().multiply(dt).add(acc);
+    };
+    _proto.transformFromRotation = function transformFromRotation(rot, life, dur, aSeed) {
+        var rotation = rot.clone();
+        if (!this.rotationOverLifetime) {
+            return new Matrix3();
+        }
+        if (this.rotationOverLifetime.asRotation) {
+            // Adjust rotation based on the specified lifetime components
+            if (this.rotationOverLifetime.x) {
+                if (_instanceof1(this.rotationOverLifetime.x, RandomValue)) {
+                    rotation.x += this.rotationOverLifetime.x.getValue(life, aSeed);
+                } else {
+                    rotation.x += this.rotationOverLifetime.x.getValue(life);
+                }
+            }
+            if (this.rotationOverLifetime.y) {
+                if (_instanceof1(this.rotationOverLifetime.y, RandomValue)) {
+                    rotation.y += this.rotationOverLifetime.y.getValue(life, aSeed);
+                } else {
+                    rotation.y += this.rotationOverLifetime.y.getValue(life);
+                }
+            }
+            if (this.rotationOverLifetime.z) {
+                if (_instanceof1(this.rotationOverLifetime.z, RandomValue)) {
+                    rotation.z += this.rotationOverLifetime.z.getValue(life, aSeed);
+                } else {
+                    rotation.z += this.rotationOverLifetime.z.getValue(life);
+                }
+            }
+        } else {
+            // Adjust rotation based on the specified lifetime components
+            if (this.rotationOverLifetime.x) {
+                if (_instanceof1(this.rotationOverLifetime.x, RandomValue)) {
+                    rotation.x += this.rotationOverLifetime.x.getIntegrateValue(0.0, life, aSeed) * dur;
+                } else {
+                    rotation.x += this.rotationOverLifetime.x.getIntegrateValue(0.0, life, dur) * dur;
+                }
+            }
+            if (this.rotationOverLifetime.y) {
+                if (_instanceof1(this.rotationOverLifetime.y, RandomValue)) {
+                    rotation.y += this.rotationOverLifetime.y.getIntegrateValue(0.0, life, aSeed) * dur;
+                } else {
+                    rotation.y += this.rotationOverLifetime.y.getIntegrateValue(0.0, life, dur) * dur;
+                }
+            }
+            if (this.rotationOverLifetime.z) {
+                if (_instanceof1(this.rotationOverLifetime.z, RandomValue)) {
+                    rotation.z += this.rotationOverLifetime.z.getIntegrateValue(0.0, life, aSeed) * dur;
+                } else {
+                    rotation.z += this.rotationOverLifetime.z.getIntegrateValue(0.0, life, dur) * dur;
+                }
+            }
+        }
+        // If the rotation vector is zero, return the identity matrix
+        if (rotation.dot(rotation) === 0.0) {
+            return new Matrix3().identity();
+        }
+        // Return the rotation matrix derived from the rotation vector
+        return this.mat3FromRotation(rotation);
+    };
+    _proto.mat3FromRotation = function mat3FromRotation(rotation) {
+        var d2r = Math.PI / 180;
+        var sinR = rotation.clone().multiply(d2r);
+        sinR.x = Math.sin(sinR.x);
+        sinR.y = Math.sin(sinR.y);
+        sinR.z = Math.sin(sinR.z);
+        var cosR = rotation.clone().multiply(d2r);
+        cosR.x = Math.cos(cosR.x);
+        cosR.y = Math.cos(cosR.y);
+        cosR.z = Math.cos(cosR.z);
+        var rotZ = new Matrix3(cosR.z, -sinR.z, 0., sinR.z, cosR.z, 0., 0., 0., 1.);
+        var rotY = new Matrix3(cosR.y, 0., sinR.y, 0., 1., 0., -sinR.y, 0, cosR.y);
+        var rotX = new Matrix3(1., 0., 0., 0, cosR.x, -sinR.x, 0., sinR.x, cosR.x);
+        var result = rotZ.multiply(rotY).multiply(rotX);
+        return result;
+    };
+    _proto.calLinearMov = function calLinearMov(time, duration, aSeed) {
+        var mov = new Vector3();
+        var lifetime = time / duration;
+        if (!this.linearVelOverLifetime || !this.linearVelOverLifetime.enabled) {
+            return new Vector3();
+        }
+        if (this.linearVelOverLifetime.asMovement) {
+            if (this.linearVelOverLifetime.x) {
+                if (_instanceof1(this.linearVelOverLifetime.x, RandomValue)) {
+                    mov.x = this.linearVelOverLifetime.x.getValue(lifetime, aSeed);
+                } else {
+                    mov.x = this.linearVelOverLifetime.x.getValue(lifetime);
+                }
+            }
+            if (this.linearVelOverLifetime.y) {
+                if (_instanceof1(this.linearVelOverLifetime.y, RandomValue)) {
+                    mov.y = this.linearVelOverLifetime.y.getValue(lifetime, aSeed);
+                } else {
+                    mov.y = this.linearVelOverLifetime.y.getValue(lifetime);
+                }
+            }
+            if (this.linearVelOverLifetime.z) {
+                if (_instanceof1(this.linearVelOverLifetime.z, RandomValue)) {
+                    mov.z = this.linearVelOverLifetime.z.getValue(lifetime, aSeed);
+                } else {
+                    mov.z = this.linearVelOverLifetime.z.getValue(lifetime);
+                }
+            }
+        } else {
+            // Adjust rotation based on the specified lifetime components
+            if (this.linearVelOverLifetime.x) {
+                if (_instanceof1(this.linearVelOverLifetime.x, RandomValue)) {
+                    mov.x = this.linearVelOverLifetime.x.getIntegrateValue(0.0, time, aSeed);
+                } else {
+                    mov.x = this.linearVelOverLifetime.x.getIntegrateValue(0.0, time, duration);
+                }
+            }
+            if (this.linearVelOverLifetime.y) {
+                if (_instanceof1(this.linearVelOverLifetime.y, RandomValue)) {
+                    mov.y = this.linearVelOverLifetime.y.getIntegrateValue(0.0, time, aSeed);
+                } else {
+                    mov.y = this.linearVelOverLifetime.y.getIntegrateValue(0.0, time, duration);
+                }
+            }
+            if (this.linearVelOverLifetime.z) {
+                if (_instanceof1(this.linearVelOverLifetime.z, RandomValue)) {
+                    mov.z = this.linearVelOverLifetime.z.getIntegrateValue(0.0, time, aSeed);
+                } else {
+                    mov.z = this.linearVelOverLifetime.z.getIntegrateValue(0.0, time, duration);
+                }
+            }
+        }
+        return mov;
+    };
     _proto.removePoint = function removePoint(index) {
         if (index < this.particleCount) {
             this.geometry.setAttributeSubData("aOffset", index * 16, new Float32Array(16));
@@ -18256,6 +18511,32 @@ function generateGeometryProps(maxVertex, useSprite, name) {
             size: 4,
             stride: 4 * bpe,
             data: new Float32Array(0)
+        },
+        aTranslation: {
+            size: 3,
+            data: new Float32Array(0)
+        },
+        aLinearMove: {
+            size: 3,
+            data: new Float32Array(0)
+        },
+        aRotation0: {
+            size: 3,
+            offset: 0,
+            stride: 9 * bpe,
+            data: new Float32Array(0)
+        },
+        aRotation1: {
+            size: 3,
+            offset: 3 * bpe,
+            stride: 9 * bpe,
+            dataSource: "aRotation0"
+        },
+        aRotation2: {
+            size: 3,
+            offset: 6 * bpe,
+            stride: 9 * bpe,
+            dataSource: "aRotation0"
         }
     };
     if (useSprite) {
@@ -19333,25 +19614,15 @@ var TrackSortWrapper = function TrackSortWrapper(track, originalIndex) {
     this.track = track;
     this.originalIndex = originalIndex;
 };
-function isAncestor(ancestorCandidate, descendantCandidate) {
-    var current = descendantCandidate.parent;
-    while(current){
-        if (current === ancestorCandidate) {
-            return true;
-        }
-        current = current.parent;
-    }
-    return false;
-}
 function compareTracks(a, b) {
     var bindingA = a.track.binding;
     var bindingB = b.track.binding;
     if (!_instanceof1(bindingA, exports.VFXItem) || !_instanceof1(bindingB, exports.VFXItem)) {
         return a.originalIndex - b.originalIndex;
     }
-    if (isAncestor(bindingA, bindingB)) {
+    if (exports.VFXItem.isAncestor(bindingA, bindingB)) {
         return -1;
-    } else if (isAncestor(bindingB, bindingA)) {
+    } else if (exports.VFXItem.isAncestor(bindingB, bindingA)) {
         return 1;
     } else {
         return a.originalIndex - b.originalIndex; // 非父子关系的元素保持原始顺序
@@ -19375,7 +19646,7 @@ function compareTracks(a, b) {
         return _this;
     }
     var _proto = CompositionComponent.prototype;
-    _proto.start = function start() {
+    _proto.onStart = function onStart() {
         var _this_item_props = this.item.props, _this_item_props_startTime = _this_item_props.startTime, startTime = _this_item_props_startTime === void 0 ? 0 : _this_item_props_startTime;
         this.startTime = startTime;
         this.resolveBindings();
@@ -19403,7 +19674,7 @@ function compareTracks(a, b) {
     _proto.getReusable = function getReusable() {
         return this.reusable;
     };
-    _proto.update = function update(dt) {
+    _proto.onUpdate = function onUpdate(dt) {
         var time = this.time;
         this.timelinePlayable.setTime(time);
         this.graph.evaluate(dt);
@@ -19439,7 +19710,9 @@ function compareTracks(a, b) {
                     props.content = itemData.content;
                     item = assetLoader.loadGUID(itemData.id);
                     item.composition = this.item.composition;
-                    var compositionComponent = item.addComponent(CompositionComponent);
+                    var compositionComponent = new CompositionComponent(this.engine);
+                    compositionComponent.item = item;
+                    item.components.push(compositionComponent);
                     compositionComponent.data = props;
                     compositionComponent.refId = refId;
                     item.transform.parentTransform = this.transform;
@@ -19893,8 +20166,8 @@ exports.TextComponent = /*#__PURE__*/ function(SpriteComponent) {
         return _this;
     }
     var _proto = TextComponent.prototype;
-    _proto.update = function update(dt) {
-        SpriteComponent.prototype.update.call(this, dt);
+    _proto.onUpdate = function onUpdate(dt) {
+        SpriteComponent.prototype.onUpdate.call(this, dt);
         this.updateTexture();
     };
     _proto.fromData = function fromData(data) {
@@ -20309,7 +20582,7 @@ exports.EffectComponent = /*#__PURE__*/ function(RendererComponent) {
         return _this;
     }
     var _proto = EffectComponent.prototype;
-    _proto.start = function start() {
+    _proto.onStart = function onStart() {
         this.item.getHitTestParams = this.getHitTestParams;
     };
     _proto.render = function render(renderer) {
@@ -20436,7 +20709,7 @@ exports.PostProcessVolume = /*#__PURE__*/ function(Behaviour) {
         return _this;
     }
     var _proto = PostProcessVolume.prototype;
-    _proto.start = function start() {
+    _proto.onStart = function onStart() {
         var composition = this.item.composition;
         if (composition) {
             composition.globalVolume = this;
@@ -20578,8 +20851,8 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
    */ _this.ended = false;
         _this.reusable = false;
         _this.type = ItemType.base;
+        _this.isDuringPlay = false;
         _this.components = [];
-        _this.itemBehaviours = [];
         _this.rendererComponents = [];
         /**
    * 元素可见性，该值的改变会触发 `handleVisibleChanged` 回调
@@ -20589,6 +20862,7 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
    * 元素动画的速度
    */ _this.speed = 1;
         _this.listIndex = 0;
+        _this.isEnabled = false;
         _this.eventProcessor = new EventEmitter();
         _this.name = "VFXItem";
         _this.transform.name = _this.name;
@@ -20661,8 +20935,7 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
    */ _proto.addComponent = function addComponent(classConstructor) {
         var newComponent = new classConstructor(this.engine);
         this.components.push(newComponent);
-        newComponent.item = this;
-        newComponent.onAttached();
+        newComponent.setVFXItem(this);
         return newComponent;
     };
     /**
@@ -20695,21 +20968,22 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         return res;
     };
     _proto.setParent = function setParent(vfxItem) {
-        if (vfxItem === this) {
+        if (vfxItem === this && !vfxItem) {
             return;
         }
         if (this.parent) {
             removeItem(this.parent.children, this);
         }
         this.parent = vfxItem;
-        if (vfxItem) {
-            if (!VFXItem.isCamera(this)) {
-                this.transform.parentTransform = vfxItem.transform;
-            }
-            vfxItem.children.push(this);
-            if (!this.composition) {
-                this.composition = vfxItem.composition;
-            }
+        if (!VFXItem.isCamera(this)) {
+            this.transform.parentTransform = vfxItem.transform;
+        }
+        vfxItem.children.push(this);
+        if (!this.composition) {
+            this.composition = vfxItem.composition;
+        }
+        if (!this.isDuringPlay && vfxItem.isDuringPlay) {
+            this.beginPlay();
         }
     };
     /**
@@ -20740,6 +21014,7 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
    */ _proto.setVisible = function setVisible(visible) {
         if (this.visible !== visible) {
             this.visible = !!visible;
+            this.onActiveChanged();
         }
     };
     /**
@@ -20864,6 +21139,57 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         }
         return undefined;
     };
+    /**
+   * @internal
+   */ _proto.beginPlay = function beginPlay() {
+        this.isDuringPlay = true;
+        if (this.composition && this.visible && !this.isEnabled) {
+            this.onEnable();
+        }
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.children), _step; !(_step = _iterator()).done;){
+            var child = _step.value;
+            if (!child.isDuringPlay) {
+                child.beginPlay();
+            }
+        }
+    };
+    /**
+   * @internal
+   */ _proto.onActiveChanged = function onActiveChanged() {
+        if (!this.isEnabled) {
+            this.onEnable();
+        } else {
+            this.onDisable();
+        }
+    };
+    /**
+   * @internal
+   */ _proto.onEnable = function onEnable() {
+        this.isEnabled = true;
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            if (component.enabled && !component.isStartCalled) {
+                component.onStart();
+            }
+        }
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(this.components), _step1; !(_step1 = _iterator1()).done;){
+            var component1 = _step1.value;
+            if (component1.enabled && !component1.isEnableCalled) {
+                component1.enable();
+            }
+        }
+    };
+    /**
+   * @internal
+   */ _proto.onDisable = function onDisable() {
+        this.isEnabled = false;
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            if (component.enabled && component.isEnableCalled) {
+                component.disable();
+            }
+        }
+    };
     _proto.fromData = function fromData(data) {
         EffectsObject.prototype.fromData.call(this, data);
         var id = data.id, name = data.name, delay = data.delay, parentId = data.parentId, endBehavior = data.endBehavior, transform = data.transform, _data_listIndex = data.listIndex, listIndex = _data_listIndex === void 0 ? 0 : _data_listIndex, _data_duration = data.duration, duration = _data_duration === void 0 ? 0 : _data_duration;
@@ -20913,14 +21239,10 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         if (duration <= 0) {
             throw new Error("Item duration can't be less than 0, see " + HELP_LINK["Item duration can't be less than 0"] + ".");
         }
-        this.itemBehaviours.length = 0;
         this.rendererComponents.length = 0;
         for(var _iterator = _create_for_of_iterator_helper_loose(this.components), _step; !(_step = _iterator()).done;){
             var component = _step.value;
             component.item = this;
-            if (_instanceof1(component, Behaviour)) {
-                this.itemBehaviours.push(component);
-            }
             if (_instanceof1(component, RendererComponent)) {
                 this.rendererComponents.push(component);
             }
@@ -21025,6 +21347,16 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
     VFXItem.isExtraCamera = function isExtraCamera(item) {
         return item.id === "extra-camera" && item.name === "extra-camera";
     };
+    VFXItem.isAncestor = function isAncestor(ancestorCandidate, descendantCandidate) {
+        var current = descendantCandidate.parent;
+        while(current){
+            if (current === ancestorCandidate) {
+                return true;
+            }
+            current = current.parent;
+        }
+        return false;
+    };
     _create_class(VFXItem, [
         {
             key: "content",
@@ -24879,6 +25211,109 @@ var listOrder = 0;
     return CompositionSourceManager;
 }();
 
+var SceneTicking = /*#__PURE__*/ function() {
+    function SceneTicking() {
+        this.update = new UpdateTickData();
+        this.lateUpdate = new LateUpdateTickData();
+    }
+    var _proto = SceneTicking.prototype;
+    _proto.addComponent = function addComponent(obj) {
+        if (obj.onUpdate !== Component.prototype.onUpdate) {
+            this.update.addComponent(obj);
+        }
+        if (obj.onLateUpdate !== Component.prototype.onLateUpdate) {
+            this.lateUpdate.addComponent(obj);
+        }
+    };
+    _proto.removeComponent = function removeComponent(obj) {
+        if (obj.onUpdate !== Component.prototype.onUpdate) {
+            this.update.removeComponent(obj);
+        }
+        if (obj.onLateUpdate !== Component.prototype.onLateUpdate) {
+            this.lateUpdate.removeComponent(obj);
+        }
+    };
+    _proto.clear = function clear() {
+        this.update.clear();
+        this.lateUpdate.clear();
+    };
+    return SceneTicking;
+}();
+var TickData = /*#__PURE__*/ function() {
+    function TickData() {
+        this.components = [];
+        this.ticks = [];
+    }
+    var _proto = TickData.prototype;
+    _proto.tick = function tick(dt) {
+        this.tickComponents(this.components, dt);
+        for(var i = 0; i < this.ticks.length; i++){
+            this.ticks[i](dt);
+        }
+    };
+    _proto.tickComponents = function tickComponents(components, dt) {
+    // To be implemented in derived classes
+    };
+    _proto.addComponent = function addComponent(component) {
+        if (!this.components.includes(component)) {
+            this.components.push(component);
+        }
+    };
+    _proto.removeComponent = function removeComponent(component) {
+        var index = this.components.indexOf(component);
+        if (index > -1) {
+            this.components.splice(index, 1);
+        }
+    };
+    _proto.addTick = function addTick(method, callee) {
+        var tick = method.bind(callee);
+        if (!this.ticks.includes(tick)) {
+            this.ticks.push(tick);
+        }
+    };
+    _proto.clear = function clear() {
+        this.components = [];
+    };
+    return TickData;
+}();
+var UpdateTickData = /*#__PURE__*/ function(TickData) {
+    _inherits(UpdateTickData, TickData);
+    function UpdateTickData() {
+        return TickData.apply(this, arguments);
+    }
+    var _proto = UpdateTickData.prototype;
+    _proto.tickComponents = function tickComponents(components, dt) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            component.onUpdate(dt);
+        }
+    };
+    return UpdateTickData;
+}(TickData);
+var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
+    _inherits(LateUpdateTickData, TickData);
+    function LateUpdateTickData() {
+        return TickData.apply(this, arguments);
+    }
+    var _proto = LateUpdateTickData.prototype;
+    _proto.tickComponents = function tickComponents(components, dt) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            component.onLateUpdate(dt);
+        }
+    };
+    return LateUpdateTickData;
+} // function compareComponents (a: Component, b: Component): number {
+ //   const itemA = a.item;
+ //   const itemB = b.item;
+ //   if (VFXItem.isAncestor(itemA, itemB)) {
+ //     return -1;
+ //   } else {
+ //     return 1;
+ //   }
+ // }
+(TickData);
+
 /**
  * 合成抽象类：核心对象，通常一个场景只包含一个合成，可能会有多个合成。
  * 合成中包含了相关的 Item 元素，支持对 Item 元素的创建、更新和销毁。
@@ -24888,6 +25323,7 @@ var listOrder = 0;
     function Composition(props, scene) {
         var _this;
         _this = EventEmitter.call(this) || this;
+        _this.sceneTicking = new SceneTicking();
         /**
    * 动画播放速度
    */ _this.speed = 1;
@@ -24925,9 +25361,12 @@ var listOrder = 0;
         _this.rootItem = new exports.VFXItem(_this.getEngine(), sourceContent);
         _this.rootItem.name = "rootItem";
         _this.rootItem.composition = _assert_this_initialized(_this);
-        _this.rootComposition = _this.rootItem.addComponent(CompositionComponent);
+        // Spawn rootCompositionComponent
+        _this.rootComposition = new CompositionComponent(_this.getEngine());
         _this.rootComposition.startTime = sourceContent.startTime;
         _this.rootComposition.data = sourceContent;
+        _this.rootComposition.item = _this.rootItem;
+        _this.rootItem.components.push(_this.rootComposition);
         var imageUsage = !reusable && imgUsage;
         _this.width = width;
         _this.height = height;
@@ -24961,7 +25400,6 @@ var listOrder = 0;
         _this.rendererOptions = null;
         _this.rootComposition.createContent();
         _this.buildItemTree(_this.rootItem);
-        _this.callAwake(_this.rootItem);
         _this.rootItem.onEnd = function() {
             window.setTimeout(function() {
                 _this.emit("end", {
@@ -24973,6 +25411,16 @@ var listOrder = 0;
         return _this;
     }
     var _proto = Composition.prototype;
+    _proto.initializeSceneTicking = function initializeSceneTicking(item) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(item.components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            this.sceneTicking.addComponent(component);
+        }
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(item.children), _step1; !(_step1 = _iterator1()).done;){
+            var child = _step1.value;
+            this.initializeSceneTicking(child);
+        }
+    };
     /**
    * 获取合成的时长
    */ _proto.getDuration = function getDuration() {
@@ -25076,7 +25524,7 @@ var listOrder = 0;
             this.resume();
         }
         if (!this.rootComposition.isStartCalled) {
-            this.rootComposition.start();
+            this.rootComposition.onStart();
             this.rootComposition.isStartCalled = true;
         }
         this.setSpeed(1);
@@ -25153,9 +25601,12 @@ var listOrder = 0;
         // 更新 model-tree-plugin
         this.updatePluginLoaders(deltaTime);
         // scene VFXItem components lifetime function.
-        this.callStart(this.rootItem);
-        this.callUpdate(this.rootItem, time);
-        this.callLateUpdate(this.rootItem, time);
+        if (!this.rootItem.isDuringPlay) {
+            this.callAwake(this.rootItem);
+            this.rootItem.beginPlay();
+        }
+        this.sceneTicking.update.tick(time);
+        this.sceneTicking.lateUpdate.tick(time);
         this.updateCamera();
         this.prepareRender();
         if (this.shouldDispose()) {
@@ -25208,11 +25659,11 @@ var listOrder = 0;
         return t;
     };
     _proto.callAwake = function callAwake(item) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(item.itemBehaviours), _step; !(_step = _iterator()).done;){
-            var itemBehaviour = _step.value;
-            if (!itemBehaviour.isAwakeCalled) {
-                itemBehaviour.awake();
-                itemBehaviour.isAwakeCalled = true;
+        for(var _iterator = _create_for_of_iterator_helper_loose(item.components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            if (!component.isAwakeCalled) {
+                component.onAwake();
+                component.isAwakeCalled = true;
             }
         }
         for(var _iterator1 = _create_for_of_iterator_helper_loose(item.children), _step1; !(_step1 = _iterator1()).done;){
@@ -25220,72 +25671,6 @@ var listOrder = 0;
             this.callAwake(child);
         }
     };
-    _proto.callStart = function callStart(item) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(item.itemBehaviours), _step; !(_step = _iterator()).done;){
-            var itemBehaviour = _step.value;
-            if (itemBehaviour.isActiveAndEnabled && !itemBehaviour.isStartCalled) {
-                itemBehaviour.start();
-                itemBehaviour.isStartCalled = true;
-            }
-        }
-        for(var _iterator1 = _create_for_of_iterator_helper_loose(item.rendererComponents), _step1; !(_step1 = _iterator1()).done;){
-            var rendererComponent = _step1.value;
-            if (rendererComponent.isActiveAndEnabled && !rendererComponent.isStartCalled) {
-                rendererComponent.start();
-                rendererComponent.isStartCalled = true;
-            }
-        }
-        for(var _iterator2 = _create_for_of_iterator_helper_loose(item.children), _step2; !(_step2 = _iterator2()).done;){
-            var child = _step2.value;
-            this.callStart(child);
-        }
-    };
-    _proto.callUpdate = function callUpdate(item, dt) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(item.itemBehaviours), _step; !(_step = _iterator()).done;){
-            var itemBehaviour = _step.value;
-            if (itemBehaviour.isActiveAndEnabled && itemBehaviour.isStartCalled) {
-                itemBehaviour.update(dt);
-            }
-        }
-        for(var _iterator1 = _create_for_of_iterator_helper_loose(item.rendererComponents), _step1; !(_step1 = _iterator1()).done;){
-            var rendererComponent = _step1.value;
-            if (rendererComponent.isActiveAndEnabled && rendererComponent.isStartCalled) {
-                rendererComponent.update(dt);
-            }
-        }
-        for(var _iterator2 = _create_for_of_iterator_helper_loose(item.children), _step2; !(_step2 = _iterator2()).done;){
-            var child = _step2.value;
-            if (exports.VFXItem.isComposition(child)) {
-                if (child.ended && child.endBehavior === EndBehavior.restart) {
-                    child.ended = false;
-                    // TODO K帧动画在元素重建后需要 tick ，否则会导致元素位置和 k 帧第一帧位置不一致
-                    this.callUpdate(child, 0);
-                } else {
-                    this.callUpdate(child, dt);
-                }
-            } else {
-                this.callUpdate(child, dt);
-            }
-        }
-    };
-    _proto.callLateUpdate = function callLateUpdate(item, dt) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(item.itemBehaviours), _step; !(_step = _iterator()).done;){
-            var itemBehaviour = _step.value;
-            if (itemBehaviour.isActiveAndEnabled && itemBehaviour.isStartCalled) {
-                itemBehaviour.lateUpdate(dt);
-            }
-        }
-        for(var _iterator1 = _create_for_of_iterator_helper_loose(item.rendererComponents), _step1; !(_step1 = _iterator1()).done;){
-            var rendererComponent = _step1.value;
-            if (rendererComponent.isActiveAndEnabled && rendererComponent.isStartCalled) {
-                rendererComponent.lateUpdate(dt);
-            }
-        }
-        for(var _iterator2 = _create_for_of_iterator_helper_loose(item.children), _step2; !(_step2 = _iterator2()).done;){
-            var child = _step2.value;
-            this.callLateUpdate(child, dt);
-        }
-    };
     /**
    * 构建父子树，同时保存到 itemCacheMap 中便于查找
    */ _proto.buildItemTree = function buildItemTree(compVFXItem) {
@@ -27707,7 +28092,7 @@ registerPlugin("sprite", SpriteLoader, exports.VFXItem, true);
 registerPlugin("particle", ParticleLoader, exports.VFXItem, true);
 registerPlugin("cal", CalculateLoader, exports.VFXItem, true);
 registerPlugin("interact", InteractLoader, exports.VFXItem, true);
-var version$1 = "2.0.4";
+var version$1 = "2.1.0-alpha.1";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -28640,8 +29025,8 @@ var seed = 1;
         this.material = mtl;
         this.mesh.material = mtl.material;
     };
-    _proto.start = function start() {
-        Mesh.prototype.start.call(this);
+    _proto.onStart = function onStart() {
+        Mesh.prototype.onStart.call(this);
         this.engine.threeGroup.add(this.mesh);
     };
     /**
@@ -29248,8 +29633,8 @@ exports.ThreeSpriteComponent = /*#__PURE__*/ function(SpriteComponent) {
             }
         }
     };
-    _proto.start = function start() {
-        SpriteComponent.prototype.start.call(this);
+    _proto.onStart = function onStart() {
+        SpriteComponent.prototype.onStart.call(this);
         this.engine.threeGroup.add(this.threeMesh);
     };
     _proto.render = function render(renderer) {
@@ -29320,8 +29705,8 @@ exports.ThreeTextComponent = /*#__PURE__*/ function(ThreeSpriteComponent) {
         return _this;
     }
     var _proto = ThreeTextComponent.prototype;
-    _proto.update = function update(dt) {
-        ThreeSpriteComponent.prototype.update.call(this, dt);
+    _proto.onUpdate = function onUpdate(dt) {
+        ThreeSpriteComponent.prototype.onUpdate.call(this, dt);
         this.updateTexture(false);
     };
     _proto.fromData = function fromData(data) {
@@ -29388,7 +29773,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.0.4";
+var version = "2.1.0-alpha.1";
 logger.info("THREEJS plugin version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;