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

package/dist/browser.js

@@ -988,11 +988,15 @@
             var normal = plane.normal;
             var zeroTolerance = MathUtil.zeroTolerance;
             var dir = Vector3.dot(normal, ray.direction);
+            var position = Vector3.dot(normal, ray.origin);
             // Parallel
             if (Math.abs(dir) < zeroTolerance) {
+                // Check if ray origin is on the plane
+                if (Math.abs(position + plane.distance) < zeroTolerance) {
+                    return 0;
+                }
                 return -1;
             }
-            var position = Vector3.dot(normal, ray.origin);
             var distance = (-plane.distance - position) / dir;
             if (distance < 0) {
                 if (distance < -zeroTolerance) {
@@ -6735,6 +6739,14 @@
                     return this._height;
                 }
             },
+            {
+                key: "colorTextures",
+                get: /**
+       * Render color textures.
+       */ function get() {
+                    return this._colorTextures;
+                }
+            },
             {
                 key: "colorTextureCount",
                 get: /**
@@ -27088,274 +27100,973 @@
     ]);
     PrimitiveMesh._sphereEdgeIdx = 0;
     PrimitiveMesh._spherePoleIdx = 0;
-    function _is_native_reflect_construct$1() {
-        // 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$1 = function _is_native_reflect_construct() {
-            return !!result;
-        })();
-    }
-    function _construct$1(Parent, args, Class) {
-        if (_is_native_reflect_construct$1()) _construct$1 = Reflect.construct;
-        else {
-            _construct$1 = 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$2(instance, Class.prototype);
-                return instance;
-            };
-        }
-        return _construct$1.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$2(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$2(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, _this._invModelMatrix = new 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$1(type, [].concat([
-                this
-            ], args));
-            this._components.push(component);
-            // @todo: temporary solution
-            if (_instanceof1$2(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 (_instanceof1$2(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 (_instanceof1$2(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$2(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$1([
+        deepClone
+    ], Skin.prototype, "inverseBindMatrices", void 0);
+    __decorate$1([
+        ignoreClone
+    ], Skin.prototype, "_skinMatrices", void 0);
+    __decorate$1([
+        ignoreClone
+    ], Skin.prototype, "_updatedManager", void 0);
+    __decorate$1([
+        ignoreClone
+    ], Skin.prototype, "_rootBone", void 0);
+    __decorate$1([
+        ignoreClone
+    ], Skin.prototype, "_bones", void 0);
+    __decorate$1([
+        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$2(SkinnedMeshRenderer, MeshRenderer);
+        function SkinnedMeshRenderer(entity) {
+            var _this;
+            _this = MeshRenderer.call(this, entity) || this, _this._localBounds = new BoundingBox(), _this._jointDataCreateCache = new 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) {
+                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;
-            }
-            var cloneEntity = _construct$1(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());
+        _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;
             }
-            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);
+        _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);
             }
-            var components = src._components;
-            for(var i1 = 0, n1 = components.length; i1 < n1; i1++){
-                ComponentCloner.cloneComponent(components[i1], target._components[i1], srcRoot, targetRoot, deepInstanceMap);
+            if (lastRootBone !== rootBone) {
+                this._onSkinUpdated(SkinUpdateFlag.RootBoneChanged, rootBone);
             }
         };
-        /**
-       * Destroy self.
+        _create_class$2(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$1([
+        ignoreClone
+    ], SkinnedMeshRenderer.prototype, "_condensedBlendShapeWeights", void 0);
+    __decorate$1([
+        deepClone
+    ], SkinnedMeshRenderer.prototype, "_localBounds", void 0);
+    __decorate$1([
+        ignoreClone
+    ], SkinnedMeshRenderer.prototype, "_jointDataCreateCache", void 0);
+    __decorate$1([
+        ignoreClone
+    ], SkinnedMeshRenderer.prototype, "_blendShapeWeights", void 0);
+    __decorate$1([
+        ignoreClone
+    ], SkinnedMeshRenderer.prototype, "_maxVertexUniformVectors", void 0);
+    __decorate$1([
+        ignoreClone
+    ], SkinnedMeshRenderer.prototype, "_jointTexture", void 0);
+    __decorate$1([
+        deepClone
+    ], SkinnedMeshRenderer.prototype, "_skin", void 0);
+    __decorate$1([
+        ignoreClone
+    ], SkinnedMeshRenderer.prototype, "_onLocalBoundsChanged", null);
+    __decorate$1([
+        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$2(_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$2(_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 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$2(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$1() {
+        // 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$1 = function _is_native_reflect_construct() {
+            return !!result;
+        })();
+    }
+    function _construct$1(Parent, args, Class) {
+        if (_is_native_reflect_construct$1()) _construct$1 = Reflect.construct;
+        else {
+            _construct$1 = 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$2(instance, Class.prototype);
+                return instance;
+            };
+        }
+        return _construct$1.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$2(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, _this._invModelMatrix = new 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$1(type, [].concat([
+                this
+            ], args));
+            this._components.push(component);
+            // @todo: temporary solution
+            if (_instanceof1$2(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 (_instanceof1$2(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 (_instanceof1$2(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$1(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);
+            }
+        };
+        /**
+       * Destroy self.
        */ _proto.destroy = function destroy() {
             EngineObject.prototype.destroy.call(this);
             if (!this._destroyed) {
@@ -27626,29 +28337,6 @@
         };
         /**
        * @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++){
@@ -27658,799 +28346,134 @@
             }
             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$2(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$2(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$2(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$1([
-        deepClone
-    ], Skin.prototype, "inverseBindMatrices", void 0);
-    __decorate$1([
-        ignoreClone
-    ], Skin.prototype, "_skinMatrices", void 0);
-    __decorate$1([
-        ignoreClone
-    ], Skin.prototype, "_updatedManager", void 0);
-    __decorate$1([
-        ignoreClone
-    ], Skin.prototype, "_rootBone", void 0);
-    __decorate$1([
-        ignoreClone
-    ], Skin.prototype, "_bones", void 0);
-    __decorate$1([
-        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$2(SkinnedMeshRenderer, MeshRenderer);
-        function SkinnedMeshRenderer(entity) {
-            var _this;
-            _this = MeshRenderer.call(this, entity) || this, _this._localBounds = new BoundingBox(), _this._jointDataCreateCache = new 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) {
-                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;
-            }
-        };
-        _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);
-            }
-            if (lastRootBone !== rootBone) {
-                this._onSkinUpdated(SkinUpdateFlag.RootBoneChanged, rootBone);
+        };
+        /**
+       * @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$2(SkinnedMeshRenderer, [
+        _create_class$2(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$1([
-        ignoreClone
-    ], SkinnedMeshRenderer.prototype, "_condensedBlendShapeWeights", void 0);
-    __decorate$1([
-        deepClone
-    ], SkinnedMeshRenderer.prototype, "_localBounds", void 0);
-    __decorate$1([
-        ignoreClone
-    ], SkinnedMeshRenderer.prototype, "_jointDataCreateCache", void 0);
-    __decorate$1([
-        ignoreClone
-    ], SkinnedMeshRenderer.prototype, "_blendShapeWeights", void 0);
-    __decorate$1([
-        ignoreClone
-    ], SkinnedMeshRenderer.prototype, "_maxVertexUniformVectors", void 0);
-    __decorate$1([
-        ignoreClone
-    ], SkinnedMeshRenderer.prototype, "_jointTexture", void 0);
-    __decorate$1([
-        deepClone
-    ], SkinnedMeshRenderer.prototype, "_skin", void 0);
-    __decorate$1([
-        ignoreClone
-    ], SkinnedMeshRenderer.prototype, "_onLocalBoundsChanged", null);
-    __decorate$1([
-        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$2(_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$2(_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 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$2(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) {
             this._type = type;
@@ -28937,6 +28960,7 @@
         /** AudioClip, include ogg, wav and mp3. */ AssetType["Audio"] = "Audio";
         /** Project asset. */ AssetType["Project"] = "project";
         /** PhysicsMaterial. */ AssetType["PhysicsMaterial"] = "PhysicsMaterial";
+        /** RenderTarget. */ AssetType["RenderTarget"] = "RenderTarget";
         return AssetType;
     }({});
     var SafeLoopArray = /*#__PURE__*/ function() {
@@ -33726,6 +33750,183 @@
         PointerMethods["onPointerDrop"] = "onPointerDrop";
         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 _loop(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 (_instanceof1$2(arg, Entity)) {
+                    clonedArgs[i] = CloneUtils.remapEntity(srcRoot, targetRoot, arg);
+                } else if (_instanceof1$2(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 fn() {
+                    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$1([
+        ignoreClone
+    ], Signal.prototype, "_listeners", void 0);
     /**
      * Loader abstract class.
      */ var Loader = /*#__PURE__*/ function() {
@@ -43000,6 +43201,7 @@
         CircleShape: CircleShape,
         ClearableObjectPool: ClearableObjectPool,
         CloneManager: CloneManager,
+        CloneUtils: CloneUtils,
         get Collider () { return exports.Collider; },
         ColliderShape: ColliderShape,
         ColliderShapeUpAxis: ColliderShapeUpAxis,
@@ -43156,6 +43358,7 @@
         ShadowCascadesMode: ShadowCascadesMode,
         ShadowResolution: ShadowResolution,
         ShadowType: ShadowType,
+        Signal: Signal,
         get SimpleSpriteAssembler () { return exports.SimpleSpriteAssembler; },
         SizeOverLifetimeModule: SizeOverLifetimeModule,
         Skin: Skin,
@@ -44112,7 +44315,7 @@
                     return {
                         internalFormat: isSRGBColorSpace ? gl.SRGB8 : isWebGL2 ? gl.RGB8 : gl.RGB,
                         baseFormat: isSRGBColorSpace ? isWebGL2 ? gl.RGB : gl.SRGB8 : gl.RGB,
-                        readFormat: gl.RGB,
+                        readFormat: isWebGL2 ? gl.RGBA : gl.RGB,
                         dataType: gl.UNSIGNED_BYTE,
                         isCompressed: false,
                         alignment: 1
@@ -44187,6 +44390,7 @@
                     return {
                         internalFormat: gl.R11F_G11F_B10F,
                         baseFormat: gl.RGB,
+                        readFormat: gl.RGBA,
                         dataType: gl.FLOAT,
                         isCompressed: false,
                         alignment: 4
@@ -46237,9 +46441,7 @@
                 for(var key in item.props)_this = this, _loop(key);
             }
             return Promise.all(promises).then(function() {
-                var handle = ReflectionParser.customParseComponentHandles[instance.constructor.name];
-                if (handle) return handle(instance, item);
-                else return instance;
+                return instance;
             });
         };
         _proto.parseMethod = function parseMethod(instance, methodName, methodParams) {
@@ -46258,6 +46460,29 @@
                 }
             });
         };
+        _proto.parseSignal = function parseSignal(signalRef) {
+            var _this = this;
+            var signal = new Signal();
+            return Promise.all(signalRef.listeners.map(function(listener) {
+                return Promise.all([
+                    _this.parseBasicType(listener.target),
+                    listener.arguments ? Promise.all(listener.arguments.map(function(a) {
+                        return _this.parseBasicType(a);
+                    })) : Promise.resolve([])
+                ]).then(function(param) {
+                    var target = param[0], resolvedArgs = param[1];
+                    if (target) {
+                        var _signal;
+                        (_signal = signal).on.apply(_signal, [].concat([
+                            target,
+                            listener.methodName
+                        ], resolvedArgs));
+                    }
+                });
+            })).then(function() {
+                return signal;
+            });
+        };
         _proto.parseBasicType = function parseBasicType(value, originValue) {
             var _this = this;
             if (Array.isArray(value)) {
@@ -46287,6 +46512,8 @@
                 } else if (ReflectionParser._isEntityRef(value)) {
                     // entity reference
                     return Promise.resolve(this._context.entityMap.get(value.entityId));
+                } else if (ReflectionParser._isSignalRef(value)) {
+                    return this.parseSignal(value);
                 } else if (originValue) {
                     var _this2, _loop = function _loop(key) {
                         if (key === "methods") {
@@ -46342,9 +46569,6 @@
                 return Promise.resolve(entity);
             }
         };
-        ReflectionParser.registerCustomParseComponent = function registerCustomParseComponent(componentType, handle) {
-            this.customParseComponentHandles[componentType] = handle;
-        };
         ReflectionParser._isClass = function _isClass(value) {
             return value["class"] !== undefined;
         };
@@ -46360,12 +46584,14 @@
         ReflectionParser._isComponentRef = function _isComponentRef(value) {
             return value["ownerId"] !== undefined && value["componentId"] !== undefined;
         };
+        ReflectionParser._isSignalRef = function _isSignalRef(value) {
+            return value["listeners"] !== undefined;
+        };
         ReflectionParser._isMethodObject = function _isMethodObject(value) {
             return Array.isArray(value == null ? void 0 : value.params);
         };
         return ReflectionParser;
     }();
-    ReflectionParser.customParseComponentHandles = new Map();
     exports.Texture2DDecoder = /*#__PURE__*/ function() {
         function Texture2DDecoder() {}
         Texture2DDecoder.decode = function decode(engine, bufferReader, restoredTexture) {
@@ -52019,6 +52245,53 @@
             "physMat"
         ])
     ], PhysicsMaterialLoader);
+    var RenderTargetLoader = /*#__PURE__*/ function(Loader) {
+        _inherits(RenderTargetLoader, Loader);
+        function RenderTargetLoader() {
+            return Loader.apply(this, arguments) || this;
+        }
+        var _proto = RenderTargetLoader.prototype;
+        _proto.load = function load(item, resourceManager) {
+            var engine = resourceManager.engine;
+            return resourceManager // @ts-ignore
+            ._request(item.url, _extends({}, item, {
+                type: "json"
+            })).then(function(data) {
+                var width = data.width, height = data.height, colorFormats = data.colorFormats, depthFormat = data.depthFormat, antiAliasing = data.antiAliasing, autoGenerateMipmaps = data.autoGenerateMipmaps;
+                var colorTextureProps = data.colorTextures;
+                var colorTextures = colorFormats.map(function(format, i) {
+                    var props = colorTextureProps == null ? void 0 : colorTextureProps[i];
+                    var _props_mipmap;
+                    var mipmap = (_props_mipmap = props == null ? void 0 : props.mipmap) != null ? _props_mipmap : true;
+                    var _props_isSRGBColorSpace;
+                    var isSRGB = (_props_isSRGBColorSpace = props == null ? void 0 : props.isSRGBColorSpace) != null ? _props_isSRGBColorSpace : format === TextureFormat.R8G8B8A8;
+                    var texture = new Texture2D(engine, width, height, format, mipmap, isSRGB);
+                    if (props) {
+                        if (props.filterMode != null) texture.filterMode = props.filterMode;
+                        if (props.wrapModeU != null) texture.wrapModeU = props.wrapModeU;
+                        if (props.wrapModeV != null) texture.wrapModeV = props.wrapModeV;
+                        if (props.anisoLevel != null) texture.anisoLevel = props.anisoLevel;
+                    }
+                    return texture;
+                });
+                var depth = depthFormat === -1 ? null : depthFormat;
+                var rt = new RenderTarget(engine, width, height, colorTextures, depth, antiAliasing);
+                if (autoGenerateMipmaps != null) rt.autoGenerateMipmaps = autoGenerateMipmaps;
+                // Notify pending sub-asset requests for colorTextures
+                for(var i = 0, n = colorTextures.length; i < n; i++){
+                    // @ts-ignore
+                    resourceManager._onSubAssetSuccess(item.url, "colorTextures[" + i + "]", colorTextures[i]);
+                }
+                return rt;
+            });
+        };
+        return RenderTargetLoader;
+    }(Loader);
+    RenderTargetLoader = __decorate([
+        resourceLoader(AssetType.RenderTarget, [
+            "renderTarget"
+        ])
+    ], RenderTargetLoader);
     var SceneLoader = /*#__PURE__*/ function(Loader) {
         _inherits(SceneLoader, Loader);
         function SceneLoader() {
@@ -52159,20 +52432,6 @@
             "scene"
         ], true)
     ], SceneLoader);
-    ReflectionParser.registerCustomParseComponent("TextRenderer", /*#__PURE__*/ _async_to_generator(function(instance, item) {
-        var props;
-        return __generator(this, function(_state) {
-            props = item.props;
-            if (!props.font) {
-                // @ts-ignore
-                instance.font = Font.createFromOS(instance.engine, props.fontFamily || "Arial");
-            }
-            return [
-                2,
-                instance
-            ];
-        });
-    }));
     var KHR_lights_punctual = /*#__PURE__*/ function(GLTFExtensionParser) {
         _inherits(KHR_lights_punctual, GLTFExtensionParser);
         function KHR_lights_punctual() {
@@ -52667,7 +52926,7 @@
     ], EXT_texture_webp);
 
     //@ts-ignore
-    var version = "2.0.0-alpha.13";
+    var version = "2.0.0-alpha.15";
     console.log("Galacean Engine Version: " + version);
     for(var key in CoreObjects){
         Loader.registerClass(key, CoreObjects[key]);
@@ -52740,6 +52999,7 @@
     exports.CircleShape = CircleShape;
     exports.ClearableObjectPool = ClearableObjectPool;
     exports.CloneManager = CloneManager;
+    exports.CloneUtils = CloneUtils;
     exports.ColliderShape = ColliderShape;
     exports.ColliderShapeUpAxis = ColliderShapeUpAxis;
     exports.Collision = Collision;
@@ -52925,6 +53185,7 @@
     exports.ShadowCascadesMode = ShadowCascadesMode;
     exports.ShadowResolution = ShadowResolution;
     exports.ShadowType = ShadowType;
+    exports.Signal = Signal;
     exports.SizeOverLifetimeModule = SizeOverLifetimeModule;
     exports.Skin = Skin;
     exports.SkinnedMeshRenderer = SkinnedMeshRenderer;