@galacean/effects-threejs 2.4.8 → 2.5.0-alpha.0

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.4.8
+ * Version: v2.5.0-alpha.0
  */
 
 import * as THREE from 'three';
@@ -343,11 +343,6 @@ function colorToArr$1(hex, normalized) {
                 parseInt(m[2], 16),
                 parseInt(m[3], 16),
                 255
-            ] || [
-                0,
-                0,
-                0,
-                255
             ];
         }
     } else if (_instanceof1(hex, Array)) {
@@ -10210,7 +10205,7 @@ var itemFrame_frag = "#version 100\nprecision highp float;vec4 blendColor(vec4 c
 
 var integrate = "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.;}";
 
-var itemVert = "precision highp float;attribute vec2 atlasOffset;attribute vec3 aPos;varying vec2 vTexCoord;varying vec3 vParams;varying vec4 vColor;uniform vec2 _Size;uniform vec3 _Scale;uniform vec4 _Color;uniform vec4 _TexParams;uniform vec4 _TexOffset;uniform mat4 effects_MatrixVP;uniform mat4 effects_ObjectToWorld;uniform mat4 effects_MatrixV;\n#ifdef ENV_EDITOR\nuniform vec4 uEditorTransform;\n#endif\nvoid main(){vec4 texParams=_TexParams;vTexCoord=vec2(atlasOffset.xy*_TexOffset.zw+_TexOffset.xy);vColor=_Color;vParams=vec3(texParams.w,texParams.y,texParams.x);if(texParams.z==1.0){vec4 pos=vec4(aPos.xy*_Size,aPos.z,1.0);gl_Position=effects_MatrixVP*effects_ObjectToWorld*pos;}else{mat4 view=effects_MatrixV;vec3 camRight=vec3(view[0][0],view[1][0],view[2][0]);vec3 camUp=vec3(view[0][1],view[1][1],view[2][1]);vec3 worldPosition=vec3(effects_ObjectToWorld*vec4(0.0,0.0,0.0,1.0));vec3 vertexPosition=worldPosition+camRight*aPos.x*_Size.x*_Scale.x+camUp*aPos.y*_Size.y*_Scale.y;gl_Position=effects_MatrixVP*vec4(vertexPosition,1.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 itemVert = "precision highp float;attribute vec2 aUV;attribute vec3 aPos;varying vec2 vTexCoord;varying vec3 vParams;varying vec4 vColor;uniform vec2 _Size;uniform vec3 _Scale;uniform vec4 _Color;uniform vec4 _TexParams;uniform vec4 _TexOffset;uniform mat4 effects_MatrixVP;uniform mat4 effects_ObjectToWorld;uniform mat4 effects_MatrixV;\n#ifdef ENV_EDITOR\nuniform vec4 uEditorTransform;\n#endif\nvoid main(){vec4 texParams=_TexParams;vTexCoord=vec2(aUV.xy*_TexOffset.zw+_TexOffset.xy);vColor=_Color;vParams=vec3(texParams.w,texParams.y,texParams.x);if(texParams.z==1.0){vec4 pos=vec4(aPos.xy*_Size,aPos.z,1.0);gl_Position=effects_MatrixVP*effects_ObjectToWorld*pos;}else{mat4 view=effects_MatrixV;vec3 camRight=vec3(view[0][0],view[1][0],view[2][0]);vec3 camUp=vec3(view[0][1],view[1][1],view[2][1]);vec3 worldPosition=vec3(effects_ObjectToWorld*vec4(0.0,0.0,0.0,1.0));vec3 vertexPosition=worldPosition+camRight*aPos.x*_Size.x*_Scale.x+camUp*aPos.y*_Size.y*_Scale.y;gl_Position=effects_MatrixVP*vec4(vertexPosition,1.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 itemFrag = "precision highp float;varying vec4 vColor;varying vec2 vTexCoord;varying vec3 vParams;uniform sampler2D _MainTex;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;}void main(){vec4 color=vec4(0.);\n#ifdef TRANSPARENT_VIDEO\nfloat halfX=vTexCoord.x*0.5;vec2 uv_rgb=vec2(halfX,vTexCoord.y);vec2 uv_alpha=vec2(halfX+0.5,vTexCoord.y);vec3 rgb=texture2D(_MainTex,uv_rgb).rgb;float alpha=max(texture2D(_MainTex,uv_alpha).r,1e-5);vec4 texColor=vec4(rgb/alpha,alpha);\n#else\nvec4 texColor=texture2D(_MainTex,vTexCoord.xy);\n#endif\ncolor=blendColor(texColor,vColor,floor(0.5+vParams.y));\n#ifdef ALPHA_CLIP\nif(color.a<0.04){discard;}\n#endif\ncolor.a=clamp(color.a,0.0,1.0);gl_FragColor=color;}";
 
@@ -12446,6 +12441,15 @@ function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
     return out;
 }
 
+var singleSplits = [
+    [
+        0,
+        0,
+        1,
+        1,
+        undefined
+    ]
+];
 /**
  * @since 2.1.0
  */ var BaseRenderComponent = /*#__PURE__*/ function(RendererComponent) {
@@ -12453,11 +12457,12 @@ function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
     function BaseRenderComponent(engine) {
         var _this;
         _this = RendererComponent.call(this, engine) || this;
-        _this.color = new Color(1, 1, 1, 1);
         _this.visible = true;
+        _this.splits = singleSplits;
         /**
    * 用于点击测试的碰撞器
    */ _this.meshCollider = new MeshCollider();
+        _this._color = new Color(1, 1, 1, 1);
         // TODO 点击测试后续抽象一个 Collider 组件
         _this.getHitTestParams = function(force) {
             var sizeMatrix = Matrix4.fromScale(_this.transform.size.x, _this.transform.size.y, 1);
@@ -12488,6 +12493,58 @@ function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
             mask: 0,
             alphaMask: false
         };
+        _this.defaultGeometry = Geometry.create(_this.engine, {
+            attributes: {
+                aPos: {
+                    type: glContext.FLOAT,
+                    size: 3,
+                    data: new Float32Array([
+                        -0.5,
+                        0.5,
+                        0,
+                        -0.5,
+                        -0.5,
+                        0,
+                        0.5,
+                        0.5,
+                        0,
+                        0.5,
+                        -0.5,
+                        0
+                    ])
+                },
+                aUV: {
+                    size: 2,
+                    offset: 0,
+                    releasable: true,
+                    type: glContext.FLOAT,
+                    data: new Float32Array([
+                        0,
+                        1,
+                        0,
+                        0,
+                        1,
+                        1,
+                        1,
+                        0
+                    ])
+                }
+            },
+            indices: {
+                data: new Uint16Array([
+                    0,
+                    1,
+                    2,
+                    2,
+                    1,
+                    3
+                ]),
+                releasable: true
+            },
+            mode: glContext.TRIANGLES,
+            drawCount: 6
+        });
+        _this.geometry = _this.defaultGeometry;
         var material = Material.create(_this.engine, {
             shader: {
                 fragment: itemFrag,
@@ -12496,12 +12553,7 @@ function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
             }
         });
         _this.material = material;
-        _this.material.setColor("_Color", new Color().setFromArray([
-            1,
-            1,
-            1,
-            1
-        ]));
+        _this.material.setColor("_Color", new Color(1, 1, 1, 1));
         _this.maskManager = new MaskProcessor(engine);
         return _this;
     }
@@ -12521,11 +12573,11 @@ function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
     };
     _proto.setColor = function setColor(color) {
         if (_instanceof1(color, Color)) {
-            this.color.copyFrom(color);
+            this._color.copyFrom(color);
         } else {
-            this.color.setFromArray(color);
+            this._color.setFromArray(color);
         }
-        this.material.setColor("_Color", this.color);
+        this.material.setColor("_Color", this._color);
     };
     _proto.setTexture = function setTexture(input) {
         var _this = this;
@@ -12588,98 +12640,143 @@ function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
         var boundingBox = this.meshCollider.getBoundingBox();
         return boundingBox;
     };
-    _proto.getItemGeometryData = function getItemGeometryData(geometry) {
-        var renderer = this.renderer;
+    _proto.getItemGeometryData = function getItemGeometryData(renderer) {
+        var _this = this, splits = _this.splits, textureSheetAnimation = _this.textureSheetAnimation;
+        var sx = 1, sy = 1;
+        var geometry = this.defaultGeometry;
         if (renderer.shape) {
             var _renderer_shape = renderer.shape, _renderer_shape_index = _renderer_shape.index, index = _renderer_shape_index === void 0 ? [] : _renderer_shape_index, _renderer_shape_aPoint = _renderer_shape.aPoint, aPoint = _renderer_shape_aPoint === void 0 ? [] : _renderer_shape_aPoint;
             var point = new Float32Array(aPoint);
             var position = [];
-            var atlasOffset = [];
+            var aUV = [];
             for(var i = 0; i < point.length; i += 6){
-                atlasOffset.push(aPoint[i + 2], aPoint[i + 3]);
+                point[i] *= sx;
+                point[i + 1] *= sy;
+                aUV.push(aPoint[i + 2], aPoint[i + 3]);
                 position.push(point[i], point[i + 1], 0.0);
             }
             geometry.setAttributeData("aPos", new Float32Array(position));
             return {
                 index: index,
-                atlasOffset: atlasOffset
+                aUV: aUV
             };
-        } else {
-            geometry.setAttributeData("aPos", new Float32Array([
-                -0.5,
-                0.5,
+        }
+        var originData = [
+            -.5,
+            .5,
+            -.5,
+            -.5,
+            .5,
+            .5,
+            .5,
+            -.5
+        ];
+        var aUV1 = [];
+        var index1 = [];
+        var position1 = [];
+        if (splits.length === 1) {
+            var split = textureSheetAnimation ? [
                 0,
-                -0.5,
-                -0.5,
                 0,
-                0.5,
-                0.5,
+                1,
+                1,
+                splits[0][4]
+            ] : splits[0];
+            var texOffset = split[4] ? [
                 0,
-                0.5,
-                -0.5,
+                0,
+                1,
+                0,
+                0,
+                1,
+                1,
+                1
+            ] : [
+                0,
+                1,
+                0,
+                0,
+                1,
+                1,
+                1,
                 0
-            ]));
-            return {
-                index: [
-                    0,
-                    1,
-                    2,
-                    2,
-                    1,
-                    3
-                ],
-                atlasOffset: [
-                    0,
-                    1,
-                    0,
-                    0,
-                    1,
-                    1,
-                    1,
-                    0
-                ]
-            };
-        }
-    };
-    _proto.createGeometry = function createGeometry() {
-        var geometry = Geometry.create(this.engine, {
-            attributes: {
-                aPos: {
-                    type: glContext.FLOAT,
-                    size: 3,
-                    data: new Float32Array([
-                        -0.5,
-                        0.5,
+            ];
+            var tox = split[0];
+            var toy = split[1];
+            var tsx = split[4] ? split[3] : split[2];
+            var tsy = split[4] ? split[2] : split[3];
+            aUV1.push(texOffset[0] * tsx + tox, texOffset[1] * tsy + toy, texOffset[2] * tsx + tox, texOffset[3] * tsy + toy, texOffset[4] * tsx + tox, texOffset[5] * tsy + toy, texOffset[6] * tsx + tox, texOffset[7] * tsy + toy);
+            position1.push(originData[0], originData[1], 0.0, originData[2], originData[3], 0.0, originData[4], originData[5], 0.0, originData[6], originData[7], 0.0);
+            index1.push(0, 1, 2, 2, 1, 3);
+        } else {
+            // TODO: 原有打包纹理拆分逻辑，待移除
+            //-------------------------------------------------------------------------
+            var col = 2;
+            var row = 2;
+            for(var x = 0; x < col; x++){
+                for(var y = 0; y < row; y++){
+                    var base = (y * 2 + x) * 4;
+                    // @ts-expect-error
+                    var split1 = textureSheetAnimation ? [
                         0,
-                        -0.5,
-                        -0.5,
                         0,
-                        0.5,
-                        0.5,
+                        1,
+                        1,
+                        splits[0][4]
+                    ] : splits[y * 2 + x];
+                    var texOffset1 = split1[4] ? [
                         0,
-                        0.5,
-                        -0.5,
+                        0,
+                        1,
+                        0,
+                        0,
+                        1,
+                        1,
+                        1
+                    ] : [
+                        0,
+                        1,
+                        0,
+                        0,
+                        1,
+                        1,
+                        1,
                         0
-                    ])
-                },
-                atlasOffset: {
-                    size: 2,
-                    offset: 0,
-                    releasable: true,
-                    type: glContext.FLOAT,
-                    data: new Float32Array(0)
+                    ];
+                    var dw = ((x + x + 1) / col - 1) / 2;
+                    var dh = ((y + y + 1) / row - 1) / 2;
+                    var tox1 = split1[0];
+                    var toy1 = split1[1];
+                    var tsx1 = split1[4] ? split1[3] : split1[2];
+                    var tsy1 = split1[4] ? split1[2] : split1[3];
+                    var origin = [
+                        originData[0] / col + dw,
+                        originData[1] / row + dh,
+                        originData[2] / col + dw,
+                        originData[3] / row + dh,
+                        originData[4] / col + dw,
+                        originData[5] / row + dh,
+                        originData[6] / col + dw,
+                        originData[7] / row + dh
+                    ];
+                    aUV1.push(texOffset1[0] * tsx1 + tox1, texOffset1[1] * tsy1 + toy1, texOffset1[2] * tsx1 + tox1, texOffset1[3] * tsy1 + toy1, texOffset1[4] * tsx1 + tox1, texOffset1[5] * tsy1 + toy1, texOffset1[6] * tsx1 + tox1, texOffset1[7] * tsy1 + toy1);
+                    position1.push(origin[0] * sx, origin[1] * sy, 0.0, origin[2] * sx, origin[3] * sy, 0.0, origin[4] * sx, origin[5] * sy, 0.0, origin[6] * sx, origin[7] * sy, 0.0);
+                    index1.push(base, 1 + base, 2 + base, 2 + base, 1 + base, 3 + base);
                 }
-            },
-            indices: {
-                data: new Uint16Array(0),
-                releasable: true
-            },
-            mode: glContext.TRIANGLES
-        });
-        var geoData = this.getItemGeometryData(geometry);
-        var index = geoData.index, atlasOffset = geoData.atlasOffset;
+            }
+        }
+        geometry.setAttributeData("aPos", new Float32Array(position1));
+        return {
+            index: index1,
+            aUV: aUV1
+        };
+    };
+    _proto.configureDefaultGeometry = function configureDefaultGeometry(renderer) {
+        var geoData = this.getItemGeometryData(renderer);
+        var index = geoData.index, aUV = geoData.aUV;
+        var geometry = this.defaultGeometry;
         geometry.setIndexData(new Uint16Array(index));
-        geometry.setAttributeData("atlasOffset", new Float32Array(atlasOffset));
+        geometry.setAttributeData("aUV", new Float32Array(aUV));
         geometry.setDrawCount(index.length);
         return geometry;
     };
@@ -12698,13 +12795,12 @@ function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
         setMaskMode(material, maskMode);
         setSideMode(material, side);
         material.shader.shaderData.properties = '_MainTex("_MainTex",2D) = "white" {}';
-        material.setColor("_Color", new Color(0, 0, 0, 1));
         material.setVector4("_TexOffset", new Vector4(0, 0, 1, 1));
         material.setTexture("_MainTex", texture);
-        this.preMultiAlpha = getPreMultiAlpha(blendMode);
+        var preMultiAlpha = getPreMultiAlpha(blendMode);
         var texParams = new Vector4();
         texParams.x = renderer.occlusion ? +renderer.transparentOcclusion : 1;
-        texParams.y = +this.preMultiAlpha;
+        texParams.y = preMultiAlpha;
         texParams.z = renderer.renderMode;
         texParams.w = renderer.maskMode;
         material.setVector4("_TexParams", texParams);
@@ -12730,8 +12826,11 @@ function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
     };
     _proto.fromData = function fromData(data) {
         RendererComponent.prototype.fromData.call(this, data);
-        var _data_renderer;
-        var renderer = (_data_renderer = data.renderer) != null ? _data_renderer : {};
+        var baseRenderComponentData = data;
+        var _baseRenderComponentData_renderer;
+        var renderer = (_baseRenderComponentData_renderer = baseRenderComponentData.renderer) != null ? _baseRenderComponentData_renderer : {};
+        var splits = baseRenderComponentData.splits;
+        var textureSheetAnimation = baseRenderComponentData.textureSheetAnimation;
         var maskProps = data.mask;
         if (maskProps && maskProps.ref) {
             maskProps.ref = this.engine.findObject(maskProps.ref);
@@ -12740,14 +12839,15 @@ function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
         // TODO 新蒙板上线后移除
         //-------------------------------------------------------------------------
         var shapeData = renderer.shape;
-        //@ts-expect-error
-        var split = data.splits && !data.textureSheetAnimation ? data.splits[0] : undefined;
+        var split = splits && !textureSheetAnimation ? splits[0] : undefined;
         var shapeGeometry = undefined;
         if (shapeData !== undefined && shapeData !== null && !("aPoint" in shapeData && "index" in shapeData)) {
             shapeGeometry = getGeometryByShape(shapeData, split);
         }
-        var _renderer_renderMode, _renderer_blending, _renderer_side, _renderer_alphaMask;
         //-------------------------------------------------------------------------
+        this.splits = splits || singleSplits;
+        this.textureSheetAnimation = textureSheetAnimation;
+        var _renderer_renderMode, _renderer_blending, _renderer_side, _renderer_alphaMask;
         this.renderer = {
             renderMode: (_renderer_renderMode = renderer.renderMode) != null ? _renderer_renderMode : RenderMode.MESH,
             blending: (_renderer_blending = renderer.blending) != null ? _renderer_blending : BlendingMode.ALPHA,
@@ -12762,7 +12862,31 @@ function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
             alphaMask: (_renderer_alphaMask = renderer.alphaMask) != null ? _renderer_alphaMask : false
         };
         this.configureMaterial(this.renderer);
+        if (baseRenderComponentData.geometry) {
+            this.geometry = this.engine.findObject(baseRenderComponentData.geometry);
+        } else {
+            this.geometry = this.defaultGeometry;
+            this.configureDefaultGeometry(this.renderer);
+        }
     };
+    _create_class(BaseRenderComponent, [
+        {
+            key: "color",
+            get: /**
+   * 获取当前图层的颜色
+   * @since 2.5.0
+   */ function get() {
+                return this._color;
+            },
+            set: /**
+   * 设置当前图层的颜色
+   * @since 2.5.0
+   */ function set(value) {
+                this._color = value;
+                this.material.setColor("_Color", this._color);
+            }
+        }
+    ]);
     return BaseRenderComponent;
 }(RendererComponent);
 
@@ -12777,37 +12901,8 @@ var ShapeComponent = /*#__PURE__*/ function(BaseRenderComponent) {
         _this.graphicsPath = new GraphicsPath();
         _this.vert = "\nprecision highp float;\n\nattribute vec3 aPos;//x y\n\nuniform mat4 effects_MatrixVP;\nuniform mat4 effects_MatrixInvV;\nuniform mat4 effects_ObjectToWorld;\n\nvoid main() {\n  vec4 pos = vec4(aPos.xyz, 1.0);\n  gl_Position = effects_MatrixVP * effects_ObjectToWorld * pos;\n}\n";
         _this.frag = "\nprecision highp float;\n\nuniform vec4 _Color;\n\nvoid main() {\n  vec4 color = _Color;\n  color.rgb *= color.a;\n  gl_FragColor = color;\n}\n";
-        // Create Geometry
+        // Add Geometry SubMesh
         //-------------------------------------------------------------------------
-        _this.geometry = Geometry.create(engine, {
-            attributes: {
-                aPos: {
-                    type: glContext.FLOAT,
-                    size: 3,
-                    data: new Float32Array([
-                        -0.5,
-                        0.5,
-                        0,
-                        -0.5,
-                        -0.5,
-                        0,
-                        0.5,
-                        0.5,
-                        0,
-                        0.5,
-                        -0.5,
-                        0
-                    ])
-                },
-                aUV: {
-                    type: glContext.FLOAT,
-                    size: 2,
-                    data: new Float32Array()
-                }
-            },
-            mode: glContext.TRIANGLES,
-            drawCount: 4
-        });
         _this.geometry.subMeshes.push({
             offset: 0,
             indexCount: 0,
@@ -20137,7 +20232,7 @@ var RuntimeClip = /*#__PURE__*/ function() {
             this.playable.play();
         }
         this.parentMixer.setClipWeight(this.playable, weight);
-        var clipTime = clip.toLocalTime(localTime);
+        var clipTime = parseFloat(clip.toLocalTime(localTime).toFixed(3));
         this.playable.setTime(clipTime);
         // 判断动画是否结束
         if (ended) {
@@ -21326,12 +21421,11 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
    * 前进合成到指定时间
    * @param time - 相对0时刻的时间
    */ _proto.forwardTime = function forwardTime(time) {
-        var deltaTime = time * 1000 - this.time * 1000;
+        var deltaTime = time * 1000 - this.rootComposition.time * 1000;
         var reverse = deltaTime < 0;
         var step = 15;
         var t = Math.abs(deltaTime);
         var ss = reverse ? -step : step;
-        // FIXME Update 中可能会修改合成时间，这边需要优化更新逻辑
         for(t; t > step; t -= step){
             this.update(ss);
         }
@@ -21371,14 +21465,13 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
             this.callAwake(this.rootItem);
             this.rootItem.beginPlay();
         }
-        var previousCompositionTime = this.time;
-        this.updateCompositionTime(deltaTime * this.speed / 1000);
-        var deltaTimeInMs = (this.time - previousCompositionTime) * 1000;
+        var dt = parseFloat(this.getUpdateTime(deltaTime * this.speed).toFixed(0));
+        this.updateRootComposition(dt / 1000);
         this.updateVideo();
         // 更新 model-tree-plugin
-        this.updatePluginLoaders(deltaTimeInMs);
-        this.sceneTicking.update.tick(deltaTimeInMs);
-        this.sceneTicking.lateUpdate.tick(deltaTimeInMs);
+        this.updatePluginLoaders(deltaTime);
+        this.sceneTicking.update.tick(dt);
+        this.sceneTicking.lateUpdate.tick(dt);
         this.updateCamera();
         this.prepareRender();
         if (this.isEnded && !this.isEndCalled) {
@@ -21394,6 +21487,14 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
     _proto.shouldDispose = function shouldDispose() {
         return this.isEnded && this.rootItem.endBehavior === EndBehavior.destroy && !this.reusable;
     };
+    _proto.getUpdateTime = function getUpdateTime(t) {
+        var startTimeInMs = this.startTime * 1000;
+        var now = this.rootComposition.time * 1000;
+        if (t < 0 && now + t < startTimeInMs) {
+            return startTimeInMs - now;
+        }
+        return t;
+    };
     _proto.callAwake = function callAwake(item) {
         for(var _iterator = _create_for_of_iterator_helper_loose(item.components), _step; !(_step = _iterator()).done;){
             var component = _step.value;
@@ -21438,18 +21539,14 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
     };
     /**
    * 更新主合成组件
-   */ _proto.updateCompositionTime = function updateCompositionTime(deltaTime) {
+   */ _proto.updateRootComposition = function updateRootComposition(deltaTime) {
         if (this.rootComposition.state === PlayState.Paused || !this.rootComposition.isActiveAndEnabled) {
             return;
         }
-        // 相对于合成开始时间的时间
-        var localTime = this.time + deltaTime - this.startTime;
-        if (deltaTime < 0 && localTime < 0) {
-            localTime = 0;
-        }
+        var localTime = parseFloat((this.time + deltaTime - this.rootItem.start).toFixed(3));
+        var isEnded = false;
         var duration = this.rootItem.duration;
         var endBehavior = this.rootItem.endBehavior;
-        var isEnded = false;
         if (localTime - duration > 0.001) {
             isEnded = true;
             switch(endBehavior){
@@ -21474,7 +21571,7 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
                     }
             }
         }
-        this.rootComposition.time = localTime + this.startTime;
+        this.rootComposition.time = localTime;
         // end state changed, handle onEnd flags
         if (this.isEnded !== isEnded) {
             if (isEnded) {
@@ -22630,15 +22727,6 @@ var ColorPlayable = /*#__PURE__*/ function(Playable) {
     return ColorPlayable;
 }(Playable);
 
-var singleSplits = [
-    [
-        0,
-        0,
-        1,
-        1,
-        undefined
-    ]
-];
 var seed$3 = 0;
 var SpriteColorPlayableAsset = /*#__PURE__*/ function(PlayableAsset) {
     _inherits(SpriteColorPlayableAsset, PlayableAsset);
@@ -22664,10 +22752,8 @@ var SpriteComponent = /*#__PURE__*/ function(BaseRenderComponent) {
     function SpriteComponent(engine, props) {
         var _this;
         _this = BaseRenderComponent.call(this, engine) || this;
-        _this.splits = singleSplits;
         _this.frameAnimationLoop = false;
         _this.name = "MSprite" + seed$3++;
-        _this.geometry = _this.createGeometry();
         if (props) {
             _this.fromData(props);
         }
@@ -22757,111 +22843,10 @@ var SpriteComponent = /*#__PURE__*/ function(BaseRenderComponent) {
             source.video.load();
         }
     };
-    _proto.getItemGeometryData = function getItemGeometryData(geometry) {
-        var _this = this, splits = _this.splits, textureSheetAnimation = _this.textureSheetAnimation;
-        var sx = 1, sy = 1;
-        var renderer = this.renderer;
-        if (renderer.shape) {
-            var _renderer_shape = renderer.shape, _renderer_shape_index = _renderer_shape.index, index = _renderer_shape_index === void 0 ? [] : _renderer_shape_index, _renderer_shape_aPoint = _renderer_shape.aPoint, aPoint = _renderer_shape_aPoint === void 0 ? [] : _renderer_shape_aPoint;
-            var point = new Float32Array(aPoint);
-            var position = [];
-            var atlasOffset = [];
-            for(var i = 0; i < point.length; i += 6){
-                point[i] *= sx;
-                point[i + 1] *= sy;
-                atlasOffset.push(aPoint[i + 2], aPoint[i + 3]);
-                position.push(point[i], point[i + 1], 0.0);
-            }
-            geometry.setAttributeData("aPos", new Float32Array(position));
-            return {
-                index: index,
-                atlasOffset: atlasOffset
-            };
-        }
-        var originData = [
-            -.5,
-            .5,
-            -.5,
-            -.5,
-            .5,
-            .5,
-            .5,
-            -.5
-        ];
-        var atlasOffset1 = [];
-        var index1 = [];
-        var col = 2;
-        var row = 2;
-        if (splits.length === 1) {
-            col = 1;
-            row = 1;
-        }
-        var position1 = [];
-        for(var x = 0; x < col; x++){
-            for(var y = 0; y < row; y++){
-                var base = (y * 2 + x) * 4;
-                // @ts-expect-error
-                var split = textureSheetAnimation ? [
-                    0,
-                    0,
-                    1,
-                    1,
-                    splits[0][4]
-                ] : splits[y * 2 + x];
-                var texOffset = split[4] ? [
-                    0,
-                    0,
-                    1,
-                    0,
-                    0,
-                    1,
-                    1,
-                    1
-                ] : [
-                    0,
-                    1,
-                    0,
-                    0,
-                    1,
-                    1,
-                    1,
-                    0
-                ];
-                var dw = ((x + x + 1) / col - 1) / 2;
-                var dh = ((y + y + 1) / row - 1) / 2;
-                var tox = split[0];
-                var toy = split[1];
-                var tsx = split[4] ? split[3] : split[2];
-                var tsy = split[4] ? split[2] : split[3];
-                var origin = [
-                    originData[0] / col + dw,
-                    originData[1] / row + dh,
-                    originData[2] / col + dw,
-                    originData[3] / row + dh,
-                    originData[4] / col + dw,
-                    originData[5] / row + dh,
-                    originData[6] / col + dw,
-                    originData[7] / row + dh
-                ];
-                atlasOffset1.push(texOffset[0] * tsx + tox, texOffset[1] * tsy + toy, texOffset[2] * tsx + tox, texOffset[3] * tsy + toy, texOffset[4] * tsx + tox, texOffset[5] * tsy + toy, texOffset[6] * tsx + tox, texOffset[7] * tsy + toy);
-                position1.push(origin[0] * sx, origin[1] * sy, 0.0, origin[2] * sx, origin[3] * sy, 0.0, origin[4] * sx, origin[5] * sy, 0.0, origin[6] * sx, origin[7] * sy, 0.0);
-                index1.push(base, 1 + base, 2 + base, 2 + base, 1 + base, 3 + base);
-            }
-        }
-        geometry.setAttributeData("aPos", new Float32Array(position1));
-        return {
-            index: index1,
-            atlasOffset: atlasOffset1
-        };
-    };
     _proto.fromData = function fromData(data) {
         BaseRenderComponent.prototype.fromData.call(this, data);
         var interaction = data.interaction, options = data.options;
         this.interaction = interaction;
-        this.splits = data.splits || singleSplits;
-        this.textureSheetAnimation = data.textureSheetAnimation;
-        var geometry = this.createGeometry();
-        this.geometry = geometry;
         var startColor = options.startColor || [
             1,
             1,
@@ -26140,7 +26125,6 @@ var TextComponent = /*#__PURE__*/ function(BaseRenderComponent) {
         _this.SCALE_FACTOR = 0.1;
         _this.ALPHA_FIX_VALUE = 1 / 255;
         _this.name = "MText" + seed$2++;
-        _this.geometry = _this.createGeometry();
         if (props) {
             _this.fromData(props);
         }
@@ -27021,11 +27005,6 @@ function colorToArr(hex, normalized) {
                 parseInt(m[2], 16),
                 parseInt(m[3], 16),
                 255
-            ] || [
-                0,
-                0,
-                0,
-                255
             ];
         }
     } else if (_instanceof1(hex, Array)) {
@@ -31624,7 +31603,7 @@ registerPlugin("sprite", SpriteLoader, VFXItem);
 registerPlugin("particle", ParticleLoader, VFXItem);
 registerPlugin("cal", CalculateLoader, VFXItem);
 registerPlugin("interact", InteractLoader, VFXItem);
-var version$1 = "2.4.8";
+var version$1 = "2.5.0-alpha.0";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -33226,7 +33205,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.4.8";
+var version = "2.5.0-alpha.0";
 logger.info("THREEJS plugin version: " + version + ".");
 
 export { AbstractPlugin, ActivationPlayable, ActivationPlayableAsset, ActivationTrack, AnimationClip, AnimationClipPlayable, Asset, AssetLoader, AssetManager, AssetService, BYTES_TYPE_MAP, BaseRenderComponent, Behaviour, BezierCurve, BezierCurvePath, BezierCurveQuat, BinaryAsset, COMPRESSED_TEXTURE, CONSTANT_MAP_BLEND, CONSTANT_MAP_DEPTH, CONSTANT_MAP_STENCIL_FUNC, CONSTANT_MAP_STENCIL_OP, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, ColorCurve, ColorPropertyPlayableAsset, ColorPropertyTrack, Component, Composition, CompositionComponent, DEFAULT_FONTS, DEFAULT_FPS, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, EffectsPackage, Ellipse, Engine, EventEmitter, EventSystem, Fake3DAnimationMode, Fake3DComponent, FilterMode, Float16ArrayWrapper, FloatPropertyPlayableAsset, FloatPropertyTrack, Framebuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, GraphicsPath, HELP_LINK, HitTestType, InteractComponent, InteractLoader, InteractMesh, Item, KTXTexture, LineSegments, LinearValue, MaskMode, MaskProcessor, Material, MaterialDataBlock, MaterialRenderType, MaterialTrack, Mesh, MeshCollider, ObjectBindingTrack, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleBehaviourPlayableAsset, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, ParticleTrack, PassTextureCache, PathSegments, PluginSystem, PolyStar, Polygon, PostProcessVolume, PropertyTrack, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderbuffer, Renderer, RendererComponent, RuntimeClip, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, Scene, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderFactory, ShaderType, ShaderVariant, ShapeComponent, ShapePath, SpriteColorPlayableAsset, SpriteColorTrack, SpriteComponent, SpriteLoader, StarType, StaticValue, SubCompositionPlayableAsset, SubCompositionTrack, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TextComponent, TextComponentBase, TextLayout, TextLoader, TextStyle, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeSpriteComponent, ThreeTextComponent, ThreeTexture, Ticker, TimelineAsset, TimelineClip, TimelinePlayable, TrackAsset, TrackSortWrapper, TrackType, Transform, TransformAnimationPlayable, TransformPlayableAsset, TransformTrack, VFXItem, ValueGetter, Vector2Curve, Vector2PropertyPlayableAsset, Vector2PropertyTrack, Vector4Curve, Vector4PropertyPlayableAsset, Vector4PropertyTrack, addByOrder, addItem, addItemWithOrder, applyMixins, assertExist, asserts, base64ToFile, blend, buildLine, calculateTranslation, canvasPool, closePointEps, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, createCopyShader, createGLContext, createKeyFrameMeta, createShape, createValueGetter, curveEps, decimalEqual, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, generateTransparentTexture, generateWhiteTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, glType2VertexFormatType, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAlipayMiniApp, isAndroid, isArray, isCanvas, isFunction, isIOS, isIOSByUA, isMiniProgram, isObject, isOpenHarmony, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isValidFontFamily, isWebGL2, isWechatMiniApp, itemFrag, itemFrame_frag as itemFrameFrag, itemVert, loadAVIFOptional, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, normalizeColor, numberToFix, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, passRenderLevel, pluginLoaderMap, randomInRange, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index$1 as spec, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecFill, vecMulCombine, version, vertexFormatType2GLType };