@galacean/engine-core 1.2.0-beta.4 → 1.2.0-beta.5

package/dist/module.js

@@ -250,7 +250,7 @@ function _instanceof(left, right) {
         }
         return cloneModes;
     };
-    CloneManager.cloneProperty = function cloneProperty(source, target, k, cloneMode) {
+    CloneManager.cloneProperty = function cloneProperty(source, target, k, cloneMode, srcRoot, targetRoot, deepInstanceMap) {
         if (cloneMode === CloneMode.Ignore) {
             return;
         }
@@ -286,22 +286,33 @@ function _instanceof(left, right) {
                         targetPropertyA.length = length;
                     }
                     for(var i = 0; i < length; i++){
-                        CloneManager.cloneProperty(sourceProperty, targetPropertyA, i, cloneMode);
+                        CloneManager.cloneProperty(sourceProperty, targetPropertyA, i, cloneMode, srcRoot, targetRoot, deepInstanceMap);
                     }
                     break;
                 default:
-                    var _target, _k;
-                    var targetOProperty = (_target = target)[_k = k] || (_target[_k] = new sourceProperty.constructor());
-                    var cloneModes = CloneManager.getCloneMode(sourceProperty.constructor);
-                    for(var _$k in sourceProperty){
-                        CloneManager.cloneProperty(sourceProperty, targetOProperty, _$k, cloneModes[_$k]);
-                    }
-                    // Custom clone
-                    if (sourceProperty._cloneTo) {
-                        sourceProperty._cloneTo(targetOProperty);
+                    var targetProperty = target[k];
+                    // If the target property is undefined, create new instance and keep reference sharing like the source
+                    if (!targetProperty) {
+                        targetProperty = deepInstanceMap.get(sourceProperty);
+                        if (!targetProperty) {
+                            targetProperty = new sourceProperty.constructor();
+                            deepInstanceMap.set(sourceProperty, targetProperty);
+                        }
+                        target[k] = targetProperty;
                     }
                     if (sourceProperty.copyFrom) {
-                        targetOProperty.copyFrom(sourceProperty);
+                        // Custom clone
+                        targetProperty.copyFrom(sourceProperty);
+                    } else {
+                        // Universal clone
+                        var cloneModes = CloneManager.getCloneMode(sourceProperty.constructor);
+                        for(var _$k in sourceProperty){
+                            CloneManager.cloneProperty(sourceProperty, targetProperty, _$k, cloneModes[_$k], srcRoot, targetRoot, deepInstanceMap);
+                        }
+                        // Custom incremental clone
+                        if (sourceProperty._cloneTo) {
+                            sourceProperty._cloneTo(targetProperty, srcRoot, targetRoot);
+                        }
                     }
                     break;
             }
@@ -310,9 +321,9 @@ function _instanceof(left, right) {
             target[k] = sourceProperty;
         }
     };
-    CloneManager.deepCloneObject = function deepCloneObject(source, target) {
+    CloneManager.deepCloneObject = function deepCloneObject(source, target, deepInstanceMap) {
         for(var k in source){
-            CloneManager.cloneProperty(source, target, k, CloneMode.Deep);
+            CloneManager.cloneProperty(source, target, k, CloneMode.Deep, null, null, deepInstanceMap);
         }
     };
     return CloneManager;
@@ -5576,7 +5587,7 @@ var GraphicsResource = /*#__PURE__*/ function(ReferResource1) {
         return shaderData;
     };
     _proto.cloneTo = function cloneTo(target) {
-        CloneManager.deepCloneObject(this._macroCollection, target._macroCollection);
+        CloneManager.deepCloneObject(this._macroCollection, target._macroCollection, new Map());
         Object.assign(target._macroMap, this._macroMap);
         var referCount = target._getReferCount();
         var propertyValueMap = this._propertyValueMap;
@@ -10956,454 +10967,1191 @@ var PrimitiveType;
 })();
 
 /**
- * Mesh skin data, equal glTF skins define
- */ var Skin = /*#__PURE__*/ function(EngineObject1) {
-    _inherits(Skin, EngineObject1);
-    function Skin(name) {
-        var _this;
-        _this = EngineObject1.call(this, null) || this;
-        _this.name = name;
-        _this._bones = [];
-        _this.inverseBindMatrices = []; // inverse bind matrix array
-        _this.joints = []; // joints name array, element type: string
-        _this.skeleton = "none"; // root bone name
-        return _this;
-    }
-    return Skin;
-}(EngineObject);
+ * Layer, used for bit operations.
+ */ var Layer;
+(function(Layer) {
+    Layer[Layer[/** Layer 0. */ "Layer0"] = 0x1] = "Layer0";
+    Layer[Layer[/** Layer 1. */ "Layer1"] = 0x2] = "Layer1";
+    Layer[Layer[/** Layer 2. */ "Layer2"] = 0x4] = "Layer2";
+    Layer[Layer[/** Layer 3. */ "Layer3"] = 0x8] = "Layer3";
+    Layer[Layer[/** Layer 4. */ "Layer4"] = 0x10] = "Layer4";
+    Layer[Layer[/** Layer 5. */ "Layer5"] = 0x20] = "Layer5";
+    Layer[Layer[/** Layer 6. */ "Layer6"] = 0x40] = "Layer6";
+    Layer[Layer[/** Layer 7. */ "Layer7"] = 0x80] = "Layer7";
+    Layer[Layer[/** Layer 8. */ "Layer8"] = 0x100] = "Layer8";
+    Layer[Layer[/** Layer 9. */ "Layer9"] = 0x200] = "Layer9";
+    Layer[Layer[/** Layer 10. */ "Layer10"] = 0x400] = "Layer10";
+    Layer[Layer[/** Layer 11. */ "Layer11"] = 0x800] = "Layer11";
+    Layer[Layer[/** Layer 12. */ "Layer12"] = 0x1000] = "Layer12";
+    Layer[Layer[/** Layer 13. */ "Layer13"] = 0x2000] = "Layer13";
+    Layer[Layer[/** Layer 14. */ "Layer14"] = 0x4000] = "Layer14";
+    Layer[Layer[/** Layer 15. */ "Layer15"] = 0x8000] = "Layer15";
+    Layer[Layer[/** Layer 16. */ "Layer16"] = 0x10000] = "Layer16";
+    Layer[Layer[/** Layer 17. */ "Layer17"] = 0x20000] = "Layer17";
+    Layer[Layer[/** Layer 18. */ "Layer18"] = 0x40000] = "Layer18";
+    Layer[Layer[/** Layer 19. */ "Layer19"] = 0x80000] = "Layer19";
+    Layer[Layer[/** Layer 20. */ "Layer20"] = 0x100000] = "Layer20";
+    Layer[Layer[/** Layer 21. */ "Layer21"] = 0x200000] = "Layer21";
+    Layer[Layer[/** Layer 22. */ "Layer22"] = 0x400000] = "Layer22";
+    Layer[Layer[/** Layer 23. */ "Layer23"] = 0x800000] = "Layer23";
+    Layer[Layer[/** Layer 24. */ "Layer24"] = 0x1000000] = "Layer24";
+    Layer[Layer[/** Layer 25. */ "Layer25"] = 0x2000000] = "Layer25";
+    Layer[Layer[/** Layer 26. */ "Layer26"] = 0x4000000] = "Layer26";
+    Layer[Layer[/** Layer 27. */ "Layer27"] = 0x8000000] = "Layer27";
+    Layer[Layer[/** Layer 28. */ "Layer28"] = 0x10000000] = "Layer28";
+    Layer[Layer[/** Layer 29. */ "Layer29"] = 0x20000000] = "Layer29";
+    Layer[Layer[/** Layer 30. */ "Layer30"] = 0x40000000] = "Layer30";
+    Layer[Layer[/** Layer 31. */ "Layer31"] = 0x80000000] = "Layer31";
+    Layer[Layer[/** All layers. */ "Everything"] = 0xffffffff] = "Everything";
+    Layer[Layer[/** None layer. */ "Nothing"] = 0x0] = "Nothing";
+})(Layer || (Layer = {}));
+
+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;
+}();
 
 /**
- * SkinnedMeshRenderer.
- */ var SkinnedMeshRenderer = /*#__PURE__*/ function(MeshRenderer1) {
-    _inherits(SkinnedMeshRenderer, MeshRenderer1);
-    function SkinnedMeshRenderer(entity) {
+ * Entity, be used as components container.
+ */ var Entity = /*#__PURE__*/ function(EngineObject1) {
+    _inherits(Entity, EngineObject1);
+    function Entity(engine, name) {
         var _this;
-        _this = MeshRenderer1.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(_assert_this_initialized(_this));
-        var localBounds = _this._localBounds;
-        // @ts-ignore
-        localBounds.min._onValueChanged = _this._onLocalBoundsChanged;
-        // @ts-ignore
-        localBounds.max._onValueChanged = _this._onLocalBoundsChanged;
+        _this = EngineObject1.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;
+        _this._parent = null;
+        //--------------------------------------------------------------deprecated----------------------------------------------------------------
+        _this._invModelMatrix = new Matrix();
+        _this.name = name;
+        _this.transform = _this.addComponent(Transform);
+        _this._inverseWorldMatFlag = _this.transform.registerWorldChangeFlag();
         return _this;
     }
-    var _proto = SkinnedMeshRenderer.prototype;
+    var _proto = Entity.prototype;
     /**
-   * @internal
-   */ _proto.update = function update() {
-        var _this = this, skin = _this._skin, bones = _this._bones;
-        if (skin && bones) {
-            // @todo: can optimize when share skin
-            var jointMatrices = this._jointMatrices;
-            var bindMatrices = skin.inverseBindMatrices;
-            var _this__rootBone;
-            var worldToLocal = ((_this__rootBone = this._rootBone) != null ? _this__rootBone : this.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, jointMatrices, offset);
-                } else {
-                    jointMatrices.set(bindMatrices[i].elements, offset);
-                }
-                Utils._floatMatrixMultiply(worldToLocal, jointMatrices, offset, jointMatrices, offset);
+   * Add component based on the component type.
+   * @param type - The type of the component
+   * @returns	The component which has been added
+   */ _proto.addComponent = function addComponent(type) {
+        ComponentsDependencies._addCheck(this, type);
+        var component = new type(this);
+        this._components.push(component);
+        component._setActive(true, ActiveChangeFlag.All);
+        return component;
+    };
+    /**
+   * Get component which match the type.
+   * @param type - The type of the component
+   * @returns	The first component which match type
+   */ _proto.getComponent = function getComponent(type) {
+        var components = this._components;
+        for(var i = 0, n = components.length; i < n; i++){
+            var component = components[i];
+            if (_instanceof(component, type)) {
+                return component;
             }
         }
+        return null;
     };
-    _proto._updateShaderData = function _updateShaderData(context, onlyMVP) {
-        var entity = this.entity;
-        var _this__rootBone;
-        var worldMatrix = ((_this__rootBone = this._rootBone) != null ? _this__rootBone : entity).transform.worldMatrix;
-        if (onlyMVP) {
-            this._updateMVPShaderData(context, worldMatrix);
-            return;
+    /**
+   * Get components which match the type.
+   * @param type - The type of the component
+   * @param results - The components which match type
+   * @returns	The components which match type
+   */ _proto.getComponents = function getComponents(type, results) {
+        results.length = 0;
+        var components = this._components;
+        for(var i = 0, n = components.length; i < n; i++){
+            var component = components[i];
+            if (_instanceof(component, type)) {
+                results.push(component);
+            }
         }
-        this._updateTransformShaderData(context, worldMatrix);
-        var shaderData = this.shaderData;
-        var mesh = this.mesh;
-        var blendShapeManager = mesh._blendShapeManager;
-        blendShapeManager._updateShaderData(shaderData, this);
-        var bones = this._bones;
-        if (bones) {
-            var bsUniformOccupiesCount = blendShapeManager._uniformOccupiesCount;
-            var jointCount = bones.length;
-            var jointDataCreateCache = this._jointDataCreateCache;
-            var jointCountChange = jointCount !== jointDataCreateCache.x;
-            if (jointCountChange || bsUniformOccupiesCount !== jointDataCreateCache.y) {
-                // directly use max joint count to avoid shader recompile
-                // @TODO: different shader type should use different count, not always 44
-                var remainUniformJointCount = Math.ceil((this._maxVertexUniformVectors - (44 + bsUniformOccupiesCount)) / 4);
-                if (jointCount > remainUniformJointCount) {
-                    var engine = this.engine;
-                    if (engine._hardwareRenderer.canIUseMoreJoints) {
-                        if (jointCountChange) {
-                            var _this__jointTexture;
-                            (_this__jointTexture = this._jointTexture) == null ? void 0 : _this__jointTexture.destroy();
-                            this._jointTexture = new Texture2D(engine, 4, jointCount, TextureFormat.R32G32B32A32, 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(" + jointCount + ") 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);
-                    }
+        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;
+        }
+        if (child._isRoot) {
+            child._scene._removeFromEntityList(child);
+            child._isRoot = false;
+            this._addToChildrenList(index, child);
+            child._parent = this;
+            var oldScene = child._scene;
+            var newScene = this._scene;
+            var inActiveChangeFlag = ActiveChangeFlag.None;
+            if (!this._isActiveInHierarchy) {
+                child._isActiveInHierarchy && (inActiveChangeFlag |= ActiveChangeFlag.Hierarchy);
+            }
+            if (child._isActiveInScene) {
+                if (this._isActiveInScene) {
+                    // Cross scene should inActive first and then active
+                    oldScene !== newScene && (inActiveChangeFlag |= ActiveChangeFlag.Scene);
                 } 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, this._jointMatrices);
+                    inActiveChangeFlag |= ActiveChangeFlag.Scene;
                 }
-                jointDataCreateCache.set(jointCount, bsUniformOccupiesCount);
             }
-            if (this._jointTexture) {
-                this._jointTexture.setPixelBuffer(this._jointMatrices);
+            inActiveChangeFlag && child._processInActive(inActiveChangeFlag);
+            if (child._scene !== newScene) {
+                Entity._traverseSetOwnerScene(child, newScene);
+            }
+            var activeChangeFlag = ActiveChangeFlag.None;
+            if (child._isActive) {
+                if (this._isActiveInHierarchy) {
+                    !child._isActiveInHierarchy && (activeChangeFlag |= ActiveChangeFlag.Hierarchy);
+                }
+                if (this._isActiveInScene) {
+                    (!child._isActiveInScene || oldScene !== newScene) && (activeChangeFlag |= ActiveChangeFlag.Scene);
+                }
             }
+            activeChangeFlag && child._processActive(activeChangeFlag);
+            child._setTransformDirty();
+        } else {
+            child._setParent(this, index);
         }
-        var layer = entity.layer;
-        this._rendererLayer.set(layer & 65535, layer >>> 16 & 65535, 0, 0);
     };
     /**
-   * @internal
-   */ _proto._onDestroy = function _onDestroy() {
-        var _this__jointTexture;
-        MeshRenderer1.prototype._onDestroy.call(this);
-        this._rootBone = null;
-        this._jointDataCreateCache = null;
-        this._skin = null;
-        this._blendShapeWeights = null;
-        this._localBounds = null;
-        this._jointMatrices = null;
-        (_this__jointTexture = this._jointTexture) == null ? void 0 : _this__jointTexture.destroy();
-        this._jointTexture = null;
-        this._bones = null;
+   * Remove child entity.
+   * @param child - The child entity which want to be removed
+   */ _proto.removeChild = function removeChild(child) {
+        child._setParent(null);
     };
     /**
-   * @internal
-   */ _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
-        MeshRenderer1.prototype._cloneTo.call(this, target, srcRoot, targetRoot);
-        var paths = new Array();
-        // Clone rootBone
-        if (this.rootBone) {
-            var success = this._getEntityHierarchyPath(srcRoot, this.rootBone, paths);
-            target.rootBone = success ? this._getEntityByHierarchyPath(targetRoot, paths) : this.rootBone;
+   * @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;
         }
-        // Clone bones
-        var bones = this._bones;
-        if (bones) {
-            var boneCount = bones.length;
-            var destBones = new Array(boneCount);
-            for(var i = 0; i < boneCount; i++){
-                var bone = bones[i];
-                var success1 = this._getEntityHierarchyPath(srcRoot, bone, paths);
-                destBones[i] = success1 ? this._getEntityByHierarchyPath(targetRoot, paths) : bone;
+        var children = this._children;
+        for(var i = 0, n = children.length; i < n; i++){
+            var target = children[i].findByName(name);
+            if (target) {
+                return target;
             }
-            target.bones = destBones;
         }
-        this._blendShapeWeights && (target._blendShapeWeights = this._blendShapeWeights.slice());
+        return null;
     };
     /**
-   * @internal
-   */ _proto._registerEntityTransformListener = function _registerEntityTransformListener() {
-        var _this__rootBone;
-        ((_this__rootBone = this._rootBone) != null ? _this__rootBone : this._entity).transform._updateFlagManager.addListener(this._onTransformChanged);
+   * Find the entity by path.
+   * @param path - The path fo the entity eg: /entity
+   * @returns The component which be found
+   */ _proto.findByPath = function findByPath(path) {
+        var splits = path.split("/");
+        var entity = this;
+        for(var i = 0, length = splits.length; i < length; ++i){
+            var split = splits[i];
+            if (split) {
+                entity = Entity._findChildByName(entity, split);
+                if (!entity) {
+                    return null;
+                }
+            }
+        }
+        return entity;
     };
     /**
-   * @internal
-   */ _proto._unRegisterEntityTransformListener = function _unRegisterEntityTransformListener() {
-        var _this__rootBone;
-        ((_this__rootBone = this._rootBone) != null ? _this__rootBone : this._entity).transform._updateFlagManager.removeListener(this._onTransformChanged);
+   * Create child entity.
+   * @param name - The child entity's name
+   * @returns The child entity
+   */ _proto.createChild = function createChild(name) {
+        var child = 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);
+        this._parseCloneEntity(this, cloneEntity, this, cloneEntity, new Map());
+        return cloneEntity;
     };
     /**
    * @internal
-   */ _proto._updateBounds = function _updateBounds(worldBounds) {
-        if (this._rootBone) {
-            var localBounds = this._localBounds;
-            var worldMatrix = this._rootBone.transform.worldMatrix;
-            BoundingBox.transform(localBounds, worldMatrix, worldBounds);
-        } else {
-            MeshRenderer1.prototype._updateBounds.call(this, worldBounds);
+   */ _proto._markAsTemplate = function _markAsTemplate(templateResource) {
+        this._isTemplate = true;
+        this._templateResource = templateResource;
+    };
+    _proto._createCloneEntity = function _createCloneEntity(srcEntity) {
+        var cloneEntity = new Entity(srcEntity._engine, srcEntity.name);
+        var templateResource = this._templateResource;
+        if (templateResource) {
+            cloneEntity._templateResource = templateResource;
+            templateResource._addReferCount(1);
+        }
+        cloneEntity.layer = srcEntity.layer;
+        cloneEntity._isActive = srcEntity._isActive;
+        var cloneTransform = cloneEntity.transform;
+        var srcTransform = srcEntity.transform;
+        cloneTransform.position = srcTransform.position;
+        cloneTransform.rotation = srcTransform.rotation;
+        cloneTransform.scale = srcTransform.scale;
+        var children = srcEntity._children;
+        for(var i = 0, n = srcEntity._children.length; i < n; i++){
+            cloneEntity.addChild(this._createCloneEntity(children[i]));
         }
+        return cloneEntity;
     };
-    _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;
+    _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++){
+            var sourceComp = components[i1];
+            if (!_instanceof(sourceComp, Transform)) {
+                var targetComp = target.addComponent(sourceComp.constructor);
+                ComponentCloner.cloneComponent(sourceComp, targetComp, srcRoot, targetRoot, deepInstanceMap);
             }
+        }
+    };
+    /**
+   * Destroy self.
+   */ _proto.destroy = function destroy() {
+        if (this._destroyed) {
+            return;
+        }
+        EngineObject1.prototype.destroy.call(this);
+        if (this._templateResource) {
+            this._isTemplate || this._templateResource._addReferCount(-1);
+            this._templateResource = null;
+        }
+        var components = this._components;
+        for(var i = components.length - 1; i >= 0; i--){
+            components[i].destroy();
+        }
+        this._components.length = 0;
+        var children = this._children;
+        while(children.length > 0){
+            children[0].destroy();
+        }
+        if (this._isRoot) {
+            this._scene.removeRootEntity(this);
         } else {
-            this._blendShapeWeights = new Float32Array(newBlendShapeCount);
+            this._setParent(null);
         }
+        this.isActive = false;
     };
-    _proto._onLocalBoundsChanged = function _onLocalBoundsChanged() {
-        this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
+    /**
+   * @internal
+   */ _proto._removeComponent = function _removeComponent(component) {
+        ComponentsDependencies._removeCheck(this, component.constructor);
+        var components = this._components;
+        components.splice(components.indexOf(component), 1);
     };
-    _proto._getEntityHierarchyPath = function _getEntityHierarchyPath(rootEntity, searchEntity, inversePath) {
-        inversePath.length = 0;
-        while(searchEntity !== rootEntity){
-            var parent = searchEntity.parent;
-            if (!parent) {
-                return false;
+    /**
+   * @internal
+   */ _proto._addScript = function _addScript(script) {
+        script._entityScriptsIndex = this._scripts.length;
+        this._scripts.add(script);
+    };
+    /**
+   * @internal
+   */ _proto._removeScript = function _removeScript(script) {
+        var replaced = this._scripts.deleteByIndex(script._entityScriptsIndex);
+        replaced && (replaced._entityScriptsIndex = script._entityScriptsIndex);
+        script._entityScriptsIndex = -1;
+    };
+    /**
+   * @internal
+   */ _proto._removeFromParent = function _removeFromParent() {
+        var oldParent = this._parent;
+        if (oldParent != null) {
+            var oldSibling = oldParent._children;
+            var index = this._siblingIndex;
+            oldSibling.splice(index, 1);
+            for(var n = oldSibling.length; index < n; index++){
+                oldSibling[index]._siblingIndex--;
             }
-            inversePath.push(searchEntity.siblingIndex);
-            searchEntity = parent;
+            this._parent = null;
+            this._siblingIndex = -1;
         }
-        return true;
     };
     /**
    * @internal
-   */ _proto._getEntityByHierarchyPath = function _getEntityByHierarchyPath(rootEntity, inversePath) {
-        var entity = rootEntity;
-        for(var i = inversePath.length - 1; i >= 0; i--){
-            entity = entity.children[inversePath[i]];
+   */ _proto._processActive = function _processActive(activeChangeFlag) {
+        if (this._activeChangedComponents) {
+            throw "Note: can't set the 'main inActive entity' active in hierarchy, if the operation is in main inActive entity or it's children script's onDisable Event.";
         }
-        return entity;
+        this._activeChangedComponents = this._scene._componentsManager.getActiveChangedTempList();
+        this._setActiveInHierarchy(this._activeChangedComponents, activeChangeFlag);
+        this._setActiveComponents(true, activeChangeFlag);
     };
-    _create_class(SkinnedMeshRenderer, [
-        {
-            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);
-                }
+    /**
+   * @internal
+   */ _proto._processInActive = function _processInActive(activeChangeFlag) {
+        if (this._activeChangedComponents) {
+            throw "Note: can't set the 'main active entity' inActive in hierarchy, if the operation is in main active entity or it's children script's onEnable Event.";
+        }
+        this._activeChangedComponents = this._scene._componentsManager.getActiveChangedTempList();
+        this._setInActiveInHierarchy(this._activeChangedComponents, activeChangeFlag);
+        this._setActiveComponents(false, activeChangeFlag);
+    };
+    _proto._addToChildrenList = function _addToChildrenList(index, child) {
+        var children = this._children;
+        var childCount = children.length;
+        if (index === undefined) {
+            child._siblingIndex = childCount;
+            children.push(child);
+        } else {
+            if (index < 0 || index > childCount) {
+                throw "The index " + index + " is out of child list bounds " + childCount;
             }
-        },
-        {
-            key: "rootBone",
-            get: /**
-   * Root bone.
-   */ function get() {
-                return this._rootBone;
-            },
-            set: function set(value) {
-                if (this._rootBone !== value) {
-                    this._unRegisterEntityTransformListener();
-                    this._rootBone = value;
-                    this._registerEntityTransformListener();
-                    this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
+            child._siblingIndex = index;
+            children.splice(index, 0, child);
+            for(var i = index + 1, n = childCount + 1; i < n; i++){
+                children[i]._siblingIndex++;
+            }
+        }
+    };
+    _proto._setParent = function _setParent(parent, siblingIndex) {
+        var oldParent = this._parent;
+        if (parent !== oldParent) {
+            this._removeFromParent();
+            this._parent = parent;
+            if (parent) {
+                parent._addToChildrenList(siblingIndex, this);
+                var oldScene = this._scene;
+                var parentScene = parent._scene;
+                var inActiveChangeFlag = ActiveChangeFlag.None;
+                if (!parent._isActiveInHierarchy) {
+                    this._isActiveInHierarchy && (inActiveChangeFlag |= ActiveChangeFlag.Hierarchy);
+                }
+                if (parent._isActiveInScene) {
+                    // cross scene should inActive first and then active
+                    this._isActiveInScene && oldScene !== parentScene && (inActiveChangeFlag |= ActiveChangeFlag.Scene);
+                } else {
+                    this._isActiveInScene && (inActiveChangeFlag |= ActiveChangeFlag.Scene);
+                }
+                inActiveChangeFlag && this._processInActive(inActiveChangeFlag);
+                if (oldScene !== parentScene) {
+                    Entity._traverseSetOwnerScene(this, parentScene);
+                }
+                var activeChangeFlag = ActiveChangeFlag.None;
+                if (this._isActive) {
+                    if (parent._isActiveInHierarchy) {
+                        !this._isActiveInHierarchy && (activeChangeFlag |= ActiveChangeFlag.Hierarchy);
+                    }
+                    if (parent._isActiveInScene) {
+                        (!this._isActiveInScene || oldScene !== parentScene) && (activeChangeFlag |= ActiveChangeFlag.Scene);
+                    }
+                }
+                activeChangeFlag && this._processActive(activeChangeFlag);
+            } else {
+                var inActiveChangeFlag1 = ActiveChangeFlag.None;
+                this._isActiveInHierarchy && (inActiveChangeFlag1 |= ActiveChangeFlag.Hierarchy);
+                this._isActiveInScene && (inActiveChangeFlag1 |= ActiveChangeFlag.Scene);
+                inActiveChangeFlag1 && this._processInActive(inActiveChangeFlag1);
+                if (oldParent) {
+                    Entity._traverseSetOwnerScene(this, null);
                 }
             }
-        },
+            this._setTransformDirty();
+        }
+    };
+    _proto._getComponentsInChildren = function _getComponentsInChildren(type, results) {
+        for(var i = this._components.length - 1; i >= 0; i--){
+            var component = this._components[i];
+            if (_instanceof(component, type)) {
+                results.push(component);
+            }
+        }
+        for(var i1 = this._children.length - 1; i1 >= 0; i1--){
+            this._children[i1]._getComponentsInChildren(type, results);
+        }
+    };
+    _proto._setActiveComponents = function _setActiveComponents(isActive, activeChangeFlag) {
+        var activeChangedComponents = this._activeChangedComponents;
+        for(var i = 0, length = activeChangedComponents.length; i < length; ++i){
+            activeChangedComponents[i]._setActive(isActive, activeChangeFlag);
+        }
+        this._scene._componentsManager.putActiveChangedTempList(activeChangedComponents);
+        this._activeChangedComponents = null;
+    };
+    _proto._setActiveInHierarchy = function _setActiveInHierarchy(activeChangedComponents, activeChangeFlag) {
+        activeChangeFlag & ActiveChangeFlag.Hierarchy && (this._isActiveInHierarchy = true);
+        activeChangeFlag & ActiveChangeFlag.Scene && (this._isActiveInScene = true);
+        var components = this._components;
+        for(var i = 0, n = components.length; i < n; i++){
+            var component = components[i];
+            (component.enabled || !component._awoken) && activeChangedComponents.push(component);
+        }
+        var children = this._children;
+        for(var i1 = 0, n1 = children.length; i1 < n1; i1++){
+            var child = children[i1];
+            child.isActive && child._setActiveInHierarchy(activeChangedComponents, activeChangeFlag);
+        }
+    };
+    _proto._setInActiveInHierarchy = function _setInActiveInHierarchy(activeChangedComponents, activeChangeFlag) {
+        activeChangeFlag & ActiveChangeFlag.Hierarchy && (this._isActiveInHierarchy = false);
+        activeChangeFlag & ActiveChangeFlag.Scene && (this._isActiveInScene = false);
+        var components = this._components;
+        for(var i = 0, n = components.length; i < n; i++){
+            var component = components[i];
+            component.enabled && activeChangedComponents.push(component);
+        }
+        var children = this._children;
+        for(var i1 = 0, n1 = children.length; i1 < n1; i1++){
+            var child = children[i1];
+            child.isActive && child._setInActiveInHierarchy(activeChangedComponents, activeChangeFlag);
+        }
+    };
+    _proto._setTransformDirty = function _setTransformDirty() {
+        if (this.transform) {
+            this.transform._parentChange();
+        } else {
+            for(var i = 0, len = this._children.length; i < len; i++){
+                this._children[i]._setTransformDirty();
+            }
+        }
+    };
+    _proto._setSiblingIndex = function _setSiblingIndex(sibling, target) {
+        target = Math.min(target, sibling.length - 1);
+        if (target < 0) {
+            throw "Sibling index " + target + " should large than 0";
+        }
+        if (this._siblingIndex !== target) {
+            var oldIndex = this._siblingIndex;
+            if (target < oldIndex) {
+                for(var i = oldIndex; i >= target; i--){
+                    var child = i == target ? this : sibling[i - 1];
+                    sibling[i] = child;
+                    child._siblingIndex = i;
+                }
+            } else {
+                for(var i1 = oldIndex; i1 <= target; i1++){
+                    var child1 = i1 == target ? this : sibling[i1 + 1];
+                    sibling[i1] = child1;
+                    child1._siblingIndex = i1;
+                }
+            }
+        }
+    };
+    /**
+   * @deprecated
+   */ _proto.getInvModelMatrix = function getInvModelMatrix() {
+        if (this._inverseWorldMatFlag.flag) {
+            Matrix.invert(this.transform.worldMatrix, this._invModelMatrix);
+            this._inverseWorldMatFlag.flag = false;
+        }
+        return this._invModelMatrix;
+    };
+    /**
+   * @internal
+   */ Entity._findChildByName = function _findChildByName(root, name) {
+        var children = root._children;
+        for(var i = children.length - 1; i >= 0; i--){
+            var child = children[i];
+            if (child.name === name) {
+                return child;
+            }
+        }
+        return null;
+    };
+    /**
+   * @internal
+   */ Entity._traverseSetOwnerScene = function _traverseSetOwnerScene(entity, scene) {
+        entity._scene = scene;
+        var children = entity._children;
+        for(var i = children.length - 1; i >= 0; i--){
+            this._traverseSetOwnerScene(children[i], scene);
+        }
+    };
+    /**
+   * @internal
+   */ Entity._getEntityHierarchyPath = function _getEntityHierarchyPath(rootEntity, searchEntity, inversePath) {
+        inversePath.length = 0;
+        while(searchEntity !== rootEntity){
+            var parent = searchEntity.parent;
+            if (!parent) {
+                return false;
+            }
+            inversePath.push(searchEntity.siblingIndex);
+            searchEntity = parent;
+        }
+        return true;
+    };
+    /**
+   * @internal
+   */ Entity._getEntityByHierarchyPath = function _getEntityByHierarchyPath(rootEntity, inversePath) {
+        var entity = rootEntity;
+        for(var i = inversePath.length - 1; i >= 0; i--){
+            entity = entity.children[inversePath[i]];
+        }
+        return entity;
+    };
+    _create_class(Entity, [
         {
-            key: "bones",
+            key: "isActive",
             get: /**
-   * Bones of the SkinnedMeshRenderer.
+   * Whether to activate locally.
    */ function get() {
-                return this._bones;
+                return this._isActive;
             },
             set: function set(value) {
-                if (this._bones !== value) {
-                    var _this__bones, _value;
-                    var _this__bones_length;
-                    var lastBoneCount = (_this__bones_length = (_this__bones = this._bones) == null ? void 0 : _this__bones.length) != null ? _this__bones_length : 0;
-                    var _value_length;
-                    var boneCount = (_value_length = (_value = value) == null ? void 0 : _value.length) != null ? _value_length : 0;
-                    if (lastBoneCount !== boneCount) {
-                        var shaderData = this.shaderData;
-                        if (boneCount > 0) {
-                            this._jointMatrices = new Float32Array(boneCount * 16);
-                            shaderData.enableMacro("RENDERER_HAS_SKIN");
-                            shaderData.setInt(SkinnedMeshRenderer._jointCountProperty, boneCount);
+                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 {
-                            this._jointMatrices = null;
-                            shaderData.disableMacro("RENDERER_HAS_SKIN");
+                            var _parent, _parent1;
+                            ((_parent = parent) == null ? void 0 : _parent._isActiveInHierarchy) && (activeChangeFlag |= ActiveChangeFlag.Hierarchy);
+                            ((_parent1 = parent) == null ? void 0 : _parent1._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);
                     }
-                    this._bones = value;
                 }
             }
         },
         {
-            key: "skin",
+            key: "isActiveInHierarchy",
             get: /**
-   * @deprecated
-   * Skin Object.
-   *
-   * If you want get `skeleton`, use {@link SkinnedMeshRenderer.rootBone} instead.
-   * If you want get `bones`, use {@link SkinnedMeshRenderer.bones} instead.
-   * `inverseBindMatrices` will migrate to mesh in the future.
-   *
-   * @remarks `rootBone` and `bones` will not update when `skin` changed.
+   * Whether it is active in the hierarchy.
    */ function get() {
-                return this._skin;
+                return this._isActiveInHierarchy;
+            }
+        },
+        {
+            key: "parent",
+            get: /**
+   * The parent entity.
+   */ function get() {
+                return this._parent;
             },
             set: function set(value) {
-                this._skin = value;
+                this._setParent(value);
             }
-        }
-    ]);
-    return SkinnedMeshRenderer;
-}(MeshRenderer);
-(function() {
-    SkinnedMeshRenderer._jointCountProperty = ShaderProperty.getByName("renderer_JointCount");
-})();
-(function() {
-    SkinnedMeshRenderer._jointSamplerProperty = ShaderProperty.getByName("renderer_JointSampler");
-})();
-(function() {
-    SkinnedMeshRenderer._jointMatrixProperty = ShaderProperty.getByName("renderer_JointMatrix");
-})();
-__decorate([
-    deepClone
-], SkinnedMeshRenderer.prototype, "_localBounds", void 0);
-__decorate([
-    ignoreClone
-], SkinnedMeshRenderer.prototype, "_jointDataCreateCache", void 0);
-__decorate([
-    ignoreClone
-], SkinnedMeshRenderer.prototype, "_blendShapeWeights", void 0);
-__decorate([
-    ignoreClone
-], SkinnedMeshRenderer.prototype, "_maxVertexUniformVectors", void 0);
-__decorate([
-    ignoreClone
-], SkinnedMeshRenderer.prototype, "_rootBone", void 0);
+        },
+        {
+            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";
+                }
+                this._setSiblingIndex(this._isRoot ? this._scene._rootEntities : this._parent._children, value);
+            }
+        }
+    ]);
+    return Entity;
+}(EngineObject);
+
+/**
+ * Skin used for skinned mesh renderer.
+ */ var Skin = /*#__PURE__*/ function(EngineObject1) {
+    _inherits(Skin, EngineObject1);
+    function Skin(name) {
+        var _this;
+        _this = EngineObject1.call(this, null) || this;
+        _this.name = name;
+        _this.inverseBindMatrices = new Array();
+        _this._updatedManager = new UpdateFlagManager();
+        _this._bones = new Array();
+        _this._updateMark = -1;
+        _this.joints = [];
+        return _this;
+    }
+    var _proto = Skin.prototype;
+    /**
+   * @internal
+   */ _proto._updateSkinMatrices = function _updateSkinMatrices(renderer) {
+        if (this._updateMark === renderer.engine.time.frameCount) {
+            return;
+        }
+        var _this = this, bones = _this.bones, bindMatrices = _this.inverseBindMatrices, skinMatrices = _this._skinMatrices;
+        var _this_rootBone;
+        var worldToLocal = ((_this_rootBone = this.rootBone) != null ? _this_rootBone : renderer.entity).getInvModelMatrix();
+        for(var i = bones.length - 1; i >= 0; i--){
+            var bone = bones[i];
+            var offset = i * 16;
+            if (bone) {
+                Utils._floatMatrixMultiply(bone.transform.worldMatrix, bindMatrices[i].elements, 0, skinMatrices, offset);
+            } else {
+                skinMatrices.set(bindMatrices[i].elements, offset);
+            }
+            Utils._floatMatrixMultiply(worldToLocal, skinMatrices, offset, skinMatrices, offset);
+        }
+        this._updateMark = renderer.engine.time.frameCount;
+    };
+    /**
+   * @internal
+   */ _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
+        var paths = new Array();
+        // Clone rootBone
+        var rootBone = this.rootBone;
+        if (rootBone) {
+            var success = Entity._getEntityHierarchyPath(srcRoot, rootBone, paths);
+            target.rootBone = success ? Entity._getEntityByHierarchyPath(targetRoot, paths) : rootBone;
+        }
+        // Clone bones
+        var bones = this.bones;
+        if (bones.length > 0) {
+            var boneCount = bones.length;
+            var destBones = new Array(boneCount);
+            for(var i = 0; i < boneCount; i++){
+                var bone = bones[i];
+                var success1 = Entity._getEntityHierarchyPath(srcRoot, bone, paths);
+                destBones[i] = success1 ? Entity._getEntityByHierarchyPath(targetRoot, paths) : bone;
+            }
+            target.bones = destBones;
+        }
+    };
+    _create_class(Skin, [
+        {
+            key: "rootBone",
+            get: /**
+   * Root bone.
+   */ function get() {
+                return this._rootBone;
+            },
+            set: function set(value) {
+                if (this._rootBone !== value) {
+                    this._updatedManager.dispatch(1, value);
+                    this._rootBone = value;
+                }
+            }
+        },
+        {
+            key: "bones",
+            get: /**
+   * Bones of the skin.
+   */ function get() {
+                return this._bones;
+            },
+            set: function set(value) {
+                var _value;
+                var bones = this._bones;
+                var _value_length;
+                var boneCount = (_value_length = (_value = value) == null ? void 0 : _value.length) != null ? _value_length : 0;
+                var lastBoneCount = bones.length;
+                bones.length = boneCount;
+                for(var i = 0; i < boneCount; i++){
+                    bones[i] = value[i];
+                }
+                if (lastBoneCount !== boneCount) {
+                    this._skinMatrices = new Float32Array(boneCount * 16);
+                    this._updatedManager.dispatch(0, boneCount);
+                }
+            }
+        },
+        {
+            key: "skeleton",
+            get: /** @deprecated Please use `rootBone` instead. */ function get() {
+                var _this_rootBone;
+                return (_this_rootBone = this.rootBone) == null ? void 0 : _this_rootBone.name;
+            },
+            set: function set(value) {
+                var rootBone = this._rootBone;
+                if (rootBone) {
+                    rootBone.name = value;
+                }
+            }
+        }
+    ]);
+    return Skin;
+}(EngineObject);
+__decorate([
+    deepClone
+], Skin.prototype, "inverseBindMatrices", void 0);
 __decorate([
     ignoreClone
-], SkinnedMeshRenderer.prototype, "_jointMatrices", void 0);
+], Skin.prototype, "_skinMatrices", void 0);
 __decorate([
     ignoreClone
-], SkinnedMeshRenderer.prototype, "_jointTexture", void 0);
+], Skin.prototype, "_updatedManager", void 0);
 __decorate([
     ignoreClone
-], SkinnedMeshRenderer.prototype, "_bones", void 0);
+], Skin.prototype, "_rootBone", void 0);
 __decorate([
     ignoreClone
-], SkinnedMeshRenderer.prototype, "_condensedBlendShapeWeights", void 0);
+], Skin.prototype, "_bones", void 0);
 __decorate([
     ignoreClone
-], SkinnedMeshRenderer.prototype, "_onLocalBoundsChanged", null);
+], Skin.prototype, "_updateMark", void 0);
+var SkinUpdateFlag;
+(function(SkinUpdateFlag) {
+    SkinUpdateFlag[SkinUpdateFlag["BoneCountChanged"] = 0] = "BoneCountChanged";
+    SkinUpdateFlag[SkinUpdateFlag["RootBoneChanged"] = 1] = "RootBoneChanged";
+})(SkinUpdateFlag || (SkinUpdateFlag = {}));
 
 /**
- * Class pool utils.
- */ var ClassPool = /*#__PURE__*/ function() {
-    function ClassPool(type) {
-        this._elementPoolIndex = 0;
-        this._elementPool = [];
-        this._type = type;
+ * SkinnedMeshRenderer.
+ */ var SkinnedMeshRenderer = /*#__PURE__*/ function(MeshRenderer1) {
+    _inherits(SkinnedMeshRenderer, MeshRenderer1);
+    function SkinnedMeshRenderer(entity) {
+        var _this;
+        _this = MeshRenderer1.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(_assert_this_initialized(_this));
+        _this._onSkinUpdated = _this._onSkinUpdated.bind(_assert_this_initialized(_this));
+        var localBounds = _this._localBounds;
+        // @ts-ignore
+        localBounds.min._onValueChanged = _this._onLocalBoundsChanged;
+        // @ts-ignore
+        localBounds.max._onValueChanged = _this._onLocalBoundsChanged;
+        return _this;
     }
-    var _proto = ClassPool.prototype;
+    var _proto = SkinnedMeshRenderer.prototype;
     /**
-   * Get element from pool.
-   */ _proto.getFromPool = function getFromPool() {
-        var _this = this, index = _this._elementPoolIndex, pool = _this._elementPool;
-        this._elementPoolIndex++;
-        if (pool.length === index) {
-            var element = new this._type();
-            pool.push(element);
-            return element;
-        } else {
-            return pool[index];
+   * @internal
+   */ _proto.update = function update() {
+        var _skin;
+        var skin = this._skin;
+        if (((_skin = skin) == null ? void 0 : _skin.bones.length) > 0) {
+            skin._updateSkinMatrices(this);
         }
     };
-    /**
-   * Reset pool.
-   */ _proto.resetPool = function resetPool() {
-        this._elementPoolIndex = 0;
-    };
-    _proto.garbageCollection = function garbageCollection() {
-        var _this = this, pool = _this._elementPool;
-        for(var i = pool.length - 1; i >= 0; i--){
-            pool[i].dispose && pool[i].dispose();
+    _proto._updateShaderData = function _updateShaderData(context, onlyMVP) {
+        var _skin, _skin1;
+        var _this = this, entity = _this.entity, skin = _this.skin;
+        var _skin_rootBone;
+        var worldMatrix = ((_skin_rootBone = (_skin = skin) == null ? void 0 : _skin.rootBone) != null ? _skin_rootBone : entity).transform.worldMatrix;
+        if (onlyMVP) {
+            this._updateMVPShaderData(context, worldMatrix);
+            return;
         }
-    };
-    return ClassPool;
-}();
-
-var Basic2DBatcher = /*#__PURE__*/ function() {
-    function Basic2DBatcher(engine) {
-        /** @internal */ this._subMeshPool = new ClassPool(SubMesh);
-        /** @internal */ this._batchedQueue = [];
-        /** @internal */ this._meshes = [];
-        /** @internal */ this._meshCount = 1;
-        /** @internal */ this._vertexBuffers = [];
-        /** @internal */ this._indiceBuffers = [];
-        /** @internal */ this._flushId = 0;
-        /** @internal */ this._vertexCount = 0;
-        /** @internal */ this._elementCount = 0;
-        this._engine = engine;
-        this._initMeshes(engine);
-    }
-    var _proto = Basic2DBatcher.prototype;
-    _proto.drawElement = function drawElement(element, camera) {
-        var data = element.data;
-        if (data.multiRenderData) {
-            var charsData = data.charsData;
-            var pool = camera.engine._renderElementPool;
-            for(var i = 0, n = charsData.length; i < n; ++i){
-                var charRenderElement = pool.getFromPool();
-                charRenderElement.set(charsData[i], element.shaderPasses);
-                this._drawSubElement(charRenderElement, camera);
+        this._updateTransformShaderData(context, worldMatrix);
+        var shaderData = this.shaderData;
+        var mesh = this.mesh;
+        var blendShapeManager = mesh._blendShapeManager;
+        blendShapeManager._updateShaderData(shaderData, this);
+        var bones = (_skin1 = skin) == null ? void 0 : _skin1.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
+                // @TODO: different shader type should use different count, not always 44
+                var remainUniformJointCount = Math.ceil((this._maxVertexUniformVectors - (44 + 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);
+                            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);
             }
-        } else {
-            this._drawSubElement(element, camera);
         }
+        var layer = entity.layer;
+        this._rendererLayer.set(layer & 65535, layer >>> 16 & 65535, 0, 0);
     };
     /**
    * @internal
-   * Standalone for canvas 2d renderer plugin.
-   */ _proto._initMeshes = function _initMeshes(engine) {
-        var MAX_VERTEX_COUNT = Basic2DBatcher.MAX_VERTEX_COUNT;
-        this._vertices = new Float32Array(MAX_VERTEX_COUNT * 9);
-        this._indices = new Uint16Array(MAX_VERTEX_COUNT * 3);
-        var _this = this, _meshes = _this._meshes, _meshCount = _this._meshCount;
-        for(var i = 0; i < _meshCount; i++){
-            _meshes[i] = this._createMesh(engine, i);
-        }
+   */ _proto._onDestroy = function _onDestroy() {
+        var _this__jointTexture;
+        MeshRenderer1.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;
     };
-    _proto.flush = function flush(camera) {
-        var batchedQueue = this._batchedQueue;
-        if (batchedQueue.length === 0) {
-            return;
+    /**
+   * @internal
+   */ _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
+        MeshRenderer1.prototype._cloneTo.call(this, target, srcRoot, targetRoot);
+        if (this.skin) {
+            target._applySkin(null, target.skin);
+        }
+        this._blendShapeWeights && (target._blendShapeWeights = this._blendShapeWeights.slice());
+    };
+    /**
+   * @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, rootBone.transform.worldMatrix, worldBounds);
+        } else {
+            MeshRenderer1.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._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
+                break;
+        }
+    };
+    _proto._applySkin = function _applySkin(lastSkin, value) {
+        var _lastSkin_bones, _lastSkin, _lastSkin1, _lastSkin2, _value_bones, _value, _value1, _value2;
+        var _lastSkin_bones_length;
+        var lastSkinBoneCount = (_lastSkin_bones_length = (_lastSkin = 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 = (_lastSkin1 = lastSkin) == null ? void 0 : _lastSkin1.rootBone) != null ? _lastSkin_rootBone : this.entity;
+        (_lastSkin2 = lastSkin) == null ? void 0 : _lastSkin2._updatedManager.removeListener(this._onSkinUpdated);
+        var _value_bones_length;
+        var skinBoneCount = (_value_bones_length = (_value = 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 = (_value1 = value) == null ? void 0 : _value1.rootBone) != null ? _value_rootBone : this.entity;
+        (_value2 = value) == null ? void 0 : _value2._updatedManager.addListener(this._onSkinUpdated);
+        if (lastSkinBoneCount !== skinBoneCount) {
+            this._onSkinUpdated(SkinUpdateFlag.BoneCountChanged, skinBoneCount);
+        }
+        if (lastRootBone !== rootBone) {
+            this._onSkinUpdated(SkinUpdateFlag.RootBoneChanged, rootBone);
+        }
+    };
+    _create_class(SkinnedMeshRenderer, [
+        {
+            key: "skin",
+            get: /**
+   * Skin of the SkinnedMeshRenderer.
+   */ function get() {
+                return this._skin;
+            },
+            set: function set(value) {
+                var lastSkin = this._skin;
+                if (lastSkin !== value) {
+                    this._applySkin(lastSkin, value);
+                    this._skin = value;
+                }
+            }
+        },
+        {
+            key: "blendShapeWeights",
+            get: /**
+   * The weights of the BlendShapes.
+   * @remarks Array index is BlendShape index.
+   */ function get() {
+                this._checkBlendShapeWeightLength();
+                return this._blendShapeWeights;
+            },
+            set: function set(value) {
+                this._checkBlendShapeWeightLength();
+                var blendShapeWeights = this._blendShapeWeights;
+                if (value.length <= blendShapeWeights.length) {
+                    blendShapeWeights.set(value);
+                } else {
+                    for(var i = 0, n = blendShapeWeights.length; i < n; i++){
+                        blendShapeWeights[i] = value[i];
+                    }
+                }
+            }
+        },
+        {
+            key: "localBounds",
+            get: /**
+   * Local bounds.
+   */ function get() {
+                return this._localBounds;
+            },
+            set: function set(value) {
+                if (this._localBounds !== value) {
+                    this._localBounds.copyFrom(value);
+                }
+            }
+        },
+        {
+            key: "rootBone",
+            get: /**
+   * @deprecated use {@link SkinnedMeshRenderer.skin.rootBone} instead.
+   */ function get() {
+                return this.skin.rootBone;
+            },
+            set: function set(value) {
+                this.skin.rootBone = value;
+            }
+        },
+        {
+            key: "bones",
+            get: /**
+   * @deprecated use {@link SkinnedMeshRenderer.skin.bones} instead.
+   */ function get() {
+                return this.skin.bones;
+            },
+            set: function set(value) {
+                this.skin.bones = value;
+            }
+        }
+    ]);
+    return SkinnedMeshRenderer;
+}(MeshRenderer);
+(function() {
+    SkinnedMeshRenderer._jointCountProperty = ShaderProperty.getByName("renderer_JointCount");
+})();
+(function() {
+    SkinnedMeshRenderer._jointSamplerProperty = ShaderProperty.getByName("renderer_JointSampler");
+})();
+(function() {
+    SkinnedMeshRenderer._jointMatrixProperty = ShaderProperty.getByName("renderer_JointMatrix");
+})();
+__decorate([
+    ignoreClone
+], SkinnedMeshRenderer.prototype, "_condensedBlendShapeWeights", void 0);
+__decorate([
+    deepClone
+], SkinnedMeshRenderer.prototype, "_localBounds", void 0);
+__decorate([
+    ignoreClone
+], SkinnedMeshRenderer.prototype, "_jointDataCreateCache", void 0);
+__decorate([
+    ignoreClone
+], SkinnedMeshRenderer.prototype, "_blendShapeWeights", void 0);
+__decorate([
+    ignoreClone
+], SkinnedMeshRenderer.prototype, "_maxVertexUniformVectors", void 0);
+__decorate([
+    ignoreClone
+], SkinnedMeshRenderer.prototype, "_jointTexture", void 0);
+__decorate([
+    deepClone
+], SkinnedMeshRenderer.prototype, "_skin", void 0);
+__decorate([
+    ignoreClone
+], SkinnedMeshRenderer.prototype, "_onLocalBoundsChanged", null);
+__decorate([
+    ignoreClone
+], SkinnedMeshRenderer.prototype, "_onSkinUpdated", null);
+
+/**
+ * Class pool utils.
+ */ var ClassPool = /*#__PURE__*/ function() {
+    function ClassPool(type) {
+        this._elementPoolIndex = 0;
+        this._elementPool = [];
+        this._type = type;
+    }
+    var _proto = ClassPool.prototype;
+    /**
+   * Get element from pool.
+   */ _proto.getFromPool = function getFromPool() {
+        var _this = this, index = _this._elementPoolIndex, pool = _this._elementPool;
+        this._elementPoolIndex++;
+        if (pool.length === index) {
+            var element = new this._type();
+            pool.push(element);
+            return element;
+        } else {
+            return pool[index];
+        }
+    };
+    /**
+   * Reset pool.
+   */ _proto.resetPool = function resetPool() {
+        this._elementPoolIndex = 0;
+    };
+    _proto.garbageCollection = function garbageCollection() {
+        var _this = this, pool = _this._elementPool;
+        for(var i = pool.length - 1; i >= 0; i--){
+            pool[i].dispose && pool[i].dispose();
+        }
+    };
+    return ClassPool;
+}();
+
+var Basic2DBatcher = /*#__PURE__*/ function() {
+    function Basic2DBatcher(engine) {
+        /** @internal */ this._subMeshPool = new ClassPool(SubMesh);
+        /** @internal */ this._batchedQueue = [];
+        /** @internal */ this._meshes = [];
+        /** @internal */ this._meshCount = 1;
+        /** @internal */ this._vertexBuffers = [];
+        /** @internal */ this._indiceBuffers = [];
+        /** @internal */ this._flushId = 0;
+        /** @internal */ this._vertexCount = 0;
+        /** @internal */ this._elementCount = 0;
+        this._engine = engine;
+        this._initMeshes(engine);
+    }
+    var _proto = Basic2DBatcher.prototype;
+    _proto.drawElement = function drawElement(element, camera) {
+        var data = element.data;
+        if (data.multiRenderData) {
+            var charsData = data.charsData;
+            var pool = camera.engine._renderElementPool;
+            for(var i = 0, n = charsData.length; i < n; ++i){
+                var charRenderElement = pool.getFromPool();
+                charRenderElement.set(charsData[i], element.shaderPasses);
+                this._drawSubElement(charRenderElement, camera);
+            }
+        } else {
+            this._drawSubElement(element, camera);
+        }
+    };
+    /**
+   * @internal
+   * Standalone for canvas 2d renderer plugin.
+   */ _proto._initMeshes = function _initMeshes(engine) {
+        var MAX_VERTEX_COUNT = Basic2DBatcher.MAX_VERTEX_COUNT;
+        this._vertices = new Float32Array(MAX_VERTEX_COUNT * 9);
+        this._indices = new Uint16Array(MAX_VERTEX_COUNT * 3);
+        var _this = this, _meshes = _this._meshes, _meshCount = _this._meshCount;
+        for(var i = 0; i < _meshCount; i++){
+            _meshes[i] = this._createMesh(engine, i);
+        }
+    };
+    _proto.flush = function flush(camera) {
+        var batchedQueue = this._batchedQueue;
+        if (batchedQueue.length === 0) {
+            return;
         }
         this._updateData(this._engine);
         this.drawBatches(camera);
@@ -13966,7 +14714,7 @@ var DirtyFlag;
    */ _proto.cloneTo = function cloneTo(target) {
         target.shader = this.shader;
         this.shaderData.cloneTo(target.shaderData);
-        CloneManager.deepCloneObject(this.renderStates, target.renderStates);
+        CloneManager.deepCloneObject(this.renderStates, target.renderStates, new Map());
     };
     _proto._addReferCount = function _addReferCount(value) {
         if (this._destroyed) return;
@@ -14873,904 +15621,255 @@ var BaseMaterial = /*#__PURE__*/ function(Material1) {
             key: "anisotropyTexture",
             get: /**
    * The anisotropy texture.
-   * @remarks
-   * Red and green channels represent the anisotropy direction in [-1, 1] tangent, bitangent space, to be rotated by anisotropyRotation.
-   * The blue channel contains strength as [0, 1] to be multiplied by anisotropy.
-   */ function get() {
-                return this.shaderData.getTexture(PBRMaterial._anisotropyTextureProp);
-            },
-            set: function set(value) {
-                this.shaderData.setTexture(PBRMaterial._anisotropyTextureProp, value);
-                if (value) {
-                    this.shaderData.enableMacro("MATERIAL_HAS_ANISOTROPY_TEXTURE");
-                } else {
-                    this.shaderData.disableMacro("MATERIAL_HAS_ANISOTROPY_TEXTURE");
-                }
-            }
-        }
-    ]);
-    return PBRMaterial;
-}(PBRBaseMaterial);
-(function() {
-    PBRMaterial._metallicProp = ShaderProperty.getByName("material_Metal");
-})();
-(function() {
-    PBRMaterial._roughnessProp = ShaderProperty.getByName("material_Roughness");
-})();
-(function() {
-    PBRMaterial._roughnessMetallicTextureProp = ShaderProperty.getByName("material_RoughnessMetallicTexture");
-})();
-(function() {
-    PBRMaterial._iorProp = ShaderProperty.getByName("material_IOR");
-})();
-(function() {
-    PBRMaterial._anisotropyInfoProp = ShaderProperty.getByName("material_AnisotropyInfo");
-})();
-(function() {
-    PBRMaterial._anisotropyTextureProp = ShaderProperty.getByName("material_AnisotropyTexture");
-})();
-
-/**
- * PBR (Specular-Glossiness Workflow) Material.
- */ var PBRSpecularMaterial = /*#__PURE__*/ function(PBRBaseMaterial1) {
-    _inherits(PBRSpecularMaterial, PBRBaseMaterial1);
-    function PBRSpecularMaterial(engine) {
-        var _this;
-        _this = PBRBaseMaterial1.call(this, engine, Shader.find("pbr-specular")) || this;
-        _this.shaderData.setColor(PBRSpecularMaterial._specularColorProp, new Color(1, 1, 1, 1));
-        _this.shaderData.setFloat(PBRSpecularMaterial._glossinessProp, 1.0);
-        return _this;
-    }
-    var _proto = PBRSpecularMaterial.prototype;
-    /**
-   * @inheritdoc
-   */ _proto.clone = function clone() {
-        var dest = new PBRSpecularMaterial(this._engine);
-        this.cloneTo(dest);
-        return dest;
-    };
-    _create_class(PBRSpecularMaterial, [
-        {
-            key: "specularColor",
-            get: /**
-   * Specular color.
-   */ function get() {
-                return this.shaderData.getColor(PBRSpecularMaterial._specularColorProp);
-            },
-            set: function set(value) {
-                var specularColor = this.shaderData.getColor(PBRSpecularMaterial._specularColorProp);
-                if (value !== specularColor) {
-                    specularColor.copyFrom(value);
-                }
-            }
-        },
-        {
-            key: "glossiness",
-            get: /**
-   * Glossiness.
-   */ function get() {
-                return this.shaderData.getFloat(PBRSpecularMaterial._glossinessProp);
-            },
-            set: function set(value) {
-                this.shaderData.setFloat(PBRSpecularMaterial._glossinessProp, value);
-            }
-        },
-        {
-            key: "specularGlossinessTexture",
-            get: /**
-   * Specular glossiness texture.
-   * @remarks RGB is specular, A is glossiness
-   */ function get() {
-                return this.shaderData.getTexture(PBRSpecularMaterial._specularGlossinessTextureProp);
-            },
-            set: function set(value) {
-                this.shaderData.setTexture(PBRSpecularMaterial._specularGlossinessTextureProp, value);
-                if (value) {
-                    this.shaderData.enableMacro(PBRSpecularMaterial._specularGlossinessTextureMacro);
-                } else {
-                    this.shaderData.disableMacro(PBRSpecularMaterial._specularGlossinessTextureMacro);
-                }
-            }
-        }
-    ]);
-    return PBRSpecularMaterial;
-}(PBRBaseMaterial);
-(function() {
-    PBRSpecularMaterial._specularColorProp = ShaderProperty.getByName("material_PBRSpecularColor");
-})();
-(function() {
-    PBRSpecularMaterial._glossinessProp = ShaderProperty.getByName("material_Glossiness");
-})();
-(function() {
-    PBRSpecularMaterial._specularGlossinessTextureProp = ShaderProperty.getByName("material_SpecularGlossinessTexture");
-})();
-(function() {
-    PBRSpecularMaterial._specularGlossinessTextureMacro = ShaderMacro.getByName("MATERIAL_HAS_SPECULAR_GLOSSINESS_TEXTURE");
-})();
-
-/**
- * Unlit Material.
- */ var UnlitMaterial = /*#__PURE__*/ function(BaseMaterial1) {
-    _inherits(UnlitMaterial, BaseMaterial1);
-    function UnlitMaterial(engine) {
-        var _this;
-        _this = BaseMaterial1.call(this, engine, Shader.find("unlit")) || this;
-        var shaderData = _this.shaderData;
-        shaderData.enableMacro("MATERIAL_OMIT_NORMAL");
-        shaderData.enableMacro("MATERIAL_NEED_TILING_OFFSET");
-        shaderData.setColor(UnlitMaterial._baseColorProp, new Color(1, 1, 1, 1));
-        shaderData.setVector4(UnlitMaterial._tilingOffsetProp, new Vector4(1, 1, 0, 0));
-        return _this;
-    }
-    var _proto = UnlitMaterial.prototype;
-    /**
-   * @inheritdoc
-   */ _proto.clone = function clone() {
-        var dest = new UnlitMaterial(this._engine);
-        this.cloneTo(dest);
-        return dest;
-    };
-    _create_class(UnlitMaterial, [
-        {
-            key: "baseColor",
-            get: /**
-   * Base color.
-   */ function get() {
-                return this.shaderData.getColor(UnlitMaterial._baseColorProp);
-            },
-            set: function set(value) {
-                var baseColor = this.shaderData.getColor(UnlitMaterial._baseColorProp);
-                if (value !== baseColor) {
-                    baseColor.copyFrom(value);
-                }
-            }
-        },
-        {
-            key: "baseTexture",
-            get: /**
-   * Base texture.
-   */ function get() {
-                return this.shaderData.getTexture(UnlitMaterial._baseTextureProp);
-            },
-            set: function set(value) {
-                this.shaderData.setTexture(UnlitMaterial._baseTextureProp, value);
-                if (value) {
-                    this.shaderData.enableMacro(UnlitMaterial._baseTextureMacro);
-                } else {
-                    this.shaderData.disableMacro(UnlitMaterial._baseTextureMacro);
-                }
-            }
-        },
-        {
-            key: "tilingOffset",
-            get: /**
-   * Tiling and offset of main textures.
-   */ function get() {
-                return this.shaderData.getVector4(UnlitMaterial._tilingOffsetProp);
-            },
-            set: function set(value) {
-                var tilingOffset = this.shaderData.getVector4(UnlitMaterial._tilingOffsetProp);
-                if (value !== tilingOffset) {
-                    tilingOffset.copyFrom(value);
-                }
-            }
-        }
-    ]);
-    return UnlitMaterial;
-}(BaseMaterial);
-
-/**
- * @internal
- */ var BasicResources = /*#__PURE__*/ function() {
-    function BasicResources(engine) {
-        // prettier-ignore
-        var vertices = new Float32Array([
-            -1,
-            -1,
-            0,
-            1,
-            1,
-            -1,
-            1,
-            1,
-            -1,
-            1,
-            0,
-            0,
-            1,
-            1,
-            1,
-            0
-        ]); // right-top
-        // prettier-ignore
-        var flipYVertices = new Float32Array([
-            1,
-            -1,
-            1,
-            0,
-            -1,
-            -1,
-            0,
-            0,
-            1,
-            1,
-            1,
-            1,
-            -1,
-            1,
-            0,
-            1
-        ]); // left-top
-        var blitMaterial = new Material(engine, Shader.find("blit"));
-        blitMaterial._addReferCount(1);
-        blitMaterial.renderState.depthState.enabled = false;
-        blitMaterial.renderState.depthState.writeEnabled = false;
-        this.blitMesh = this._createBlitMesh(engine, vertices);
-        this.flipYBlitMesh = this._createBlitMesh(engine, flipYVertices);
-        this.blitMaterial = blitMaterial;
-    }
-    var _proto = BasicResources.prototype;
-    _proto._createBlitMesh = function _createBlitMesh(engine, vertices) {
-        var mesh = new ModelMesh(engine);
-        mesh._addReferCount(1);
-        mesh.setVertexElements([
-            new VertexElement("POSITION_UV", 0, VertexElementFormat.Vector4, 0)
-        ]);
-        mesh.setVertexBufferBinding(new Buffer(engine, BufferBindFlag.VertexBuffer, vertices, BufferUsage.Static), 16);
-        mesh.addSubMesh(0, 4, MeshTopology.TriangleStrip);
-        return mesh;
-    };
-    return BasicResources;
-}();
-
-/**
- * Layer, used for bit operations.
- */ var Layer;
-(function(Layer) {
-    Layer[Layer[/** Layer 0. */ "Layer0"] = 0x1] = "Layer0";
-    Layer[Layer[/** Layer 1. */ "Layer1"] = 0x2] = "Layer1";
-    Layer[Layer[/** Layer 2. */ "Layer2"] = 0x4] = "Layer2";
-    Layer[Layer[/** Layer 3. */ "Layer3"] = 0x8] = "Layer3";
-    Layer[Layer[/** Layer 4. */ "Layer4"] = 0x10] = "Layer4";
-    Layer[Layer[/** Layer 5. */ "Layer5"] = 0x20] = "Layer5";
-    Layer[Layer[/** Layer 6. */ "Layer6"] = 0x40] = "Layer6";
-    Layer[Layer[/** Layer 7. */ "Layer7"] = 0x80] = "Layer7";
-    Layer[Layer[/** Layer 8. */ "Layer8"] = 0x100] = "Layer8";
-    Layer[Layer[/** Layer 9. */ "Layer9"] = 0x200] = "Layer9";
-    Layer[Layer[/** Layer 10. */ "Layer10"] = 0x400] = "Layer10";
-    Layer[Layer[/** Layer 11. */ "Layer11"] = 0x800] = "Layer11";
-    Layer[Layer[/** Layer 12. */ "Layer12"] = 0x1000] = "Layer12";
-    Layer[Layer[/** Layer 13. */ "Layer13"] = 0x2000] = "Layer13";
-    Layer[Layer[/** Layer 14. */ "Layer14"] = 0x4000] = "Layer14";
-    Layer[Layer[/** Layer 15. */ "Layer15"] = 0x8000] = "Layer15";
-    Layer[Layer[/** Layer 16. */ "Layer16"] = 0x10000] = "Layer16";
-    Layer[Layer[/** Layer 17. */ "Layer17"] = 0x20000] = "Layer17";
-    Layer[Layer[/** Layer 18. */ "Layer18"] = 0x40000] = "Layer18";
-    Layer[Layer[/** Layer 19. */ "Layer19"] = 0x80000] = "Layer19";
-    Layer[Layer[/** Layer 20. */ "Layer20"] = 0x100000] = "Layer20";
-    Layer[Layer[/** Layer 21. */ "Layer21"] = 0x200000] = "Layer21";
-    Layer[Layer[/** Layer 22. */ "Layer22"] = 0x400000] = "Layer22";
-    Layer[Layer[/** Layer 23. */ "Layer23"] = 0x800000] = "Layer23";
-    Layer[Layer[/** Layer 24. */ "Layer24"] = 0x1000000] = "Layer24";
-    Layer[Layer[/** Layer 25. */ "Layer25"] = 0x2000000] = "Layer25";
-    Layer[Layer[/** Layer 26. */ "Layer26"] = 0x4000000] = "Layer26";
-    Layer[Layer[/** Layer 27. */ "Layer27"] = 0x8000000] = "Layer27";
-    Layer[Layer[/** Layer 28. */ "Layer28"] = 0x10000000] = "Layer28";
-    Layer[Layer[/** Layer 29. */ "Layer29"] = 0x20000000] = "Layer29";
-    Layer[Layer[/** Layer 30. */ "Layer30"] = 0x40000000] = "Layer30";
-    Layer[Layer[/** Layer 31. */ "Layer31"] = 0x80000000] = "Layer31";
-    Layer[Layer[/** All layers. */ "Everything"] = 0xffffffff] = "Everything";
-    Layer[Layer[/** None layer. */ "Nothing"] = 0x0] = "Nothing";
-})(Layer || (Layer = {}));
-
-var ComponentCloner = /*#__PURE__*/ function() {
-    function ComponentCloner() {}
-    /**
-   * Clone component.
-   * @param source - Clone source
-   * @param target - Clone target
-   */ ComponentCloner.cloneComponent = function cloneComponent(source, target, srcRoot, targetRoot) {
-        var cloneModes = CloneManager.getCloneMode(source.constructor);
-        for(var k in source){
-            CloneManager.cloneProperty(source, target, k, cloneModes[k]);
-        }
-        if (source._cloneTo) {
-            source._cloneTo(target, srcRoot, targetRoot);
-        }
-    };
-    return ComponentCloner;
-}();
-
-/**
- * Entity, be used as components container.
- */ var Entity = /*#__PURE__*/ function(EngineObject1) {
-    _inherits(Entity, EngineObject1);
-    function Entity(engine, name) {
-        var _this;
-        _this = EngineObject1.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;
-        _this._parent = null;
-        //--------------------------------------------------------------deprecated----------------------------------------------------------------
-        _this._invModelMatrix = new Matrix();
-        _this.name = name;
-        _this.transform = _this.addComponent(Transform);
-        _this._inverseWorldMatFlag = _this.transform.registerWorldChangeFlag();
-        return _this;
-    }
-    var _proto = Entity.prototype;
-    /**
-   * Add component based on the component type.
-   * @param type - The type of the component
-   * @returns	The component which has been added
-   */ _proto.addComponent = function addComponent(type) {
-        ComponentsDependencies._addCheck(this, type);
-        var component = new type(this);
-        this._components.push(component);
-        component._setActive(true, ActiveChangeFlag.All);
-        return component;
-    };
-    /**
-   * Get component which match the type.
-   * @param type - The type of the component
-   * @returns	The first component which match type
-   */ _proto.getComponent = function getComponent(type) {
-        var components = this._components;
-        for(var i = 0, n = components.length; i < n; i++){
-            var component = components[i];
-            if (_instanceof(component, type)) {
-                return component;
-            }
-        }
-        return null;
-    };
-    /**
-   * Get components which match the type.
-   * @param type - The type of the component
-   * @param results - The components which match type
-   * @returns	The components which match type
-   */ _proto.getComponents = function getComponents(type, results) {
-        results.length = 0;
-        var components = this._components;
-        for(var i = 0, n = components.length; i < n; i++){
-            var component = components[i];
-            if (_instanceof(component, type)) {
-                results.push(component);
-            }
-        }
-        return results;
-    };
-    /**
-   * Get the components which match the type of the entity and it's children.
-   * @param type - The component type
-   * @param results - The components collection
-   * @returns	The components collection which match the type
-   */ _proto.getComponentsIncludeChildren = function getComponentsIncludeChildren(type, results) {
-        results.length = 0;
-        this._getComponentsInChildren(type, results);
-        return results;
-    };
-    _proto.addChild = function addChild(indexOrChild, child) {
-        var index;
-        if (typeof indexOrChild === "number") {
-            index = indexOrChild;
-        } else {
-            index = undefined;
-            child = indexOrChild;
-        }
-        if (child._isRoot) {
-            child._scene._removeFromEntityList(child);
-            child._isRoot = false;
-            this._addToChildrenList(index, child);
-            child._parent = this;
-            var oldScene = child._scene;
-            var newScene = this._scene;
-            var inActiveChangeFlag = ActiveChangeFlag.None;
-            if (!this._isActiveInHierarchy) {
-                child._isActiveInHierarchy && (inActiveChangeFlag |= ActiveChangeFlag.Hierarchy);
-            }
-            if (child._isActiveInScene) {
-                if (this._isActiveInScene) {
-                    // Cross scene should inActive first and then active
-                    oldScene !== newScene && (inActiveChangeFlag |= ActiveChangeFlag.Scene);
-                } else {
-                    inActiveChangeFlag |= ActiveChangeFlag.Scene;
-                }
-            }
-            inActiveChangeFlag && child._processInActive(inActiveChangeFlag);
-            if (child._scene !== newScene) {
-                Entity._traverseSetOwnerScene(child, newScene);
-            }
-            var activeChangeFlag = ActiveChangeFlag.None;
-            if (child._isActive) {
-                if (this._isActiveInHierarchy) {
-                    !child._isActiveInHierarchy && (activeChangeFlag |= ActiveChangeFlag.Hierarchy);
-                }
-                if (this._isActiveInScene) {
-                    (!child._isActiveInScene || oldScene !== newScene) && (activeChangeFlag |= ActiveChangeFlag.Scene);
-                }
-            }
-            activeChangeFlag && child._processActive(activeChangeFlag);
-            child._setTransformDirty();
-        } else {
-            child._setParent(this, index);
-        }
-    };
-    /**
-   * Remove child entity.
-   * @param child - The child entity which want to be removed
-   */ _proto.removeChild = function removeChild(child) {
-        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 fo the entity eg: /entity
-   * @returns The component which be found
-   */ _proto.findByPath = function findByPath(path) {
-        var splits = path.split("/");
-        var entity = this;
-        for(var i = 0, length = splits.length; i < length; ++i){
-            var split = splits[i];
-            if (split) {
-                entity = Entity._findChildByName(entity, split);
-                if (!entity) {
-                    return null;
-                }
-            }
-        }
-        return entity;
-    };
-    /**
-   * Create child entity.
-   * @param name - The child entity's name
-   * @returns The child entity
-   */ _proto.createChild = function createChild(name) {
-        var child = 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.
-   * @returns Cloned entity
-   */ _proto.clone = function clone() {
-        var cloneEntity = this._createCloneEntity(this);
-        this._parseCloneEntity(this, cloneEntity, this, cloneEntity);
-        return cloneEntity;
-    };
-    /**
-   * @internal
-   */ _proto._markAsTemplate = function _markAsTemplate(templateResource) {
-        this._isTemplate = true;
-        this._templateResource = templateResource;
-    };
-    _proto._createCloneEntity = function _createCloneEntity(srcEntity) {
-        var cloneEntity = new Entity(srcEntity._engine, srcEntity.name);
-        var templateResource = this._templateResource;
-        if (templateResource) {
-            cloneEntity._templateResource = templateResource;
-            templateResource._addReferCount(1);
-        }
-        cloneEntity.layer = srcEntity.layer;
-        cloneEntity._isActive = srcEntity._isActive;
-        var cloneTransform = cloneEntity.transform;
-        var srcTransform = srcEntity.transform;
-        cloneTransform.position = srcTransform.position;
-        cloneTransform.rotation = srcTransform.rotation;
-        cloneTransform.scale = srcTransform.scale;
-        var children = srcEntity._children;
-        for(var i = 0, n = srcEntity._children.length; i < n; i++){
-            cloneEntity.addChild(this._createCloneEntity(children[i]));
-        }
-        return cloneEntity;
-    };
-    _proto._parseCloneEntity = function _parseCloneEntity(srcEntity, targetEntity, srcRoot, targetRoot) {
-        var srcChildren = srcEntity._children;
-        var targetChildren = targetEntity._children;
-        for(var i = 0, n = srcChildren.length; i < n; i++){
-            this._parseCloneEntity(srcChildren[i], targetChildren[i], srcRoot, targetRoot);
-        }
-        var components = srcEntity._components;
-        for(var i1 = 0, n1 = components.length; i1 < n1; i1++){
-            var sourceComp = components[i1];
-            if (!_instanceof(sourceComp, Transform)) {
-                var targetComp = targetEntity.addComponent(sourceComp.constructor);
-                ComponentCloner.cloneComponent(sourceComp, targetComp, srcRoot, targetRoot);
-            }
-        }
-    };
-    /**
-   * Destroy self.
-   */ _proto.destroy = function destroy() {
-        if (this._destroyed) {
-            return;
-        }
-        EngineObject1.prototype.destroy.call(this);
-        if (this._templateResource) {
-            this._isTemplate || this._templateResource._addReferCount(-1);
-            this._templateResource = null;
-        }
-        var components = this._components;
-        for(var i = components.length - 1; i >= 0; i--){
-            components[i].destroy();
-        }
-        this._components.length = 0;
-        var children = this._children;
-        while(children.length > 0){
-            children[0].destroy();
-        }
-        if (this._isRoot) {
-            this._scene.removeRootEntity(this);
-        } else {
-            this._setParent(null);
-        }
-        this.isActive = false;
-    };
-    /**
-   * @internal
-   */ _proto._removeComponent = function _removeComponent(component) {
-        ComponentsDependencies._removeCheck(this, component.constructor);
-        var components = this._components;
-        components.splice(components.indexOf(component), 1);
-    };
-    /**
-   * @internal
-   */ _proto._addScript = function _addScript(script) {
-        script._entityScriptsIndex = this._scripts.length;
-        this._scripts.add(script);
-    };
-    /**
-   * @internal
-   */ _proto._removeScript = function _removeScript(script) {
-        var replaced = this._scripts.deleteByIndex(script._entityScriptsIndex);
-        replaced && (replaced._entityScriptsIndex = script._entityScriptsIndex);
-        script._entityScriptsIndex = -1;
-    };
-    /**
-   * @internal
-   */ _proto._removeFromParent = function _removeFromParent() {
-        var oldParent = this._parent;
-        if (oldParent != null) {
-            var oldSibling = oldParent._children;
-            var index = this._siblingIndex;
-            oldSibling.splice(index, 1);
-            for(var n = oldSibling.length; index < n; index++){
-                oldSibling[index]._siblingIndex--;
-            }
-            this._parent = null;
-            this._siblingIndex = -1;
-        }
-    };
-    /**
-   * @internal
-   */ _proto._processActive = function _processActive(activeChangeFlag) {
-        if (this._activeChangedComponents) {
-            throw "Note: can't set the 'main inActive entity' active in hierarchy, if the operation is in main inActive entity or it's children script's onDisable Event.";
-        }
-        this._activeChangedComponents = this._scene._componentsManager.getActiveChangedTempList();
-        this._setActiveInHierarchy(this._activeChangedComponents, activeChangeFlag);
-        this._setActiveComponents(true, activeChangeFlag);
-    };
-    /**
-   * @internal
-   */ _proto._processInActive = function _processInActive(activeChangeFlag) {
-        if (this._activeChangedComponents) {
-            throw "Note: can't set the 'main active entity' inActive in hierarchy, if the operation is in main active entity or it's children script's onEnable Event.";
-        }
-        this._activeChangedComponents = this._scene._componentsManager.getActiveChangedTempList();
-        this._setInActiveInHierarchy(this._activeChangedComponents, activeChangeFlag);
-        this._setActiveComponents(false, activeChangeFlag);
-    };
-    _proto._addToChildrenList = function _addToChildrenList(index, child) {
-        var children = this._children;
-        var childCount = children.length;
-        if (index === undefined) {
-            child._siblingIndex = childCount;
-            children.push(child);
-        } else {
-            if (index < 0 || index > childCount) {
-                throw "The index " + index + " is out of child list bounds " + childCount;
-            }
-            child._siblingIndex = index;
-            children.splice(index, 0, child);
-            for(var i = index + 1, n = childCount + 1; i < n; i++){
-                children[i]._siblingIndex++;
-            }
-        }
-    };
-    _proto._setParent = function _setParent(parent, siblingIndex) {
-        var oldParent = this._parent;
-        if (parent !== oldParent) {
-            this._removeFromParent();
-            this._parent = parent;
-            if (parent) {
-                parent._addToChildrenList(siblingIndex, this);
-                var oldScene = this._scene;
-                var parentScene = parent._scene;
-                var inActiveChangeFlag = ActiveChangeFlag.None;
-                if (!parent._isActiveInHierarchy) {
-                    this._isActiveInHierarchy && (inActiveChangeFlag |= ActiveChangeFlag.Hierarchy);
-                }
-                if (parent._isActiveInScene) {
-                    // cross scene should inActive first and then active
-                    this._isActiveInScene && oldScene !== parentScene && (inActiveChangeFlag |= ActiveChangeFlag.Scene);
-                } else {
-                    this._isActiveInScene && (inActiveChangeFlag |= ActiveChangeFlag.Scene);
-                }
-                inActiveChangeFlag && this._processInActive(inActiveChangeFlag);
-                if (oldScene !== parentScene) {
-                    Entity._traverseSetOwnerScene(this, parentScene);
-                }
-                var activeChangeFlag = ActiveChangeFlag.None;
-                if (this._isActive) {
-                    if (parent._isActiveInHierarchy) {
-                        !this._isActiveInHierarchy && (activeChangeFlag |= ActiveChangeFlag.Hierarchy);
-                    }
-                    if (parent._isActiveInScene) {
-                        (!this._isActiveInScene || oldScene !== parentScene) && (activeChangeFlag |= ActiveChangeFlag.Scene);
-                    }
-                }
-                activeChangeFlag && this._processActive(activeChangeFlag);
-            } else {
-                var inActiveChangeFlag1 = ActiveChangeFlag.None;
-                this._isActiveInHierarchy && (inActiveChangeFlag1 |= ActiveChangeFlag.Hierarchy);
-                this._isActiveInScene && (inActiveChangeFlag1 |= ActiveChangeFlag.Scene);
-                inActiveChangeFlag1 && this._processInActive(inActiveChangeFlag1);
-                if (oldParent) {
-                    Entity._traverseSetOwnerScene(this, null);
-                }
-            }
-            this._setTransformDirty();
-        }
-    };
-    _proto._getComponentsInChildren = function _getComponentsInChildren(type, results) {
-        for(var i = this._components.length - 1; i >= 0; i--){
-            var component = this._components[i];
-            if (_instanceof(component, type)) {
-                results.push(component);
-            }
-        }
-        for(var i1 = this._children.length - 1; i1 >= 0; i1--){
-            this._children[i1]._getComponentsInChildren(type, results);
-        }
-    };
-    _proto._setActiveComponents = function _setActiveComponents(isActive, activeChangeFlag) {
-        var activeChangedComponents = this._activeChangedComponents;
-        for(var i = 0, length = activeChangedComponents.length; i < length; ++i){
-            activeChangedComponents[i]._setActive(isActive, activeChangeFlag);
-        }
-        this._scene._componentsManager.putActiveChangedTempList(activeChangedComponents);
-        this._activeChangedComponents = null;
-    };
-    _proto._setActiveInHierarchy = function _setActiveInHierarchy(activeChangedComponents, activeChangeFlag) {
-        activeChangeFlag & ActiveChangeFlag.Hierarchy && (this._isActiveInHierarchy = true);
-        activeChangeFlag & ActiveChangeFlag.Scene && (this._isActiveInScene = true);
-        var components = this._components;
-        for(var i = 0, n = components.length; i < n; i++){
-            var component = components[i];
-            (component.enabled || !component._awoken) && activeChangedComponents.push(component);
-        }
-        var children = this._children;
-        for(var i1 = 0, n1 = children.length; i1 < n1; i1++){
-            var child = children[i1];
-            child.isActive && child._setActiveInHierarchy(activeChangedComponents, activeChangeFlag);
-        }
-    };
-    _proto._setInActiveInHierarchy = function _setInActiveInHierarchy(activeChangedComponents, activeChangeFlag) {
-        activeChangeFlag & ActiveChangeFlag.Hierarchy && (this._isActiveInHierarchy = false);
-        activeChangeFlag & ActiveChangeFlag.Scene && (this._isActiveInScene = false);
-        var components = this._components;
-        for(var i = 0, n = components.length; i < n; i++){
-            var component = components[i];
-            component.enabled && activeChangedComponents.push(component);
-        }
-        var children = this._children;
-        for(var i1 = 0, n1 = children.length; i1 < n1; i1++){
-            var child = children[i1];
-            child.isActive && child._setInActiveInHierarchy(activeChangedComponents, activeChangeFlag);
-        }
-    };
-    _proto._setTransformDirty = function _setTransformDirty() {
-        if (this.transform) {
-            this.transform._parentChange();
-        } else {
-            for(var i = 0, len = this._children.length; i < len; i++){
-                this._children[i]._setTransformDirty();
-            }
-        }
-    };
-    _proto._setSiblingIndex = function _setSiblingIndex(sibling, target) {
-        target = Math.min(target, sibling.length - 1);
-        if (target < 0) {
-            throw "Sibling index " + target + " should large than 0";
-        }
-        if (this._siblingIndex !== target) {
-            var oldIndex = this._siblingIndex;
-            if (target < oldIndex) {
-                for(var i = oldIndex; i >= target; i--){
-                    var child = i == target ? this : sibling[i - 1];
-                    sibling[i] = child;
-                    child._siblingIndex = i;
-                }
-            } else {
-                for(var i1 = oldIndex; i1 <= target; i1++){
-                    var child1 = i1 == target ? this : sibling[i1 + 1];
-                    sibling[i1] = child1;
-                    child1._siblingIndex = i1;
-                }
-            }
-        }
-    };
-    /**
-   * @deprecated
-   */ _proto.getInvModelMatrix = function getInvModelMatrix() {
-        if (this._inverseWorldMatFlag.flag) {
-            Matrix.invert(this.transform.worldMatrix, this._invModelMatrix);
-            this._inverseWorldMatFlag.flag = false;
-        }
-        return this._invModelMatrix;
-    };
-    /**
-   * @internal
-   */ Entity._findChildByName = function _findChildByName(root, name) {
-        var children = root._children;
-        for(var i = children.length - 1; i >= 0; i--){
-            var child = children[i];
-            if (child.name === name) {
-                return child;
-            }
-        }
-        return null;
-    };
-    /**
-   * @internal
-   */ Entity._traverseSetOwnerScene = function _traverseSetOwnerScene(entity, scene) {
-        entity._scene = scene;
-        var children = entity._children;
-        for(var i = children.length - 1; i >= 0; i--){
-            this._traverseSetOwnerScene(children[i], scene);
-        }
-    };
-    _create_class(Entity, [
-        {
-            key: "isActive",
-            get: /**
-   * Whether to activate locally.
+   * @remarks
+   * Red and green channels represent the anisotropy direction in [-1, 1] tangent, bitangent space, to be rotated by anisotropyRotation.
+   * The blue channel contains strength as [0, 1] to be multiplied by anisotropy.
    */ function get() {
-                return this._isActive;
+                return this.shaderData.getTexture(PBRMaterial._anisotropyTextureProp);
             },
             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 {
-                            var _parent, _parent1;
-                            ((_parent = parent) == null ? void 0 : _parent._isActiveInHierarchy) && (activeChangeFlag |= ActiveChangeFlag.Hierarchy);
-                            ((_parent1 = parent) == null ? void 0 : _parent1._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);
-                    }
+                this.shaderData.setTexture(PBRMaterial._anisotropyTextureProp, value);
+                if (value) {
+                    this.shaderData.enableMacro("MATERIAL_HAS_ANISOTROPY_TEXTURE");
+                } else {
+                    this.shaderData.disableMacro("MATERIAL_HAS_ANISOTROPY_TEXTURE");
                 }
             }
-        },
+        }
+    ]);
+    return PBRMaterial;
+}(PBRBaseMaterial);
+(function() {
+    PBRMaterial._metallicProp = ShaderProperty.getByName("material_Metal");
+})();
+(function() {
+    PBRMaterial._roughnessProp = ShaderProperty.getByName("material_Roughness");
+})();
+(function() {
+    PBRMaterial._roughnessMetallicTextureProp = ShaderProperty.getByName("material_RoughnessMetallicTexture");
+})();
+(function() {
+    PBRMaterial._iorProp = ShaderProperty.getByName("material_IOR");
+})();
+(function() {
+    PBRMaterial._anisotropyInfoProp = ShaderProperty.getByName("material_AnisotropyInfo");
+})();
+(function() {
+    PBRMaterial._anisotropyTextureProp = ShaderProperty.getByName("material_AnisotropyTexture");
+})();
+
+/**
+ * PBR (Specular-Glossiness Workflow) Material.
+ */ var PBRSpecularMaterial = /*#__PURE__*/ function(PBRBaseMaterial1) {
+    _inherits(PBRSpecularMaterial, PBRBaseMaterial1);
+    function PBRSpecularMaterial(engine) {
+        var _this;
+        _this = PBRBaseMaterial1.call(this, engine, Shader.find("pbr-specular")) || this;
+        _this.shaderData.setColor(PBRSpecularMaterial._specularColorProp, new Color(1, 1, 1, 1));
+        _this.shaderData.setFloat(PBRSpecularMaterial._glossinessProp, 1.0);
+        return _this;
+    }
+    var _proto = PBRSpecularMaterial.prototype;
+    /**
+   * @inheritdoc
+   */ _proto.clone = function clone() {
+        var dest = new PBRSpecularMaterial(this._engine);
+        this.cloneTo(dest);
+        return dest;
+    };
+    _create_class(PBRSpecularMaterial, [
         {
-            key: "isActiveInHierarchy",
+            key: "specularColor",
             get: /**
-   * Whether it is active in the hierarchy.
+   * Specular color.
    */ function get() {
-                return this._isActiveInHierarchy;
+                return this.shaderData.getColor(PBRSpecularMaterial._specularColorProp);
+            },
+            set: function set(value) {
+                var specularColor = this.shaderData.getColor(PBRSpecularMaterial._specularColorProp);
+                if (value !== specularColor) {
+                    specularColor.copyFrom(value);
+                }
             }
         },
         {
-            key: "parent",
+            key: "glossiness",
             get: /**
-   * The parent entity.
+   * Glossiness.
    */ function get() {
-                return this._parent;
+                return this.shaderData.getFloat(PBRSpecularMaterial._glossinessProp);
             },
             set: function set(value) {
-                this._setParent(value);
+                this.shaderData.setFloat(PBRSpecularMaterial._glossinessProp, value);
             }
         },
         {
-            key: "children",
+            key: "specularGlossinessTexture",
             get: /**
-   * The children entities
+   * Specular glossiness texture.
+   * @remarks RGB is specular, A is glossiness
    */ function get() {
-                return this._children;
+                return this.shaderData.getTexture(PBRSpecularMaterial._specularGlossinessTextureProp);
+            },
+            set: function set(value) {
+                this.shaderData.setTexture(PBRSpecularMaterial._specularGlossinessTextureProp, value);
+                if (value) {
+                    this.shaderData.enableMacro(PBRSpecularMaterial._specularGlossinessTextureMacro);
+                } else {
+                    this.shaderData.disableMacro(PBRSpecularMaterial._specularGlossinessTextureMacro);
+                }
             }
-        },
+        }
+    ]);
+    return PBRSpecularMaterial;
+}(PBRBaseMaterial);
+(function() {
+    PBRSpecularMaterial._specularColorProp = ShaderProperty.getByName("material_PBRSpecularColor");
+})();
+(function() {
+    PBRSpecularMaterial._glossinessProp = ShaderProperty.getByName("material_Glossiness");
+})();
+(function() {
+    PBRSpecularMaterial._specularGlossinessTextureProp = ShaderProperty.getByName("material_SpecularGlossinessTexture");
+})();
+(function() {
+    PBRSpecularMaterial._specularGlossinessTextureMacro = ShaderMacro.getByName("MATERIAL_HAS_SPECULAR_GLOSSINESS_TEXTURE");
+})();
+
+/**
+ * Unlit Material.
+ */ var UnlitMaterial = /*#__PURE__*/ function(BaseMaterial1) {
+    _inherits(UnlitMaterial, BaseMaterial1);
+    function UnlitMaterial(engine) {
+        var _this;
+        _this = BaseMaterial1.call(this, engine, Shader.find("unlit")) || this;
+        var shaderData = _this.shaderData;
+        shaderData.enableMacro("MATERIAL_OMIT_NORMAL");
+        shaderData.enableMacro("MATERIAL_NEED_TILING_OFFSET");
+        shaderData.setColor(UnlitMaterial._baseColorProp, new Color(1, 1, 1, 1));
+        shaderData.setVector4(UnlitMaterial._tilingOffsetProp, new Vector4(1, 1, 0, 0));
+        return _this;
+    }
+    var _proto = UnlitMaterial.prototype;
+    /**
+   * @inheritdoc
+   */ _proto.clone = function clone() {
+        var dest = new UnlitMaterial(this._engine);
+        this.cloneTo(dest);
+        return dest;
+    };
+    _create_class(UnlitMaterial, [
         {
-            key: "childCount",
+            key: "baseColor",
             get: /**
-   * @deprecated Please use `children.length` property instead.
-   * Number of the children entities
+   * Base color.
    */ function get() {
-                return this._children.length;
+                return this.shaderData.getColor(UnlitMaterial._baseColorProp);
+            },
+            set: function set(value) {
+                var baseColor = this.shaderData.getColor(UnlitMaterial._baseColorProp);
+                if (value !== baseColor) {
+                    baseColor.copyFrom(value);
+                }
             }
         },
         {
-            key: "scene",
+            key: "baseTexture",
             get: /**
-   * The scene the entity belongs to.
+   * Base texture.
    */ function get() {
-                return this._scene;
+                return this.shaderData.getTexture(UnlitMaterial._baseTextureProp);
+            },
+            set: function set(value) {
+                this.shaderData.setTexture(UnlitMaterial._baseTextureProp, value);
+                if (value) {
+                    this.shaderData.enableMacro(UnlitMaterial._baseTextureMacro);
+                } else {
+                    this.shaderData.disableMacro(UnlitMaterial._baseTextureMacro);
+                }
             }
         },
         {
-            key: "siblingIndex",
+            key: "tilingOffset",
             get: /**
-   * The sibling index.
+   * Tiling and offset of main textures.
    */ function get() {
-                return this._siblingIndex;
+                return this.shaderData.getVector4(UnlitMaterial._tilingOffsetProp);
             },
             set: function set(value) {
-                if (this._siblingIndex === -1) {
-                    throw "The entity " + this.name + " is not in the hierarchy";
+                var tilingOffset = this.shaderData.getVector4(UnlitMaterial._tilingOffsetProp);
+                if (value !== tilingOffset) {
+                    tilingOffset.copyFrom(value);
                 }
-                this._setSiblingIndex(this._isRoot ? this._scene._rootEntities : this._parent._children, value);
             }
         }
     ]);
-    return Entity;
-}(EngineObject);
+    return UnlitMaterial;
+}(BaseMaterial);
+
+/**
+ * @internal
+ */ var BasicResources = /*#__PURE__*/ function() {
+    function BasicResources(engine) {
+        // prettier-ignore
+        var vertices = new Float32Array([
+            -1,
+            -1,
+            0,
+            1,
+            1,
+            -1,
+            1,
+            1,
+            -1,
+            1,
+            0,
+            0,
+            1,
+            1,
+            1,
+            0
+        ]); // right-top
+        // prettier-ignore
+        var flipYVertices = new Float32Array([
+            1,
+            -1,
+            1,
+            0,
+            -1,
+            -1,
+            0,
+            0,
+            1,
+            1,
+            1,
+            1,
+            -1,
+            1,
+            0,
+            1
+        ]); // left-top
+        var blitMaterial = new Material(engine, Shader.find("blit"));
+        blitMaterial._addReferCount(1);
+        blitMaterial.renderState.depthState.enabled = false;
+        blitMaterial.renderState.depthState.writeEnabled = false;
+        this.blitMesh = this._createBlitMesh(engine, vertices);
+        this.flipYBlitMesh = this._createBlitMesh(engine, flipYVertices);
+        this.blitMaterial = blitMaterial;
+    }
+    var _proto = BasicResources.prototype;
+    _proto._createBlitMesh = function _createBlitMesh(engine, vertices) {
+        var mesh = new ModelMesh(engine);
+        mesh._addReferCount(1);
+        mesh.setVertexElements([
+            new VertexElement("POSITION_UV", 0, VertexElementFormat.Vector4, 0)
+        ]);
+        mesh.setVertexBufferBinding(new Buffer(engine, BufferBindFlag.VertexBuffer, vertices, BufferUsage.Static), 16);
+        mesh.addSubMesh(0, 4, MeshTopology.TriangleStrip);
+        return mesh;
+    };
+    return BasicResources;
+}();
 
 /**
  * @internal