@galacean/engine 1.2.0-beta.4 → 1.2.0-beta.6

package/dist/browser.js

@@ -5232,7 +5232,7 @@
             }
             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;
             }
@@ -5268,22 +5268,33 @@
                             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;
                 }
@@ -5292,9 +5303,9 @@
                 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;
@@ -8836,6 +8847,7 @@
             var program = this._glProgram;
             var uniformInfos = this._getUniformInfos();
             var attributeInfos = this._getAttributeInfos();
+            var basicResources = this._engine._basicResources;
             uniformInfos.forEach(function(param) {
                 var name1 = param.name, size = param.size, type = param.type;
                 var shaderUniform = new ShaderUniform(_this._engine);
@@ -8929,16 +8941,16 @@
                         var defaultTexture;
                         switch(type){
                             case gl.SAMPLER_2D:
-                                defaultTexture = _this._engine._magentaTexture2D;
+                                defaultTexture = basicResources.whiteTexture2D;
                                 break;
                             case gl.SAMPLER_CUBE:
-                                defaultTexture = _this._engine._magentaTextureCube;
+                                defaultTexture = basicResources.whiteTextureCube;
                                 break;
                             case gl.UNSIGNED_INT_SAMPLER_2D:
-                                defaultTexture = _this._engine._uintMagentaTexture2D;
+                                defaultTexture = basicResources.uintWhiteTexture2D;
                                 break;
                             case gl.SAMPLER_2D_ARRAY:
-                                defaultTexture = _this._engine._magentaTexture2DArray;
+                                defaultTexture = basicResources.whiteTexture2DArray;
                                 break;
                             case gl.SAMPLER_2D_SHADOW:
                                 defaultTexture = _this._engine._depthTexture2D;
@@ -10429,7 +10441,7 @@
             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;
@@ -11248,14 +11260,15 @@
             }
             this._endLoop(swapFn);
         };
-        _proto.forEachAndClean = function forEachAndClean(callbackFn) {
+        _proto.forEachAndClean = function forEachAndClean(callbackFn, swapFn) {
             this._startLoop();
+            var preEnd = this.length;
             var elements = this._elements;
-            for(var i = 0, n = this.length; i < n; i++){
+            for(var i = 0, n = preEnd; i < n; i++){
                 var element = elements[i];
                 element && callbackFn(element);
             }
-            this._endLoopAndClear();
+            this._endLoopAndClean(preEnd, elements, swapFn);
         };
         _proto.sort = function sort(compareFn) {
             Utils._quickSort(this._elements, 0, this.length, compareFn);
@@ -11288,9 +11301,17 @@
                 this._blankCount = 0;
             }
         };
-        _proto._endLoopAndClear = function _endLoopAndClear() {
+        _proto._endLoopAndClean = function _endLoopAndClean(preEnd, elements, swapFn) {
+            var index = 0;
+            for(var i = preEnd, n = this.length; i < n; i++){
+                var element = elements[i];
+                if (!element) continue;
+                elements[index] = element;
+                swapFn(element, index);
+                index++;
+            }
             this._isLooping = false;
-            this.length = 0;
+            this.length = index;
             this._blankCount = 0;
         };
         return DisorderedArray;
@@ -15764,266 +15785,735 @@
         PrimitiveMesh._spherePoleIdx = 0;
     })();
     /**
-     * Mesh skin data, equal glTF skins define
-     */ var Skin = /*#__PURE__*/ function(EngineObject1) {
-        var Skin = function Skin(name1) {
-            var _this;
-            _this = EngineObject1.call(this, null) || this;
-            _this.name = name1;
-            _this._bones = [];
-            _this.inverseBindMatrices = []; // inverse bind matrix array
-            _this.joints = []; // joints name array, element type: string
-            _this.skeleton = "none"; // root bone name
-            return _this;
+     * Layer, used for bit operations.
+     */ exports.Layer = void 0;
+    (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";
+    })(exports.Layer || (exports.Layer = {}));
+    var ComponentCloner = /*#__PURE__*/ function() {
+        var ComponentCloner = 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);
+            }
         };
-        _inherits$2(Skin, EngineObject1);
-        return Skin;
-    }(EngineObject);
+        return ComponentCloner;
+    }();
     /**
-     * SkinnedMeshRenderer.
-     */ var SkinnedMeshRenderer = /*#__PURE__*/ function(MeshRenderer1) {
-        var SkinnedMeshRenderer = function SkinnedMeshRenderer(entity) {
+     * Entity, be used as components container.
+     */ var Entity = /*#__PURE__*/ function(EngineObject1) {
+        var Entity = function Entity(engine, name1) {
             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 = exports.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 = name1;
+            _this.transform = _this.addComponent(Transform);
+            _this._inverseWorldMatFlag = _this.transform.registerWorldChangeFlag();
             return _this;
         };
-        _inherits$2(SkinnedMeshRenderer, MeshRenderer1);
-        var _proto = SkinnedMeshRenderer.prototype;
+        _inherits$2(Entity, EngineObject1);
+        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 (_instanceof1$2(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 (_instanceof1$2(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, exports.TextureFormat.R32G32B32A32, false);
-                                this._jointTexture.filterMode = exports.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(name1) {
+            if (name1 === 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(name1);
+                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(name1) {
+            var child = new Entity(this.engine, name1);
+            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 (!_instanceof1$2(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$2(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];
-                        }
-                    }
+        /**
+       * @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: "localBounds",
-                get: /**
-       * Local bounds.
-       */ function get() {
-                    return this._localBounds;
-                },
-                set: function set(value) {
-                    if (this._localBounds !== value) {
-                        this._localBounds.copyFrom(value);
+                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 (_instanceof1$2(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, name1) {
+            var children = root._children;
+            for(var i = children.length - 1; i >= 0; i--){
+                var child = children[i];
+                if (child.name === name1) {
+                    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$2(Entity, [
+            {
+                key: "isActive",
+                get: /**
+       * Whether to activate locally.
+       */ function get() {
+                    return this._isActive;
+                },
+                set: function set(value) {
+                    if (value !== this._isActive) {
+                        this._isActive = value;
+                        if (value) {
+                            var parent = this._parent;
+                            var activeChangeFlag = ActiveChangeFlag.None;
+                            if (this._isRoot && this._scene._isActiveInEngine) {
+                                activeChangeFlag |= ActiveChangeFlag.All;
+                            } else {
+                                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);
+                        }
                     }
                 }
             },
+            {
+                key: "isActiveInHierarchy",
+                get: /**
+       * Whether it is active in the hierarchy.
+       */ function get() {
+                    return this._isActiveInHierarchy;
+                }
+            },
+            {
+                key: "parent",
+                get: /**
+       * The parent entity.
+       */ function get() {
+                    return this._parent;
+                },
+                set: function set(value) {
+                    this._setParent(value);
+                }
+            },
+            {
+                key: "children",
+                get: /**
+       * The children entities
+       */ function get() {
+                    return this._children;
+                }
+            },
+            {
+                key: "childCount",
+                get: /**
+       * @deprecated Please use `children.length` property instead.
+       * Number of the children entities
+       */ function get() {
+                    return this._children.length;
+                }
+            },
+            {
+                key: "scene",
+                get: /**
+       * The scene the entity belongs to.
+       */ function get() {
+                    return this._scene;
+                }
+            },
+            {
+                key: "siblingIndex",
+                get: /**
+       * The sibling index.
+       */ function get() {
+                    return this._siblingIndex;
+                },
+                set: function set(value) {
+                    if (this._siblingIndex === -1) {
+                        throw "The entity " + this.name + " is not in the hierarchy";
+                    }
+                    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) {
+        var Skin = function Skin(name1) {
+            var _this;
+            _this = EngineObject1.call(this, null) || this;
+            _this.name = name1;
+            _this.inverseBindMatrices = new Array();
+            _this._updatedManager = new UpdateFlagManager();
+            _this._bones = new Array();
+            _this._updateMark = -1;
+            _this.joints = [];
+            return _this;
+        };
+        _inherits$2(Skin, EngineObject1);
+        var _proto = Skin.prototype;
+        /**
+       * @internal
+       */ _proto._updateSkinMatrices = function _updateSkinMatrices(renderer) {
+            if (this._updateMark === renderer.engine.time.frameCount) {
+                return;
+            }
+            var _this = this, bones = _this.bones, bindMatrices = _this.inverseBindMatrices, skinMatrices = _this._skinMatrices;
+            var _this_rootBone;
+            var worldToLocal = ((_this_rootBone = this.rootBone) != null ? _this_rootBone : renderer.entity).getInvModelMatrix();
+            for(var i = bones.length - 1; i >= 0; i--){
+                var bone = bones[i];
+                var offset = i * 16;
+                if (bone) {
+                    Utils._floatMatrixMultiply(bone.transform.worldMatrix, bindMatrices[i].elements, 0, skinMatrices, offset);
+                } else {
+                    skinMatrices.set(bindMatrices[i].elements, offset);
+                }
+                Utils._floatMatrixMultiply(worldToLocal, skinMatrices, offset, skinMatrices, offset);
+            }
+            this._updateMark = renderer.engine.time.frameCount;
+        };
+        /**
+       * @internal
+       */ _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
+            var paths = new Array();
+            // Clone rootBone
+            var rootBone = this.rootBone;
+            if (rootBone) {
+                var success = Entity._getEntityHierarchyPath(srcRoot, rootBone, paths);
+                target.rootBone = success ? Entity._getEntityByHierarchyPath(targetRoot, paths) : rootBone;
+            }
+            // Clone bones
+            var bones = this.bones;
+            if (bones.length > 0) {
+                var boneCount = bones.length;
+                var destBones = new Array(boneCount);
+                for(var i = 0; i < boneCount; i++){
+                    var bone = bones[i];
+                    var success1 = Entity._getEntityHierarchyPath(srcRoot, bone, paths);
+                    destBones[i] = success1 ? Entity._getEntityByHierarchyPath(targetRoot, paths) : bone;
+                }
+                target.bones = destBones;
+            }
+        };
+        _create_class$2(Skin, [
             {
                 key: "rootBone",
                 get: /**
@@ -16033,203 +16523,468 @@
                 },
                 set: function set(value) {
                     if (this._rootBone !== value) {
-                        this._unRegisterEntityTransformListener();
+                        this._updatedManager.dispatch(1, value);
                         this._rootBone = value;
-                        this._registerEntityTransformListener();
-                        this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
                     }
                 }
             },
             {
                 key: "bones",
                 get: /**
-       * Bones of the SkinnedMeshRenderer.
+       * Bones of the skin.
        */ function get() {
                     return this._bones;
                 },
                 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);
-                            } else {
-                                this._jointMatrices = null;
-                                shaderData.disableMacro("RENDERER_HAS_SKIN");
-                            }
-                        }
-                        this._bones = 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: "skin",
-                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.
-       */ function get() {
-                    return this._skin;
+                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) {
-                    this._skin = value;
+                    var rootBone = this._rootBone;
+                    if (rootBone) {
+                        rootBone.name = 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");
-    })();
+        return Skin;
+    }(EngineObject);
     __decorate$1([
         deepClone
-    ], SkinnedMeshRenderer.prototype, "_localBounds", void 0);
-    __decorate$1([
-        ignoreClone
-    ], SkinnedMeshRenderer.prototype, "_jointDataCreateCache", void 0);
-    __decorate$1([
-        ignoreClone
-    ], SkinnedMeshRenderer.prototype, "_blendShapeWeights", void 0);
-    __decorate$1([
-        ignoreClone
-    ], SkinnedMeshRenderer.prototype, "_maxVertexUniformVectors", void 0);
-    __decorate$1([
-        ignoreClone
-    ], SkinnedMeshRenderer.prototype, "_rootBone", void 0);
+    ], Skin.prototype, "inverseBindMatrices", void 0);
     __decorate$1([
         ignoreClone
-    ], SkinnedMeshRenderer.prototype, "_jointMatrices", void 0);
+    ], Skin.prototype, "_skinMatrices", void 0);
     __decorate$1([
         ignoreClone
-    ], SkinnedMeshRenderer.prototype, "_jointTexture", void 0);
+    ], Skin.prototype, "_updatedManager", void 0);
     __decorate$1([
         ignoreClone
-    ], SkinnedMeshRenderer.prototype, "_bones", void 0);
+    ], Skin.prototype, "_rootBone", void 0);
     __decorate$1([
         ignoreClone
-    ], SkinnedMeshRenderer.prototype, "_condensedBlendShapeWeights", void 0);
+    ], Skin.prototype, "_bones", void 0);
     __decorate$1([
         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() {
-        var ClassPool = function ClassPool(type) {
-            this._elementPoolIndex = 0;
-            this._elementPool = [];
-            this._type = type;
+     * SkinnedMeshRenderer.
+     */ var SkinnedMeshRenderer = /*#__PURE__*/ function(MeshRenderer1) {
+        var SkinnedMeshRenderer = 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;
+        _inherits$2(SkinnedMeshRenderer, MeshRenderer1);
+        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() {
-        var Basic2DBatcher = 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, exports.TextureFormat.R32G32B32A32, false);
+                                this._jointTexture.filterMode = exports.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;
-            }
-            this._updateData(this._engine);
-            this.drawBatches(camera);
-            if (!Basic2DBatcher._canUploadSameBuffer) {
-                this._flushId++;
+        /**
+       * @internal
+       */ _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
+            MeshRenderer1.prototype._cloneTo.call(this, target, srcRoot, targetRoot);
+            if (this.skin) {
+                target._applySkin(null, target.skin);
             }
-            batchedQueue.length = 0;
-            this._subMeshPool.resetPool();
-            this._vertexCount = 0;
-            this._elementCount = 0;
+            this._blendShapeWeights && (target._blendShapeWeights = this._blendShapeWeights.slice());
         };
-        _proto.clear = function clear() {
-            this._flushId = 0;
-            this._vertexCount = 0;
-            this._elementCount = 0;
-            this._batchedQueue.length = 0;
+        /**
+       * @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.destroy = function destroy() {
-            this._batchedQueue = null;
-            var _this = this, meshes = _this._meshes, vertexBuffers = _this._vertexBuffers, indiceBuffers = _this._indiceBuffers;
-            for(var i = 0, n = meshes.length; i < n; ++i){
+        _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$2(SkinnedMeshRenderer, [
+            {
+                key: "skin",
+                get: /**
+       * Skin of the SkinnedMeshRenderer.
+       */ function get() {
+                    return this._skin;
+                },
+                set: function set(value) {
+                    var lastSkin = this._skin;
+                    if (lastSkin !== value) {
+                        this._applySkin(lastSkin, value);
+                        this._skin = value;
+                    }
+                }
+            },
+            {
+                key: "blendShapeWeights",
+                get: /**
+       * The weights of the BlendShapes.
+       * @remarks Array index is BlendShape index.
+       */ function get() {
+                    this._checkBlendShapeWeightLength();
+                    return this._blendShapeWeights;
+                },
+                set: function set(value) {
+                    this._checkBlendShapeWeightLength();
+                    var blendShapeWeights = this._blendShapeWeights;
+                    if (value.length <= blendShapeWeights.length) {
+                        blendShapeWeights.set(value);
+                    } else {
+                        for(var i = 0, n = blendShapeWeights.length; i < n; i++){
+                            blendShapeWeights[i] = value[i];
+                        }
+                    }
+                }
+            },
+            {
+                key: "localBounds",
+                get: /**
+       * Local bounds.
+       */ function get() {
+                    return this._localBounds;
+                },
+                set: function set(value) {
+                    if (this._localBounds !== value) {
+                        this._localBounds.copyFrom(value);
+                    }
+                }
+            },
+            {
+                key: "rootBone",
+                get: /**
+       * @deprecated use {@link SkinnedMeshRenderer.skin.rootBone} instead.
+       */ function get() {
+                    return this.skin.rootBone;
+                },
+                set: function set(value) {
+                    this.skin.rootBone = value;
+                }
+            },
+            {
+                key: "bones",
+                get: /**
+       * @deprecated use {@link SkinnedMeshRenderer.skin.bones} instead.
+       */ function get() {
+                    return this.skin.bones;
+                },
+                set: function set(value) {
+                    this.skin.bones = value;
+                }
+            }
+        ]);
+        return SkinnedMeshRenderer;
+    }(MeshRenderer);
+    (function() {
+        SkinnedMeshRenderer._jointCountProperty = ShaderProperty.getByName("renderer_JointCount");
+    })();
+    (function() {
+        SkinnedMeshRenderer._jointSamplerProperty = ShaderProperty.getByName("renderer_JointSampler");
+    })();
+    (function() {
+        SkinnedMeshRenderer._jointMatrixProperty = ShaderProperty.getByName("renderer_JointMatrix");
+    })();
+    __decorate$1([
+        ignoreClone
+    ], SkinnedMeshRenderer.prototype, "_condensedBlendShapeWeights", void 0);
+    __decorate$1([
+        deepClone
+    ], SkinnedMeshRenderer.prototype, "_localBounds", void 0);
+    __decorate$1([
+        ignoreClone
+    ], SkinnedMeshRenderer.prototype, "_jointDataCreateCache", void 0);
+    __decorate$1([
+        ignoreClone
+    ], SkinnedMeshRenderer.prototype, "_blendShapeWeights", void 0);
+    __decorate$1([
+        ignoreClone
+    ], SkinnedMeshRenderer.prototype, "_maxVertexUniformVectors", void 0);
+    __decorate$1([
+        ignoreClone
+    ], SkinnedMeshRenderer.prototype, "_jointTexture", void 0);
+    __decorate$1([
+        deepClone
+    ], SkinnedMeshRenderer.prototype, "_skin", void 0);
+    __decorate$1([
+        ignoreClone
+    ], SkinnedMeshRenderer.prototype, "_onLocalBoundsChanged", null);
+    __decorate$1([
+        ignoreClone
+    ], SkinnedMeshRenderer.prototype, "_onSkinUpdated", null);
+    /**
+     * Class pool utils.
+     */ var ClassPool = /*#__PURE__*/ function() {
+        var ClassPool = 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() {
+        var Basic2DBatcher = 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);
+            if (!Basic2DBatcher._canUploadSameBuffer) {
+                this._flushId++;
+            }
+            batchedQueue.length = 0;
+            this._subMeshPool.resetPool();
+            this._vertexCount = 0;
+            this._elementCount = 0;
+        };
+        _proto.clear = function clear() {
+            this._flushId = 0;
+            this._vertexCount = 0;
+            this._elementCount = 0;
+            this._batchedQueue.length = 0;
+        };
+        _proto.destroy = function destroy() {
+            this._batchedQueue = null;
+            var _this = this, meshes = _this._meshes, vertexBuffers = _this._vertexBuffers, indiceBuffers = _this._indiceBuffers;
+            for(var i = 0, n = meshes.length; i < n; ++i){
                 var mesh = meshes[i];
                 mesh._addReferCount(-1);
                 mesh.destroy();
@@ -18757,7 +19512,7 @@
        */ _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;
@@ -19513,1044 +20268,473 @@
                     }
                 }
             }
-        ]);
-        return PBRBaseMaterial;
-    }(BaseMaterial);
-    (function() {
-        PBRBaseMaterial._occlusionTextureIntensityProp = ShaderProperty.getByName("material_OcclusionIntensity");
-    })();
-    (function() {
-        PBRBaseMaterial._occlusionTextureCoordProp = ShaderProperty.getByName("material_OcclusionTextureCoord");
-    })();
-    (function() {
-        PBRBaseMaterial._occlusionTextureProp = ShaderProperty.getByName("material_OcclusionTexture");
-    })();
-    (function() {
-        PBRBaseMaterial._clearCoatProp = ShaderProperty.getByName("material_ClearCoat");
-    })();
-    (function() {
-        PBRBaseMaterial._clearCoatTextureProp = ShaderProperty.getByName("material_ClearCoatTexture");
-    })();
-    (function() {
-        PBRBaseMaterial._clearCoatRoughnessProp = ShaderProperty.getByName("material_ClearCoatRoughness");
-    })();
-    (function() {
-        PBRBaseMaterial._clearCoatRoughnessTextureProp = ShaderProperty.getByName("material_ClearCoatRoughnessTexture");
-    })();
-    (function() {
-        PBRBaseMaterial._clearCoatNormalTextureProp = ShaderProperty.getByName("material_ClearCoatNormalTexture");
-    })();
-    /**
-     * PBR (Metallic-Roughness Workflow) Material.
-     */ var PBRMaterial = /*#__PURE__*/ function(PBRBaseMaterial1) {
-        _inherits$2(PBRMaterial, PBRBaseMaterial1);
-        function PBRMaterial(engine) {
-            var _this;
-            _this = PBRBaseMaterial1.call(this, engine, Shader.find("pbr")) || this;
-            _this._anisotropyRotation = 0;
-            var shaderData = _this.shaderData;
-            shaderData.setFloat(PBRMaterial._metallicProp, 1);
-            shaderData.setFloat(PBRMaterial._roughnessProp, 1);
-            shaderData.setFloat(PBRMaterial._iorProp, 1.5);
-            shaderData.setVector3(PBRMaterial._anisotropyInfoProp, new Vector3(1, 0, 0));
-            return _this;
-        }
-        var _proto = PBRMaterial.prototype;
-        /**
-       * @inheritdoc
-       */ _proto.clone = function clone() {
-            var dest = new PBRMaterial(this._engine);
-            this.cloneTo(dest);
-            return dest;
-        };
-        _create_class$2(PBRMaterial, [
-            {
-                key: "ior",
-                get: /**
-       * Index Of Refraction.
-       * @defaultValue `1.5`
-       */ function get() {
-                    return this.shaderData.getFloat(PBRMaterial._iorProp);
-                },
-                set: function set(v) {
-                    this.shaderData.setFloat(PBRMaterial._iorProp, Math.max(v, 0));
-                }
-            },
-            {
-                key: "metallic",
-                get: /**
-       * Metallic.
-       * @defaultValue `1.0`
-       */ function get() {
-                    return this.shaderData.getFloat(PBRMaterial._metallicProp);
-                },
-                set: function set(value) {
-                    this.shaderData.setFloat(PBRMaterial._metallicProp, value);
-                }
-            },
-            {
-                key: "roughness",
-                get: /**
-       * Roughness. default 1.0.
-       * @defaultValue `1.0`
-       */ function get() {
-                    return this.shaderData.getFloat(PBRMaterial._roughnessProp);
-                },
-                set: function set(value) {
-                    this.shaderData.setFloat(PBRMaterial._roughnessProp, value);
-                }
-            },
-            {
-                key: "roughnessMetallicTexture",
-                get: /**
-       * Roughness metallic texture.
-       * @remarks G channel is roughness, B channel is metallic
-       */ function get() {
-                    return this.shaderData.getTexture(PBRMaterial._roughnessMetallicTextureProp);
-                },
-                set: function set(value) {
-                    this.shaderData.setTexture(PBRMaterial._roughnessMetallicTextureProp, value);
-                    if (value) {
-                        this.shaderData.enableMacro("MATERIAL_HAS_ROUGHNESS_METALLIC_TEXTURE");
-                    } else {
-                        this.shaderData.disableMacro("MATERIAL_HAS_ROUGHNESS_METALLIC_TEXTURE");
-                    }
-                }
-            },
-            {
-                key: "anisotropy",
-                get: /**
-       * The strength of anisotropy, when anisotropyTexture is present, this value is multiplied by the blue channel.
-       * @defaultValue `0`
-       */ function get() {
-                    return this.shaderData.getVector3(PBRMaterial._anisotropyInfoProp).z;
-                },
-                set: function set(value) {
-                    var anisotropyInfo = this.shaderData.getVector3(PBRMaterial._anisotropyInfoProp);
-                    if (!!anisotropyInfo.z !== !!value) {
-                        if (value === 0) {
-                            this.shaderData.disableMacro("MATERIAL_ENABLE_ANISOTROPY");
-                        } else {
-                            this.shaderData.enableMacro("MATERIAL_ENABLE_ANISOTROPY");
-                        }
-                    }
-                    anisotropyInfo.z = value;
-                }
-            },
-            {
-                key: "anisotropyRotation",
-                get: /**
-       * The rotation of the anisotropy in tangent, bitangent space, value in degrees.
-       * @defaultValue `0`
-       */ function get() {
-                    return this._anisotropyRotation;
-                },
-                set: function set(value) {
-                    if (this._anisotropyRotation !== value) {
-                        this._anisotropyRotation = value;
-                        var anisotropyInfo = this.shaderData.getVector3(PBRMaterial._anisotropyInfoProp);
-                        var rad = MathUtil.degreeToRadFactor * value;
-                        anisotropyInfo.x = Math.cos(rad);
-                        anisotropyInfo.y = Math.sin(rad);
-                    }
-                }
-            },
-            {
-                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$2(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$2(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$2(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$2(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() {
-        var BasicResources = 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, exports.VertexElementFormat.Vector4, 0)
-            ]);
-            mesh.setVertexBufferBinding(new Buffer(engine, exports.BufferBindFlag.VertexBuffer, vertices, exports.BufferUsage.Static), 16);
-            mesh.addSubMesh(0, 4, exports.MeshTopology.TriangleStrip);
-            return mesh;
-        };
-        return BasicResources;
-    }();
-    /**
-     * Layer, used for bit operations.
-     */ exports.Layer = void 0;
-    (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";
-    })(exports.Layer || (exports.Layer = {}));
-    var ComponentCloner = /*#__PURE__*/ function() {
-        var ComponentCloner = 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) {
-        var Entity = function Entity(engine, name1) {
-            var _this;
-            _this = EngineObject1.call(this, engine) || this;
-            /** The layer the entity belongs to. */ _this.layer = exports.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 = name1;
-            _this.transform = _this.addComponent(Transform);
-            _this._inverseWorldMatFlag = _this.transform.registerWorldChangeFlag();
-            return _this;
-        };
-        _inherits$2(Entity, EngineObject1);
-        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 (_instanceof1$2(component, type)) {
-                    return component;
-                }
-            }
-            return null;
-        };
-        /**
-       * Get components which match the type.
-       * @param type - The type of the component
-       * @param results - The components which match type
-       * @returns	The components which match type
-       */ _proto.getComponents = function getComponents(type, results) {
-            results.length = 0;
-            var components = this._components;
-            for(var i = 0, n = components.length; i < n; i++){
-                var component = components[i];
-                if (_instanceof1$2(component, type)) {
-                    results.push(component);
-                }
-            }
-            return results;
-        };
-        /**
-       * Get the components which match the type of the entity and it's children.
-       * @param type - The component type
-       * @param results - The components collection
-       * @returns	The components collection which match the type
-       */ _proto.getComponentsIncludeChildren = function getComponentsIncludeChildren(type, results) {
-            results.length = 0;
-            this._getComponentsInChildren(type, results);
-            return results;
-        };
-        _proto.addChild = function addChild(indexOrChild, child) {
-            var index;
-            if (typeof indexOrChild === "number") {
-                index = indexOrChild;
-            } else {
-                index = undefined;
-                child = indexOrChild;
-            }
-            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(name1) {
-            if (name1 === this.name) {
-                return this;
-            }
-            var children = this._children;
-            for(var i = 0, n = children.length; i < n; i++){
-                var target = children[i].findByName(name1);
-                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(name1) {
-            var child = new Entity(this.engine, name1);
-            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 (!_instanceof1$2(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 (_instanceof1$2(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, name1) {
-            var children = root._children;
-            for(var i = children.length - 1; i >= 0; i--){
-                var child = children[i];
-                if (child.name === name1) {
-                    return child;
-                }
-            }
-            return null;
-        };
+        ]);
+        return PBRBaseMaterial;
+    }(BaseMaterial);
+    (function() {
+        PBRBaseMaterial._occlusionTextureIntensityProp = ShaderProperty.getByName("material_OcclusionIntensity");
+    })();
+    (function() {
+        PBRBaseMaterial._occlusionTextureCoordProp = ShaderProperty.getByName("material_OcclusionTextureCoord");
+    })();
+    (function() {
+        PBRBaseMaterial._occlusionTextureProp = ShaderProperty.getByName("material_OcclusionTexture");
+    })();
+    (function() {
+        PBRBaseMaterial._clearCoatProp = ShaderProperty.getByName("material_ClearCoat");
+    })();
+    (function() {
+        PBRBaseMaterial._clearCoatTextureProp = ShaderProperty.getByName("material_ClearCoatTexture");
+    })();
+    (function() {
+        PBRBaseMaterial._clearCoatRoughnessProp = ShaderProperty.getByName("material_ClearCoatRoughness");
+    })();
+    (function() {
+        PBRBaseMaterial._clearCoatRoughnessTextureProp = ShaderProperty.getByName("material_ClearCoatRoughnessTexture");
+    })();
+    (function() {
+        PBRBaseMaterial._clearCoatNormalTextureProp = ShaderProperty.getByName("material_ClearCoatNormalTexture");
+    })();
+    /**
+     * PBR (Metallic-Roughness Workflow) Material.
+     */ var PBRMaterial = /*#__PURE__*/ function(PBRBaseMaterial1) {
+        _inherits$2(PBRMaterial, PBRBaseMaterial1);
+        function PBRMaterial(engine) {
+            var _this;
+            _this = PBRBaseMaterial1.call(this, engine, Shader.find("pbr")) || this;
+            _this._anisotropyRotation = 0;
+            var shaderData = _this.shaderData;
+            shaderData.setFloat(PBRMaterial._metallicProp, 1);
+            shaderData.setFloat(PBRMaterial._roughnessProp, 1);
+            shaderData.setFloat(PBRMaterial._iorProp, 1.5);
+            shaderData.setVector3(PBRMaterial._anisotropyInfoProp, new Vector3(1, 0, 0));
+            return _this;
+        }
+        var _proto = PBRMaterial.prototype;
         /**
-       * @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);
-            }
+       * @inheritdoc
+       */ _proto.clone = function clone() {
+            var dest = new PBRMaterial(this._engine);
+            this.cloneTo(dest);
+            return dest;
         };
-        _create_class$2(Entity, [
+        _create_class$2(PBRMaterial, [
             {
-                key: "isActive",
+                key: "ior",
                 get: /**
-       * Whether to activate locally.
+       * Index Of Refraction.
+       * @defaultValue `1.5`
        */ function get() {
-                    return this._isActive;
+                    return this.shaderData.getFloat(PBRMaterial._iorProp);
+                },
+                set: function set(v) {
+                    this.shaderData.setFloat(PBRMaterial._iorProp, Math.max(v, 0));
+                }
+            },
+            {
+                key: "metallic",
+                get: /**
+       * Metallic.
+       * @defaultValue `1.0`
+       */ function get() {
+                    return this.shaderData.getFloat(PBRMaterial._metallicProp);
                 },
                 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);
+                    this.shaderData.setFloat(PBRMaterial._metallicProp, value);
+                }
+            },
+            {
+                key: "roughness",
+                get: /**
+       * Roughness. default 1.0.
+       * @defaultValue `1.0`
+       */ function get() {
+                    return this.shaderData.getFloat(PBRMaterial._roughnessProp);
+                },
+                set: function set(value) {
+                    this.shaderData.setFloat(PBRMaterial._roughnessProp, value);
+                }
+            },
+            {
+                key: "roughnessMetallicTexture",
+                get: /**
+       * Roughness metallic texture.
+       * @remarks G channel is roughness, B channel is metallic
+       */ function get() {
+                    return this.shaderData.getTexture(PBRMaterial._roughnessMetallicTextureProp);
+                },
+                set: function set(value) {
+                    this.shaderData.setTexture(PBRMaterial._roughnessMetallicTextureProp, value);
+                    if (value) {
+                        this.shaderData.enableMacro("MATERIAL_HAS_ROUGHNESS_METALLIC_TEXTURE");
+                    } else {
+                        this.shaderData.disableMacro("MATERIAL_HAS_ROUGHNESS_METALLIC_TEXTURE");
+                    }
+                }
+            },
+            {
+                key: "anisotropy",
+                get: /**
+       * The strength of anisotropy, when anisotropyTexture is present, this value is multiplied by the blue channel.
+       * @defaultValue `0`
+       */ function get() {
+                    return this.shaderData.getVector3(PBRMaterial._anisotropyInfoProp).z;
+                },
+                set: function set(value) {
+                    var anisotropyInfo = this.shaderData.getVector3(PBRMaterial._anisotropyInfoProp);
+                    if (!!anisotropyInfo.z !== !!value) {
+                        if (value === 0) {
+                            this.shaderData.disableMacro("MATERIAL_ENABLE_ANISOTROPY");
                         } else {
-                            var activeChangeFlag1 = ActiveChangeFlag.None;
-                            this._isActiveInHierarchy && (activeChangeFlag1 |= ActiveChangeFlag.Hierarchy);
-                            this._isActiveInScene && (activeChangeFlag1 |= ActiveChangeFlag.Scene);
-                            activeChangeFlag1 && this._processInActive(activeChangeFlag1);
+                            this.shaderData.enableMacro("MATERIAL_ENABLE_ANISOTROPY");
                         }
                     }
+                    anisotropyInfo.z = value;
                 }
             },
             {
-                key: "isActiveInHierarchy",
+                key: "anisotropyRotation",
                 get: /**
-       * Whether it is active in the hierarchy.
+       * The rotation of the anisotropy in tangent, bitangent space, value in degrees.
+       * @defaultValue `0`
        */ function get() {
-                    return this._isActiveInHierarchy;
+                    return this._anisotropyRotation;
+                },
+                set: function set(value) {
+                    if (this._anisotropyRotation !== value) {
+                        this._anisotropyRotation = value;
+                        var anisotropyInfo = this.shaderData.getVector3(PBRMaterial._anisotropyInfoProp);
+                        var rad = MathUtil.degreeToRadFactor * value;
+                        anisotropyInfo.x = Math.cos(rad);
+                        anisotropyInfo.y = Math.sin(rad);
+                    }
                 }
             },
             {
-                key: "parent",
+                key: "anisotropyTexture",
                 get: /**
-       * The parent entity.
+       * 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._parent;
+                    return this.shaderData.getTexture(PBRMaterial._anisotropyTextureProp);
                 },
                 set: function set(value) {
-                    this._setParent(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$2(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$2(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: "children",
+                key: "glossiness",
                 get: /**
-       * The children entities
+       * Glossiness.
        */ function get() {
-                    return this._children;
+                    return this.shaderData.getFloat(PBRSpecularMaterial._glossinessProp);
+                },
+                set: function set(value) {
+                    this.shaderData.setFloat(PBRSpecularMaterial._glossinessProp, value);
                 }
             },
             {
-                key: "childCount",
+                key: "specularGlossinessTexture",
                 get: /**
-       * @deprecated Please use `children.length` property instead.
-       * Number of the children entities
+       * Specular glossiness texture.
+       * @remarks RGB is specular, A is glossiness
        */ function get() {
-                    return this._children.length;
+                    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$2(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$2(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: "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() {
+        var BasicResources = 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;
+            // Create white and magenta textures
+            var whitePixel = new Uint8Array([
+                255,
+                255,
+                255,
+                255
+            ]);
+            this.whiteTexture2D = this._create1x1Texture(engine, 0, exports.TextureFormat.R8G8B8A8, whitePixel);
+            this.whiteTextureCube = this._create1x1Texture(engine, 1, exports.TextureFormat.R8G8B8A8, whitePixel);
+            var isWebGL2 = engine._hardwareRenderer.isWebGL2;
+            if (isWebGL2) {
+                this.whiteTexture2DArray = this._create1x1Texture(engine, 2, exports.TextureFormat.R8G8B8A8, whitePixel);
+                var whitePixel32 = new Uint32Array([
+                    255,
+                    255,
+                    255,
+                    255
+                ]);
+                this.uintWhiteTexture2D = this._create1x1Texture(engine, 0, exports.TextureFormat.R32G32B32A32_UInt, whitePixel32);
+            }
+        };
+        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, exports.VertexElementFormat.Vector4, 0)
+            ]);
+            mesh.setVertexBufferBinding(new Buffer(engine, exports.BufferBindFlag.VertexBuffer, vertices, exports.BufferUsage.Static), 16);
+            mesh.addSubMesh(0, 4, exports.MeshTopology.TriangleStrip);
+            return mesh;
+        };
+        _proto._create1x1Texture = function _create1x1Texture(engine, type, format, pixel) {
+            var texture;
+            switch(type){
+                case 0:
+                    var texture2D = new Texture2D(engine, 1, 1, format, false);
+                    texture2D.setPixelBuffer(pixel);
+                    texture = texture2D;
+                    break;
+                case 2:
+                    var texture2DArray = new Texture2DArray(engine, 1, 1, 1, format, false);
+                    texture2DArray.setPixelBuffer(0, pixel);
+                    texture = texture2DArray;
+                    break;
+                case 1:
+                    var textureCube = new TextureCube(engine, 1, format, false);
+                    for(var i = 0; i < 6; i++){
+                        textureCube.setPixelBuffer(exports.TextureCubeFace.PositiveX + i, pixel);
+                    }
+                    texture = textureCube;
+                    break;
+                default:
+                    throw "Invalid texture type";
+            }
+            texture.isGCIgnored = true;
+            engine.resourceManager.addContentRestorer(new /*#__PURE__*/ (function(ContentRestorer) {
+                var _class = function _class() {
+                    return ContentRestorer.call(this, texture);
+                };
+                _inherits$2(_class, ContentRestorer);
+                var _proto = _class.prototype;
+                _proto.restoreContent = function restoreContent() {
+                    switch(type){
+                        case 0:
+                            this.resource.setPixelBuffer(pixel);
+                            break;
+                        case 2:
+                            this.resource.setPixelBuffer(0, pixel);
+                            break;
+                        case 1:
+                            for(var i = 0; i < 6; i++){
+                                this.resource.setPixelBuffer(exports.TextureCubeFace.PositiveX + i, pixel);
+                            }
+                            break;
+                    }
+                };
+                return _class;
+            }(ContentRestorer))());
+            return texture;
+        };
+        return BasicResources;
+    }();
+    var TextureType;
+    (function(TextureType) {
+        TextureType[TextureType["Texture2D"] = 0] = "Texture2D";
+        TextureType[TextureType["TextureCube"] = 1] = "TextureCube";
+        TextureType[TextureType["Texture2DArray"] = 2] = "Texture2DArray";
+    })(TextureType || (TextureType = {}));
     /**
      * @internal
      * Rendering context.
@@ -25000,7 +25184,6 @@
                 _this.xrManager = new XRManager();
                 _this.xrManager._initialize(_assert_this_initialized(_this), xrDevice);
             }
-            _this._initMagentaTextures(hardwareRenderer);
             if (!hardwareRenderer.canIUse(exports.GLCapabilityType.depthTexture)) {
                 _this._macroCollection.enable(Engine._noDepthTextureMacro);
             } else {
@@ -25236,99 +25419,6 @@
         };
         /**
        * @internal
-       * Standalone for CanvasRenderer plugin.
-       */ _proto._initMagentaTextures = function _initMagentaTextures(hardwareRenderer) {
-            var whitePixel = new Uint8Array([
-                255,
-                255,
-                255,
-                255
-            ]);
-            var whiteTexture2D = new Texture2D(this, 1, 1, exports.TextureFormat.R8G8B8A8, false);
-            whiteTexture2D.setPixelBuffer(whitePixel);
-            whiteTexture2D.isGCIgnored = true;
-            var magentaPixel = new Uint8Array([
-                255,
-                0,
-                255,
-                255
-            ]);
-            var magentaTexture2D = new Texture2D(this, 1, 1, exports.TextureFormat.R8G8B8A8, false);
-            magentaTexture2D.setPixelBuffer(magentaPixel);
-            magentaTexture2D.isGCIgnored = true;
-            this.resourceManager.addContentRestorer(new /*#__PURE__*/ (function(ContentRestorer) {
-                var _class = function _class() {
-                    return ContentRestorer.call(this, magentaTexture2D);
-                };
-                _inherits$2(_class, ContentRestorer);
-                var _proto = _class.prototype;
-                _proto.restoreContent = function restoreContent() {
-                    this.resource.setPixelBuffer(magentaPixel);
-                };
-                return _class;
-            }(ContentRestorer))());
-            var magentaTextureCube = new TextureCube(this, 1, exports.TextureFormat.R8G8B8A8, false);
-            for(var i = 0; i < 6; i++){
-                magentaTextureCube.setPixelBuffer(exports.TextureCubeFace.PositiveX + i, magentaPixel);
-            }
-            magentaTextureCube.isGCIgnored = true;
-            this.resourceManager.addContentRestorer(new /*#__PURE__*/ (function(ContentRestorer) {
-                var _class = function _class() {
-                    return ContentRestorer.call(this, magentaTextureCube);
-                };
-                _inherits$2(_class, ContentRestorer);
-                var _proto = _class.prototype;
-                _proto.restoreContent = function restoreContent() {
-                    for(var i = 0; i < 6; i++){
-                        this.resource.setPixelBuffer(exports.TextureCubeFace.PositiveX + i, magentaPixel);
-                    }
-                };
-                return _class;
-            }(ContentRestorer))());
-            this._whiteTexture2D = whiteTexture2D;
-            this._magentaTexture2D = magentaTexture2D;
-            this._magentaTextureCube = magentaTextureCube;
-            if (hardwareRenderer.isWebGL2) {
-                var magentaPixel32 = new Uint32Array([
-                    255,
-                    0,
-                    255,
-                    255
-                ]);
-                var uintMagentaTexture2D = new Texture2D(this, 1, 1, exports.TextureFormat.R32G32B32A32_UInt, false);
-                uintMagentaTexture2D.setPixelBuffer(magentaPixel32);
-                uintMagentaTexture2D.isGCIgnored = true;
-                this.resourceManager.addContentRestorer(new /*#__PURE__*/ (function(ContentRestorer) {
-                    var _class = function _class() {
-                        return ContentRestorer.call(this, uintMagentaTexture2D);
-                    };
-                    _inherits$2(_class, ContentRestorer);
-                    var _proto = _class.prototype;
-                    _proto.restoreContent = function restoreContent() {
-                        this.resource.setPixelBuffer(magentaPixel32);
-                    };
-                    return _class;
-                }(ContentRestorer))());
-                var magentaTexture2DArray = new Texture2DArray(this, 1, 1, 1, exports.TextureFormat.R8G8B8A8, false);
-                magentaTexture2DArray.setPixelBuffer(0, magentaPixel);
-                magentaTexture2DArray.isGCIgnored = true;
-                this.resourceManager.addContentRestorer(new /*#__PURE__*/ (function(ContentRestorer) {
-                    var _class = function _class() {
-                        return ContentRestorer.call(this, magentaTexture2DArray);
-                    };
-                    _inherits$2(_class, ContentRestorer);
-                    var _proto = _class.prototype;
-                    _proto.restoreContent = function restoreContent() {
-                        this.resource.setPixelBuffer(0, magentaPixel);
-                    };
-                    return _class;
-                }(ContentRestorer))());
-                this._uintMagentaTexture2D = uintMagentaTexture2D;
-                this._magentaTexture2DArray = magentaTexture2DArray;
-            }
-        };
-        /**
-       * @internal
        */ _proto._pendingGC = function _pendingGC() {
             if (this._frameInProcess) {
                 this._waitingGC = true;
@@ -25962,6 +26052,8 @@
                     script._started = true;
                     _this.removeOnStartScript(script);
                     script.onStart();
+                }, function(element, index) {
+                    element._onStartIndex = index;
                 });
             }
         };
@@ -28875,7 +28967,7 @@
                 depthOnlyPass.onConfig(camera);
                 depthOnlyPass.onRender(context, cullingResults);
             } else {
-                camera.shaderData.setTexture(exports.Camera._cameraDepthTextureProperty, engine._whiteTexture2D);
+                camera.shaderData.setTexture(exports.Camera._cameraDepthTextureProperty, engine._basicResources.whiteTexture2D);
             }
             // Check if need to create internal color texture
             var independentCanvasEnabled = camera.independentCanvasEnabled;
@@ -42840,25 +42932,32 @@
             camera.enabled = false;
         };
         _proto._createRenderer = function _createRenderer(context, entityInfo, entity) {
-            var _loop = function _loop(i) {
-                var glTFPrimitive = glTFMeshPrimitives[i];
-                var materialIndex = glTFPrimitive.material;
-                promises.push(Promise.all([
-                    context.get(exports.GLTFParserType.Mesh, meshID),
-                    skinID !== undefined && context.get(exports.GLTFParserType.Skin, skinID),
-                    materialIndex !== undefined && context.get(exports.GLTFParserType.Material, materialIndex)
-                ]).then(function(param) {
-                    var meshes = param[0], skin = param[1], material = param[2];
+            var _this = this;
+            var meshID = entityInfo.mesh, skinID = entityInfo.skin;
+            var glTFMesh = context.glTF.meshes[meshID];
+            var glTFMeshPrimitives = glTFMesh.primitives;
+            var rendererCount = glTFMeshPrimitives.length;
+            var blendShapeWeights = entityInfo.weights || glTFMesh.weights;
+            var materialPromises = new Array(rendererCount);
+            for(var i = 0; i < rendererCount; i++){
+                var _glTFMeshPrimitives_i_material;
+                materialPromises[i] = context.get(exports.GLTFParserType.Material, (_glTFMeshPrimitives_i_material = glTFMeshPrimitives[i].material) != null ? _glTFMeshPrimitives_i_material : -1);
+            }
+            return Promise.all([
+                context.get(exports.GLTFParserType.Mesh, meshID),
+                skinID !== undefined && context.get(exports.GLTFParserType.Skin, skinID),
+                Promise.all(materialPromises)
+            ]).then(function(param) {
+                var _loop = function _loop(i) {
+                    var material = materials[i] || exports.GLTFMaterialParser._getDefaultMaterial(context.glTFResource.engine);
+                    var glTFPrimitive = glTFMeshPrimitives[i];
                     var mesh = meshes[i];
-                    var renderer;
-                    material || (material = exports.GLTFMaterialParser._getDefaultMaterial(context.glTFResource.engine));
+                    var renderer = void 0;
                     if (skin || blendShapeWeights) {
                         var skinRenderer = entity.addComponent(SkinnedMeshRenderer);
                         skinRenderer.mesh = mesh;
                         if (skin) {
-                            skinRenderer.rootBone = skin._rootBone;
-                            skinRenderer.bones = skin._bones;
-                            _this._computeLocalBounds(skinRenderer, mesh, skin._bones, skin._rootBone, skin.inverseBindMatrices);
+                            _this._computeLocalBounds(skinRenderer, mesh, skin.bones, skin.rootBone, skin.inverseBindMatrices);
                             skinRenderer.skin = skin;
                         }
                         if (blendShapeWeights) {
@@ -42877,17 +42976,10 @@
                         }
                     });
                     GLTFParser.executeExtensionsAdditiveAndParse(glTFPrimitive.extensions, context, renderer, glTFPrimitive);
-                }));
-            };
-            var _this = this;
-            var glTFMeshes = context.glTF.meshes;
-            var meshID = entityInfo.mesh, skinID = entityInfo.skin;
-            var glTFMesh = glTFMeshes[meshID];
-            var glTFMeshPrimitives = glTFMesh.primitives;
-            var blendShapeWeights = entityInfo.weights || glTFMesh.weights;
-            var promises = new Array();
-            for(var i = 0; i < glTFMeshPrimitives.length; i++)_loop(i);
-            return Promise.all(promises);
+                };
+                var meshes = param[0], skin = param[1], materials = param[2];
+                for(var i = 0; i < rendererCount; i++)_loop(i);
+            });
         };
         _proto._computeLocalBounds = function _computeLocalBounds(skinnedMeshRenderer, mesh, bones, rootBone, inverseBindMatrices) {
             var rootBoneIndex = bones.indexOf(rootBone);
@@ -42940,7 +43032,7 @@
             var jointCount = joints.length;
             var skin = new Skin(name);
             skin.inverseBindMatrices.length = jointCount;
-            skin._bones.length = jointCount;
+            var bones = new Array(jointCount);
             // parse IBM
             var accessor = glTF.accessors[inverseBindMatrices];
             var skinPromise = GLTFUtils.getAccessorBuffer(context, glTF.bufferViews, accessor).then(function(bufferInfo) {
@@ -42952,21 +43044,20 @@
                     skin.inverseBindMatrices[i] = inverseBindMatrix;
                     // Get bones
                     var bone = entities[joints[i]];
-                    skin._bones[i] = bone;
+                    bones[i] = bone;
                     skin.joints[i] = bone.name;
-                    // Get skeleton
-                    if (skeleton !== undefined) {
-                        var rootBone = entities[skeleton];
-                        skin._rootBone = rootBone;
-                        skin.skeleton = rootBone.name;
+                }
+                skin.bones = bones;
+                // Get skeleton
+                if (skeleton !== undefined) {
+                    var rootBone = entities[skeleton];
+                    skin.rootBone = rootBone;
+                } else {
+                    var rootBone1 = _this._findSkeletonRootBone(joints, entities);
+                    if (rootBone1) {
+                        skin.rootBone = rootBone1;
                     } else {
-                        var rootBone1 = _this._findSkeletonRootBone(joints, entities);
-                        if (rootBone1) {
-                            skin._rootBone = rootBone1;
-                            skin.skeleton = rootBone1.name;
-                        } else {
-                            throw "Failed to find skeleton root bone.";
-                        }
+                        throw "Failed to find skeleton root bone.";
                     }
                 }
                 return skin;
@@ -44995,7 +45086,7 @@
     ], KHR_materials_anisotropy);
 
     //@ts-ignore
-    var version = "1.2.0-beta.4";
+    var version = "1.2.0-beta.6";
     console.log("Galacean engine version: " + version);
     for(var key in CoreObjects){
         Loader.registerClass(key, CoreObjects[key]);