@galacean/effects-threejs 2.4.8 → 2.5.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.4.8
+ * Version: v2.5.0-alpha.1
  */
 
 'use strict';
@@ -367,11 +367,6 @@ function colorToArr$1(hex, normalized) {
                 parseInt(m[2], 16),
                 parseInt(m[3], 16),
                 255
-            ] || [
-                0,
-                0,
-                0,
-                255
             ];
         }
     } else if (_instanceof1(hex, Array)) {
@@ -707,6 +702,17 @@ function asserts(condition, msg) {
     return /^[^\d.][\w-]*$/.test(fontFamily);
 }
 
+/**
+ * Simple implementation of the deferred pattern.
+ * An object that exposes a promise and functions to resolve and reject it.
+ */ var Deferred = function Deferred() {
+    var _this = this;
+    this.promise = new Promise(function(resolve, reject) {
+        _this.resolve = resolve;
+        _this.reject = reject;
+    });
+};
+
 var prefix = "[Galacean Effects]";
 var localLogger;
 function format(message) {
@@ -7652,6 +7658,8 @@ exports.MaterialRenderType = void 0;
 var MaskProcessor = /*#__PURE__*/ function() {
     function MaskProcessor(engine) {
         this.engine = engine;
+        this.alphaMaskEnabled = false;
+        this.maskMode = exports.MaskMode.NONE;
         this.maskable = null;
         this.stencilClearAction = {
             stencilAction: exports.TextureLoadAction.clear
@@ -7662,19 +7670,17 @@ var MaskProcessor = /*#__PURE__*/ function() {
         return 1;
     };
     _proto.getMaskMode = function getMaskMode(data) {
-        var maskMode = exports.MaskMode.NONE;
-        if (data.mask) {
-            var _data_mask = data.mask, _data_mask_mask = _data_mask.mask, mask = _data_mask_mask === void 0 ? false : _data_mask_mask, _data_mask_mode = _data_mask.mode, mode = _data_mask_mode === void 0 ? exports.MaskMode.NONE : _data_mask_mode, ref = _data_mask.ref;
-            if (mask) {
-                maskMode = exports.MaskMode.MASK;
-            } else if (mode === ObscuredMode.OBSCURED || mode === ObscuredMode.REVERSE_OBSCURED) {
-                maskMode = mode === ObscuredMode.OBSCURED ? exports.MaskMode.OBSCURED : exports.MaskMode.REVERSE_OBSCURED;
-                if (ref) {
-                    this.maskable = ref;
-                }
+        var _data_isMask = data.isMask, isMask = _data_isMask === void 0 ? false : _data_isMask, _data_inverted = data.inverted, inverted = _data_inverted === void 0 ? false : _data_inverted, reference = data.reference, _data_alphaMaskEnabled = data.alphaMaskEnabled, alphaMaskEnabled = _data_alphaMaskEnabled === void 0 ? false : _data_alphaMaskEnabled;
+        this.alphaMaskEnabled = alphaMaskEnabled;
+        if (isMask) {
+            this.maskMode = exports.MaskMode.MASK;
+        } else {
+            this.maskMode = inverted ? exports.MaskMode.REVERSE_OBSCURED : exports.MaskMode.OBSCURED;
+            if (reference) {
+                this.maskable = this.engine.findObject(reference);
             }
         }
-        return maskMode;
+        return this.maskMode;
     };
     _proto.drawStencilMask = function drawStencilMask(renderer) {
         if (this.maskable) {
@@ -10234,7 +10240,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;}";
 
@@ -12470,6 +12476,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) {
@@ -12477,11 +12492,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);
@@ -12508,10 +12524,60 @@ function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
             occlusion: false,
             transparentOcclusion: false,
             side: SideMode.DOUBLE,
-            maskMode: exports.MaskMode.NONE,
-            mask: 0,
-            alphaMask: false
+            mask: 0
         };
+        _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,
@@ -12520,12 +12586,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;
     }
@@ -12545,11 +12606,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;
@@ -12612,103 +12673,149 @@ 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;
     };
     _proto.configureMaterial = function configureMaterial(renderer) {
-        var side = renderer.side, occlusion = renderer.occlusion, blendMode = renderer.blending, maskMode = renderer.maskMode, mask = renderer.mask, texture = renderer.texture;
+        var side = renderer.side, occlusion = renderer.occlusion, blendMode = renderer.blending, mask = renderer.mask, texture = renderer.texture;
+        var maskMode = this.maskManager.maskMode;
         var material = this.material;
         material.blending = true;
         material.depthTest = true;
@@ -12722,17 +12829,16 @@ 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;
+        texParams.w = maskMode;
         material.setVector4("_TexParams", texParams);
-        if (texParams.x === 0 || renderer.alphaMask) {
+        if (texParams.x === 0 || this.maskManager.alphaMaskEnabled) {
             material.enableMacro("ALPHA_CLIP");
         } else {
             material.disableMacro("ALPHA_CLIP");
@@ -12754,39 +12860,63 @@ 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 maskProps = data.mask;
-        if (maskProps && maskProps.ref) {
-            maskProps.ref = this.engine.findObject(maskProps.ref);
+        var baseRenderComponentData = data;
+        var _baseRenderComponentData_renderer;
+        var renderer = (_baseRenderComponentData_renderer = baseRenderComponentData.renderer) != null ? _baseRenderComponentData_renderer : {};
+        var splits = baseRenderComponentData.splits;
+        var textureSheetAnimation = baseRenderComponentData.textureSheetAnimation;
+        var maskOptions = baseRenderComponentData.mask;
+        if (maskOptions) {
+            this.maskManager.getMaskMode(maskOptions);
         }
-        var maskMode = this.maskManager.getMaskMode(data);
         // 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;
         this.renderer = {
             renderMode: (_renderer_renderMode = renderer.renderMode) != null ? _renderer_renderMode : RenderMode.MESH,
             blending: (_renderer_blending = renderer.blending) != null ? _renderer_blending : BlendingMode.ALPHA,
             texture: renderer.texture ? this.engine.findObject(renderer.texture) : this.engine.emptyTexture,
             occlusion: !!renderer.occlusion,
-            transparentOcclusion: !!renderer.transparentOcclusion || maskMode === exports.MaskMode.MASK,
+            transparentOcclusion: !!renderer.transparentOcclusion || this.maskManager.maskMode === exports.MaskMode.MASK,
             side: (_renderer_side = renderer.side) != null ? _renderer_side : SideMode.DOUBLE,
             mask: this.maskManager.getRefValue(),
-            shape: shapeGeometry,
-            maskMode: maskMode,
-            //@ts-expect-error TODO 新蒙版兼容老数据需要增加纹理透明度蒙版是否开启参数
-            alphaMask: (_renderer_alphaMask = renderer.alphaMask) != null ? _renderer_alphaMask : false
+            shape: shapeGeometry
         };
         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);
 
@@ -12801,37 +12931,8 @@ exports.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,
@@ -13131,17 +13232,15 @@ exports.ShapeComponent = /*#__PURE__*/ function(BaseRenderComponent) {
                     break;
                 }
         }
-        var maskProps = data.mask;
-        if (maskProps && maskProps.ref) {
-            maskProps.ref = this.engine.findObject(maskProps.ref);
+        if (data.mask) {
+            this.maskManager.getMaskMode(data.mask);
         }
-        var maskMode = this.maskManager.getMaskMode(data);
         var maskRef = this.maskManager.getRefValue();
         this.material.stencilRef = maskRef !== undefined ? [
             maskRef,
             maskRef
         ] : undefined;
-        setMaskMode(this.material, maskMode);
+        setMaskMode(this.material, this.maskManager.maskMode);
     };
     _create_class(ShapeComponent, [
         {
@@ -19616,11 +19715,7 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
         var maskMode = exports.MaskMode.NONE;
         var maskRef = 0;
         if (data.mask) {
-            var maskProps = data.mask;
-            if (maskProps && maskProps.ref) {
-                maskProps.ref = this.engine.findObject(maskProps.ref);
-            }
-            maskMode = this.maskManager.getMaskMode(data);
+            maskMode = this.maskManager.getMaskMode(data.mask);
             maskRef = this.maskManager.getRefValue();
         }
         return {
@@ -20161,7 +20256,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) {
@@ -21350,12 +21445,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);
         }
@@ -21395,14 +21489,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) {
@@ -21418,6 +21511,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;
@@ -21462,18 +21563,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){
@@ -21498,7 +21595,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) {
@@ -22654,15 +22751,6 @@ var ColorPlayable = /*#__PURE__*/ function(Playable) {
     return ColorPlayable;
 }(Playable);
 
-var singleSplits = [
-    [
-        0,
-        0,
-        1,
-        1,
-        undefined
-    ]
-];
 var seed$3 = 0;
 exports.SpriteColorPlayableAsset = /*#__PURE__*/ function(PlayableAsset) {
     _inherits(SpriteColorPlayableAsset, PlayableAsset);
@@ -22688,10 +22776,8 @@ exports.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);
         }
@@ -22781,111 +22867,10 @@ exports.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,
@@ -26164,7 +26149,6 @@ exports.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);
         }
@@ -27045,11 +27029,6 @@ function colorToArr(hex, normalized) {
                 parseInt(m[2], 16),
                 parseInt(m[3], 16),
                 255
-            ] || [
-                0,
-                0,
-                0,
-                255
             ];
         }
     } else if (_instanceof1(hex, Array)) {
@@ -27589,13 +27568,13 @@ function processMask(renderContent) {
     }
     if (maskMode === exports.MaskMode.MASK) {
         renderContent.mask = {
-            mask: true
+            isMask: true
         };
         currentMaskComponent = renderContent.id;
     } else if (maskMode === ObscuredMode.OBSCURED || maskMode === ObscuredMode.REVERSE_OBSCURED) {
         renderContent.mask = {
-            mode: maskMode,
-            ref: {
+            inverted: maskMode === ObscuredMode.REVERSE_OBSCURED ? true : false,
+            reference: {
                 "id": currentMaskComponent
             }
         };
@@ -28419,6 +28398,7 @@ function getStandardSpriteContent(sprite, transform) {
     return ret;
 }
 
+var version$2 = "2.5.0-alpha.1";
 var v0 = /^(\d+)\.(\d+)\.(\d+)(-(\w+)\.\d+)?$/;
 var standardVersion = /^(\d+)\.(\d+)$/;
 var reverseParticle = false;
@@ -28426,6 +28406,11 @@ function getStandardJSON(json) {
     if (!json || typeof json !== "object") {
         throw new Error("Invalid input: Expected a JSON object.");
     }
+    // 如果 JSON 中的 runtime 版本高于当前运行时版本，则发出警告
+    if (checkRuntimeVersion(json)) {
+        var _json_playerVersion;
+        console.warn("The JSON need higher than " + ((_json_playerVersion = json.playerVersion) == null ? void 0 : _json_playerVersion.web) + " runtime version(current: " + version$2 + "). Some features may not work as expected.");
+    }
     // 修正老版本数据中，meshItem 以及 lightItem 结束行为错误问题
     version22Migration(json);
     if (v0.test(json.version)) {
@@ -28741,6 +28726,21 @@ function getStandardItem(item, opt) {
         return {};
     }
 }
+/**
+ * 检查 json.playerVersion.web 的版本号是否低于当前 runtime 的版本
+ */ function checkRuntimeVersion(json) {
+    var _ref = json.playerVersion || {}, _ref_web = _ref.web, web = _ref_web === void 0 ? "" : _ref_web;
+    if (web) {
+        var _v0_exec;
+        var jsonVersionMatch = (_v0_exec = v0.exec(web)) != null ? _v0_exec : [];
+        var _v0_exec1;
+        var runtimeVersionMatch = (_v0_exec1 = v0.exec(version$2)) != null ? _v0_exec1 : [];
+        var major = jsonVersionMatch[1], minor = jsonVersionMatch[2];
+        var currentMajor = runtimeVersionMatch[1], currentMinor = runtimeVersionMatch[2];
+        return Number(currentMajor) < Number(major) || Number(currentMajor) === Number(major) && Number(currentMinor) < Number(minor);
+    }
+    return false;
+}
 
 var _obj$1;
 /**
@@ -31648,7 +31648,7 @@ registerPlugin("sprite", SpriteLoader, exports.VFXItem);
 registerPlugin("particle", ParticleLoader, exports.VFXItem);
 registerPlugin("cal", CalculateLoader, exports.VFXItem);
 registerPlugin("interact", InteractLoader, exports.VFXItem);
-var version$1 = "2.4.8";
+var version$1 = "2.5.0-alpha.1";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -33250,7 +33250,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.4.8";
+var version = "2.5.0-alpha.1";
 logger.info("THREEJS plugin version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;
@@ -33282,6 +33282,7 @@ exports.Composition = Composition;
 exports.DEFAULT_FONTS = DEFAULT_FONTS;
 exports.DEFAULT_FPS = DEFAULT_FPS;
 exports.Database = Database;
+exports.Deferred = Deferred;
 exports.Downloader = Downloader;
 exports.EFFECTS_COPY_MESH_NAME = EFFECTS_COPY_MESH_NAME;
 exports.EVENT_TYPE_CLICK = EVENT_TYPE_CLICK;