@galacean/engine 0.0.0-experimental-shaderlab.2 → 0.0.0-experimental-1.2-xr.0

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;
@@ -9794,7 +9806,8 @@
                 }
                 var shaderInfo = Shader._shaderLab.parseShader(nameOrShaderSource);
                 if (shaderMap[shaderInfo.name]) {
-                    throw 'Shader named "' + shaderInfo.name + '" already exists.';
+                    console.error('Shader named "' + shaderInfo.name + '" already exists.');
+                    return;
                 }
                 var subShaderList = shaderInfo.subShaders.map(function(subShaderInfo) {
                     var passList = subShaderInfo.passes.map(function(passInfo) {
@@ -9833,7 +9846,8 @@
                 return shader;
             } else {
                 if (shaderMap[nameOrShaderSource]) {
-                    throw 'Shader named "' + nameOrShaderSource + '" already exists.';
+                    console.error('Shader named "' + nameOrShaderSource + '" already exists.');
+                    return;
                 }
                 if (typeof vertexSourceOrShaderPassesOrSubShaders === "string") {
                     var shaderPass = new ShaderPass(vertexSourceOrShaderPassesOrSubShaders, fragmentSource);
@@ -10427,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;
@@ -11246,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);
@@ -11286,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;
@@ -15761,267 +15784,767 @@
     (function() {
         PrimitiveMesh._spherePoleIdx = 0;
     })();
+    function _is_native_reflect_construct$1() {
+        if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+        if (Reflect.construct.sham) return false;
+        if (typeof Proxy === "function") return true;
+        try {
+            Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
+    function _construct$1(Parent, args, Class) {
+        if (_is_native_reflect_construct$1()) _construct$1 = Reflect.construct;
+        else {
+            _construct$1 = function construct(Parent, args, Class) {
+                var a = [
+                    null
+                ];
+                a.push.apply(a, args);
+                var Constructor = Function.bind.apply(Parent, a);
+                var instance = new Constructor();
+                if (Class) _set_prototype_of$2(instance, Class.prototype);
+                return instance;
+            };
+        }
+        return _construct$1.apply(null, arguments);
+    }
     /**
-     * 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
+       * @param args - The arguments of the component
+       * @returns	The component which has been added
+       */ _proto.addComponent = function addComponent(type) {
+            for(var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++){
+                args[_key - 1] = arguments[_key];
+            }
+            ComponentsDependencies._addCheck(this, type);
+            var component = _construct$1(type, [].concat(this, args));
+            this._components.push(component);
+            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._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() {
+            var cloneEntity = new Entity(this._engine, this.name);
+            var templateResource = this._templateResource;
+            if (templateResource) {
+                cloneEntity._templateResource = templateResource;
+                templateResource._addReferCount(1);
+            }
+            cloneEntity.layer = this.layer;
+            cloneEntity._isActive = this._isActive;
+            var cloneTransform = cloneEntity.transform;
+            var _this = this, srcTransform = _this.transform;
+            cloneTransform.position = srcTransform.position;
+            cloneTransform.rotation = srcTransform.rotation;
+            cloneTransform.scale = srcTransform.scale;
+            var srcChildren = this._children;
+            for(var i = 0, n = srcChildren.length; i < n; i++){
+                cloneEntity.addChild(srcChildren[i]._createCloneEntity());
             }
+            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];
-                        }
-                    }
-                }
-            },
-            {
-                key: "localBounds",
-                get: /**
-       * Local bounds.
-       */ function get() {
-                    return this._localBounds;
-                },
-                set: function set(value) {
-                    if (this._localBounds !== value) {
-                        this._localBounds.copyFrom(value);
-                    }
-                }
-            },
+        /**
+       * @internal
+       */ _proto._processInActive = function _processInActive(activeChangeFlag) {
+            if (this._activeChangedComponents) {
+                throw "Note: can't set the 'main active entity' inActive in hierarchy, if the operation is in main active entity or it's children script's onEnable Event.";
+            }
+            this._activeChangedComponents = this._scene._componentsManager.getActiveChangedTempList();
+            this._setInActiveInHierarchy(this._activeChangedComponents, activeChangeFlag);
+            this._setActiveComponents(false, activeChangeFlag);
+        };
+        _proto._addToChildrenList = function _addToChildrenList(index, child) {
+            var children = this._children;
+            var childCount = children.length;
+            if (index === undefined) {
+                child._siblingIndex = childCount;
+                children.push(child);
+            } else {
+                if (index < 0 || index > childCount) {
+                    throw "The index " + index + " is out of child list bounds " + childCount;
+                }
+                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: /**
@@ -16031,176 +16554,441 @@
                 },
                 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);
+    ], Skin.prototype, "inverseBindMatrices", 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);
-    __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;
+            }
+            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);
+                }
             }
+            var layer = entity.layer;
+            this._rendererLayer.set(layer & 65535, layer >>> 16 & 65535, 0, 0);
         };
-        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);
+        /**
+       * @internal
+       */ _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;
         };
-        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
+       */ _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
+            MeshRenderer1.prototype._cloneTo.call(this, target, srcRoot, targetRoot);
+            if (this.skin) {
+                target._applySkin(null, target.skin);
             }
+            this._blendShapeWeights && (target._blendShapeWeights = this._blendShapeWeights.slice());
         };
         /**
        * @internal
-       * 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._updateBounds = function _updateBounds(worldBounds) {
+            var _this_skin;
+            var rootBone = (_this_skin = this.skin) == null ? void 0 : _this_skin.rootBone;
+            if (rootBone) {
+                BoundingBox.transform(this._localBounds, rootBone.transform.worldMatrix, worldBounds);
+            } else {
+                MeshRenderer1.prototype._updateBounds.call(this, worldBounds);
+            }
+        };
+        _proto._checkBlendShapeWeightLength = function _checkBlendShapeWeightLength() {
+            var mesh = this._mesh;
+            var newBlendShapeCount = mesh ? mesh.blendShapeCount : 0;
+            var lastBlendShapeWeights = this._blendShapeWeights;
+            if (lastBlendShapeWeights) {
+                var lastBlendShapeWeightsCount = lastBlendShapeWeights.length;
+                if (lastBlendShapeWeightsCount !== newBlendShapeCount) {
+                    var newBlendShapeWeights = new Float32Array(newBlendShapeCount);
+                    if (newBlendShapeCount > lastBlendShapeWeightsCount) {
+                        newBlendShapeWeights.set(lastBlendShapeWeights);
+                    } else {
+                        for(var i = 0; i < newBlendShapeCount; i++){
+                            newBlendShapeWeights[i] = lastBlendShapeWeights[i];
+                        }
+                    }
+                    this._blendShapeWeights = newBlendShapeWeights;
+                }
+            } else {
+                this._blendShapeWeights = new Float32Array(newBlendShapeCount);
+            }
+        };
+        _proto._onLocalBoundsChanged = function _onLocalBoundsChanged() {
+            this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
+        };
+        _proto._onSkinUpdated = function _onSkinUpdated(type, value) {
+            switch(type){
+                case SkinUpdateFlag.BoneCountChanged:
+                    var shaderData = this.shaderData;
+                    if (value > 0) {
+                        shaderData.enableMacro("RENDERER_HAS_SKIN");
+                        shaderData.setInt(SkinnedMeshRenderer._jointCountProperty, value);
+                    } else {
+                        shaderData.disableMacro("RENDERER_HAS_SKIN");
+                    }
+                    break;
+                case SkinUpdateFlag.RootBoneChanged:
+                    this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
+                    break;
+            }
+        };
+        _proto._applySkin = function _applySkin(lastSkin, value) {
+            var _lastSkin_bones, _lastSkin, _lastSkin1, _lastSkin2, _value_bones, _value, _value1, _value2;
+            var _lastSkin_bones_length;
+            var lastSkinBoneCount = (_lastSkin_bones_length = (_lastSkin = lastSkin) == null ? void 0 : (_lastSkin_bones = _lastSkin.bones) == null ? void 0 : _lastSkin_bones.length) != null ? _lastSkin_bones_length : 0;
+            var _lastSkin_rootBone;
+            var lastRootBone = (_lastSkin_rootBone = (_lastSkin1 = lastSkin) == null ? void 0 : _lastSkin1.rootBone) != null ? _lastSkin_rootBone : this.entity;
+            (_lastSkin2 = lastSkin) == null ? void 0 : _lastSkin2._updatedManager.removeListener(this._onSkinUpdated);
+            var _value_bones_length;
+            var skinBoneCount = (_value_bones_length = (_value = value) == null ? void 0 : (_value_bones = _value.bones) == null ? void 0 : _value_bones.length) != null ? _value_bones_length : 0;
+            var _value_rootBone;
+            var rootBone = (_value_rootBone = (_value1 = value) == null ? void 0 : _value1.rootBone) != null ? _value_rootBone : this.entity;
+            (_value2 = value) == null ? void 0 : _value2._updatedManager.addListener(this._onSkinUpdated);
+            if (lastSkinBoneCount !== skinBoneCount) {
+                this._onSkinUpdated(SkinUpdateFlag.BoneCountChanged, skinBoneCount);
+            }
+            if (lastRootBone !== rootBone) {
+                this._onSkinUpdated(SkinUpdateFlag.RootBoneChanged, rootBone);
+            }
+        };
+        _create_class$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) {
@@ -18755,7 +19543,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;
@@ -19668,887 +20456,316 @@
                     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;
-        };
-        /**
-       * @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);
+                        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(Entity, [
+        _create_class$2(PBRSpecularMaterial, [
             {
-                key: "isActive",
+                key: "specularColor",
                 get: /**
-       * Whether to activate locally.
+       * Specular color.
        */ function get() {
-                    return this._isActive;
+                    return this.shaderData.getColor(PBRSpecularMaterial._specularColorProp);
                 },
                 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);
-                        }
+                    var specularColor = this.shaderData.getColor(PBRSpecularMaterial._specularColorProp);
+                    if (value !== specularColor) {
+                        specularColor.copyFrom(value);
                     }
                 }
             },
             {
-                key: "isActiveInHierarchy",
-                get: /**
-       * Whether it is active in the hierarchy.
-       */ function get() {
-                    return this._isActiveInHierarchy;
-                }
-            },
-            {
-                key: "parent",
+                key: "glossiness",
                 get: /**
-       * The parent entity.
+       * Glossiness.
        */ function get() {
-                    return this._parent;
+                    return this.shaderData.getFloat(PBRSpecularMaterial._glossinessProp);
                 },
                 set: function set(value) {
-                    this._setParent(value);
+                    this.shaderData.setFloat(PBRSpecularMaterial._glossinessProp, value);
                 }
             },
             {
-                key: "children",
+                key: "specularGlossinessTexture",
                 get: /**
-       * The children entities
+       * Specular glossiness texture.
+       * @remarks RGB is specular, A is glossiness
        */ function get() {
-                    return this._children;
+                    return this.shaderData.getTexture(PBRSpecularMaterial._specularGlossinessTextureProp);
+                },
+                set: function set(value) {
+                    this.shaderData.setTexture(PBRSpecularMaterial._specularGlossinessTextureProp, value);
+                    if (value) {
+                        this.shaderData.enableMacro(PBRSpecularMaterial._specularGlossinessTextureMacro);
+                    } else {
+                        this.shaderData.disableMacro(PBRSpecularMaterial._specularGlossinessTextureMacro);
+                    }
                 }
-            },
+            }
+        ]);
+        return PBRSpecularMaterial;
+    }(PBRBaseMaterial);
+    (function() {
+        PBRSpecularMaterial._specularColorProp = ShaderProperty.getByName("material_PBRSpecularColor");
+    })();
+    (function() {
+        PBRSpecularMaterial._glossinessProp = ShaderProperty.getByName("material_Glossiness");
+    })();
+    (function() {
+        PBRSpecularMaterial._specularGlossinessTextureProp = ShaderProperty.getByName("material_SpecularGlossinessTexture");
+    })();
+    (function() {
+        PBRSpecularMaterial._specularGlossinessTextureMacro = ShaderMacro.getByName("MATERIAL_HAS_SPECULAR_GLOSSINESS_TEXTURE");
+    })();
+    /**
+     * Unlit Material.
+     */ var UnlitMaterial = /*#__PURE__*/ function(BaseMaterial1) {
+        _inherits$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: "childCount",
+                key: "baseColor",
                 get: /**
-       * @deprecated Please use `children.length` property instead.
-       * Number of the children entities
+       * Base color.
        */ function get() {
-                    return this._children.length;
+                    return this.shaderData.getColor(UnlitMaterial._baseColorProp);
+                },
+                set: function set(value) {
+                    var baseColor = this.shaderData.getColor(UnlitMaterial._baseColorProp);
+                    if (value !== baseColor) {
+                        baseColor.copyFrom(value);
+                    }
                 }
             },
             {
-                key: "scene",
+                key: "baseTexture",
                 get: /**
-       * The scene the entity belongs to.
+       * Base texture.
        */ function get() {
-                    return this._scene;
+                    return this.shaderData.getTexture(UnlitMaterial._baseTextureProp);
+                },
+                set: function set(value) {
+                    this.shaderData.setTexture(UnlitMaterial._baseTextureProp, value);
+                    if (value) {
+                        this.shaderData.enableMacro(UnlitMaterial._baseTextureMacro);
+                    } else {
+                        this.shaderData.disableMacro(UnlitMaterial._baseTextureMacro);
+                    }
                 }
             },
             {
-                key: "siblingIndex",
+                key: "tilingOffset",
                 get: /**
-       * The sibling index.
+       * Tiling and offset of main textures.
        */ function get() {
-                    return this._siblingIndex;
+                    return this.shaderData.getVector4(UnlitMaterial._tilingOffsetProp);
                 },
                 set: function set(value) {
-                    if (this._siblingIndex === -1) {
-                        throw "The entity " + this.name + " is not in the hierarchy";
+                    var tilingOffset = this.shaderData.getVector4(UnlitMaterial._tilingOffsetProp);
+                    if (value !== tilingOffset) {
+                        tilingOffset.copyFrom(value);
                     }
-                    this._setSiblingIndex(this._isRoot ? this._scene._rootEntities : this._parent._children, value);
                 }
             }
         ]);
-        return Entity;
-    }(EngineObject);
+        return UnlitMaterial;
+    }(BaseMaterial);
+    /**
+     * @internal
+     */ var BasicResources = /*#__PURE__*/ function() {
+        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.
@@ -20852,8 +21069,6 @@
         AssetType[/** 2D Texture. */ "Texture2D"] = "Texture2D";
         AssetType[/** Cube Texture. */ "TextureCube"] = "TextureCube";
         AssetType[/** Material. */ "Material"] = "Material";
-        AssetType[/** Shader */ "Shader"] = "Shader";
-        AssetType[/** Shader Chunk */ "ShaderChunk"] = "ShaderChunk";
         AssetType[/** Mesh. */ "Mesh"] = "Mesh";
         AssetType[/** AnimationClip. */ "AnimationClip"] = "AnimationClip";
         AssetType[/** AnimatorController. */ "AnimatorController"] = "AnimatorController";
@@ -21330,17 +21545,33 @@
         };
         /**
        * @internal
-       */ _proto._onSubAssetSuccess = function _onSubAssetSuccess(assetURL, value) {
-            var _this__subAssetPromiseCallbacks_assetURL;
-            (_this__subAssetPromiseCallbacks_assetURL = this._subAssetPromiseCallbacks[assetURL]) == null ? void 0 : _this__subAssetPromiseCallbacks_assetURL.resolve(value);
-            delete this._subAssetPromiseCallbacks[assetURL];
+       */ _proto._onSubAssetSuccess = function _onSubAssetSuccess(assetBaseURL, assetSubPath, value) {
+            var _this__subAssetPromiseCallbacks_assetBaseURL;
+            var subPromiseCallback = (_this__subAssetPromiseCallbacks_assetBaseURL = this._subAssetPromiseCallbacks[assetBaseURL]) == null ? void 0 : _this__subAssetPromiseCallbacks_assetBaseURL[assetSubPath];
+            if (subPromiseCallback) {
+                // Already resolved
+                subPromiseCallback.resolve(value);
+            } else {
+                var _this__subAssetPromiseCallbacks, _assetBaseURL;
+                ((_this__subAssetPromiseCallbacks = this._subAssetPromiseCallbacks)[_assetBaseURL = assetBaseURL] || (_this__subAssetPromiseCallbacks[_assetBaseURL] = {}))[assetSubPath] = {
+                    resolve: value
+                };
+            }
         };
         /**
        * @internal
-       */ _proto._onSubAssetFail = function _onSubAssetFail(assetURL, value) {
-            var _this__subAssetPromiseCallbacks_assetURL;
-            (_this__subAssetPromiseCallbacks_assetURL = this._subAssetPromiseCallbacks[assetURL]) == null ? void 0 : _this__subAssetPromiseCallbacks_assetURL.reject(value);
-            delete this._subAssetPromiseCallbacks[assetURL];
+       */ _proto._onSubAssetFail = function _onSubAssetFail(assetBaseURL, assetSubPath, value) {
+            var _this__subAssetPromiseCallbacks_assetBaseURL;
+            var subPromiseCallback = (_this__subAssetPromiseCallbacks_assetBaseURL = this._subAssetPromiseCallbacks[assetBaseURL]) == null ? void 0 : _this__subAssetPromiseCallbacks_assetBaseURL[assetSubPath];
+            if (subPromiseCallback) {
+                // Already rejected
+                subPromiseCallback.reject(value);
+            } else {
+                var _this__subAssetPromiseCallbacks, _assetBaseURL;
+                ((_this__subAssetPromiseCallbacks = this._subAssetPromiseCallbacks)[_assetBaseURL = assetBaseURL] || (_this__subAssetPromiseCallbacks[_assetBaseURL] = {}))[assetSubPath] = {
+                    reject: value
+                };
+            }
         };
         /**
        * @internal
@@ -21485,8 +21716,21 @@
             if (!loader) {
                 throw "loader not found: " + item.type;
             }
-            // Load asset
+            // Check sub asset
+            if (queryPath) {
+                // Check whether load main asset
+                var mainPromise = loadingPromises[assetBaseURL] || this._loadMainAsset(loader, item, assetBaseURL);
+                mainPromise.catch(function(e) {
+                    _this._onSubAssetFail(assetBaseURL, queryPath, e);
+                });
+                return this._createSubAssetPromiseCallback(assetBaseURL, assetURL, queryPath);
+            }
+            return this._loadMainAsset(loader, item, assetBaseURL);
+        };
+        _proto._loadMainAsset = function _loadMainAsset(loader, item, assetBaseURL) {
+            var _this = this;
             item.url = assetBaseURL;
+            var loadingPromises = this._loadingPromises;
             var promise = loader.load(item, this);
             loadingPromises[assetBaseURL] = promise;
             promise.then(function(resource) {
@@ -21494,32 +21738,46 @@
                     _this._addAsset(assetBaseURL, resource);
                 }
                 delete loadingPromises[assetBaseURL];
+                _this._releaseSubAssetPromiseCallback(assetBaseURL);
             }, function() {
-                return delete loadingPromises[assetBaseURL];
+                delete loadingPromises[assetBaseURL];
+                _this._releaseSubAssetPromiseCallback(assetBaseURL);
             });
-            if (queryPath) {
-                var subPromise = new AssetPromise(function(resolve, reject) {
-                    _this._pushSubAssetPromiseCallback(assetURL, resolve, reject);
-                });
-                loadingPromises[assetURL] = subPromise;
-                subPromise.then(function() {
+            return promise;
+        };
+        _proto._createSubAssetPromiseCallback = function _createSubAssetPromiseCallback(assetBaseURL, assetURL, assetSubPath) {
+            var _this = this;
+            var _this__subAssetPromiseCallbacks_assetBaseURL, _subPromiseCallback, _subPromiseCallback1;
+            var loadingPromises = this._loadingPromises;
+            var subPromiseCallback = (_this__subAssetPromiseCallbacks_assetBaseURL = this._subAssetPromiseCallbacks[assetBaseURL]) == null ? void 0 : _this__subAssetPromiseCallbacks_assetBaseURL[assetSubPath];
+            var resolvedValue = (_subPromiseCallback = subPromiseCallback) == null ? void 0 : _subPromiseCallback.resolve;
+            var rejectedValue = (_subPromiseCallback1 = subPromiseCallback) == null ? void 0 : _subPromiseCallback1.reject;
+            var promise = new AssetPromise(function(resolve, reject) {
+                if (resolvedValue) {
+                    // Already resolved
+                    resolve(resolvedValue);
+                } else if (rejectedValue) {
+                    // Already rejected
+                    reject(rejectedValue);
+                } else {
+                    var _this__subAssetPromiseCallbacks, _assetBaseURL;
+                    // Pending
+                    loadingPromises[assetURL] = promise;
+                    ((_this__subAssetPromiseCallbacks = _this._subAssetPromiseCallbacks)[_assetBaseURL = assetBaseURL] || (_this__subAssetPromiseCallbacks[_assetBaseURL] = {}))[assetSubPath] = {
+                        resolve: resolve,
+                        reject: reject
+                    };
+                }
+            });
+            if (!resolvedValue && !rejectedValue) {
+                promise.then(function() {
                     delete loadingPromises[assetURL];
                 }, function() {
                     return delete loadingPromises[assetURL];
                 });
-                promise.catch(function(e) {
-                    _this._onSubAssetFail(assetURL, e);
-                });
-                return subPromise;
             }
             return promise;
         };
-        _proto._pushSubAssetPromiseCallback = function _pushSubAssetPromiseCallback(assetURL, resolve, reject) {
-            this._subAssetPromiseCallbacks[assetURL] = {
-                resolve: resolve,
-                reject: reject
-            };
-        };
         _proto._gc = function _gc(forceDestroy) {
             var objects = Utils.objectValues(this._referResourcePool);
             for(var i = 0, n = objects.length; i < n; i++){
@@ -21576,6 +21834,9 @@
             });
             return result;
         };
+        _proto._releaseSubAssetPromiseCallback = function _releaseSubAssetPromiseCallback(assetBaseURL) {
+            delete this._subAssetPromiseCallbacks[assetBaseURL];
+        };
         /**
        * @internal
        * @beta Just for internal editor, not recommended for developers.
@@ -25000,7 +25261,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 +25496,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 +26129,8 @@
                     script._started = true;
                     _this.removeOnStartScript(script);
                     script.onStart();
+                }, function(element, index) {
+                    element._onStartIndex = index;
                 });
             }
         };
@@ -26804,9 +26973,10 @@
        */ _proto._updateShaderData = function _updateShaderData(shaderData) {
             var _this = this, spotLight = _this._spotLights, pointLight = _this._pointLights, directLight = _this._directLights;
             var _this1 = this, spotData = _this1._spotData, pointData = _this1._pointData, directData = _this1._directData;
-            var spotLightCount = spotLight.length;
-            var pointLightCount = pointLight.length;
-            var directLightCount = directLight.length;
+            var maxLight = LightManager._maxLight;
+            var spotLightCount = Math.min(spotLight.length, maxLight);
+            var pointLightCount = Math.min(pointLight.length, maxLight);
+            var directLightCount = Math.min(directLight.length, maxLight);
             for(var i = 0; i < spotLightCount; i++){
                 spotLight.get(i)._appendData(i, spotData);
             }
@@ -28874,7 +29044,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;
@@ -31854,20 +32024,19 @@
                 var relativePath = curve.relativePath;
                 var targetEntity = curve.relativePath === "" ? entity : entity.findByPath(curve.relativePath);
                 if (targetEntity) {
-                    var _curveOwnerPool, _instanceId, _propertyOwners, _property, _layerCurveOwnerPool, _instanceId1, _layerPropertyOwners, _propertyPath;
-                    var propertyPath = "" + curve.typeIndex + "." + curve.property;
+                    var _curveOwnerPool, _instanceId, _propertyOwners, _property, _layerCurveOwnerPool, _instanceId1, _layerPropertyOwners, _property1;
                     var component = curve.typeIndex > 0 ? targetEntity.getComponents(curve.type, AnimationCurveOwner._components)[curve.typeIndex] : targetEntity.getComponent(curve.type);
                     if (!component) {
                         continue;
                     }
                     var property = curve.property;
-                    var instanceId = targetEntity.instanceId;
+                    var instanceId = component.instanceId;
                     // Get owner
                     var propertyOwners = (_curveOwnerPool = curveOwnerPool)[_instanceId = instanceId] || (_curveOwnerPool[_instanceId] = Object.create(null));
                     var owner = (_propertyOwners = propertyOwners)[_property = property] || (_propertyOwners[_property] = curve._createCurveOwner(targetEntity, component));
                     // Get layer owner
                     var layerPropertyOwners = (_layerCurveOwnerPool = layerCurveOwnerPool)[_instanceId1 = instanceId] || (_layerCurveOwnerPool[_instanceId1] = Object.create(null));
-                    var layerOwner = (_layerPropertyOwners = layerPropertyOwners)[_propertyPath = propertyPath] || (_layerPropertyOwners[_propertyPath] = curve._createCurveLayerOwner(owner));
+                    var layerOwner = (_layerPropertyOwners = layerPropertyOwners)[_property1 = property] || (_layerPropertyOwners[_property1] = curve._createCurveLayerOwner(owner));
                     if (mask && mask.pathMasks.length) {
                         var _mask_getPathMask;
                         var _mask_getPathMask_active;
@@ -40214,6 +40383,7 @@
             this.resourceManager = resourceManager;
             this.params = params;
             this.accessorBufferCache = {};
+            this.needAnimatorController = false;
             this._resourceCache = new Map();
             this._progress = {
                 taskDetail: {},
@@ -40241,16 +40411,15 @@
                 return Promise.resolve(null);
             }
             var cache = this._resourceCache;
-            var isOnlyOne = type === 0 || type === 1;
-            var cacheKey = isOnlyOne || index === undefined ? "" + type : type + ":" + index;
+            var cacheKey = index === undefined ? "" + type : type + ":" + index;
             var resource = cache.get(cacheKey);
             if (resource) {
                 return resource;
             }
-            if (isOnlyOne) {
-                resource = parser.parse(this);
-            } else {
-                var glTFItems = this.glTF[glTFSchemaMap[type]];
+            var glTFSchemaKey = glTFSchemaMap[type];
+            var isSubAsset = !!glTFResourceMap[type];
+            if (glTFSchemaKey) {
+                var glTFItems = this.glTF[glTFSchemaKey];
                 if (glTFItems && (index === undefined || glTFItems[index])) {
                     if (index === undefined) {
                         resource = type === 8 ? glTFItems.map(function(_, index) {
@@ -40260,11 +40429,14 @@
                         }));
                     } else {
                         resource = parser.parse(this, index);
-                        this._handleSubAsset(resource, type, index);
+                        isSubAsset && this._handleSubAsset(resource, type, index);
                     }
                 } else {
                     resource = Promise.resolve(null);
                 }
+            } else {
+                resource = parser.parse(this, index);
+                isSubAsset && this._handleSubAsset(resource, type, index);
             }
             cache.set(cacheKey, resource);
             return resource;
@@ -40273,6 +40445,7 @@
             var _this = this;
             var promise = this.get(0).then(function(json) {
                 _this.glTF = json;
+                _this.needAnimatorController = !!(json.skins || json.animations);
                 return Promise.all([
                     _this.get(1),
                     _this.get(5),
@@ -40280,11 +40453,14 @@
                     _this.get(7),
                     _this.get(9),
                     _this.get(10),
+                    _this.get(11),
                     _this.get(2)
                 ]).then(function() {
                     var glTFResource = _this.glTFResource;
-                    if (glTFResource.skins || glTFResource.animations) {
-                        _this._createAnimator(_this, glTFResource.animations);
+                    var animatorController = glTFResource.animatorController;
+                    if (animatorController) {
+                        var animator = glTFResource._defaultSceneRoot.addComponent(Animator);
+                        animator.animatorController = animatorController;
                     }
                     _this.resourceManager.addContentRestorer(_this.contentRestorer);
                     return glTFResource;
@@ -40303,53 +40479,34 @@
                 _this._setTaskCompleteProgress(++task.loaded, task.total);
             });
         };
-        _proto._createAnimator = function _createAnimator(context, animations) {
-            var defaultSceneRoot = context.glTFResource.defaultSceneRoot;
-            var animator = defaultSceneRoot.addComponent(Animator);
-            var animatorController = new AnimatorController();
-            var layer = new AnimatorControllerLayer("layer");
-            var animatorStateMachine = new AnimatorStateMachine();
-            animatorController.addLayer(layer);
-            animator.animatorController = animatorController;
-            layer.stateMachine = animatorStateMachine;
-            if (animations) {
-                for(var i = 0; i < animations.length; i++){
-                    var animationClip = animations[i];
-                    var name = animationClip.name;
-                    var uniqueName = animatorStateMachine.makeUniqueStateName(name);
-                    if (uniqueName !== name) {
-                        console.warn("AnimatorState name is existed, name: " + name + " reset to " + uniqueName);
-                    }
-                    var animatorState = animatorStateMachine.addState(uniqueName);
-                    animatorState.clip = animationClip;
-                }
-            }
-        };
         _proto._handleSubAsset = function _handleSubAsset(resource, type, index) {
             var _this = this;
             var glTFResourceKey = glTFResourceMap[type];
-            if (!glTFResourceKey) return;
             if (type === 8) {
                 var _this_glTFResource, _glTFResourceKey;
                 ((_this_glTFResource = this.glTFResource)[_glTFResourceKey = glTFResourceKey] || (_this_glTFResource[_glTFResourceKey] = []))[index] = resource;
             } else {
                 var url = this.glTFResource.url;
                 resource.then(function(item) {
-                    var _this_glTFResource, _glTFResourceKey;
-                    ((_this_glTFResource = _this.glTFResource)[_glTFResourceKey = glTFResourceKey] || (_this_glTFResource[_glTFResourceKey] = []))[index] = item;
+                    if (index == undefined) {
+                        _this.glTFResource[glTFResourceKey] = item;
+                    } else {
+                        var _this_glTFResource, _glTFResourceKey;
+                        ((_this_glTFResource = _this.glTFResource)[_glTFResourceKey = glTFResourceKey] || (_this_glTFResource[_glTFResourceKey] = []))[index] = item;
+                    }
                     if (type === 7) {
                         for(var i = 0, length = item.length; i < length; i++){
                             var mesh = item[i];
                             // @ts-ignore
-                            _this.resourceManager._onSubAssetSuccess(url + "?q=" + glTFResourceKey + "[" + index + "][" + i + "]", mesh);
+                            _this.resourceManager._onSubAssetSuccess(url, glTFResourceKey + "[" + index + "][" + i + "]", mesh);
                         }
                     } else {
                         // @ts-ignore
-                        _this.resourceManager._onSubAssetSuccess(url + "?q=" + glTFResourceKey + "[" + index + "]", item);
+                        _this.resourceManager._onSubAssetSuccess(url, "" + glTFResourceKey + (index === undefined ? "" : "[" + index + "]"), item);
                         var _this_glTF_scene;
                         if (type === 2 && ((_this_glTF_scene = _this.glTF.scene) != null ? _this_glTF_scene : 0) === index) {
                             // @ts-ignore
-                            _this.resourceManager._onSubAssetSuccess("" + url + "?q=defaultSceneRoot", item);
+                            _this.resourceManager._onSubAssetSuccess(url, "defaultSceneRoot", item);
                         }
                     }
                 });
@@ -40384,11 +40541,12 @@
         GLTFParserType[GLTFParserType["Entity"] = 8] = "Entity";
         GLTFParserType[GLTFParserType["Skin"] = 9] = "Skin";
         GLTFParserType[GLTFParserType["Animation"] = 10] = "Animation";
+        GLTFParserType[GLTFParserType["AnimatorController"] = 11] = "AnimatorController";
     })(exports.GLTFParserType || (exports.GLTFParserType = {}));
     var _obj;
     var glTFSchemaMap = (_obj = {}, _obj[2] = "scenes", _obj[3] = "buffers", _obj[5] = "textures", _obj[6] = "materials", _obj[7] = "meshes", _obj[8] = "nodes", _obj[9] = "skins", _obj[10] = "animations", _obj[4] = "bufferViews", _obj);
     var _obj1;
-    var glTFResourceMap = (_obj1 = {}, _obj1[2] = "_sceneRoots", _obj1[5] = "textures", _obj1[6] = "materials", _obj1[7] = "meshes", _obj1[8] = "entities", _obj1[9] = "skins", _obj1[10] = "animations", _obj1);
+    var glTFResourceMap = (_obj1 = {}, _obj1[2] = "_sceneRoots", _obj1[5] = "textures", _obj1[6] = "materials", _obj1[7] = "meshes", _obj1[8] = "entities", _obj1[9] = "skins", _obj1[10] = "animations", _obj1[11] = "animatorController", _obj1);
     function registerGLTFParser(pipeline) {
         return function(Parser) {
             var parser = new Parser();
@@ -42769,7 +42927,7 @@
             var sceneExtensions = sceneInfo.extensions;
             var engine = glTFResource.engine;
             var isDefaultScene = scene === index;
-            var sceneNodes = sceneInfo.nodes;
+            var sceneNodes = sceneInfo.nodes || [];
             var sceneRoot;
             if (sceneNodes.length === 1) {
                 sceneRoot = context.get(exports.GLTFParserType.Entity, sceneNodes[0]);
@@ -42851,25 +43009,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) {
@@ -42888,17 +43053,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);
@@ -42951,7 +43109,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) {
@@ -42963,21 +43121,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;
@@ -43141,6 +43298,47 @@
     exports.GLTFBufferViewParser = __decorate([
         registerGLTFParser(exports.GLTFParserType.BufferView)
     ], exports.GLTFBufferViewParser);
+    exports.GLTFAnimatorControllerParser = /*#__PURE__*/ function(GLTFParser1) {
+        var GLTFAnimatorControllerParser = function GLTFAnimatorControllerParser() {
+            return GLTFParser1.apply(this, arguments);
+        };
+        _inherits(GLTFAnimatorControllerParser, GLTFParser1);
+        var _proto = GLTFAnimatorControllerParser.prototype;
+        _proto.parse = function parse(context) {
+            var _this = this;
+            if (!context.needAnimatorController) {
+                return Promise.resolve(null);
+            }
+            return context.get(exports.GLTFParserType.Animation).then(function(animations) {
+                var animatorController = _this._createAnimatorController(animations);
+                return Promise.resolve(animatorController);
+            });
+        };
+        _proto._createAnimatorController = function _createAnimatorController(animations) {
+            var animatorController = new AnimatorController();
+            var layer = new AnimatorControllerLayer("layer");
+            var animatorStateMachine = new AnimatorStateMachine();
+            animatorController.addLayer(layer);
+            layer.stateMachine = animatorStateMachine;
+            if (animations) {
+                for(var i = 0; i < animations.length; i++){
+                    var animationClip = animations[i];
+                    var name = animationClip.name;
+                    var uniqueName = animatorStateMachine.makeUniqueStateName(name);
+                    if (uniqueName !== name) {
+                        console.warn("AnimatorState name is existed, name: " + name + " reset to " + uniqueName);
+                    }
+                    var animatorState = animatorStateMachine.addState(uniqueName);
+                    animatorState.clip = animationClip;
+                }
+            }
+            return animatorController;
+        };
+        return GLTFAnimatorControllerParser;
+    }(GLTFParser);
+    exports.GLTFAnimatorControllerParser = __decorate([
+        registerGLTFParser(exports.GLTFParserType.AnimatorController)
+    ], exports.GLTFAnimatorControllerParser);
     // Source: https://github.com/zeux/meshoptimizer/blob/master/js/meshopt_decoder.js
     var MeshoptDecoder = function() {
         var unpack = function unpack(data) {
@@ -43546,15 +43744,20 @@
             var dataRGBA = new Uint8Array(4 * width * height);
             var offset = 0, pos = 0;
             var ptrEnd = 4 * scanLineWidth;
-            var rgbeStart = new Uint8Array(4);
             var scanLineBuffer = new Uint8Array(ptrEnd);
             var numScanLines = height; // read in each successive scanLine
             while(numScanLines > 0 && pos < byteLength){
-                rgbeStart[0] = buffer[pos++];
-                rgbeStart[1] = buffer[pos++];
-                rgbeStart[2] = buffer[pos++];
-                rgbeStart[3] = buffer[pos++];
-                if (2 != rgbeStart[0] || 2 != rgbeStart[1] || (rgbeStart[2] << 8 | rgbeStart[3]) != scanLineWidth) {
+                var a = buffer[pos++];
+                var b = buffer[pos++];
+                var c = buffer[pos++];
+                var d = buffer[pos++];
+                if (a != 2 || b != 2 || c & 0x80 || width < 8 || width > 32767) {
+                    // this file is not run length encoded
+                    // read values sequentially
+                    return buffer;
+                }
+                if ((c << 8 | d) != scanLineWidth) {
+                    // eslint-disable-next-line no-throw-literal
                     throw "HDR Bad header format, wrong scan line width";
                 }
                 // read each of the four channels for the scanline into the buffer
@@ -43980,72 +44183,59 @@
                 _this.request(item.url, _extends({}, item, {
                     type: "json"
                 })).then(function(materialSchema) {
+                    var _loop = function _loop(key) {
+                        var _shaderData_key = shaderData[key], type = _shaderData_key.type, value = _shaderData_key.value;
+                        switch(type){
+                            case "Vector2":
+                                materialShaderData.setVector2(key, new Vector2(value.x, value.y));
+                                break;
+                            case "Vector3":
+                                materialShaderData.setVector3(key, new Vector3(value.x, value.y, value.z));
+                                break;
+                            case "Vector4":
+                                materialShaderData.setVector4(key, new Vector4(value.x, value.y, value.z, value.w));
+                                break;
+                            case "Color":
+                                materialShaderData.setColor(key, new Color(value.r, value.g, value.b, value.a));
+                                break;
+                            case "Float":
+                                materialShaderData.setFloat(key, value);
+                                break;
+                            case "Texture":
+                                texturePromises.push(resourceManager.getResourceByRef(value).then(function(texture) {
+                                    materialShaderData.setTexture(key, texture);
+                                }));
+                                break;
+                            case "Boolean":
+                                materialShaderData.setInt(key, value ? 1 : 0);
+                                break;
+                            case "Integer":
+                                materialShaderData.setInt(key, Number(value));
+                                break;
+                        }
+                    };
                     var engine = resourceManager.engine;
-                    var shaderRef = materialSchema.shaderRef, shader = materialSchema.shader;
-                    if (shaderRef) {
-                        resolve(resourceManager // @ts-ignore
-                        .getResourceByRef(shaderRef).then(function(shaderObject) {
-                            return _this.getMaterialByShader(materialSchema, shaderObject, engine);
-                        }));
-                    } else {
-                        // compatible with 1.2-pre version material schema
-                        var shaderObject = Shader.find(shader);
-                        resolve(_this.getMaterialByShader(materialSchema, shaderObject, engine));
+                    var name = materialSchema.name, shader = materialSchema.shader, shaderData = materialSchema.shaderData, macros = materialSchema.macros, renderState = materialSchema.renderState;
+                    var material = new Material(engine, Shader.find(shader));
+                    material.name = name;
+                    var texturePromises = new Array();
+                    var materialShaderData = material.shaderData;
+                    for(var key in shaderData)_loop(key);
+                    for(var i = 0, length = macros.length; i < length; i++){
+                        var _macros_i = macros[i], name1 = _macros_i.name, value = _macros_i.value;
+                        if (value == undefined) {
+                            materialShaderData.enableMacro(name1);
+                        } else {
+                            materialShaderData.enableMacro(name1, value);
+                        }
                     }
+                    parseProperty(material, "renderState", renderState);
+                    return Promise.all(texturePromises).then(function() {
+                        resolve(material);
+                    });
                 }).catch(reject);
             });
         };
-        _proto.getMaterialByShader = function getMaterialByShader(materialSchema, shader, engine) {
-            var _loop = function _loop(key) {
-                var _shaderData_key = shaderData[key], type = _shaderData_key.type, value = _shaderData_key.value;
-                switch(type){
-                    case "Vector2":
-                        materialShaderData.setVector2(key, new Vector2(value.x, value.y));
-                        break;
-                    case "Vector3":
-                        materialShaderData.setVector3(key, new Vector3(value.x, value.y, value.z));
-                        break;
-                    case "Vector4":
-                        materialShaderData.setVector4(key, new Vector4(value.x, value.y, value.z, value.w));
-                        break;
-                    case "Color":
-                        materialShaderData.setColor(key, new Color(value.r, value.g, value.b, value.a));
-                        break;
-                    case "Float":
-                        materialShaderData.setFloat(key, value);
-                        break;
-                    case "Texture":
-                        texturePromises.push(engine.resourceManager.getResourceByRef(value).then(function(texture) {
-                            materialShaderData.setTexture(key, texture);
-                        }));
-                        break;
-                    case "Boolean":
-                        materialShaderData.setInt(key, value ? 1 : 0);
-                        break;
-                    case "Integer":
-                        materialShaderData.setInt(key, Number(value));
-                        break;
-                }
-            };
-            var name = materialSchema.name, shaderData = materialSchema.shaderData, macros = materialSchema.macros, renderState = materialSchema.renderState;
-            var material = new Material(engine, shader);
-            material.name = name;
-            var texturePromises = new Array();
-            var materialShaderData = material.shaderData;
-            for(var key in shaderData)_loop(key);
-            for(var i = 0, length = macros.length; i < length; i++){
-                var _macros_i = macros[i], name1 = _macros_i.name, value = _macros_i.value;
-                if (value == undefined) {
-                    materialShaderData.enableMacro(name1);
-                } else {
-                    materialShaderData.enableMacro(name1, value);
-                }
-            }
-            parseProperty(material, "renderState", renderState);
-            return Promise.all(texturePromises).then(function() {
-                return material;
-            });
-        };
         return MaterialLoader;
     }(Loader);
     MaterialLoader = __decorate([
@@ -44484,104 +44674,6 @@
             ""
         ])
     ], TextureCubeLoader);
-    var ShaderLoader = /*#__PURE__*/ function(Loader1) {
-        var ShaderLoader = function ShaderLoader() {
-            return Loader1.apply(this, arguments);
-        };
-        _inherits(ShaderLoader, Loader1);
-        var _proto = ShaderLoader.prototype;
-        _proto.load = function load(item, resourceManager) {
-            var _this = this;
-            return this.request(item.url, _extends({}, item, {
-                type: "text"
-            })).then(function(code) {
-                var builtinShader = _this.getBuiltinShader(code);
-                if (builtinShader) {
-                    return Shader.find(builtinShader);
-                }
-                var matches = code.matchAll(/^[ \t]*#include +"([^$\\"]+)"/gm);
-                return Promise.all(Array.from(matches).map(function(m) {
-                    var path = m[1];
-                    if (path) {
-                        // @ts-ignore
-                        var resource = resourceManager._virtualPathMap[path];
-                        if (!resource) return;
-                        return resourceManager.load({
-                            type: exports.AssetType.ShaderChunk,
-                            url: resource,
-                            params: {
-                                includeKey: path
-                            }
-                        });
-                    }
-                })).then(function() {
-                    return Shader.create(code);
-                });
-            });
-        };
-        _proto.getBuiltinShader = function getBuiltinShader(code) {
-            var match = code.match(/^\s*\/\/\s*@builtin\s+(\w+)/);
-            if (match && match[1]) return match[1];
-        };
-        return ShaderLoader;
-    }(Loader);
-    ShaderLoader = __decorate([
-        resourceLoader(exports.AssetType.Shader, [
-            "gs",
-            "gsl"
-        ], false)
-    ], ShaderLoader);
-    var ShaderChunkLoader = /*#__PURE__*/ function(Loader1) {
-        var ShaderChunkLoader = function ShaderChunkLoader() {
-            return Loader1.apply(this, arguments);
-        };
-        _inherits(ShaderChunkLoader, Loader1);
-        var _proto = ShaderChunkLoader.prototype;
-        _proto.load = function load(item, resourceManager) {
-            return this.request(item.url, _extends({}, item, {
-                type: "text"
-            })).then(/*#__PURE__*/ _async_to_generator(function(code) {
-                var includeKey, matches;
-                return __generator(this, function(_state) {
-                    switch(_state.label){
-                        case 0:
-                            includeKey = item.params.includeKey;
-                            ShaderFactory.registerInclude(includeKey, code);
-                            matches = code.matchAll(/^[ \t]*#include +"([^$\\"]+)"/gm);
-                            return [
-                                4,
-                                Promise.all(Array.from(matches).map(function(m) {
-                                    var path = m[1];
-                                    if (path) {
-                                        // @ts-ignore
-                                        var resource = resourceManager._virtualPathMap[path];
-                                        if (!resource) return;
-                                        return resourceManager.load({
-                                            type: exports.AssetType.ShaderChunk,
-                                            url: resource,
-                                            params: {
-                                                includeKey: path
-                                            }
-                                        });
-                                    }
-                                }))
-                            ];
-                        case 1:
-                            _state.sent();
-                            return [
-                                2
-                            ];
-                    }
-                });
-            }));
-        };
-        return ShaderChunkLoader;
-    }(Loader);
-    ShaderChunkLoader = __decorate([
-        resourceLoader(exports.AssetType.ShaderChunk, [
-            "glsl"
-        ], false)
-    ], ShaderChunkLoader);
     var SceneLoader = /*#__PURE__*/ function(Loader1) {
         var SceneLoader = function SceneLoader() {
             return Loader1.apply(this, arguments);
@@ -44657,6 +44749,8 @@
                                         scene.background.texture = texture;
                                     });
                                     promises.push(backgroundPromise);
+                                    var _background_textureFillMode;
+                                    scene.background.textureFillMode = (_background_textureFillMode = background.textureFillMode) != null ? _background_textureFillMode : scene.background.textureFillMode;
                                 }
                                 break;
                         }
@@ -45071,7 +45165,7 @@
     ], KHR_materials_anisotropy);
 
     //@ts-ignore
-    var version = "0.0.0-experimental-shaderlab.2";
+    var version = "0.0.0-experimental-1.2-xr.0";
     console.log("Galacean engine version: " + version);
     for(var key in CoreObjects){
         Loader.registerClass(key, CoreObjects[key]);