@galacean/engine-core 2.0.0-alpha.13 → 2.0.0-alpha.15

package/dist/main.js

@@ -1654,6 +1654,14 @@ SystemInfo._initialize();
                 return this._height;
             }
         },
+        {
+            key: "colorTextures",
+            get: /**
+   * Render color textures.
+   */ function get() {
+                return this._colorTextures;
+            }
+        },
         {
             key: "colorTextureCount",
             get: /**
@@ -22286,275 +22294,978 @@ PrimitiveMesh._sphereSeedCells = new Float32Array([
 PrimitiveMesh._sphereEdgeIdx = 0;
 PrimitiveMesh._spherePoleIdx = 0;
 
-function _is_native_reflect_construct() {
-    // Since Reflect.construct can't be properly polyfilled, some
-    // implementations (e.g. core-js@2) don't set the correct internal slots.
-    // Those polyfills don't allow us to subclass built-ins, so we need to
-    // use our fallback implementation.
-    try {
-        // If the internal slots aren't set, this throws an error similar to
-        //   TypeError: this is not a Boolean object.
-        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
-    } catch (_) {}
-    return (_is_native_reflect_construct = function() {
-        return !!result;
-    })();
-}
-
-function _construct(Parent, args, Class) {
-    if (_is_native_reflect_construct()) _construct = Reflect.construct;
-    else {
-        _construct = function construct(Parent, args, Class) {
-            var a = [null];
-            a.push.apply(a, args);
-            var Constructor = Function.bind.apply(Parent, a);
-            var instance = new Constructor();
-
-            if (Class) _set_prototype_of(instance, Class.prototype);
-
-            return instance;
-        };
-    }
-
-    return _construct.apply(null, arguments);
-}
-
-var ComponentCloner = /*#__PURE__*/ function() {
-    function ComponentCloner() {}
-    /**
-   * Clone component.
-   * @param source - Clone source
-   * @param target - Clone target
-   */ ComponentCloner.cloneComponent = function cloneComponent(source, target, srcRoot, targetRoot, deepInstanceMap) {
-        var cloneModes = CloneManager.getCloneMode(source.constructor);
-        for(var k in source){
-            CloneManager.cloneProperty(source, target, k, cloneModes[k], srcRoot, targetRoot, deepInstanceMap);
+/**
+ * @internal
+ * Utility functions for remapping Entity/Component references during cloning.
+ */ var CloneUtils = /*#__PURE__*/ function() {
+    function CloneUtils() {}
+    CloneUtils.remapEntity = function remapEntity(srcRoot, targetRoot, entity) {
+        var paths = CloneUtils._tempRemapPath;
+        var success = CloneUtils._getEntityHierarchyPath(srcRoot, entity, paths);
+        return success ? CloneUtils._getEntityByHierarchyPath(targetRoot, paths) : entity;
+    };
+    CloneUtils.remapComponent = function remapComponent(srcRoot, targetRoot, component) {
+        var _CloneUtils__getEntityByHierarchyPath;
+        var paths = CloneUtils._tempRemapPath;
+        var success = CloneUtils._getEntityHierarchyPath(srcRoot, component.entity, paths);
+        return success ? (_CloneUtils__getEntityByHierarchyPath = CloneUtils._getEntityByHierarchyPath(targetRoot, paths)) == null ? void 0 : _CloneUtils__getEntityByHierarchyPath.getComponent(component.constructor) : component;
+    };
+    CloneUtils._getEntityHierarchyPath = function _getEntityHierarchyPath(rootEntity, searchEntity, inversePath) {
+        inversePath.length = 0;
+        while(searchEntity !== rootEntity){
+            var parent = searchEntity.parent;
+            if (!parent) {
+                return false;
+            }
+            inversePath.push(searchEntity.siblingIndex);
+            searchEntity = parent;
         }
-        if (source._cloneTo) {
-            source._cloneTo(target, srcRoot, targetRoot);
+        return true;
+    };
+    CloneUtils._getEntityByHierarchyPath = function _getEntityByHierarchyPath(rootEntity, inversePath) {
+        var entity = rootEntity;
+        for(var i = inversePath.length - 1; i >= 0; i--){
+            entity = entity.children[inversePath[i]];
         }
+        return entity;
     };
-    return ComponentCloner;
+    return CloneUtils;
 }();
+CloneUtils._tempRemapPath = [];
 
 /**
- * The entity modify flags.
- */ var EntityModifyFlags = /*#__PURE__*/ function(EntityModifyFlags) {
-    /** The parent changes. */ EntityModifyFlags[EntityModifyFlags["Parent"] = 1] = "Parent";
-    /** The child changes. */ EntityModifyFlags[EntityModifyFlags["Child"] = 2] = "Child";
-    return EntityModifyFlags;
-}({});
-
-/**
- * Entity, be used as components container.
- */ var Entity = /*#__PURE__*/ function(EngineObject) {
-    _inherits(Entity, EngineObject);
-    function Entity(engine, name) {
-        for(var _len = arguments.length, components = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++){
-            components[_key - 2] = arguments[_key];
-        }
+ * Skin used for skinned mesh renderer.
+ */ var Skin = /*#__PURE__*/ function(EngineObject) {
+    _inherits(Skin, EngineObject);
+    function Skin(name) {
         var _this;
-        _this = EngineObject.call(this, engine) || this, /** The layer the entity belongs to. */ _this.layer = Layer.Layer0, /** @internal */ _this._isActiveInHierarchy = false, /** @internal */ _this._isActiveInScene = false, /** @internal */ _this._components = [], /** @internal */ _this._scripts = new DisorderedArray(), /** @internal */ _this._children = [], /** @internal */ _this._isRoot = false, /** @internal */ _this._isActive = true, /** @internal */ _this._siblingIndex = -1, /** @internal */ _this._isTemplate = false, /** @internal */ _this._updateFlagManager = new UpdateFlagManager(), _this._parent = null, //--------------------------------------------------------------deprecated----------------------------------------------------------------
-        _this._invModelMatrix = new engineMath.Matrix();
-        _this.name = name != null ? name : "Entity";
-        for(var i = 0, n = components.length; i < n; i++){
-            _this.addComponent(components[i]);
-        }
-        !_this._transform && _this.addComponent(Transform);
-        _this._inverseWorldMatFlag = _this.registerWorldChangeFlag();
+        _this = EngineObject.call(this, null) || this, _this.name = name, _this.inverseBindMatrices = new Array(), _this._updatedManager = new UpdateFlagManager(), _this._bones = new Array(), _this._updateMark = -1, _this.joints = [];
         return _this;
     }
-    var _proto = Entity.prototype;
+    var _proto = Skin.prototype;
     /**
-   * Add component based on the component type.
-   * @param type - The type of the component
-   * @param args - The arguments of the component
-   * @returns	The component which has been added
-   */ _proto.addComponent = function addComponent(type) {
-        for(var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++){
-            args[_key - 1] = arguments[_key];
+   * @internal
+   */ _proto._updateSkinMatrices = function _updateSkinMatrices(renderer) {
+        if (this._updateMark === renderer.engine.time.frameCount) {
+            return;
         }
-        ComponentsDependencies._addCheck(this, type);
-        var component = _construct(type, [].concat([
-            this
-        ], args));
-        this._components.push(component);
-        // @todo: temporary solution
-        if (_instanceof(component, Transform)) this._setTransform(component);
-        component._setActive(true, ActiveChangeFlag.All);
-        return component;
-    };
-    /**
-   * Get component which match the type.
-   * @param type - The type of the component
-   * @returns	The first component which match type
-   */ _proto.getComponent = function getComponent(type) {
-        var components = this._components;
-        for(var i = 0, n = components.length; i < n; i++){
-            var component = components[i];
-            if (_instanceof(component, type)) {
-                return component;
+        var _this = this, bones = _this.bones, bindMatrices = _this.inverseBindMatrices, skinMatrices = _this._skinMatrices;
+        var _this_rootBone;
+        var worldToLocal = ((_this_rootBone = this.rootBone) != null ? _this_rootBone : renderer.entity).getInvModelMatrix();
+        for(var i = bones.length - 1; i >= 0; i--){
+            var bone = bones[i];
+            var offset = i * 16;
+            if (bone) {
+                Utils._floatMatrixMultiply(bone.transform.worldMatrix, bindMatrices[i].elements, 0, skinMatrices, offset);
+            } else {
+                skinMatrices.set(bindMatrices[i].elements, offset);
             }
+            Utils._floatMatrixMultiply(worldToLocal, skinMatrices, offset, skinMatrices, offset);
         }
-        return null;
+        this._updateMark = renderer.engine.time.frameCount;
     };
     /**
-   * Get components which match the type.
-   * @param type - The type of the component
-   * @param results - The components which match type
-   * @returns	The components which match type
-   */ _proto.getComponents = function getComponents(type, results) {
-        results.length = 0;
-        var components = this._components;
-        for(var i = 0, n = components.length; i < n; i++){
-            var component = components[i];
-            if (_instanceof(component, type)) {
-                results.push(component);
+   * @internal
+   */ _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
+        // Clone rootBone
+        var rootBone = this.rootBone;
+        if (rootBone) {
+            target.rootBone = CloneUtils.remapEntity(srcRoot, targetRoot, rootBone);
+        }
+        // Clone bones
+        var bones = this.bones;
+        if (bones.length > 0) {
+            var boneCount = bones.length;
+            var destBones = new Array(boneCount);
+            for(var i = 0; i < boneCount; i++){
+                destBones[i] = CloneUtils.remapEntity(srcRoot, targetRoot, bones[i]);
             }
+            target.bones = destBones;
         }
-        return results;
-    };
-    /**
-   * Get the components which match the type of the entity and it's children.
-   * @param type - The component type
-   * @param results - The components collection
-   * @returns	The components collection which match the type
-   */ _proto.getComponentsIncludeChildren = function getComponentsIncludeChildren(type, results) {
-        results.length = 0;
-        this._getComponentsInChildren(type, results);
-        return results;
     };
-    _proto.addChild = function addChild(indexOrChild, child) {
-        var index;
-        if (typeof indexOrChild === "number") {
-            index = indexOrChild;
-        } else {
-            index = undefined;
-            child = indexOrChild;
+    _create_class(Skin, [
+        {
+            key: "rootBone",
+            get: /**
+   * Root bone.
+   */ function get() {
+                return this._rootBone;
+            },
+            set: function set(value) {
+                if (this._rootBone !== value) {
+                    this._updatedManager.dispatch(1, value);
+                    this._rootBone = value;
+                }
+            }
+        },
+        {
+            key: "bones",
+            get: /**
+   * Bones of the skin.
+   */ function get() {
+                return this._bones;
+            },
+            set: function set(value) {
+                var bones = this._bones;
+                var _value_length;
+                var boneCount = (_value_length = value == null ? void 0 : value.length) != null ? _value_length : 0;
+                var lastBoneCount = bones.length;
+                bones.length = boneCount;
+                for(var i = 0; i < boneCount; i++){
+                    bones[i] = value[i];
+                }
+                if (lastBoneCount !== boneCount) {
+                    this._skinMatrices = new Float32Array(boneCount * 16);
+                    this._updatedManager.dispatch(0, boneCount);
+                }
+            }
+        },
+        {
+            key: "skeleton",
+            get: /** @deprecated Please use `rootBone` instead. */ function get() {
+                var _this_rootBone;
+                return (_this_rootBone = this.rootBone) == null ? void 0 : _this_rootBone.name;
+            },
+            set: function set(value) {
+                var rootBone = this._rootBone;
+                if (rootBone) {
+                    rootBone.name = value;
+                }
+            }
         }
-        child._setParent(this, index);
-    };
+    ]);
+    return Skin;
+}(EngineObject);
+__decorate([
+    deepClone
+], Skin.prototype, "inverseBindMatrices", void 0);
+__decorate([
+    ignoreClone
+], Skin.prototype, "_skinMatrices", void 0);
+__decorate([
+    ignoreClone
+], Skin.prototype, "_updatedManager", void 0);
+__decorate([
+    ignoreClone
+], Skin.prototype, "_rootBone", void 0);
+__decorate([
+    ignoreClone
+], Skin.prototype, "_bones", void 0);
+__decorate([
+    ignoreClone
+], Skin.prototype, "_updateMark", void 0);
+var SkinUpdateFlag = /*#__PURE__*/ function(SkinUpdateFlag) {
+    SkinUpdateFlag[SkinUpdateFlag["BoneCountChanged"] = 0] = "BoneCountChanged";
+    SkinUpdateFlag[SkinUpdateFlag["RootBoneChanged"] = 1] = "RootBoneChanged";
+    return SkinUpdateFlag;
+}({});
+
+/**
+ * SkinnedMeshRenderer.
+ */ var SkinnedMeshRenderer = /*#__PURE__*/ function(MeshRenderer) {
+    _inherits(SkinnedMeshRenderer, MeshRenderer);
+    function SkinnedMeshRenderer(entity) {
+        var _this;
+        _this = MeshRenderer.call(this, entity) || this, _this._localBounds = new engineMath.BoundingBox(), _this._jointDataCreateCache = new engineMath.Vector2(-1, -1);
+        _this._skin = null;
+        var rhi = _this.entity.engine._hardwareRenderer;
+        var maxVertexUniformVectors = rhi.renderStates.getParameter(rhi.gl.MAX_VERTEX_UNIFORM_VECTORS);
+        // Limit size to 256 to avoid some problem:
+        // For renderer is "Apple GPU", when uniform is large than 256 the skeleton matrix array access in shader very slow in Safari or WKWebview. This may be a apple bug, Chrome and Firefox is OK!
+        // For renderer is "ANGLE (AMD, AMD Radeon(TM) Graphics Direct3011 vs_5_0 ps_5_0, D3011)", compile shader si very slow because of max uniform is 4096.
+        maxVertexUniformVectors = Math.min(maxVertexUniformVectors, rhi._options._maxAllowSkinUniformVectorCount);
+        _this._maxVertexUniformVectors = maxVertexUniformVectors;
+        _this._onLocalBoundsChanged = _this._onLocalBoundsChanged.bind(_this);
+        _this._onSkinUpdated = _this._onSkinUpdated.bind(_this);
+        var localBounds = _this._localBounds;
+        // @ts-ignore
+        localBounds.min._onValueChanged = _this._onLocalBoundsChanged;
+        // @ts-ignore
+        localBounds.max._onValueChanged = _this._onLocalBoundsChanged;
+        return _this;
+    }
+    var _proto = SkinnedMeshRenderer.prototype;
     /**
-   * Remove child entity.
-   * @param child - The child entity which want to be removed
-   */ _proto.removeChild = function removeChild(child) {
-        if (child._parent !== this) return;
-        child._setParent(null);
+   * @internal
+   */ _proto._onDestroy = function _onDestroy() {
+        var _this__jointTexture;
+        MeshRenderer.prototype._onDestroy.call(this);
+        this._jointDataCreateCache = null;
+        this._skin = null;
+        this._blendShapeWeights = null;
+        this._localBounds = null;
+        (_this__jointTexture = this._jointTexture) == null ? void 0 : _this__jointTexture.destroy();
+        this._jointTexture = null;
     };
     /**
-   * @deprecated Please use `children` property instead.
-   * Find child entity by index.
-   * @param index - The index of the child entity
-   * @returns	The component which be found
-   */ _proto.getChild = function getChild(index) {
-        return this._children[index];
+   * @internal
+   */ _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
+        MeshRenderer.prototype._cloneTo.call(this, target, srcRoot, targetRoot);
+        if (this.skin) {
+            target._applySkin(null, target.skin);
+        }
+        this._blendShapeWeights && (target._blendShapeWeights = this._blendShapeWeights.slice());
     };
-    /**
-   * Find entity by name.
-   * @param name - The name of the entity which want to be found
-   * @returns The component which be found
-   */ _proto.findByName = function findByName(name) {
-        if (name === this.name) {
-            return this;
+    _proto._update = function _update(context) {
+        var skin = this.skin;
+        if ((skin == null ? void 0 : skin.bones.length) > 0) {
+            skin._updateSkinMatrices(this);
         }
-        var children = this._children;
-        for(var i = 0, n = children.length; i < n; i++){
-            var target = children[i].findByName(name);
-            if (target) {
-                return target;
+        var shaderData = this.shaderData;
+        var mesh = this.mesh;
+        var blendShapeManager = mesh._blendShapeManager;
+        blendShapeManager._updateShaderData(shaderData, this);
+        var bones = skin == null ? void 0 : skin.bones;
+        if (bones) {
+            var bsUniformOccupiesCount = blendShapeManager._uniformOccupiesCount;
+            var boneCount = bones.length;
+            var boneDataCreateCache = this._jointDataCreateCache;
+            var boneCountChange = boneCount !== boneDataCreateCache.x;
+            if (boneCountChange || bsUniformOccupiesCount !== boneDataCreateCache.y) {
+                // directly use max joint count to avoid shader recompile
+                var remainUniformJointCount = Math.ceil((this._maxVertexUniformVectors - (SkinnedMeshRenderer._baseVertexUniformVectorCount + bsUniformOccupiesCount)) / 4);
+                if (boneCount > remainUniformJointCount) {
+                    var engine = this.engine;
+                    if (engine._hardwareRenderer.canIUseMoreJoints) {
+                        if (boneCountChange) {
+                            var _this__jointTexture;
+                            (_this__jointTexture = this._jointTexture) == null ? void 0 : _this__jointTexture.destroy();
+                            this._jointTexture = new Texture2D(engine, 4, boneCount, TextureFormat.R32G32B32A32, false, false);
+                            this._jointTexture.filterMode = TextureFilterMode.Point;
+                            this._jointTexture.isGCIgnored = true;
+                        }
+                        shaderData.disableMacro("RENDERER_JOINTS_NUM");
+                        shaderData.enableMacro("RENDERER_USE_JOINT_TEXTURE");
+                        shaderData.setTexture(SkinnedMeshRenderer._jointSamplerProperty, this._jointTexture);
+                    } else {
+                        Logger.error("component's joints count(" + boneCount + ") greater than device's MAX_VERTEX_UNIFORM_VECTORS number " + this._maxVertexUniformVectors + ", and don't support jointTexture in this device. suggest joint count less than " + remainUniformJointCount + ".", this);
+                    }
+                } else {
+                    var _this__jointTexture1;
+                    (_this__jointTexture1 = this._jointTexture) == null ? void 0 : _this__jointTexture1.destroy();
+                    shaderData.disableMacro("RENDERER_USE_JOINT_TEXTURE");
+                    shaderData.enableMacro("RENDERER_JOINTS_NUM", remainUniformJointCount.toString());
+                    shaderData.setFloatArray(SkinnedMeshRenderer._jointMatrixProperty, skin._skinMatrices);
+                }
+                boneDataCreateCache.set(boneCount, bsUniformOccupiesCount);
+            }
+            if (this._jointTexture) {
+                this._jointTexture.setPixelBuffer(skin._skinMatrices);
             }
         }
-        return null;
+        MeshRenderer.prototype._update.call(this, context);
     };
     /**
-   * Find the entity by path.
-   * @param path - The path of the entity eg: /entity
-   * @returns The component which be found
-   */ _proto.findByPath = function findByPath(path) {
-        var splits = path.split("/").filter(Boolean);
-        if (!splits.length) {
-            return this;
+   * @internal
+   */ _proto._updateBounds = function _updateBounds(worldBounds) {
+        var _this_skin;
+        var rootBone = (_this_skin = this.skin) == null ? void 0 : _this_skin.rootBone;
+        if (rootBone) {
+            engineMath.BoundingBox.transform(this._localBounds, this._transformEntity.transform.worldMatrix, worldBounds);
+        } else {
+            MeshRenderer.prototype._updateBounds.call(this, worldBounds);
         }
-        return Entity._findChildByName(this, 0, splits, 0);
-    };
-    /**
-   * Create child entity.
-   * @param name - The child entity's name
-   * @returns The child entity
-   */ _proto.createChild = function createChild(name) {
-        var transform = this._transform;
-        var child = transform ? new Entity(this.engine, name, transform.constructor) : new Entity(this.engine, name);
-        child.layer = this.layer;
-        child.parent = this;
-        return child;
     };
-    /**
-   * Clear children entities.
-   */ _proto.clearChildren = function clearChildren() {
-        var children = this._children;
-        for(var i = children.length - 1; i >= 0; i--){
-            var child = children[i];
-            child._parent = null;
-            var activeChangeFlag = ActiveChangeFlag.None;
-            child._isActiveInHierarchy && (activeChangeFlag |= ActiveChangeFlag.Hierarchy);
-            child._isActiveInScene && (activeChangeFlag |= ActiveChangeFlag.Scene);
-            activeChangeFlag && child._processInActive(activeChangeFlag);
-            Entity._traverseSetOwnerScene(child, null); // Must after child._processInActive().
+    _proto._checkBlendShapeWeightLength = function _checkBlendShapeWeightLength() {
+        var mesh = this._mesh;
+        var newBlendShapeCount = mesh ? mesh.blendShapeCount : 0;
+        var lastBlendShapeWeights = this._blendShapeWeights;
+        if (lastBlendShapeWeights) {
+            var lastBlendShapeWeightsCount = lastBlendShapeWeights.length;
+            if (lastBlendShapeWeightsCount !== newBlendShapeCount) {
+                var newBlendShapeWeights = new Float32Array(newBlendShapeCount);
+                if (newBlendShapeCount > lastBlendShapeWeightsCount) {
+                    newBlendShapeWeights.set(lastBlendShapeWeights);
+                } else {
+                    for(var i = 0; i < newBlendShapeCount; i++){
+                        newBlendShapeWeights[i] = lastBlendShapeWeights[i];
+                    }
+                }
+                this._blendShapeWeights = newBlendShapeWeights;
+            }
+        } else {
+            this._blendShapeWeights = new Float32Array(newBlendShapeCount);
         }
-        children.length = 0;
-    };
-    /**
-   * Clone this entity include children and components.
-   * @returns Cloned entity
-   */ _proto.clone = function clone() {
-        var cloneEntity = this._createCloneEntity();
-        this._parseCloneEntity(this, cloneEntity, this, cloneEntity, new Map());
-        return cloneEntity;
-    };
-    /**
-   * Listen for changes in the world pose of this `Entity`.
-   * @returns Change flag
-   */ _proto.registerWorldChangeFlag = function registerWorldChangeFlag() {
-        return this._updateFlagManager.createFlag(BoolUpdateFlag);
     };
-    /**
-   * @internal
-   */ _proto._markAsTemplate = function _markAsTemplate(templateResource) {
-        this._isTemplate = true;
-        this._templateResource = templateResource;
+    _proto._onLocalBoundsChanged = function _onLocalBoundsChanged() {
+        this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
     };
-    _proto._createCloneEntity = function _createCloneEntity() {
-        var componentConstructors = Entity._tempComponentConstructors;
-        var components = this._components;
-        for(var i = 0, n = components.length; i < n; i++){
-            componentConstructors[i] = components[i].constructor;
+    _proto._onSkinUpdated = function _onSkinUpdated(type, value) {
+        switch(type){
+            case SkinUpdateFlag.BoneCountChanged:
+                var shaderData = this.shaderData;
+                if (value > 0) {
+                    shaderData.enableMacro("RENDERER_HAS_SKIN");
+                    shaderData.setInt(SkinnedMeshRenderer._jointCountProperty, value);
+                } else {
+                    shaderData.disableMacro("RENDERER_HAS_SKIN");
+                }
+                break;
+            case SkinUpdateFlag.RootBoneChanged:
+                this._setTransformEntity(value);
+                this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
+                break;
         }
-        var cloneEntity = _construct(Entity, [].concat([
-            this.engine,
-            this.name
-        ], componentConstructors));
-        componentConstructors.length = 0;
-        var templateResource = this._templateResource;
-        if (templateResource) {
-            cloneEntity._templateResource = templateResource;
-            templateResource._addReferCount(1);
+    };
+    _proto._applySkin = function _applySkin(lastSkin, value) {
+        var _lastSkin_bones, _value_bones;
+        var _lastSkin_bones_length;
+        var lastSkinBoneCount = (_lastSkin_bones_length = lastSkin == null ? void 0 : (_lastSkin_bones = lastSkin.bones) == null ? void 0 : _lastSkin_bones.length) != null ? _lastSkin_bones_length : 0;
+        var _lastSkin_rootBone;
+        var lastRootBone = (_lastSkin_rootBone = lastSkin == null ? void 0 : lastSkin.rootBone) != null ? _lastSkin_rootBone : this.entity;
+        lastSkin == null ? void 0 : lastSkin._updatedManager.removeListener(this._onSkinUpdated);
+        var _value_bones_length;
+        var skinBoneCount = (_value_bones_length = value == null ? void 0 : (_value_bones = value.bones) == null ? void 0 : _value_bones.length) != null ? _value_bones_length : 0;
+        var _value_rootBone;
+        var rootBone = (_value_rootBone = value == null ? void 0 : value.rootBone) != null ? _value_rootBone : this.entity;
+        value == null ? void 0 : value._updatedManager.addListener(this._onSkinUpdated);
+        if (lastSkinBoneCount !== skinBoneCount) {
+            this._onSkinUpdated(SkinUpdateFlag.BoneCountChanged, skinBoneCount);
         }
-        cloneEntity.layer = this.layer;
-        cloneEntity._isActive = this._isActive;
-        var srcChildren = this._children;
-        for(var i1 = 0, n1 = srcChildren.length; i1 < n1; i1++){
-            cloneEntity.addChild(srcChildren[i1]._createCloneEntity());
+        if (lastRootBone !== rootBone) {
+            this._onSkinUpdated(SkinUpdateFlag.RootBoneChanged, rootBone);
         }
-        return cloneEntity;
     };
-    _proto._parseCloneEntity = function _parseCloneEntity(src, target, srcRoot, targetRoot, deepInstanceMap) {
-        var srcChildren = src._children;
-        var targetChildren = target._children;
-        for(var i = 0, n = srcChildren.length; i < n; i++){
-            this._parseCloneEntity(srcChildren[i], targetChildren[i], srcRoot, targetRoot, deepInstanceMap);
-        }
-        var components = src._components;
-        for(var i1 = 0, n1 = components.length; i1 < n1; i1++){
+    _create_class(SkinnedMeshRenderer, [
+        {
+            key: "skin",
+            get: /**
+   * Skin of the SkinnedMeshRenderer.
+   */ function get() {
+                return this._skin;
+            },
+            set: function set(value) {
+                var lastSkin = this._skin;
+                if (lastSkin !== value) {
+                    this._applySkin(lastSkin, value);
+                    this._skin = value;
+                }
+            }
+        },
+        {
+            key: "blendShapeWeights",
+            get: /**
+   * The weights of the BlendShapes.
+   * @remarks Array index is BlendShape index.
+   */ function get() {
+                this._checkBlendShapeWeightLength();
+                return this._blendShapeWeights;
+            },
+            set: function set(value) {
+                this._checkBlendShapeWeightLength();
+                var blendShapeWeights = this._blendShapeWeights;
+                if (value.length <= blendShapeWeights.length) {
+                    blendShapeWeights.set(value);
+                } else {
+                    for(var i = 0, n = blendShapeWeights.length; i < n; i++){
+                        blendShapeWeights[i] = value[i];
+                    }
+                }
+            }
+        },
+        {
+            key: "localBounds",
+            get: /**
+   * Local bounds.
+   */ function get() {
+                return this._localBounds;
+            },
+            set: function set(value) {
+                if (this._localBounds !== value) {
+                    this._localBounds.copyFrom(value);
+                }
+            }
+        },
+        {
+            key: "rootBone",
+            get: /**
+   * @deprecated use {@link SkinnedMeshRenderer.skin.rootBone} instead.
+   */ function get() {
+                return this.skin.rootBone;
+            },
+            set: function set(value) {
+                this.skin.rootBone = value;
+            }
+        },
+        {
+            key: "bones",
+            get: /**
+   * @deprecated use {@link SkinnedMeshRenderer.skin.bones} instead.
+   */ function get() {
+                return this.skin.bones;
+            },
+            set: function set(value) {
+                this.skin.bones = value;
+            }
+        }
+    ]);
+    return SkinnedMeshRenderer;
+}(MeshRenderer);
+// @TODO: different shader type should use different count, not always 48
+/** @internal */ SkinnedMeshRenderer._baseVertexUniformVectorCount = 48;
+SkinnedMeshRenderer._jointCountProperty = ShaderProperty.getByName("renderer_JointCount");
+SkinnedMeshRenderer._jointSamplerProperty = ShaderProperty.getByName("renderer_JointSampler");
+SkinnedMeshRenderer._jointMatrixProperty = ShaderProperty.getByName("renderer_JointMatrix");
+__decorate([
+    ignoreClone
+], SkinnedMeshRenderer.prototype, "_condensedBlendShapeWeights", void 0);
+__decorate([
+    deepClone
+], SkinnedMeshRenderer.prototype, "_localBounds", void 0);
+__decorate([
+    ignoreClone
+], SkinnedMeshRenderer.prototype, "_jointDataCreateCache", void 0);
+__decorate([
+    ignoreClone
+], SkinnedMeshRenderer.prototype, "_blendShapeWeights", void 0);
+__decorate([
+    ignoreClone
+], SkinnedMeshRenderer.prototype, "_maxVertexUniformVectors", void 0);
+__decorate([
+    ignoreClone
+], SkinnedMeshRenderer.prototype, "_jointTexture", void 0);
+__decorate([
+    deepClone
+], SkinnedMeshRenderer.prototype, "_skin", void 0);
+__decorate([
+    ignoreClone
+], SkinnedMeshRenderer.prototype, "_onLocalBoundsChanged", null);
+__decorate([
+    ignoreClone
+], SkinnedMeshRenderer.prototype, "_onSkinUpdated", null);
+
+/**
+ * @internal
+ */ var BasicResources = /*#__PURE__*/ function() {
+    function BasicResources(engine) {
+        this.engine = engine;
+        // prettier-ignore
+        var vertices = new Float32Array([
+            -1,
+            -1,
+            0,
+            1,
+            3,
+            -1,
+            2,
+            1,
+            -1,
+            3,
+            0,
+            -1
+        ]); // left-top
+        // prettier-ignore
+        var flipYVertices = new Float32Array([
+            3,
+            -1,
+            2,
+            0,
+            -1,
+            -1,
+            0,
+            0,
+            -1,
+            3,
+            0,
+            2
+        ]); // left-top
+        var blitMaterial = new Material(engine, Shader.find("blit"));
+        blitMaterial._addReferCount(1);
+        blitMaterial.renderState.depthState.enabled = false;
+        blitMaterial.renderState.depthState.writeEnabled = false;
+        var blitScreenMaterial = new Material(engine, Shader.find("blit-screen"));
+        blitScreenMaterial._addReferCount(1);
+        blitScreenMaterial.renderState.depthState.enabled = false;
+        blitScreenMaterial.renderState.depthState.writeEnabled = false;
+        this.blitMaterial = blitMaterial;
+        this.blitScreenMaterial = blitScreenMaterial;
+        this.blitMesh = this._createBlitMesh(engine, vertices);
+        this.flipYBlitMesh = this._createBlitMesh(engine, flipYVertices);
+        // Create white and magenta textures
+        var whitePixel = new Uint8Array([
+            255,
+            255,
+            255,
+            255
+        ]);
+        this.whiteTexture2D = this._create1x1Texture(engine, 0, TextureFormat.R8G8B8A8, whitePixel, true);
+        this.whiteTextureCube = this._create1x1Texture(engine, 1, TextureFormat.R8G8B8A8, whitePixel, true);
+        var isWebGL2 = engine._hardwareRenderer.isWebGL2;
+        if (isWebGL2) {
+            this.whiteTexture2DArray = this._create1x1Texture(engine, 2, TextureFormat.R8G8B8A8, whitePixel, true);
+            var whitePixel32 = new Uint32Array([
+                255,
+                255,
+                255,
+                255
+            ]);
+            this.uintWhiteTexture2D = this._create1x1Texture(engine, 0, TextureFormat.R32G32B32A32_UInt, whitePixel32, false);
+        }
+        this.spriteDefaultMaterial = this._create2DMaterial(engine, Shader.find("Sprite"));
+        this.textDefaultMaterial = this._create2DMaterial(engine, Shader.find("Text"));
+        this.spriteMaskDefaultMaterial = this._createSpriteMaskMaterial(engine);
+        this.meshMagentaMaterial = this._createMagentaMaterial(engine, "unlit");
+        this.particleMagentaMaterial = this._createMagentaMaterial(engine, "particle-shader");
+    }
+    var _proto = BasicResources.prototype;
+    /**
+   * @internal
+   */ _proto._getBlinnPhongMaterial = function _getBlinnPhongMaterial() {
+        return this._blinnPhongMaterial || (this._blinnPhongMaterial = new BlinnPhongMaterial(this.engine));
+    };
+    /**
+   * @internal
+   */ _proto._initialize = function _initialize() {
+        var _this = this;
+        return new Promise(function(resolve, reject) {
+            PrefilteredDFG.create(_this.engine).then(function(texture) {
+                _this._prefilteredDFGTexture = texture;
+                resolve(_this);
+            }).catch(reject);
+        });
+    };
+    _proto._createBlitMesh = function _createBlitMesh(engine, vertices) {
+        var mesh = new ModelMesh(engine);
+        mesh._addReferCount(1);
+        mesh.setVertexElements([
+            new VertexElement("POSITION_UV", 0, VertexElementFormat.Vector4, 0)
+        ]);
+        var buffer = new Buffer(engine, BufferBindFlag.VertexBuffer, vertices, BufferUsage.Static, true);
+        mesh.setVertexBufferBinding(buffer, 16);
+        mesh.addSubMesh(0, 3, MeshTopology.Triangles);
+        engine.resourceManager.addContentRestorer(new (/*#__PURE__*/ function(ContentRestorer) {
+            _inherits(_class, ContentRestorer);
+            function _class() {
+                return ContentRestorer.call(this, mesh) || this;
+            }
+            var _proto = _class.prototype;
+            _proto.restoreContent = function restoreContent() {
+                buffer.setData(buffer.data);
+            };
+            return _class;
+        }(ContentRestorer))());
+        return mesh;
+    };
+    _proto._create1x1Texture = function _create1x1Texture(engine, type, format, pixel, isSRGBColorSpace) {
+        var texture;
+        switch(type){
+            case 0:
+                var texture2D = new Texture2D(engine, 1, 1, format, false, isSRGBColorSpace);
+                texture2D.setPixelBuffer(pixel);
+                texture = texture2D;
+                break;
+            case 2:
+                var texture2DArray = new Texture2DArray(engine, 1, 1, 1, format, false, isSRGBColorSpace);
+                texture2DArray.setPixelBuffer(0, pixel);
+                texture = texture2DArray;
+                break;
+            case 1:
+                var textureCube = new TextureCube(engine, 1, format, false, isSRGBColorSpace);
+                for(var i = 0; i < 6; i++){
+                    textureCube.setPixelBuffer(TextureCubeFace.PositiveX + i, pixel);
+                }
+                texture = textureCube;
+                break;
+            default:
+                throw "Invalid texture type";
+        }
+        texture.isGCIgnored = true;
+        engine.resourceManager.addContentRestorer(new (/*#__PURE__*/ function(ContentRestorer) {
+            _inherits(_class, ContentRestorer);
+            function _class() {
+                return ContentRestorer.call(this, texture) || this;
+            }
+            var _proto = _class.prototype;
+            _proto.restoreContent = function restoreContent() {
+                switch(type){
+                    case 0:
+                        this.resource.setPixelBuffer(pixel);
+                        break;
+                    case 2:
+                        this.resource.setPixelBuffer(0, pixel);
+                        break;
+                    case 1:
+                        for(var i = 0; i < 6; i++){
+                            this.resource.setPixelBuffer(TextureCubeFace.PositiveX + i, pixel);
+                        }
+                        break;
+                }
+            };
+            return _class;
+        }(ContentRestorer))());
+        return texture;
+    };
+    _proto._create2DMaterial = function _create2DMaterial(engine, shader) {
+        var material = new Material(engine, shader);
+        var renderState = material.renderState;
+        var target = renderState.blendState.targetBlendState;
+        target.enabled = true;
+        target.sourceColorBlendFactor = BlendFactor.SourceAlpha;
+        target.destinationColorBlendFactor = BlendFactor.OneMinusSourceAlpha;
+        target.sourceAlphaBlendFactor = BlendFactor.One;
+        target.destinationAlphaBlendFactor = BlendFactor.OneMinusSourceAlpha;
+        target.colorBlendOperation = target.alphaBlendOperation = BlendOperation.Add;
+        renderState.depthState.writeEnabled = false;
+        renderState.rasterState.cullMode = CullMode.Off;
+        renderState.renderQueueType = RenderQueueType.Transparent;
+        material.isGCIgnored = true;
+        return material;
+    };
+    _proto._createMagentaMaterial = function _createMagentaMaterial(engine, shaderName) {
+        var material = new Material(engine, Shader.find(shaderName));
+        material.isGCIgnored = true;
+        material.shaderData.setColor("material_BaseColor", new engineMath.Color(1.0, 0.0, 1.01, 1.0));
+        return material;
+    };
+    _proto._createSpriteMaskMaterial = function _createSpriteMaskMaterial(engine) {
+        var material = new Material(engine, Shader.find("SpriteMask"));
+        material.isGCIgnored = true;
+        return material;
+    };
+    BasicResources.getMaskInteractionRenderStates = function getMaskInteractionRenderStates(maskInteraction) {
+        var visibleInsideMask = maskInteraction === SpriteMaskInteraction.VisibleInsideMask;
+        var renderStates;
+        var compareFunction;
+        if (visibleInsideMask) {
+            renderStates = BasicResources._maskReadInsideRenderStates;
+            if (renderStates) {
+                return renderStates;
+            }
+            BasicResources._maskReadInsideRenderStates = renderStates = {};
+            compareFunction = CompareFunction.LessEqual;
+        } else {
+            renderStates = BasicResources._maskReadOutsideRenderStates;
+            if (renderStates) {
+                return renderStates;
+            }
+            BasicResources._maskReadOutsideRenderStates = renderStates = {};
+            compareFunction = CompareFunction.Greater;
+        }
+        renderStates[RenderStateElementKey.StencilStateEnabled] = true;
+        renderStates[RenderStateElementKey.StencilStateWriteMask] = 0x00;
+        renderStates[RenderStateElementKey.StencilStateReferenceValue] = 1;
+        renderStates[RenderStateElementKey.StencilStateCompareFunctionFront] = compareFunction;
+        renderStates[RenderStateElementKey.StencilStateCompareFunctionBack] = compareFunction;
+        return renderStates;
+    };
+    BasicResources.getMaskTypeRenderStates = function getMaskTypeRenderStates(maskType) {
+        var isIncrement = maskType === RenderQueueMaskType.Increment;
+        var renderStates;
+        var passOperation;
+        if (isIncrement) {
+            renderStates = BasicResources._maskWriteIncrementRenderStates;
+            if (renderStates) {
+                return renderStates;
+            }
+            BasicResources._maskWriteIncrementRenderStates = renderStates = {};
+            passOperation = StencilOperation.IncrementSaturate;
+        } else {
+            renderStates = BasicResources._maskWriteDecrementRenderStates;
+            if (renderStates) {
+                return renderStates;
+            }
+            BasicResources._maskWriteDecrementRenderStates = renderStates = {};
+            passOperation = StencilOperation.DecrementSaturate;
+        }
+        renderStates[RenderStateElementKey.StencilStateEnabled] = true;
+        renderStates[RenderStateElementKey.StencilStatePassOperationFront] = passOperation;
+        renderStates[RenderStateElementKey.StencilStatePassOperationBack] = passOperation;
+        renderStates[RenderStateElementKey.StencilStateCompareFunctionFront] = CompareFunction.Always;
+        renderStates[RenderStateElementKey.StencilStateCompareFunctionBack] = CompareFunction.Always;
+        var failStencilOperation = StencilOperation.Keep;
+        renderStates[RenderStateElementKey.StencilStateFailOperationFront] = failStencilOperation;
+        renderStates[RenderStateElementKey.StencilStateFailOperationBack] = failStencilOperation;
+        renderStates[RenderStateElementKey.StencilStateZFailOperationFront] = failStencilOperation;
+        renderStates[RenderStateElementKey.StencilStateZFailOperationBack] = failStencilOperation;
+        renderStates[RenderStateElementKey.BlendStateColorWriteMask0] = ColorWriteMask.None;
+        renderStates[RenderStateElementKey.DepthStateEnabled] = false;
+        renderStates[RenderStateElementKey.RasterStateCullMode] = CullMode.Off;
+        return renderStates;
+    };
+    _create_class(BasicResources, [
+        {
+            key: "prefilteredDFGTexture",
+            get: function get() {
+                return this._prefilteredDFGTexture;
+            }
+        }
+    ]);
+    return BasicResources;
+}();
+BasicResources._maskReadInsideRenderStates = null;
+BasicResources._maskReadOutsideRenderStates = null;
+BasicResources._maskWriteIncrementRenderStates = null;
+BasicResources._maskWriteDecrementRenderStates = null;
+
+function _is_native_reflect_construct() {
+    // Since Reflect.construct can't be properly polyfilled, some
+    // implementations (e.g. core-js@2) don't set the correct internal slots.
+    // Those polyfills don't allow us to subclass built-ins, so we need to
+    // use our fallback implementation.
+    try {
+        // If the internal slots aren't set, this throws an error similar to
+        //   TypeError: this is not a Boolean object.
+        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+    } catch (_) {}
+    return (_is_native_reflect_construct = function() {
+        return !!result;
+    })();
+}
+
+function _construct(Parent, args, Class) {
+    if (_is_native_reflect_construct()) _construct = Reflect.construct;
+    else {
+        _construct = function construct(Parent, args, Class) {
+            var a = [null];
+            a.push.apply(a, args);
+            var Constructor = Function.bind.apply(Parent, a);
+            var instance = new Constructor();
+
+            if (Class) _set_prototype_of(instance, Class.prototype);
+
+            return instance;
+        };
+    }
+
+    return _construct.apply(null, arguments);
+}
+
+var ComponentCloner = /*#__PURE__*/ function() {
+    function ComponentCloner() {}
+    /**
+   * Clone component.
+   * @param source - Clone source
+   * @param target - Clone target
+   */ ComponentCloner.cloneComponent = function cloneComponent(source, target, srcRoot, targetRoot, deepInstanceMap) {
+        var cloneModes = CloneManager.getCloneMode(source.constructor);
+        for(var k in source){
+            CloneManager.cloneProperty(source, target, k, cloneModes[k], srcRoot, targetRoot, deepInstanceMap);
+        }
+        if (source._cloneTo) {
+            source._cloneTo(target, srcRoot, targetRoot);
+        }
+    };
+    return ComponentCloner;
+}();
+
+/**
+ * The entity modify flags.
+ */ var EntityModifyFlags = /*#__PURE__*/ function(EntityModifyFlags) {
+    /** The parent changes. */ EntityModifyFlags[EntityModifyFlags["Parent"] = 1] = "Parent";
+    /** The child changes. */ EntityModifyFlags[EntityModifyFlags["Child"] = 2] = "Child";
+    return EntityModifyFlags;
+}({});
+
+/**
+ * Entity, be used as components container.
+ */ var Entity = /*#__PURE__*/ function(EngineObject) {
+    _inherits(Entity, EngineObject);
+    function Entity(engine, name) {
+        for(var _len = arguments.length, components = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++){
+            components[_key - 2] = arguments[_key];
+        }
+        var _this;
+        _this = EngineObject.call(this, engine) || this, /** The layer the entity belongs to. */ _this.layer = Layer.Layer0, /** @internal */ _this._isActiveInHierarchy = false, /** @internal */ _this._isActiveInScene = false, /** @internal */ _this._components = [], /** @internal */ _this._scripts = new DisorderedArray(), /** @internal */ _this._children = [], /** @internal */ _this._isRoot = false, /** @internal */ _this._isActive = true, /** @internal */ _this._siblingIndex = -1, /** @internal */ _this._isTemplate = false, /** @internal */ _this._updateFlagManager = new UpdateFlagManager(), _this._parent = null, //--------------------------------------------------------------deprecated----------------------------------------------------------------
+        _this._invModelMatrix = new engineMath.Matrix();
+        _this.name = name != null ? name : "Entity";
+        for(var i = 0, n = components.length; i < n; i++){
+            _this.addComponent(components[i]);
+        }
+        !_this._transform && _this.addComponent(Transform);
+        _this._inverseWorldMatFlag = _this.registerWorldChangeFlag();
+        return _this;
+    }
+    var _proto = Entity.prototype;
+    /**
+   * Add component based on the component type.
+   * @param type - The type of the component
+   * @param args - The arguments of the component
+   * @returns	The component which has been added
+   */ _proto.addComponent = function addComponent(type) {
+        for(var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++){
+            args[_key - 1] = arguments[_key];
+        }
+        ComponentsDependencies._addCheck(this, type);
+        var component = _construct(type, [].concat([
+            this
+        ], args));
+        this._components.push(component);
+        // @todo: temporary solution
+        if (_instanceof(component, Transform)) this._setTransform(component);
+        component._setActive(true, ActiveChangeFlag.All);
+        return component;
+    };
+    /**
+   * Get component which match the type.
+   * @param type - The type of the component
+   * @returns	The first component which match type
+   */ _proto.getComponent = function getComponent(type) {
+        var components = this._components;
+        for(var i = 0, n = components.length; i < n; i++){
+            var component = components[i];
+            if (_instanceof(component, type)) {
+                return component;
+            }
+        }
+        return null;
+    };
+    /**
+   * Get components which match the type.
+   * @param type - The type of the component
+   * @param results - The components which match type
+   * @returns	The components which match type
+   */ _proto.getComponents = function getComponents(type, results) {
+        results.length = 0;
+        var components = this._components;
+        for(var i = 0, n = components.length; i < n; i++){
+            var component = components[i];
+            if (_instanceof(component, type)) {
+                results.push(component);
+            }
+        }
+        return results;
+    };
+    /**
+   * Get the components which match the type of the entity and it's children.
+   * @param type - The component type
+   * @param results - The components collection
+   * @returns	The components collection which match the type
+   */ _proto.getComponentsIncludeChildren = function getComponentsIncludeChildren(type, results) {
+        results.length = 0;
+        this._getComponentsInChildren(type, results);
+        return results;
+    };
+    _proto.addChild = function addChild(indexOrChild, child) {
+        var index;
+        if (typeof indexOrChild === "number") {
+            index = indexOrChild;
+        } else {
+            index = undefined;
+            child = indexOrChild;
+        }
+        child._setParent(this, index);
+    };
+    /**
+   * Remove child entity.
+   * @param child - The child entity which want to be removed
+   */ _proto.removeChild = function removeChild(child) {
+        if (child._parent !== this) return;
+        child._setParent(null);
+    };
+    /**
+   * @deprecated Please use `children` property instead.
+   * Find child entity by index.
+   * @param index - The index of the child entity
+   * @returns	The component which be found
+   */ _proto.getChild = function getChild(index) {
+        return this._children[index];
+    };
+    /**
+   * Find entity by name.
+   * @param name - The name of the entity which want to be found
+   * @returns The component which be found
+   */ _proto.findByName = function findByName(name) {
+        if (name === this.name) {
+            return this;
+        }
+        var children = this._children;
+        for(var i = 0, n = children.length; i < n; i++){
+            var target = children[i].findByName(name);
+            if (target) {
+                return target;
+            }
+        }
+        return null;
+    };
+    /**
+   * Find the entity by path.
+   * @param path - The path of the entity eg: /entity
+   * @returns The component which be found
+   */ _proto.findByPath = function findByPath(path) {
+        var splits = path.split("/").filter(Boolean);
+        if (!splits.length) {
+            return this;
+        }
+        return Entity._findChildByName(this, 0, splits, 0);
+    };
+    /**
+   * Create child entity.
+   * @param name - The child entity's name
+   * @returns The child entity
+   */ _proto.createChild = function createChild(name) {
+        var transform = this._transform;
+        var child = transform ? new Entity(this.engine, name, transform.constructor) : new Entity(this.engine, name);
+        child.layer = this.layer;
+        child.parent = this;
+        return child;
+    };
+    /**
+   * Clear children entities.
+   */ _proto.clearChildren = function clearChildren() {
+        var children = this._children;
+        for(var i = children.length - 1; i >= 0; i--){
+            var child = children[i];
+            child._parent = null;
+            var activeChangeFlag = ActiveChangeFlag.None;
+            child._isActiveInHierarchy && (activeChangeFlag |= ActiveChangeFlag.Hierarchy);
+            child._isActiveInScene && (activeChangeFlag |= ActiveChangeFlag.Scene);
+            activeChangeFlag && child._processInActive(activeChangeFlag);
+            Entity._traverseSetOwnerScene(child, null); // Must after child._processInActive().
+        }
+        children.length = 0;
+    };
+    /**
+   * Clone this entity include children and components.
+   * @returns Cloned entity
+   */ _proto.clone = function clone() {
+        var cloneEntity = this._createCloneEntity();
+        this._parseCloneEntity(this, cloneEntity, this, cloneEntity, new Map());
+        return cloneEntity;
+    };
+    /**
+   * Listen for changes in the world pose of this `Entity`.
+   * @returns Change flag
+   */ _proto.registerWorldChangeFlag = function registerWorldChangeFlag() {
+        return this._updateFlagManager.createFlag(BoolUpdateFlag);
+    };
+    /**
+   * @internal
+   */ _proto._markAsTemplate = function _markAsTemplate(templateResource) {
+        this._isTemplate = true;
+        this._templateResource = templateResource;
+    };
+    _proto._createCloneEntity = function _createCloneEntity() {
+        var componentConstructors = Entity._tempComponentConstructors;
+        var components = this._components;
+        for(var i = 0, n = components.length; i < n; i++){
+            componentConstructors[i] = components[i].constructor;
+        }
+        var cloneEntity = _construct(Entity, [].concat([
+            this.engine,
+            this.name
+        ], componentConstructors));
+        componentConstructors.length = 0;
+        var templateResource = this._templateResource;
+        if (templateResource) {
+            cloneEntity._templateResource = templateResource;
+            templateResource._addReferCount(1);
+        }
+        cloneEntity.layer = this.layer;
+        cloneEntity._isActive = this._isActive;
+        var srcChildren = this._children;
+        for(var i1 = 0, n1 = srcChildren.length; i1 < n1; i1++){
+            cloneEntity.addChild(srcChildren[i1]._createCloneEntity());
+        }
+        return cloneEntity;
+    };
+    _proto._parseCloneEntity = function _parseCloneEntity(src, target, srcRoot, targetRoot, deepInstanceMap) {
+        var srcChildren = src._children;
+        var targetChildren = target._children;
+        for(var i = 0, n = srcChildren.length; i < n; i++){
+            this._parseCloneEntity(srcChildren[i], targetChildren[i], srcRoot, targetRoot, deepInstanceMap);
+        }
+        var components = src._components;
+        for(var i1 = 0, n1 = components.length; i1 < n1; i1++){
             ComponentCloner.cloneComponent(components[i1], target._components[i1], srcRoot, targetRoot, deepInstanceMap);
         }
     };
@@ -22821,843 +23532,152 @@ var ComponentCloner = /*#__PURE__*/ function() {
     };
     /**
    * @internal
-   */ Entity._traverseSetOwnerScene = function _traverseSetOwnerScene(entity, scene) {
-        entity._scene = scene;
-        var children = entity._children;
-        for(var i = children.length - 1; i >= 0; i--){
-            this._traverseSetOwnerScene(children[i], scene);
-        }
-    };
-    /**
-   * @internal
-   */ Entity._getEntityHierarchyPath = function _getEntityHierarchyPath(rootEntity, searchEntity, inversePath) {
-        inversePath.length = 0;
-        while(searchEntity !== rootEntity){
-            var parent = searchEntity.parent;
-            if (!parent) {
-                return false;
-            }
-            inversePath.push(searchEntity.siblingIndex);
-            searchEntity = parent;
-        }
-        return true;
-    };
-    /**
-   * @internal
-   */ Entity._getEntityByHierarchyPath = function _getEntityByHierarchyPath(rootEntity, inversePath) {
-        var entity = rootEntity;
-        for(var i = inversePath.length - 1; i >= 0; i--){
-            entity = entity.children[inversePath[i]];
-        }
-        return entity;
-    };
-    /**
-   * @internal
-   */ Entity._removeFromChildren = function _removeFromChildren(children, entity) {
-        var count = children.length - 1;
-        for(var i = entity._siblingIndex; i < count; i++){
-            var child = children[i + 1];
-            children[i] = child;
-            child._siblingIndex = i;
-        }
-        children.length = count;
-        entity._siblingIndex = -1;
-    };
-    /**
-   * @internal
-   */ Entity._addToChildren = function _addToChildren(children, entity, index) {
-        var childCount = children.length;
-        children.length = childCount + 1;
-        if (index === undefined) {
-            children[childCount] = entity;
-            entity._siblingIndex = childCount;
-        } else {
-            if (index < 0 || index > childCount) {
-                throw "The index " + index + " is out of child list bounds " + childCount;
-            }
-            for(var i = childCount; i > index; i--){
-                var swapChild = children[i - 1];
-                swapChild._siblingIndex = i;
-                children[i] = swapChild;
-            }
-            entity._siblingIndex = index;
-            children[index] = entity;
-        }
-    };
-    _create_class(Entity, [
-        {
-            key: "transform",
-            get: /**
-   * The transform of this entity.
-   */ function get() {
-                return this._transform;
-            }
-        },
-        {
-            key: "isActive",
-            get: /**
-   * Whether to activate locally.
-   */ function get() {
-                return this._isActive;
-            },
-            set: function set(value) {
-                if (value !== this._isActive) {
-                    this._isActive = value;
-                    if (value) {
-                        var parent = this._parent;
-                        var activeChangeFlag = ActiveChangeFlag.None;
-                        if (this._isRoot && this._scene._isActiveInEngine) {
-                            activeChangeFlag |= ActiveChangeFlag.All;
-                        } else {
-                            (parent == null ? void 0 : parent._isActiveInHierarchy) && (activeChangeFlag |= ActiveChangeFlag.Hierarchy);
-                            (parent == null ? void 0 : parent._isActiveInScene) && (activeChangeFlag |= ActiveChangeFlag.Scene);
-                        }
-                        activeChangeFlag && this._processActive(activeChangeFlag);
-                    } else {
-                        var activeChangeFlag1 = ActiveChangeFlag.None;
-                        this._isActiveInHierarchy && (activeChangeFlag1 |= ActiveChangeFlag.Hierarchy);
-                        this._isActiveInScene && (activeChangeFlag1 |= ActiveChangeFlag.Scene);
-                        activeChangeFlag1 && this._processInActive(activeChangeFlag1);
-                    }
-                }
-            }
-        },
-        {
-            key: "isActiveInHierarchy",
-            get: /**
-   * Whether it is active in the hierarchy.
-   */ function get() {
-                return this._isActiveInHierarchy;
-            }
-        },
-        {
-            key: "parent",
-            get: /**
-   * The parent entity.
-   */ function get() {
-                return this._parent;
-            },
-            set: function set(value) {
-                this._setParent(value);
-            }
-        },
-        {
-            key: "children",
-            get: /**
-   * The children entities
-   */ function get() {
-                return this._children;
-            }
-        },
-        {
-            key: "childCount",
-            get: /**
-   * @deprecated Please use `children.length` property instead.
-   * Number of the children entities
-   */ function get() {
-                return this._children.length;
-            }
-        },
-        {
-            key: "scene",
-            get: /**
-   * The scene the entity belongs to.
-   */ function get() {
-                return this._scene;
-            }
-        },
-        {
-            key: "siblingIndex",
-            get: /**
-   * The sibling index.
-   */ function get() {
-                return this._siblingIndex;
-            },
-            set: function set(value) {
-                if (this._siblingIndex === -1) {
-                    throw "The entity " + this.name + " is not in the hierarchy";
-                }
-                if (this._isRoot) {
-                    this._setSiblingIndex(this._scene._rootEntities, value);
-                } else {
-                    var parent = this._parent;
-                    this._setSiblingIndex(parent._children, value);
-                    parent._dispatchModify(EntityModifyFlags.Child, parent);
-                }
-            }
-        }
-    ]);
-    return Entity;
-}(EngineObject);
-/** @internal */ Entity._tempComponentConstructors = [];
-
-/**
- * Skin used for skinned mesh renderer.
- */ var Skin = /*#__PURE__*/ function(EngineObject) {
-    _inherits(Skin, EngineObject);
-    function Skin(name) {
-        var _this;
-        _this = EngineObject.call(this, null) || this, _this.name = name, _this.inverseBindMatrices = new Array(), _this._updatedManager = new UpdateFlagManager(), _this._bones = new Array(), _this._updateMark = -1, _this.joints = [];
-        return _this;
-    }
-    var _proto = Skin.prototype;
-    /**
-   * @internal
-   */ _proto._updateSkinMatrices = function _updateSkinMatrices(renderer) {
-        if (this._updateMark === renderer.engine.time.frameCount) {
-            return;
-        }
-        var _this = this, bones = _this.bones, bindMatrices = _this.inverseBindMatrices, skinMatrices = _this._skinMatrices;
-        var _this_rootBone;
-        var worldToLocal = ((_this_rootBone = this.rootBone) != null ? _this_rootBone : renderer.entity).getInvModelMatrix();
-        for(var i = bones.length - 1; i >= 0; i--){
-            var bone = bones[i];
-            var offset = i * 16;
-            if (bone) {
-                Utils._floatMatrixMultiply(bone.transform.worldMatrix, bindMatrices[i].elements, 0, skinMatrices, offset);
-            } else {
-                skinMatrices.set(bindMatrices[i].elements, offset);
-            }
-            Utils._floatMatrixMultiply(worldToLocal, skinMatrices, offset, skinMatrices, offset);
-        }
-        this._updateMark = renderer.engine.time.frameCount;
-    };
-    /**
-   * @internal
-   */ _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
-        var paths = new Array();
-        // Clone rootBone
-        var rootBone = this.rootBone;
-        if (rootBone) {
-            var success = Entity._getEntityHierarchyPath(srcRoot, rootBone, paths);
-            target.rootBone = success ? Entity._getEntityByHierarchyPath(targetRoot, paths) : rootBone;
-        }
-        // Clone bones
-        var bones = this.bones;
-        if (bones.length > 0) {
-            var boneCount = bones.length;
-            var destBones = new Array(boneCount);
-            for(var i = 0; i < boneCount; i++){
-                var bone = bones[i];
-                var success1 = Entity._getEntityHierarchyPath(srcRoot, bone, paths);
-                destBones[i] = success1 ? Entity._getEntityByHierarchyPath(targetRoot, paths) : bone;
-            }
-            target.bones = destBones;
-        }
-    };
-    _create_class(Skin, [
-        {
-            key: "rootBone",
-            get: /**
-   * Root bone.
-   */ function get() {
-                return this._rootBone;
-            },
-            set: function set(value) {
-                if (this._rootBone !== value) {
-                    this._updatedManager.dispatch(1, value);
-                    this._rootBone = value;
-                }
-            }
-        },
-        {
-            key: "bones",
-            get: /**
-   * Bones of the skin.
-   */ function get() {
-                return this._bones;
-            },
-            set: function set(value) {
-                var bones = this._bones;
-                var _value_length;
-                var boneCount = (_value_length = value == null ? void 0 : value.length) != null ? _value_length : 0;
-                var lastBoneCount = bones.length;
-                bones.length = boneCount;
-                for(var i = 0; i < boneCount; i++){
-                    bones[i] = value[i];
-                }
-                if (lastBoneCount !== boneCount) {
-                    this._skinMatrices = new Float32Array(boneCount * 16);
-                    this._updatedManager.dispatch(0, boneCount);
-                }
-            }
-        },
-        {
-            key: "skeleton",
-            get: /** @deprecated Please use `rootBone` instead. */ function get() {
-                var _this_rootBone;
-                return (_this_rootBone = this.rootBone) == null ? void 0 : _this_rootBone.name;
-            },
-            set: function set(value) {
-                var rootBone = this._rootBone;
-                if (rootBone) {
-                    rootBone.name = value;
-                }
-            }
-        }
-    ]);
-    return Skin;
-}(EngineObject);
-__decorate([
-    deepClone
-], Skin.prototype, "inverseBindMatrices", void 0);
-__decorate([
-    ignoreClone
-], Skin.prototype, "_skinMatrices", void 0);
-__decorate([
-    ignoreClone
-], Skin.prototype, "_updatedManager", void 0);
-__decorate([
-    ignoreClone
-], Skin.prototype, "_rootBone", void 0);
-__decorate([
-    ignoreClone
-], Skin.prototype, "_bones", void 0);
-__decorate([
-    ignoreClone
-], Skin.prototype, "_updateMark", void 0);
-var SkinUpdateFlag = /*#__PURE__*/ function(SkinUpdateFlag) {
-    SkinUpdateFlag[SkinUpdateFlag["BoneCountChanged"] = 0] = "BoneCountChanged";
-    SkinUpdateFlag[SkinUpdateFlag["RootBoneChanged"] = 1] = "RootBoneChanged";
-    return SkinUpdateFlag;
-}({});
-
-/**
- * SkinnedMeshRenderer.
- */ var SkinnedMeshRenderer = /*#__PURE__*/ function(MeshRenderer) {
-    _inherits(SkinnedMeshRenderer, MeshRenderer);
-    function SkinnedMeshRenderer(entity) {
-        var _this;
-        _this = MeshRenderer.call(this, entity) || this, _this._localBounds = new engineMath.BoundingBox(), _this._jointDataCreateCache = new engineMath.Vector2(-1, -1);
-        _this._skin = null;
-        var rhi = _this.entity.engine._hardwareRenderer;
-        var maxVertexUniformVectors = rhi.renderStates.getParameter(rhi.gl.MAX_VERTEX_UNIFORM_VECTORS);
-        // Limit size to 256 to avoid some problem:
-        // For renderer is "Apple GPU", when uniform is large than 256 the skeleton matrix array access in shader very slow in Safari or WKWebview. This may be a apple bug, Chrome and Firefox is OK!
-        // For renderer is "ANGLE (AMD, AMD Radeon(TM) Graphics Direct3011 vs_5_0 ps_5_0, D3011)", compile shader si very slow because of max uniform is 4096.
-        maxVertexUniformVectors = Math.min(maxVertexUniformVectors, rhi._options._maxAllowSkinUniformVectorCount);
-        _this._maxVertexUniformVectors = maxVertexUniformVectors;
-        _this._onLocalBoundsChanged = _this._onLocalBoundsChanged.bind(_this);
-        _this._onSkinUpdated = _this._onSkinUpdated.bind(_this);
-        var localBounds = _this._localBounds;
-        // @ts-ignore
-        localBounds.min._onValueChanged = _this._onLocalBoundsChanged;
-        // @ts-ignore
-        localBounds.max._onValueChanged = _this._onLocalBoundsChanged;
-        return _this;
-    }
-    var _proto = SkinnedMeshRenderer.prototype;
-    /**
-   * @internal
-   */ _proto._onDestroy = function _onDestroy() {
-        var _this__jointTexture;
-        MeshRenderer.prototype._onDestroy.call(this);
-        this._jointDataCreateCache = null;
-        this._skin = null;
-        this._blendShapeWeights = null;
-        this._localBounds = null;
-        (_this__jointTexture = this._jointTexture) == null ? void 0 : _this__jointTexture.destroy();
-        this._jointTexture = null;
-    };
-    /**
-   * @internal
-   */ _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
-        MeshRenderer.prototype._cloneTo.call(this, target, srcRoot, targetRoot);
-        if (this.skin) {
-            target._applySkin(null, target.skin);
-        }
-        this._blendShapeWeights && (target._blendShapeWeights = this._blendShapeWeights.slice());
-    };
-    _proto._update = function _update(context) {
-        var skin = this.skin;
-        if ((skin == null ? void 0 : skin.bones.length) > 0) {
-            skin._updateSkinMatrices(this);
-        }
-        var shaderData = this.shaderData;
-        var mesh = this.mesh;
-        var blendShapeManager = mesh._blendShapeManager;
-        blendShapeManager._updateShaderData(shaderData, this);
-        var bones = skin == null ? void 0 : skin.bones;
-        if (bones) {
-            var bsUniformOccupiesCount = blendShapeManager._uniformOccupiesCount;
-            var boneCount = bones.length;
-            var boneDataCreateCache = this._jointDataCreateCache;
-            var boneCountChange = boneCount !== boneDataCreateCache.x;
-            if (boneCountChange || bsUniformOccupiesCount !== boneDataCreateCache.y) {
-                // directly use max joint count to avoid shader recompile
-                var remainUniformJointCount = Math.ceil((this._maxVertexUniformVectors - (SkinnedMeshRenderer._baseVertexUniformVectorCount + bsUniformOccupiesCount)) / 4);
-                if (boneCount > remainUniformJointCount) {
-                    var engine = this.engine;
-                    if (engine._hardwareRenderer.canIUseMoreJoints) {
-                        if (boneCountChange) {
-                            var _this__jointTexture;
-                            (_this__jointTexture = this._jointTexture) == null ? void 0 : _this__jointTexture.destroy();
-                            this._jointTexture = new Texture2D(engine, 4, boneCount, TextureFormat.R32G32B32A32, false, false);
-                            this._jointTexture.filterMode = TextureFilterMode.Point;
-                            this._jointTexture.isGCIgnored = true;
-                        }
-                        shaderData.disableMacro("RENDERER_JOINTS_NUM");
-                        shaderData.enableMacro("RENDERER_USE_JOINT_TEXTURE");
-                        shaderData.setTexture(SkinnedMeshRenderer._jointSamplerProperty, this._jointTexture);
-                    } else {
-                        Logger.error("component's joints count(" + boneCount + ") greater than device's MAX_VERTEX_UNIFORM_VECTORS number " + this._maxVertexUniformVectors + ", and don't support jointTexture in this device. suggest joint count less than " + remainUniformJointCount + ".", this);
-                    }
-                } else {
-                    var _this__jointTexture1;
-                    (_this__jointTexture1 = this._jointTexture) == null ? void 0 : _this__jointTexture1.destroy();
-                    shaderData.disableMacro("RENDERER_USE_JOINT_TEXTURE");
-                    shaderData.enableMacro("RENDERER_JOINTS_NUM", remainUniformJointCount.toString());
-                    shaderData.setFloatArray(SkinnedMeshRenderer._jointMatrixProperty, skin._skinMatrices);
-                }
-                boneDataCreateCache.set(boneCount, bsUniformOccupiesCount);
-            }
-            if (this._jointTexture) {
-                this._jointTexture.setPixelBuffer(skin._skinMatrices);
-            }
-        }
-        MeshRenderer.prototype._update.call(this, context);
-    };
-    /**
-   * @internal
-   */ _proto._updateBounds = function _updateBounds(worldBounds) {
-        var _this_skin;
-        var rootBone = (_this_skin = this.skin) == null ? void 0 : _this_skin.rootBone;
-        if (rootBone) {
-            engineMath.BoundingBox.transform(this._localBounds, this._transformEntity.transform.worldMatrix, worldBounds);
-        } else {
-            MeshRenderer.prototype._updateBounds.call(this, worldBounds);
-        }
-    };
-    _proto._checkBlendShapeWeightLength = function _checkBlendShapeWeightLength() {
-        var mesh = this._mesh;
-        var newBlendShapeCount = mesh ? mesh.blendShapeCount : 0;
-        var lastBlendShapeWeights = this._blendShapeWeights;
-        if (lastBlendShapeWeights) {
-            var lastBlendShapeWeightsCount = lastBlendShapeWeights.length;
-            if (lastBlendShapeWeightsCount !== newBlendShapeCount) {
-                var newBlendShapeWeights = new Float32Array(newBlendShapeCount);
-                if (newBlendShapeCount > lastBlendShapeWeightsCount) {
-                    newBlendShapeWeights.set(lastBlendShapeWeights);
-                } else {
-                    for(var i = 0; i < newBlendShapeCount; i++){
-                        newBlendShapeWeights[i] = lastBlendShapeWeights[i];
-                    }
-                }
-                this._blendShapeWeights = newBlendShapeWeights;
-            }
-        } else {
-            this._blendShapeWeights = new Float32Array(newBlendShapeCount);
-        }
-    };
-    _proto._onLocalBoundsChanged = function _onLocalBoundsChanged() {
-        this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
-    };
-    _proto._onSkinUpdated = function _onSkinUpdated(type, value) {
-        switch(type){
-            case SkinUpdateFlag.BoneCountChanged:
-                var shaderData = this.shaderData;
-                if (value > 0) {
-                    shaderData.enableMacro("RENDERER_HAS_SKIN");
-                    shaderData.setInt(SkinnedMeshRenderer._jointCountProperty, value);
-                } else {
-                    shaderData.disableMacro("RENDERER_HAS_SKIN");
-                }
-                break;
-            case SkinUpdateFlag.RootBoneChanged:
-                this._setTransformEntity(value);
-                this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
-                break;
+   */ Entity._traverseSetOwnerScene = function _traverseSetOwnerScene(entity, scene) {
+        entity._scene = scene;
+        var children = entity._children;
+        for(var i = children.length - 1; i >= 0; i--){
+            this._traverseSetOwnerScene(children[i], scene);
         }
     };
-    _proto._applySkin = function _applySkin(lastSkin, value) {
-        var _lastSkin_bones, _value_bones;
-        var _lastSkin_bones_length;
-        var lastSkinBoneCount = (_lastSkin_bones_length = lastSkin == null ? void 0 : (_lastSkin_bones = lastSkin.bones) == null ? void 0 : _lastSkin_bones.length) != null ? _lastSkin_bones_length : 0;
-        var _lastSkin_rootBone;
-        var lastRootBone = (_lastSkin_rootBone = lastSkin == null ? void 0 : lastSkin.rootBone) != null ? _lastSkin_rootBone : this.entity;
-        lastSkin == null ? void 0 : lastSkin._updatedManager.removeListener(this._onSkinUpdated);
-        var _value_bones_length;
-        var skinBoneCount = (_value_bones_length = value == null ? void 0 : (_value_bones = value.bones) == null ? void 0 : _value_bones.length) != null ? _value_bones_length : 0;
-        var _value_rootBone;
-        var rootBone = (_value_rootBone = value == null ? void 0 : value.rootBone) != null ? _value_rootBone : this.entity;
-        value == null ? void 0 : value._updatedManager.addListener(this._onSkinUpdated);
-        if (lastSkinBoneCount !== skinBoneCount) {
-            this._onSkinUpdated(SkinUpdateFlag.BoneCountChanged, skinBoneCount);
+    /**
+   * @internal
+   */ Entity._removeFromChildren = function _removeFromChildren(children, entity) {
+        var count = children.length - 1;
+        for(var i = entity._siblingIndex; i < count; i++){
+            var child = children[i + 1];
+            children[i] = child;
+            child._siblingIndex = i;
         }
-        if (lastRootBone !== rootBone) {
-            this._onSkinUpdated(SkinUpdateFlag.RootBoneChanged, rootBone);
+        children.length = count;
+        entity._siblingIndex = -1;
+    };
+    /**
+   * @internal
+   */ Entity._addToChildren = function _addToChildren(children, entity, index) {
+        var childCount = children.length;
+        children.length = childCount + 1;
+        if (index === undefined) {
+            children[childCount] = entity;
+            entity._siblingIndex = childCount;
+        } else {
+            if (index < 0 || index > childCount) {
+                throw "The index " + index + " is out of child list bounds " + childCount;
+            }
+            for(var i = childCount; i > index; i--){
+                var swapChild = children[i - 1];
+                swapChild._siblingIndex = i;
+                children[i] = swapChild;
+            }
+            entity._siblingIndex = index;
+            children[index] = entity;
         }
     };
-    _create_class(SkinnedMeshRenderer, [
+    _create_class(Entity, [
         {
-            key: "skin",
+            key: "transform",
             get: /**
-   * Skin of the SkinnedMeshRenderer.
+   * The transform of this entity.
    */ function get() {
-                return this._skin;
-            },
-            set: function set(value) {
-                var lastSkin = this._skin;
-                if (lastSkin !== value) {
-                    this._applySkin(lastSkin, value);
-                    this._skin = value;
-                }
+                return this._transform;
             }
         },
         {
-            key: "blendShapeWeights",
+            key: "isActive",
             get: /**
-   * The weights of the BlendShapes.
-   * @remarks Array index is BlendShape index.
+   * Whether to activate locally.
    */ function get() {
-                this._checkBlendShapeWeightLength();
-                return this._blendShapeWeights;
+                return this._isActive;
             },
             set: function set(value) {
-                this._checkBlendShapeWeightLength();
-                var blendShapeWeights = this._blendShapeWeights;
-                if (value.length <= blendShapeWeights.length) {
-                    blendShapeWeights.set(value);
-                } else {
-                    for(var i = 0, n = blendShapeWeights.length; i < n; i++){
-                        blendShapeWeights[i] = value[i];
+                if (value !== this._isActive) {
+                    this._isActive = value;
+                    if (value) {
+                        var parent = this._parent;
+                        var activeChangeFlag = ActiveChangeFlag.None;
+                        if (this._isRoot && this._scene._isActiveInEngine) {
+                            activeChangeFlag |= ActiveChangeFlag.All;
+                        } else {
+                            (parent == null ? void 0 : parent._isActiveInHierarchy) && (activeChangeFlag |= ActiveChangeFlag.Hierarchy);
+                            (parent == null ? void 0 : parent._isActiveInScene) && (activeChangeFlag |= ActiveChangeFlag.Scene);
+                        }
+                        activeChangeFlag && this._processActive(activeChangeFlag);
+                    } else {
+                        var activeChangeFlag1 = ActiveChangeFlag.None;
+                        this._isActiveInHierarchy && (activeChangeFlag1 |= ActiveChangeFlag.Hierarchy);
+                        this._isActiveInScene && (activeChangeFlag1 |= ActiveChangeFlag.Scene);
+                        activeChangeFlag1 && this._processInActive(activeChangeFlag1);
                     }
                 }
             }
         },
         {
-            key: "localBounds",
+            key: "isActiveInHierarchy",
             get: /**
-   * Local bounds.
+   * Whether it is active in the hierarchy.
    */ function get() {
-                return this._localBounds;
-            },
-            set: function set(value) {
-                if (this._localBounds !== value) {
-                    this._localBounds.copyFrom(value);
-                }
+                return this._isActiveInHierarchy;
             }
         },
         {
-            key: "rootBone",
+            key: "parent",
             get: /**
-   * @deprecated use {@link SkinnedMeshRenderer.skin.rootBone} instead.
+   * The parent entity.
    */ function get() {
-                return this.skin.rootBone;
+                return this._parent;
             },
             set: function set(value) {
-                this.skin.rootBone = value;
+                this._setParent(value);
             }
         },
         {
-            key: "bones",
+            key: "children",
             get: /**
-   * @deprecated use {@link SkinnedMeshRenderer.skin.bones} instead.
+   * The children entities
    */ function get() {
-                return this.skin.bones;
-            },
-            set: function set(value) {
-                this.skin.bones = value;
-            }
-        }
-    ]);
-    return SkinnedMeshRenderer;
-}(MeshRenderer);
-// @TODO: different shader type should use different count, not always 48
-/** @internal */ SkinnedMeshRenderer._baseVertexUniformVectorCount = 48;
-SkinnedMeshRenderer._jointCountProperty = ShaderProperty.getByName("renderer_JointCount");
-SkinnedMeshRenderer._jointSamplerProperty = ShaderProperty.getByName("renderer_JointSampler");
-SkinnedMeshRenderer._jointMatrixProperty = ShaderProperty.getByName("renderer_JointMatrix");
-__decorate([
-    ignoreClone
-], SkinnedMeshRenderer.prototype, "_condensedBlendShapeWeights", void 0);
-__decorate([
-    deepClone
-], SkinnedMeshRenderer.prototype, "_localBounds", void 0);
-__decorate([
-    ignoreClone
-], SkinnedMeshRenderer.prototype, "_jointDataCreateCache", void 0);
-__decorate([
-    ignoreClone
-], SkinnedMeshRenderer.prototype, "_blendShapeWeights", void 0);
-__decorate([
-    ignoreClone
-], SkinnedMeshRenderer.prototype, "_maxVertexUniformVectors", void 0);
-__decorate([
-    ignoreClone
-], SkinnedMeshRenderer.prototype, "_jointTexture", void 0);
-__decorate([
-    deepClone
-], SkinnedMeshRenderer.prototype, "_skin", void 0);
-__decorate([
-    ignoreClone
-], SkinnedMeshRenderer.prototype, "_onLocalBoundsChanged", null);
-__decorate([
-    ignoreClone
-], SkinnedMeshRenderer.prototype, "_onSkinUpdated", null);
-
-/**
- * @internal
- */ var BasicResources = /*#__PURE__*/ function() {
-    function BasicResources(engine) {
-        this.engine = engine;
-        // prettier-ignore
-        var vertices = new Float32Array([
-            -1,
-            -1,
-            0,
-            1,
-            3,
-            -1,
-            2,
-            1,
-            -1,
-            3,
-            0,
-            -1
-        ]); // left-top
-        // prettier-ignore
-        var flipYVertices = new Float32Array([
-            3,
-            -1,
-            2,
-            0,
-            -1,
-            -1,
-            0,
-            0,
-            -1,
-            3,
-            0,
-            2
-        ]); // left-top
-        var blitMaterial = new Material(engine, Shader.find("blit"));
-        blitMaterial._addReferCount(1);
-        blitMaterial.renderState.depthState.enabled = false;
-        blitMaterial.renderState.depthState.writeEnabled = false;
-        var blitScreenMaterial = new Material(engine, Shader.find("blit-screen"));
-        blitScreenMaterial._addReferCount(1);
-        blitScreenMaterial.renderState.depthState.enabled = false;
-        blitScreenMaterial.renderState.depthState.writeEnabled = false;
-        this.blitMaterial = blitMaterial;
-        this.blitScreenMaterial = blitScreenMaterial;
-        this.blitMesh = this._createBlitMesh(engine, vertices);
-        this.flipYBlitMesh = this._createBlitMesh(engine, flipYVertices);
-        // Create white and magenta textures
-        var whitePixel = new Uint8Array([
-            255,
-            255,
-            255,
-            255
-        ]);
-        this.whiteTexture2D = this._create1x1Texture(engine, 0, TextureFormat.R8G8B8A8, whitePixel, true);
-        this.whiteTextureCube = this._create1x1Texture(engine, 1, TextureFormat.R8G8B8A8, whitePixel, true);
-        var isWebGL2 = engine._hardwareRenderer.isWebGL2;
-        if (isWebGL2) {
-            this.whiteTexture2DArray = this._create1x1Texture(engine, 2, TextureFormat.R8G8B8A8, whitePixel, true);
-            var whitePixel32 = new Uint32Array([
-                255,
-                255,
-                255,
-                255
-            ]);
-            this.uintWhiteTexture2D = this._create1x1Texture(engine, 0, TextureFormat.R32G32B32A32_UInt, whitePixel32, false);
-        }
-        this.spriteDefaultMaterial = this._create2DMaterial(engine, Shader.find("Sprite"));
-        this.textDefaultMaterial = this._create2DMaterial(engine, Shader.find("Text"));
-        this.spriteMaskDefaultMaterial = this._createSpriteMaskMaterial(engine);
-        this.meshMagentaMaterial = this._createMagentaMaterial(engine, "unlit");
-        this.particleMagentaMaterial = this._createMagentaMaterial(engine, "particle-shader");
-    }
-    var _proto = BasicResources.prototype;
-    /**
-   * @internal
-   */ _proto._getBlinnPhongMaterial = function _getBlinnPhongMaterial() {
-        return this._blinnPhongMaterial || (this._blinnPhongMaterial = new BlinnPhongMaterial(this.engine));
-    };
-    /**
-   * @internal
-   */ _proto._initialize = function _initialize() {
-        var _this = this;
-        return new Promise(function(resolve, reject) {
-            PrefilteredDFG.create(_this.engine).then(function(texture) {
-                _this._prefilteredDFGTexture = texture;
-                resolve(_this);
-            }).catch(reject);
-        });
-    };
-    _proto._createBlitMesh = function _createBlitMesh(engine, vertices) {
-        var mesh = new ModelMesh(engine);
-        mesh._addReferCount(1);
-        mesh.setVertexElements([
-            new VertexElement("POSITION_UV", 0, VertexElementFormat.Vector4, 0)
-        ]);
-        var buffer = new Buffer(engine, BufferBindFlag.VertexBuffer, vertices, BufferUsage.Static, true);
-        mesh.setVertexBufferBinding(buffer, 16);
-        mesh.addSubMesh(0, 3, MeshTopology.Triangles);
-        engine.resourceManager.addContentRestorer(new (/*#__PURE__*/ function(ContentRestorer) {
-            _inherits(_class, ContentRestorer);
-            function _class() {
-                return ContentRestorer.call(this, mesh) || this;
-            }
-            var _proto = _class.prototype;
-            _proto.restoreContent = function restoreContent() {
-                buffer.setData(buffer.data);
-            };
-            return _class;
-        }(ContentRestorer))());
-        return mesh;
-    };
-    _proto._create1x1Texture = function _create1x1Texture(engine, type, format, pixel, isSRGBColorSpace) {
-        var texture;
-        switch(type){
-            case 0:
-                var texture2D = new Texture2D(engine, 1, 1, format, false, isSRGBColorSpace);
-                texture2D.setPixelBuffer(pixel);
-                texture = texture2D;
-                break;
-            case 2:
-                var texture2DArray = new Texture2DArray(engine, 1, 1, 1, format, false, isSRGBColorSpace);
-                texture2DArray.setPixelBuffer(0, pixel);
-                texture = texture2DArray;
-                break;
-            case 1:
-                var textureCube = new TextureCube(engine, 1, format, false, isSRGBColorSpace);
-                for(var i = 0; i < 6; i++){
-                    textureCube.setPixelBuffer(TextureCubeFace.PositiveX + i, pixel);
-                }
-                texture = textureCube;
-                break;
-            default:
-                throw "Invalid texture type";
-        }
-        texture.isGCIgnored = true;
-        engine.resourceManager.addContentRestorer(new (/*#__PURE__*/ function(ContentRestorer) {
-            _inherits(_class, ContentRestorer);
-            function _class() {
-                return ContentRestorer.call(this, texture) || this;
-            }
-            var _proto = _class.prototype;
-            _proto.restoreContent = function restoreContent() {
-                switch(type){
-                    case 0:
-                        this.resource.setPixelBuffer(pixel);
-                        break;
-                    case 2:
-                        this.resource.setPixelBuffer(0, pixel);
-                        break;
-                    case 1:
-                        for(var i = 0; i < 6; i++){
-                            this.resource.setPixelBuffer(TextureCubeFace.PositiveX + i, pixel);
-                        }
-                        break;
-                }
-            };
-            return _class;
-        }(ContentRestorer))());
-        return texture;
-    };
-    _proto._create2DMaterial = function _create2DMaterial(engine, shader) {
-        var material = new Material(engine, shader);
-        var renderState = material.renderState;
-        var target = renderState.blendState.targetBlendState;
-        target.enabled = true;
-        target.sourceColorBlendFactor = BlendFactor.SourceAlpha;
-        target.destinationColorBlendFactor = BlendFactor.OneMinusSourceAlpha;
-        target.sourceAlphaBlendFactor = BlendFactor.One;
-        target.destinationAlphaBlendFactor = BlendFactor.OneMinusSourceAlpha;
-        target.colorBlendOperation = target.alphaBlendOperation = BlendOperation.Add;
-        renderState.depthState.writeEnabled = false;
-        renderState.rasterState.cullMode = CullMode.Off;
-        renderState.renderQueueType = RenderQueueType.Transparent;
-        material.isGCIgnored = true;
-        return material;
-    };
-    _proto._createMagentaMaterial = function _createMagentaMaterial(engine, shaderName) {
-        var material = new Material(engine, Shader.find(shaderName));
-        material.isGCIgnored = true;
-        material.shaderData.setColor("material_BaseColor", new engineMath.Color(1.0, 0.0, 1.01, 1.0));
-        return material;
-    };
-    _proto._createSpriteMaskMaterial = function _createSpriteMaskMaterial(engine) {
-        var material = new Material(engine, Shader.find("SpriteMask"));
-        material.isGCIgnored = true;
-        return material;
-    };
-    BasicResources.getMaskInteractionRenderStates = function getMaskInteractionRenderStates(maskInteraction) {
-        var visibleInsideMask = maskInteraction === SpriteMaskInteraction.VisibleInsideMask;
-        var renderStates;
-        var compareFunction;
-        if (visibleInsideMask) {
-            renderStates = BasicResources._maskReadInsideRenderStates;
-            if (renderStates) {
-                return renderStates;
-            }
-            BasicResources._maskReadInsideRenderStates = renderStates = {};
-            compareFunction = CompareFunction.LessEqual;
-        } else {
-            renderStates = BasicResources._maskReadOutsideRenderStates;
-            if (renderStates) {
-                return renderStates;
+                return this._children;
             }
-            BasicResources._maskReadOutsideRenderStates = renderStates = {};
-            compareFunction = CompareFunction.Greater;
-        }
-        renderStates[RenderStateElementKey.StencilStateEnabled] = true;
-        renderStates[RenderStateElementKey.StencilStateWriteMask] = 0x00;
-        renderStates[RenderStateElementKey.StencilStateReferenceValue] = 1;
-        renderStates[RenderStateElementKey.StencilStateCompareFunctionFront] = compareFunction;
-        renderStates[RenderStateElementKey.StencilStateCompareFunctionBack] = compareFunction;
-        return renderStates;
-    };
-    BasicResources.getMaskTypeRenderStates = function getMaskTypeRenderStates(maskType) {
-        var isIncrement = maskType === RenderQueueMaskType.Increment;
-        var renderStates;
-        var passOperation;
-        if (isIncrement) {
-            renderStates = BasicResources._maskWriteIncrementRenderStates;
-            if (renderStates) {
-                return renderStates;
+        },
+        {
+            key: "childCount",
+            get: /**
+   * @deprecated Please use `children.length` property instead.
+   * Number of the children entities
+   */ function get() {
+                return this._children.length;
             }
-            BasicResources._maskWriteIncrementRenderStates = renderStates = {};
-            passOperation = StencilOperation.IncrementSaturate;
-        } else {
-            renderStates = BasicResources._maskWriteDecrementRenderStates;
-            if (renderStates) {
-                return renderStates;
+        },
+        {
+            key: "scene",
+            get: /**
+   * The scene the entity belongs to.
+   */ function get() {
+                return this._scene;
             }
-            BasicResources._maskWriteDecrementRenderStates = renderStates = {};
-            passOperation = StencilOperation.DecrementSaturate;
-        }
-        renderStates[RenderStateElementKey.StencilStateEnabled] = true;
-        renderStates[RenderStateElementKey.StencilStatePassOperationFront] = passOperation;
-        renderStates[RenderStateElementKey.StencilStatePassOperationBack] = passOperation;
-        renderStates[RenderStateElementKey.StencilStateCompareFunctionFront] = CompareFunction.Always;
-        renderStates[RenderStateElementKey.StencilStateCompareFunctionBack] = CompareFunction.Always;
-        var failStencilOperation = StencilOperation.Keep;
-        renderStates[RenderStateElementKey.StencilStateFailOperationFront] = failStencilOperation;
-        renderStates[RenderStateElementKey.StencilStateFailOperationBack] = failStencilOperation;
-        renderStates[RenderStateElementKey.StencilStateZFailOperationFront] = failStencilOperation;
-        renderStates[RenderStateElementKey.StencilStateZFailOperationBack] = failStencilOperation;
-        renderStates[RenderStateElementKey.BlendStateColorWriteMask0] = ColorWriteMask.None;
-        renderStates[RenderStateElementKey.DepthStateEnabled] = false;
-        renderStates[RenderStateElementKey.RasterStateCullMode] = CullMode.Off;
-        return renderStates;
-    };
-    _create_class(BasicResources, [
+        },
         {
-            key: "prefilteredDFGTexture",
-            get: function get() {
-                return this._prefilteredDFGTexture;
+            key: "siblingIndex",
+            get: /**
+   * The sibling index.
+   */ function get() {
+                return this._siblingIndex;
+            },
+            set: function set(value) {
+                if (this._siblingIndex === -1) {
+                    throw "The entity " + this.name + " is not in the hierarchy";
+                }
+                if (this._isRoot) {
+                    this._setSiblingIndex(this._scene._rootEntities, value);
+                } else {
+                    var parent = this._parent;
+                    this._setSiblingIndex(parent._children, value);
+                    parent._dispatchModify(EntityModifyFlags.Child, parent);
+                }
             }
         }
     ]);
-    return BasicResources;
-}();
-BasicResources._maskReadInsideRenderStates = null;
-BasicResources._maskReadOutsideRenderStates = null;
-BasicResources._maskWriteIncrementRenderStates = null;
-BasicResources._maskWriteDecrementRenderStates = null;
+    return Entity;
+}(EngineObject);
+/** @internal */ Entity._tempComponentConstructors = [];
 
 var ObjectPool = /*#__PURE__*/ function() {
     function ObjectPool(type) {
@@ -24153,6 +24173,7 @@ PrimitiveChunk.subMeshPool = new ReturnableObjectPool(SubMesh, 10);
     /** AudioClip, include ogg, wav and mp3. */ AssetType["Audio"] = "Audio";
     /** Project asset. */ AssetType["Project"] = "project";
     /** PhysicsMaterial. */ AssetType["PhysicsMaterial"] = "PhysicsMaterial";
+    /** RenderTarget. */ AssetType["RenderTarget"] = "RenderTarget";
     return AssetType;
 }({});
 
@@ -29021,6 +29042,184 @@ var PointerMethods = /*#__PURE__*/ function(PointerMethods) {
     return PointerMethods;
 }({});
 
+/**
+ * Signal is a typed event mechanism for Galacean Engine.
+ * @typeParam T - Tuple type of the signal arguments
+ */ var Signal = /*#__PURE__*/ function() {
+    function Signal() {
+        this._listeners = new SafeLoopArray();
+    }
+    var _proto = Signal.prototype;
+    _proto.on = function on(fnOrTarget, targetOrMethodName) {
+        for(var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++){
+            args[_key - 2] = arguments[_key];
+        }
+        this._addListener.apply(this, [].concat([
+            fnOrTarget,
+            targetOrMethodName,
+            false
+        ], args));
+    };
+    _proto.once = function once(fnOrTarget, targetOrMethodName) {
+        for(var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++){
+            args[_key - 2] = arguments[_key];
+        }
+        this._addListener.apply(this, [].concat([
+            fnOrTarget,
+            targetOrMethodName,
+            true
+        ], args));
+    };
+    _proto.off = function off(fnOrTarget, targetOrMethodName) {
+        if (typeof fnOrTarget === "function") {
+            var target = targetOrMethodName != null ? targetOrMethodName : null;
+            this._listeners.findAndRemove(function(listener) {
+                if (listener.fn === fnOrTarget && listener.target === target) {
+                    listener.destroyed = true;
+                    return true;
+                }
+                return false;
+            });
+        } else {
+            var target1 = fnOrTarget;
+            var methodName = targetOrMethodName;
+            this._listeners.findAndRemove(function(listener) {
+                if (listener.target === target1 && listener.methodName === methodName) {
+                    listener.destroyed = true;
+                    return true;
+                }
+                return false;
+            });
+        }
+    };
+    /**
+   * Remove all listeners, or all listeners for a specific target.
+   * @param target - If provided, only remove listeners bound to this target
+   */ _proto.removeAll = function removeAll(target) {
+        if (target !== undefined) {
+            this._listeners.findAndRemove(function(listener) {
+                if (listener.target === target) {
+                    return listener.destroyed = true;
+                }
+                return false;
+            });
+        } else {
+            this._listeners.findAndRemove(function(listener) {
+                return listener.destroyed = true;
+            });
+        }
+    };
+    /**
+   * Invoke the signal, calling all listeners in order.
+   * @param args - Arguments to pass to each listener
+   */ _proto.invoke = function invoke() {
+        var _this, _loop = function(i, n) {
+            var listener = listeners[i];
+            if (listener.destroyed) return "continue";
+            if (listener.methodName && listener.target.destroyed) {
+                listener.destroyed = true;
+                _this._listeners.findAndRemove(function(l) {
+                    return l === listener;
+                });
+                return "continue";
+            }
+            listener.fn.apply(listener.target, args);
+            if (listener.once) {
+                listener.destroyed = true;
+                _this._listeners.findAndRemove(function(l) {
+                    return l === listener;
+                });
+            }
+        };
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        var listeners = this._listeners.getLoopArray();
+        for(var i = 0, n = listeners.length; i < n; i++)_this = this, _loop(i);
+    };
+    /**
+   * @internal
+   * Clone listeners to target signal, remapping entity/component references.
+   */ _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
+        var listeners = this._listeners.getLoopArray();
+        for(var i = 0, n = listeners.length; i < n; i++){
+            var listener = listeners[i];
+            if (listener.destroyed || !listener.methodName) continue;
+            var clonedTarget = CloneUtils.remapComponent(srcRoot, targetRoot, listener.target);
+            if (clonedTarget) {
+                var clonedArgs = this._cloneArguments(listener.arguments, srcRoot, targetRoot);
+                if (listener.once) {
+                    var _target;
+                    (_target = target).once.apply(_target, [].concat([
+                        clonedTarget,
+                        listener.methodName
+                    ], clonedArgs));
+                } else {
+                    var _target1;
+                    (_target1 = target).on.apply(_target1, [].concat([
+                        clonedTarget,
+                        listener.methodName
+                    ], clonedArgs));
+                }
+            }
+        }
+    };
+    _proto._cloneArguments = function _cloneArguments(args, srcRoot, targetRoot) {
+        if (!args || args.length === 0) return [];
+        var len = args.length;
+        var clonedArgs = new Array(len);
+        for(var i = 0; i < len; i++){
+            var arg = args[i];
+            if (_instanceof(arg, Entity)) {
+                clonedArgs[i] = CloneUtils.remapEntity(srcRoot, targetRoot, arg);
+            } else if (_instanceof(arg, Component)) {
+                clonedArgs[i] = CloneUtils.remapComponent(srcRoot, targetRoot, arg);
+            } else {
+                clonedArgs[i] = arg;
+            }
+        }
+        return clonedArgs;
+    };
+    _proto._addListener = function _addListener(fnOrTarget, targetOrMethodName, once) {
+        for(var _len = arguments.length, args = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++){
+            args[_key - 3] = arguments[_key];
+        }
+        if (typeof fnOrTarget === "function") {
+            this._listeners.push({
+                fn: fnOrTarget,
+                target: targetOrMethodName != null ? targetOrMethodName : null,
+                once: once
+            });
+        } else {
+            var _target, _target1;
+            var target = fnOrTarget;
+            var methodName = targetOrMethodName;
+            var fn = args.length > 0 ? function() {
+                for(var _len = arguments.length, signalArgs = new Array(_len), _key = 0; _key < _len; _key++){
+                    signalArgs[_key] = arguments[_key];
+                }
+                return (_target = target)[methodName].apply(_target, [].concat(args, signalArgs));
+            } : function() {
+                for(var _len = arguments.length, signalArgs = new Array(_len), _key = 0; _key < _len; _key++){
+                    signalArgs[_key] = arguments[_key];
+                }
+                return (_target1 = target)[methodName].apply(_target1, [].concat(signalArgs));
+            };
+            this._listeners.push({
+                fn: fn,
+                target: target,
+                once: once,
+                methodName: methodName,
+                arguments: args
+            });
+        }
+    };
+    return Signal;
+}();
+__decorate([
+    ignoreClone
+], Signal.prototype, "_listeners", void 0);
+
 /**
  * Loader abstract class.
  */ var Loader = /*#__PURE__*/ function() {
@@ -38393,6 +38592,7 @@ exports.CharacterController = CharacterController;
 exports.CircleShape = CircleShape;
 exports.ClearableObjectPool = ClearableObjectPool;
 exports.CloneManager = CloneManager;
+exports.CloneUtils = CloneUtils;
 exports.ColliderShape = ColliderShape;
 exports.ColliderShapeUpAxis = ColliderShapeUpAxis;
 exports.Collision = Collision;
@@ -38546,6 +38746,7 @@ exports.ShaderTagKey = ShaderTagKey;
 exports.ShadowCascadesMode = ShadowCascadesMode;
 exports.ShadowResolution = ShadowResolution;
 exports.ShadowType = ShadowType;
+exports.Signal = Signal;
 exports.SizeOverLifetimeModule = SizeOverLifetimeModule;
 exports.Skin = Skin;
 exports.SkinnedMeshRenderer = SkinnedMeshRenderer;