@galacean/engine 0.0.0-experimental-2.0-game.6 → 0.0.0-experimental-2.0-game.8

package/dist/browser.js

@@ -7785,7 +7785,7 @@
             var _sprite__getPositions = sprite._getPositions(), lPosLB = _sprite__getPositions[0], lPosRB = _sprite__getPositions[1], lPosLT = _sprite__getPositions[2], lPosRT = _sprite__getPositions[3];
             var spriteUVs = sprite._getUVs();
             var _spriteUVs_ = spriteUVs[0], left = _spriteUVs_.x, bottom = _spriteUVs_.y;
-            var _spriteUVs_1 = spriteUVs[3], right = _spriteUVs_1.x, top = _spriteUVs_1.y;
+            var _spriteUVs_1 = spriteUVs[15], right = _spriteUVs_1.x, top = _spriteUVs_1.y;
             var subChunk = renderer._subChunk;
             var vertices = subChunk.chunk.vertices;
             var x0, y0, u0, v0;
@@ -7857,7 +7857,7 @@
             var _sprite__getPositions = sprite._getPositions(), lPosLB = _sprite__getPositions[0], lPosRB = _sprite__getPositions[1], lPosLT = _sprite__getPositions[2], lPosRT = _sprite__getPositions[3];
             var spriteUVs = sprite._getUVs();
             var _spriteUVs_ = spriteUVs[0], left = _spriteUVs_.x, bottom = _spriteUVs_.y;
-            var _spriteUVs_1 = spriteUVs[3], right = _spriteUVs_1.x, top = _spriteUVs_1.y;
+            var _spriteUVs_1 = spriteUVs[15], right = _spriteUVs_1.x, top = _spriteUVs_1.y;
             // Transform 4 corners to world space
             var _this__worldPositions = this._worldPositions, wLB = _this__worldPositions[0], wRB = _this__worldPositions[1], wLT = _this__worldPositions[2], wRT = _this__worldPositions[3];
             var _this__uvs = this._uvs, uvLB = _this__uvs[0], uvRB = _this__uvs[1], uvLT = _this__uvs[2], uvRT = _this__uvs[3];
@@ -7909,7 +7909,7 @@
             var _sprite__getPositions = sprite._getPositions(), lPosLB = _sprite__getPositions[0], lPosRB = _sprite__getPositions[1], lPosLT = _sprite__getPositions[2], lPosRT = _sprite__getPositions[3];
             var spriteUVs = sprite._getUVs();
             var _spriteUVs_ = spriteUVs[0], left = _spriteUVs_.x, bottom = _spriteUVs_.y;
-            var _spriteUVs_1 = spriteUVs[3], right = _spriteUVs_1.x, top = _spriteUVs_1.y;
+            var _spriteUVs_1 = spriteUVs[15], right = _spriteUVs_1.x, top = _spriteUVs_1.y;
             // Transform corners and compute edge midpoints
             var _this__worldPositions = this._worldPositions, wLB = _this__worldPositions[0], wMB = _this__worldPositions[1], wRB = _this__worldPositions[2], wLM = _this__worldPositions[3], wRM = _this__worldPositions[5], wLT = _this__worldPositions[6], wMT = _this__worldPositions[7], wRT = _this__worldPositions[8];
             var _this__uvs = this._uvs, uvLB = _this__uvs[0], uvMB = _this__uvs[1], uvRB = _this__uvs[2], uvLM = _this__uvs[3], uvRM = _this__uvs[5], uvLT = _this__uvs[6], uvMT = _this__uvs[7], uvRT = _this__uvs[8];
@@ -8010,7 +8010,7 @@
             var _sprite__getPositions = sprite._getPositions(), lPosLB = _sprite__getPositions[0], lPosRB = _sprite__getPositions[1], lPosLT = _sprite__getPositions[2], lPosRT = _sprite__getPositions[3];
             var spriteUVs = sprite._getUVs();
             var _spriteUVs_ = spriteUVs[0], left = _spriteUVs_.x, bottom = _spriteUVs_.y;
-            var _spriteUVs_1 = spriteUVs[3], right = _spriteUVs_1.x, top = _spriteUVs_1.y;
+            var _spriteUVs_1 = spriteUVs[15], right = _spriteUVs_1.x, top = _spriteUVs_1.y;
             // ---------------
             //   LT  - MT -  RT
             //   |     |     |
@@ -9606,470 +9606,33 @@
         /** Align bottom vertically */ TextVerticalAlignment[TextVerticalAlignment["Bottom"] = 2] = "Bottom";
         return TextVerticalAlignment;
     }({});
-    /**
-     * @internal
-     */ var UpdateFlagManager = /*#__PURE__*/ function() {
-        function UpdateFlagManager() {
-            /** @internal */ this._updateFlags = [];
-            this._listeners = [];
+    var RenderElement = /*#__PURE__*/ function() {
+        function RenderElement() {
+            this.instancedRenderers = [];
         }
-        var _proto = UpdateFlagManager.prototype;
-        /**
-       * Create a UpdateFlag.
-       * @returns - The UpdateFlag.
-       */ _proto.createFlag = function createFlag(type) {
-            var flag = new type();
-            this.addFlag(flag);
-            return flag;
-        };
-        /**
-       * Add a UpdateFlag.
-       * @param flag - The UpdateFlag.
-       */ _proto.addFlag = function addFlag(flag) {
-            this._updateFlags.push(flag);
-            flag._flagManagers.push(this);
-        };
-        /**
-       * Remove a UpdateFlag.
-       * @param flag - The UpdateFlag.
-       */ _proto.removeFlag = function removeFlag(flag) {
-            var success = Utils.removeFromArray(this._updateFlags, flag);
-            if (success) {
-                Utils.removeFromArray(flag._flagManagers, this);
-            }
-        };
-        /**
-       * Add a listener.
-       * @param listener - The listener
-       */ _proto.addListener = function addListener(listener) {
-            this._listeners.push(listener);
-        };
-        /**
-       * Remove a listener.
-       * @param listener - The listener
-       */ _proto.removeListener = function removeListener(listener) {
-            Utils.removeFromArray(this._listeners, listener);
+        var _proto = RenderElement.prototype;
+        _proto.set = function set(component, material, primitive, subPrimitive, texture, subChunk) {
+            this.component = component;
+            this.material = material;
+            this.primitive = primitive;
+            this.subPrimitive = subPrimitive;
+            this.texture = texture;
+            this.subChunk = subChunk;
+            this.instancedRenderers.length = 0;
         };
-        /**
-       * Dispatch a event.
-       * @param type - Event type, usually in the form of enumeration
-       * @param param - Event param
-       */ _proto.dispatch = function dispatch(type, param) {
-            var updateFlags = this._updateFlags;
-            for(var i = updateFlags.length - 1; i >= 0; i--){
-                updateFlags[i].dispatch(type, param);
-            }
-            var listeners = this._listeners;
-            for(var i1 = listeners.length - 1; i1 >= 0; i1--){
-                listeners[i1](type, param);
-            }
+        _proto.dispose = function dispose() {
+            this.component = null;
+            this.material = null;
+            this.primitive = null;
+            this.subPrimitive = null;
+            this.subShader = null;
+            this.shaderData && (this.shaderData = null);
+            this.instancedRenderers = null;
+            this.texture && (this.texture = null);
+            this.subChunk && (this.subChunk = null);
         };
-        return UpdateFlagManager;
+        return RenderElement;
     }();
-    /**
-     * 2D sprite.
-     */ var Sprite = /*#__PURE__*/ function(ReferResource) {
-        _inherits$2(Sprite, ReferResource);
-        function Sprite(engine, texture, region, pivot, border, name) {
-            if (texture === void 0) texture = null;
-            if (region === void 0) region = null;
-            if (pivot === void 0) pivot = null;
-            if (border === void 0) border = null;
-            if (name === void 0) name = null;
-            var _this;
-            _this = ReferResource.call(this, engine) || this, _this._automaticWidth = 0, _this._automaticHeight = 0, _this._customWidth = undefined, _this._customHeight = undefined, _this._positions = [
-                new Vector2(),
-                new Vector2(),
-                new Vector2(),
-                new Vector2()
-            ], // 与 SlicedAssembler/TiledAssembler 的 vertex 索引图一致：[0]=LB, [3]=LT, [12]=RB, [15]=RT。
-            // SimpleAssembler 取 [0]/[3]/[12]/[15] 4 个 corner；Sliced/Tiled 用全 16。
-            // prettier-ignore
-            _this._uvs = [
-                new Vector2(),
-                new Vector2(),
-                new Vector2(),
-                new Vector2(),
-                new Vector2(),
-                new Vector2(),
-                new Vector2(),
-                new Vector2(),
-                new Vector2(),
-                new Vector2(),
-                new Vector2(),
-                new Vector2(),
-                new Vector2(),
-                new Vector2(),
-                new Vector2(),
-                new Vector2()
-            ], _this._bounds = new BoundingBox(), _this._texture = null, _this._atlasRotated = false, _this._atlasRegion = new Rect(0, 0, 1, 1), _this._atlasRegionOffset = new Vector4(0, 0, 0, 0), _this._region = new Rect(0, 0, 1, 1), _this._pivot = new Vector2(0.5, 0.5), _this._border = new Vector4(0, 0, 0, 0), _this._dirtyUpdateFlag = 7, /** @internal */ _this._updateFlagManager = new UpdateFlagManager();
-            _this._texture = texture;
-            _this._onRegionChange = _this._onRegionChange.bind(_this);
-            _this._onPivotChange = _this._onPivotChange.bind(_this);
-            _this._onBorderChange = _this._onBorderChange.bind(_this);
-            // @ts-ignore
-            _this._region._onValueChanged = _this._onRegionChange;
-            // @ts-ignore
-            _this._pivot._onValueChanged = _this._onPivotChange;
-            // @ts-ignore
-            _this._border._onValueChanged = _this._onBorderChange;
-            region && _this._region.copyFrom(region);
-            pivot && _this._pivot.copyFrom(pivot);
-            border && _this._border.copyFrom(border);
-            _this.name = name;
-            return _this;
-        }
-        var _proto = Sprite.prototype;
-        /**
-       * Clone.
-       * @returns Cloned sprite
-       */ _proto.clone = function clone() {
-            var cloneSprite = new Sprite(this._engine, this._texture, this._region, this._pivot, this._border, this.name);
-            cloneSprite._atlasRotated = this._atlasRotated;
-            cloneSprite._atlasRegion.copyFrom(this._atlasRegion);
-            cloneSprite._atlasRegionOffset.copyFrom(this._atlasRegionOffset);
-            return cloneSprite;
-        };
-        /**
-       * @internal
-       */ _proto._getPositions = function _getPositions() {
-            this._dirtyUpdateFlag & 1 && this._updatePositions();
-            return this._positions;
-        };
-        /**
-       * @internal
-       */ _proto._getUVs = function _getUVs() {
-            this._dirtyUpdateFlag & 2 && this._updateUVs();
-            return this._uvs;
-        };
-        /**
-       * @internal
-       */ _proto._getBounds = function _getBounds() {
-            this._dirtyUpdateFlag & 1 && this._updatePositions();
-            return this._bounds;
-        };
-        /**
-       * @internal
-       */ _proto._addReferCount = function _addReferCount(value) {
-            var _this__atlas;
-            ReferResource.prototype._addReferCount.call(this, value);
-            (_this__atlas = this._atlas) == null ? void 0 : _this__atlas._addReferCount(value);
-        };
-        /**
-       * @internal
-       */ _proto._onDestroy = function _onDestroy() {
-            this._dispatchSpriteChange(SpriteModifyFlags.destroy);
-            ReferResource.prototype._onDestroy.call(this);
-            this._positions.length = 0;
-            this._positions = null;
-            this._uvs.length = 0;
-            this._uvs = null;
-            this._atlasRegion = null;
-            this._atlasRegionOffset = null;
-            this._region = null;
-            this._pivot = null;
-            this._border = null;
-            this._bounds = null;
-            this._atlas = null;
-            this._texture = null;
-        };
-        _proto._calDefaultSize = function _calDefaultSize() {
-            if (this._texture) {
-                var _this = this, _texture = _this._texture, _atlasRegion = _this._atlasRegion, _atlasRegionOffset = _this._atlasRegionOffset, _region = _this._region, _atlasRotated = _this._atlasRotated;
-                var ppuReciprocal = 1.0 / Engine._pixelsPerUnit;
-                // 先算 atlas 中绝对像素（texture 不一定是方形，必须各自乘对应维度）
-                var atlasPxW = _texture.width * _atlasRegion.width;
-                var atlasPxH = _texture.height * _atlasRegion.height;
-                // atlas 顺时针 pack 90°：原图 W×H 在 atlas 中占 H×W 区域，仅交换 atlasPx 的 W/H
-                var originWidth = _atlasRotated ? atlasPxH : atlasPxW;
-                var originHeight = _atlasRotated ? atlasPxW : atlasPxH;
-                this._automaticWidth = originWidth / (1 - _atlasRegionOffset.x - _atlasRegionOffset.z) * _region.width * ppuReciprocal;
-                this._automaticHeight = originHeight / (1 - _atlasRegionOffset.y - _atlasRegionOffset.w) * _region.height * ppuReciprocal;
-            } else {
-                this._automaticWidth = this._automaticHeight = 0;
-            }
-            this._dirtyUpdateFlag &= ~4;
-        };
-        _proto._updatePositions = function _updatePositions() {
-            var blank = this._atlasRegionOffset;
-            var _this__region = this._region, regionX = _this__region.x, regionY = _this__region.y, regionW = _this__region.width, regionH = _this__region.height;
-            var regionRight = 1 - regionX - regionW;
-            var regionBottom = 1 - regionY - regionH;
-            var left = Math.max(blank.x - regionX, 0) / regionW;
-            var bottom = Math.max(blank.w - regionY, 0) / regionH;
-            var right = 1 - Math.max(blank.z - regionRight, 0) / regionW;
-            var top = 1 - Math.max(blank.y - regionBottom, 0) / regionH;
-            // Update positions.
-            // ---------------
-            //  2 - 3
-            //  |   |
-            //  0 - 1
-            // ---------------
-            var positions = this._positions;
-            positions[0].set(left, bottom);
-            positions[1].set(right, bottom);
-            positions[2].set(left, top);
-            positions[3].set(right, top);
-            var bounds = this._bounds;
-            bounds.min.set(left, bottom, 0);
-            bounds.max.set(right, top, 0);
-            this._dirtyUpdateFlag &= ~1;
-        };
-        _proto._updateUVs = function _updateUVs() {
-            var _this = this, uvs = _this._uvs, atlasRotated = _this._atlasRotated, border = _this._border;
-            var _this__region = this._region, regionLeft = _this__region.x, regionTop = _this__region.y, regionW = _this__region.width, regionH = _this__region.height;
-            var regionRight = 1 - regionLeft - regionW;
-            var regionBottom = 1 - regionTop - regionH;
-            var _this__atlasRegion = this._atlasRegion, atlasRegionX = _this__atlasRegion.x, atlasRegionY = _this__atlasRegion.y, atlasRegionW = _this__atlasRegion.width, atlasRegionH = _this__atlasRegion.height;
-            var _this__atlasRegionOffset = this._atlasRegionOffset, offsetLeft = _this__atlasRegionOffset.x, offsetTop = _this__atlasRegionOffset.y, offsetRight = _this__atlasRegionOffset.z, offsetBottom = _this__atlasRegionOffset.w;
-            var realWidth = atlasRegionW / (1 - offsetLeft - offsetRight);
-            var realHeight = atlasRegionH / (1 - offsetTop - offsetBottom);
-            // 4 个外边界 + 4 个 9-slice 内边界
-            var left, top, right, bottom;
-            var bLeft, bTop, bRight, bBottom;
-            if (atlasRotated) {
-                // 原图 region/offset (left/top/right/bottom) 在 atlas 中映射为 (bottom/left/top/right)
-                left = Math.max(regionBottom - offsetLeft, 0) * realWidth + atlasRegionX;
-                top = Math.max(regionLeft - offsetTop, 0) * realHeight + atlasRegionY;
-                right = atlasRegionW + atlasRegionX - Math.max(regionTop - offsetRight, 0) * realWidth;
-                bottom = atlasRegionH + atlasRegionY - Math.max(regionRight - offsetBottom, 0) * realHeight;
-                bLeft = (regionBottom - offsetLeft + border.y * regionH) * realWidth + atlasRegionX;
-                bTop = (regionLeft - offsetTop + border.x * regionW) * realHeight + atlasRegionY;
-                bRight = atlasRegionW + atlasRegionX - (regionTop - offsetRight + border.w * regionH) * realWidth;
-                bBottom = atlasRegionH + atlasRegionY - (regionRight - offsetBottom + border.z * regionW) * realHeight;
-            } else {
-                left = Math.max(regionLeft - offsetLeft, 0) * realWidth + atlasRegionX;
-                top = Math.max(regionBottom - offsetTop, 0) * realHeight + atlasRegionY;
-                right = atlasRegionW + atlasRegionX - Math.max(regionRight - offsetRight, 0) * realWidth;
-                bottom = atlasRegionH + atlasRegionY - Math.max(regionTop - offsetBottom, 0) * realHeight;
-                bLeft = (regionLeft - offsetLeft + border.x * regionW) * realWidth + atlasRegionX;
-                bTop = (regionBottom - offsetTop + border.w * regionH) * realHeight + atlasRegionY;
-                bRight = atlasRegionW + atlasRegionX - (regionRight - offsetRight + border.z * regionW) * realWidth;
-                bBottom = atlasRegionH + atlasRegionY - (regionTop - offsetBottom + border.y * regionH) * realHeight;
-            }
-            // 16 UV 网格填充（column-major：index=i*4+j，i=column[0=left..3=right]，j=row[0=bottom..3=top]）
-            // - 非 rotated：column 决定 atlas X (left/bLeft/bRight/right)，row 决定 atlas Y (bottom/bBottom/bTop/top)
-            // - rotated 90° 顺时针 packed：display column 对应 atlas Y 的反向（顶→底），display row 对应 atlas X
-            if (atlasRotated) {
-                uvs[0].set(left, top), uvs[1].set(bLeft, top), uvs[2].set(bRight, top), uvs[3].set(right, top);
-                uvs[4].set(left, bTop), uvs[5].set(bLeft, bTop), uvs[6].set(bRight, bTop), uvs[7].set(right, bTop);
-                uvs[8].set(left, bBottom), uvs[9].set(bLeft, bBottom), uvs[10].set(bRight, bBottom), uvs[11].set(right, bBottom);
-                uvs[12].set(left, bottom), uvs[13].set(bLeft, bottom), uvs[14].set(bRight, bottom), uvs[15].set(right, bottom);
-            } else {
-                uvs[0].set(left, bottom), uvs[1].set(left, bBottom), uvs[2].set(left, bTop), uvs[3].set(left, top);
-                uvs[4].set(bLeft, bottom), uvs[5].set(bLeft, bBottom), uvs[6].set(bLeft, bTop), uvs[7].set(bLeft, top);
-                uvs[8].set(bRight, bottom), uvs[9].set(bRight, bBottom), uvs[10].set(bRight, bTop), uvs[11].set(bRight, top);
-                uvs[12].set(right, bottom), uvs[13].set(right, bBottom), uvs[14].set(right, bTop), uvs[15].set(right, top);
-            }
-            this._dirtyUpdateFlag &= ~2;
-        };
-        _proto._dispatchSpriteChange = function _dispatchSpriteChange(type) {
-            switch(type){
-                case SpriteModifyFlags.texture:
-                    this._dirtyUpdateFlag |= 4;
-                    break;
-                case SpriteModifyFlags.atlasRegionOffset:
-                case SpriteModifyFlags.region:
-                    this._dirtyUpdateFlag |= 7;
-                    break;
-                case SpriteModifyFlags.atlasRegion:
-                    this._dirtyUpdateFlag |= 4 | 2;
-                    break;
-                case SpriteModifyFlags.border:
-                    this._dirtyUpdateFlag |= 2;
-                    break;
-            }
-            this._updateFlagManager.dispatch(type);
-        };
-        _proto._onRegionChange = function _onRegionChange() {
-            var _this = this, region = _this._region;
-            // @ts-ignore
-            region._onValueChanged = null;
-            var x = MathUtil.clamp(region.x, 0, 1);
-            var y = MathUtil.clamp(region.y, 0, 1);
-            region.set(x, y, MathUtil.clamp(region.width, 0, 1 - x), MathUtil.clamp(region.height, 0, 1 - y));
-            this._dispatchSpriteChange(SpriteModifyFlags.region);
-            if (this._customWidth === undefined || this._customHeight === undefined) {
-                this._dispatchSpriteChange(SpriteModifyFlags.size);
-            }
-            // @ts-ignore
-            region._onValueChanged = this._onRegionChange;
-        };
-        _proto._onPivotChange = function _onPivotChange() {
-            this._dispatchSpriteChange(SpriteModifyFlags.pivot);
-        };
-        _proto._onBorderChange = function _onBorderChange() {
-            var _this = this, border = _this._border;
-            // @ts-ignore
-            border._onValueChanged = null;
-            var x = MathUtil.clamp(border.x, 0, 1);
-            var y = MathUtil.clamp(border.y, 0, 1);
-            border.set(x, y, MathUtil.clamp(border.z, 0, 1 - x), MathUtil.clamp(border.w, 0, 1 - y));
-            this._dispatchSpriteChange(SpriteModifyFlags.border);
-            // @ts-ignore
-            border._onValueChanged = this._onBorderChange;
-        };
-        _create_class$2(Sprite, [
-            {
-                key: "texture",
-                get: /**
-       * The reference to the used texture.
-       */ function get() {
-                    return this._texture;
-                },
-                set: function set(value) {
-                    if (this._texture !== value) {
-                        this._texture = value;
-                        this._dispatchSpriteChange(SpriteModifyFlags.texture);
-                        if (this._customWidth === undefined || this._customHeight === undefined) {
-                            this._dispatchSpriteChange(SpriteModifyFlags.size);
-                        }
-                    }
-                }
-            },
-            {
-                key: "width",
-                get: /**
-       * The width of the sprite (in world coordinates).
-       *
-       * @remarks
-       * If width is set, return the set value,
-       * otherwise return the width calculated according to `Texture.width`, `Sprite.region`, `Sprite.atlasRegion` and `Sprite.atlasRegionOffset`.
-       */ function get() {
-                    if (this._customWidth !== undefined) {
-                        return this._customWidth;
-                    } else {
-                        this._dirtyUpdateFlag & 4 && this._calDefaultSize();
-                        return this._automaticWidth;
-                    }
-                },
-                set: function set(value) {
-                    if (this._customWidth !== value) {
-                        this._customWidth = value;
-                        this._dispatchSpriteChange(SpriteModifyFlags.size);
-                    }
-                }
-            },
-            {
-                key: "height",
-                get: /**
-       * The height of the sprite (in world coordinates).
-       *
-       * @remarks
-       * If height is set, return the set value,
-       * otherwise return the height calculated according to `Texture.height`, `Sprite.region`, `Sprite.atlasRegion` and `Sprite.atlasRegionOffset`.
-       */ function get() {
-                    if (this._customHeight !== undefined) {
-                        return this._customHeight;
-                    } else {
-                        this._dirtyUpdateFlag & 4 && this._calDefaultSize();
-                        return this._automaticHeight;
-                    }
-                },
-                set: function set(value) {
-                    if (this._customHeight !== value) {
-                        this._customHeight = value;
-                        this._dispatchSpriteChange(SpriteModifyFlags.size);
-                    }
-                }
-            },
-            {
-                key: "atlasRotated",
-                get: /**
-       * Is it rotated 90 degrees clockwise when packing.
-       */ function get() {
-                    return this._atlasRotated;
-                },
-                set: function set(value) {
-                    if (this._atlasRotated != value) {
-                        this._atlasRotated = value;
-                    }
-                }
-            },
-            {
-                key: "atlasRegion",
-                get: /**
-       * The rectangle region of the original texture on its atlas texture, specified in normalized.
-       */ function get() {
-                    return this._atlasRegion;
-                },
-                set: function set(value) {
-                    var x = MathUtil.clamp(value.x, 0, 1);
-                    var y = MathUtil.clamp(value.y, 0, 1);
-                    this._atlasRegion.set(x, y, MathUtil.clamp(value.width, 0, 1 - x), MathUtil.clamp(value.height, 0, 1 - y));
-                    this._dispatchSpriteChange(SpriteModifyFlags.atlasRegion);
-                    if (this._customWidth === undefined || this._customHeight === undefined) {
-                        this._dispatchSpriteChange(SpriteModifyFlags.size);
-                    }
-                }
-            },
-            {
-                key: "atlasRegionOffset",
-                get: /**
-       * The rectangle region offset of the original texture on its atlas texture, specified in normalized.
-       */ function get() {
-                    return this._atlasRegionOffset;
-                },
-                set: function set(value) {
-                    var x = MathUtil.clamp(value.x, 0, 1);
-                    var y = MathUtil.clamp(value.y, 0, 1);
-                    this._atlasRegionOffset.set(x, y, MathUtil.clamp(value.z, 0, 1 - x), MathUtil.clamp(value.w, 0, 1 - y));
-                    this._dispatchSpriteChange(SpriteModifyFlags.atlasRegionOffset);
-                    if (this._customWidth === undefined || this._customHeight === undefined) {
-                        this._dispatchSpriteChange(SpriteModifyFlags.size);
-                    }
-                }
-            },
-            {
-                key: "region",
-                get: /**
-       * The rectangle region of the sprite, specified in normalized.
-       */ function get() {
-                    return this._region;
-                },
-                set: function set(value) {
-                    this._region !== value && this._region.copyFrom(value);
-                }
-            },
-            {
-                key: "pivot",
-                get: /**
-       * Location of the sprite's center point in the rectangle region, specified in normalized.
-       * The origin is at the bottom left and the default value is (0.5, 0.5).
-       */ function get() {
-                    return this._pivot;
-                },
-                set: function set(value) {
-                    this._pivot !== value && this._pivot.copyFrom(value);
-                }
-            },
-            {
-                key: "border",
-                get: /**
-       * Get the border of the sprite.
-       *  x      y       z     w
-       *  |      |       |     |
-       * Left, bottom, right, top.
-       * @remarks only use in sliced mode.
-       */ function get() {
-                    return this._border;
-                },
-                set: function set(value) {
-                    this._border !== value && this._border.copyFrom(value);
-                }
-            }
-        ]);
-        return Sprite;
-    }(ReferResource);
-    __decorate$1([
-        ignoreClone
-    ], Sprite.prototype, "_onRegionChange", null);
-    __decorate$1([
-        ignoreClone
-    ], Sprite.prototype, "_onPivotChange", null);
-    __decorate$1([
-        ignoreClone
-    ], Sprite.prototype, "_onBorderChange", null);
     /**
      * Blend factor.
      * @remarks defines which function is used for blending pixel arithmetic
@@ -10451,6 +10014,66 @@
         };
         return _extends$2.apply(this, arguments);
     }
+    /**
+     * @internal
+     */ var UpdateFlagManager = /*#__PURE__*/ function() {
+        function UpdateFlagManager() {
+            /** @internal */ this._updateFlags = [];
+            this._listeners = [];
+        }
+        var _proto = UpdateFlagManager.prototype;
+        /**
+       * Create a UpdateFlag.
+       * @returns - The UpdateFlag.
+       */ _proto.createFlag = function createFlag(type) {
+            var flag = new type();
+            this.addFlag(flag);
+            return flag;
+        };
+        /**
+       * Add a UpdateFlag.
+       * @param flag - The UpdateFlag.
+       */ _proto.addFlag = function addFlag(flag) {
+            this._updateFlags.push(flag);
+            flag._flagManagers.push(this);
+        };
+        /**
+       * Remove a UpdateFlag.
+       * @param flag - The UpdateFlag.
+       */ _proto.removeFlag = function removeFlag(flag) {
+            var success = Utils.removeFromArray(this._updateFlags, flag);
+            if (success) {
+                Utils.removeFromArray(flag._flagManagers, this);
+            }
+        };
+        /**
+       * Add a listener.
+       * @param listener - The listener
+       */ _proto.addListener = function addListener(listener) {
+            this._listeners.push(listener);
+        };
+        /**
+       * Remove a listener.
+       * @param listener - The listener
+       */ _proto.removeListener = function removeListener(listener) {
+            Utils.removeFromArray(this._listeners, listener);
+        };
+        /**
+       * Dispatch a event.
+       * @param type - Event type, usually in the form of enumeration
+       * @param param - Event param
+       */ _proto.dispatch = function dispatch(type, param) {
+            var updateFlags = this._updateFlags;
+            for(var i = updateFlags.length - 1; i >= 0; i--){
+                updateFlags[i].dispatch(type, param);
+            }
+            var listeners = this._listeners;
+            for(var i1 = listeners.length - 1; i1 >= 0; i1--){
+                listeners[i1](type, param);
+            }
+        };
+        return UpdateFlagManager;
+    }();
     /**
      * Buffer usage.
      */ var BufferUsage = /*#__PURE__*/ function(BufferUsage) {
@@ -12118,7 +11741,7 @@
         _inherits$2(Renderer, Component);
         function Renderer(entity) {
             var _this;
-            _this = Component.call(this, entity) || this, /** @internal */ _this._onUpdateIndex = -1, /** @internal */ _this._rendererIndex = -1, /** @internal */ _this._globalShaderMacro = new ShaderMacroCollection(), /** @internal */ _this._maskInteraction = SpriteMaskInteraction.None, _this._maskLayer = SpriteMaskLayer.Layer0, _this._overrideUpdate = false, _this._materials = [], _this._dirtyUpdateFlag = 0, _this._rendererLayer = new Vector4(), _this._bounds = new BoundingBox(), _this._shaderData = new ShaderData(ShaderDataGroup.Renderer), _this._mvMatrix = new Matrix(), _this._mvpMatrix = new Matrix(), _this._normalMatrix = new Matrix(), _this._materialsInstanced = [], _this._priority = 0, _this._receiveShadows = true, /** Whether cast shadow. */ _this.castShadows = true;
+            _this = Component.call(this, entity) || this, /** @internal */ _this._onUpdateIndex = -1, /** @internal */ _this._rendererIndex = -1, /** @internal */ _this._globalShaderMacro = new ShaderMacroCollection(), _this._maskInteraction = SpriteMaskInteraction.None, _this._maskLayer = SpriteMaskLayer.Layer0, _this._overrideUpdate = false, _this._materials = [], _this._dirtyUpdateFlag = 0, _this._rendererLayer = new Vector4(), _this._bounds = new BoundingBox(), _this._shaderData = new ShaderData(ShaderDataGroup.Renderer), _this._mvMatrix = new Matrix(), _this._mvpMatrix = new Matrix(), _this._normalMatrix = new Matrix(), _this._materialsInstanced = [], _this._priority = 0, _this._receiveShadows = true, /** Whether cast shadow. */ _this.castShadows = true;
             var prototype = Renderer.prototype;
             var shaderData = _this.shaderData;
             _this._overrideUpdate = _this.update !== prototype.update;
@@ -14970,6 +14593,21 @@
             var preRenderer = preElement.component;
             var renderer = curElement.component;
             var maskInteraction = preRenderer.maskInteraction;
+            var preRendererAny = preRenderer;
+            var curRendererAny = renderer;
+            var rectMaskEnabledA = preRendererAny._rectMaskEnabled;
+            if (rectMaskEnabledA !== curRendererAny._rectMaskEnabled) {
+                return false;
+            }
+            if (rectMaskEnabledA) {
+                var rectMaskRectA = preRendererAny._rectMaskRect;
+                var rectMaskRectB = curRendererAny._rectMaskRect;
+                var rectMaskSoftnessA = preRendererAny._rectMaskSoftness;
+                var rectMaskSoftnessB = curRendererAny._rectMaskSoftness;
+                if (!rectMaskRectA || !rectMaskRectB || !rectMaskSoftnessA || !rectMaskSoftnessB || rectMaskRectA.x !== rectMaskRectB.x || rectMaskRectA.y !== rectMaskRectB.y || rectMaskRectA.z !== rectMaskRectB.z || rectMaskRectA.w !== rectMaskRectB.w || rectMaskSoftnessA.x !== rectMaskSoftnessB.x || rectMaskSoftnessA.y !== rectMaskSoftnessB.y || rectMaskSoftnessA.z !== rectMaskSoftnessB.z || rectMaskSoftnessA.w !== rectMaskSoftnessB.w || preRendererAny._rectMaskHardClip !== curRendererAny._rectMaskHardClip) {
+                    return false;
+                }
+            }
             // Order: cheap reference checks → mask state → tag lookup (rare opt-out)
             return preElement.subChunk.chunk === curElement.subChunk.chunk && preElement.texture === curElement.texture && preElement.material === curElement.material && maskInteraction === renderer.maskInteraction && (maskInteraction === SpriteMaskInteraction.None || preRenderer.maskLayer === renderer.maskLayer) && curElement.subShader.passes[0].getTagValue(VertexMergeBatcher._disableBatchTag) !== true;
         };
@@ -15007,191 +14645,703 @@
         return VertexMergeBatcher;
     }();
     VertexMergeBatcher._disableBatchTag = ShaderTagKey.getByName("spriteDisableBatching");
-    var RenderElement = /*#__PURE__*/ function() {
-        function RenderElement() {
-            this.instancedRenderers = [];
-        }
-        var _proto = RenderElement.prototype;
-        _proto.set = function set(component, material, primitive, subPrimitive, texture, subChunk) {
-            this.component = component;
-            this.material = material;
-            this.primitive = primitive;
-            this.subPrimitive = subPrimitive;
-            this.texture = texture;
-            this.subChunk = subChunk;
-            this.instancedRenderers.length = 0;
+    /**
+     * Internal helpers for sprite mask hit testing.
+     * @internal
+     */ var SpriteMaskUtils = /*#__PURE__*/ function() {
+        function SpriteMaskUtils() {}
+        SpriteMaskUtils.containsWorldPoint = function containsWorldPoint(worldPoint, sprite, worldMatrix, width, height, pivot, flipX, flipY, alphaCutoff) {
+            if (alphaCutoff === void 0) alphaCutoff = 0;
+            if (!sprite || !width || !height) {
+                return false;
+            }
+            var worldMatrixInv = SpriteMaskUtils._tempMat;
+            Matrix.invert(worldMatrix, worldMatrixInv);
+            var localPosition = SpriteMaskUtils._tempVec3;
+            Vector3.transformCoordinate(worldPoint, worldMatrixInv, localPosition);
+            var sx = flipX ? -width : width;
+            var sy = flipY ? -height : height;
+            if (!sx || !sy) {
+                return false;
+            }
+            var spriteX = localPosition.x / sx + pivot.x;
+            var spriteY = localPosition.y / sy + pivot.y;
+            var spritePositions = sprite._getPositions();
+            var _spritePositions_ = spritePositions[0], left = _spritePositions_.x, bottom = _spritePositions_.y;
+            var _spritePositions_1 = spritePositions[3], right = _spritePositions_1.x, top = _spritePositions_1.y;
+            if (!(spriteX >= left && spriteX <= right && spriteY >= bottom && spriteY <= top)) {
+                return false;
+            }
+            if (alphaCutoff <= 0) {
+                return true;
+            }
+            var texture = sprite.texture;
+            if (!texture) {
+                return false;
+            }
+            var spriteUVs = sprite._getUVs();
+            var leftU = spriteUVs[0].x;
+            var bottomV = spriteUVs[0].y;
+            var rightU = spriteUVs[3].x;
+            var topV = spriteUVs[3].y;
+            var positionWidth = right - left;
+            var positionHeight = top - bottom;
+            if (!positionWidth || !positionHeight) {
+                return false;
+            }
+            var tx = (spriteX - left) / positionWidth;
+            var ty = (spriteY - bottom) / positionHeight;
+            var u = leftU + (rightU - leftU) * tx;
+            var v = bottomV + (topV - bottomV) * ty;
+            var x = Math.min(Math.max(Math.floor(u * texture.width), 0), texture.width - 1);
+            var y = Math.min(Math.max(Math.floor(v * texture.height), 0), texture.height - 1);
+            return SpriteMaskUtils._sampleTextureAlpha(texture, x, y) >= alphaCutoff;
         };
-        _proto.dispose = function dispose() {
-            this.component = null;
-            this.material = null;
-            this.primitive = null;
-            this.subPrimitive = null;
-            this.subShader = null;
-            this.shaderData && (this.shaderData = null);
-            this.instancedRenderers = null;
-            this.texture && (this.texture = null);
-            this.subChunk && (this.subChunk = null);
+        SpriteMaskUtils._sampleTextureAlpha = function _sampleTextureAlpha(texture, x, y) {
+            try {
+                switch(texture.format){
+                    case TextureFormat.R8G8B8A8:
+                        {
+                            var buffer = SpriteMaskUtils._u8Buffer4;
+                            texture.getPixelBuffer(x, y, 1, 1, buffer);
+                            return buffer[3] / 255;
+                        }
+                    case TextureFormat.R4G4B4A4:
+                        {
+                            var buffer1 = SpriteMaskUtils._u16Buffer1;
+                            texture.getPixelBuffer(x, y, 1, 1, buffer1);
+                            return (buffer1[0] & 0xf) / 15;
+                        }
+                    case TextureFormat.R5G5B5A1:
+                        {
+                            var buffer2 = SpriteMaskUtils._u16Buffer1;
+                            texture.getPixelBuffer(x, y, 1, 1, buffer2);
+                            return buffer2[0] & 0x1;
+                        }
+                    case TextureFormat.Alpha8:
+                    case TextureFormat.R8:
+                        {
+                            var buffer3 = SpriteMaskUtils._u8Buffer1;
+                            texture.getPixelBuffer(x, y, 1, 1, buffer3);
+                            return buffer3[0] / 255;
+                        }
+                    case TextureFormat.LuminanceAlpha:
+                    case TextureFormat.R8G8:
+                        {
+                            var buffer4 = SpriteMaskUtils._u8Buffer2;
+                            texture.getPixelBuffer(x, y, 1, 1, buffer4);
+                            return buffer4[1] / 255;
+                        }
+                    case TextureFormat.R16G16B16A16:
+                        {
+                            var buffer5 = SpriteMaskUtils._u16Buffer4;
+                            texture.getPixelBuffer(x, y, 1, 1, buffer5);
+                            return buffer5[3] / 65535;
+                        }
+                    case TextureFormat.R32G32B32A32:
+                        {
+                            var buffer6 = SpriteMaskUtils._f32Buffer4;
+                            texture.getPixelBuffer(x, y, 1, 1, buffer6);
+                            return buffer6[3];
+                        }
+                    case TextureFormat.R32G32B32A32_UInt:
+                        {
+                            var buffer7 = SpriteMaskUtils._u32Buffer4;
+                            texture.getPixelBuffer(x, y, 1, 1, buffer7);
+                            return buffer7[3] / 4294967295;
+                        }
+                    default:
+                        return 1;
+                }
+            } catch (e) {
+                return 1;
+            }
         };
-        return RenderElement;
+        return SpriteMaskUtils;
     }();
+    SpriteMaskUtils._tempMat = new Matrix();
+    SpriteMaskUtils._tempVec3 = new Vector3();
+    SpriteMaskUtils._u8Buffer1 = new Uint8Array(1);
+    SpriteMaskUtils._u8Buffer2 = new Uint8Array(2);
+    SpriteMaskUtils._u8Buffer4 = new Uint8Array(4);
+    SpriteMaskUtils._u16Buffer1 = new Uint16Array(1);
+    SpriteMaskUtils._u16Buffer4 = new Uint16Array(4);
+    SpriteMaskUtils._f32Buffer4 = new Float32Array(4);
+    SpriteMaskUtils._u32Buffer4 = new Uint32Array(4);
+    /**
+     * Mixin that provides shared mask rendering logic for both 2D SpriteMask and UI Mask.
+     */ function MaskRenderable(Base) {
+        var MaskRenderableBase = /*#__PURE__*/ function(Base) {
+            _inherits$2(MaskRenderableBase, Base);
+            function MaskRenderableBase() {
+                var _this;
+                _this = Base.apply(this, arguments) || this, _this._influenceLayers = SpriteMaskLayer.Everything, /** @internal */ _this._maskIndex = -1, _this._sprite = null, _this._flipX = false, _this._flipY = false, _this._alphaCutoff = 0.5;
+                return _this;
+            }
+            var _proto = MaskRenderableBase.prototype;
+            /**
+         * @internal
+         */ // @ts-ignore
+            _proto._canBatch = function _canBatch(preElement, curElement) {
+                return VertexMergeBatcher.canBatchSpriteMask(preElement, curElement);
+            };
+            /**
+         * @internal
+         */ // @ts-ignore
+            _proto._batch = function _batch(preElement, curElement) {
+                VertexMergeBatcher.batch(preElement, curElement);
+            };
+            /**
+         * @internal
+         */ // @ts-ignore
+            _proto._onEnableInScene = function _onEnableInScene() {
+                // @ts-ignore
+                Base.prototype._onEnableInScene.call(this);
+                // @ts-ignore
+                this.scene._maskManager.addSpriteMask(this);
+            };
+            /**
+         * @internal
+         */ // @ts-ignore
+            _proto._onDisableInScene = function _onDisableInScene() {
+                // @ts-ignore
+                Base.prototype._onDisableInScene.call(this);
+                // @ts-ignore
+                this.scene._maskManager.removeSpriteMask(this);
+            };
+            /**
+         * @internal
+         */ _proto._containsWorldPoint = function _containsWorldPoint(worldPoint) {
+                return SpriteMaskUtils.containsWorldPoint(worldPoint, this._sprite, this._transformEntity.transform.worldMatrix, this._getSpriteWidth(), this._getSpriteHeight(), this._getSpritePivot(), this._flipX, this._flipY, this._alphaCutoff);
+            };
+            /**
+         * @internal
+         * Initialize shared mask resources. Must be called from subclass constructor.
+         */ _proto._initMask = function _initMask() {
+                exports.SimpleSpriteAssembler.resetData(this);
+                // @ts-ignore
+                this.setMaterial(this._engine._basicResources.spriteMaskDefaultMaterial);
+                // @ts-ignore
+                this.shaderData.setFloat(MaskRenderableBase._alphaCutoffProperty, this._alphaCutoff);
+                this._renderElement = new RenderElement();
+                this._onSpriteChange = this._onSpriteChange.bind(this);
+            };
+            /**
+         * @internal
+         * Clone mask data to target. Called from subclass _cloneTo.
+         */ _proto._cloneMaskData = function _cloneMaskData(target) {
+                target.sprite = this._sprite;
+            };
+            /**
+         * @internal
+         * Release mask sprite resources. Called from subclass _onDestroy.
+         */ _proto._destroyMaskResources = function _destroyMaskResources() {
+                var sprite = this._sprite;
+                if (sprite) {
+                    // @ts-ignore
+                    this._addResourceReferCount(sprite, -1);
+                    sprite._updateFlagManager.removeListener(this._onSpriteChange);
+                }
+                this._sprite = null;
+                this._renderElement = null;
+            };
+            /**
+         * @internal
+         * Update bounds using SimpleSpriteAssembler directly.
+         */ _proto._updateMaskBounds = function _updateMaskBounds(worldBounds) {
+                var sprite = this._sprite;
+                if (sprite) {
+                    exports.SimpleSpriteAssembler.updatePositions(this, this._transformEntity.transform.worldMatrix, this._getSpriteWidth(), this._getSpriteHeight(), this._getSpritePivot(), this._flipX, this._flipY);
+                } else {
+                    // @ts-ignore
+                    var worldPosition = this._transformEntity.transform.worldPosition;
+                    worldBounds.min.copyFrom(worldPosition);
+                    worldBounds.max.copyFrom(worldPosition);
+                }
+            };
+            /**
+         * @internal
+         * Shared render logic for mask geometry.
+         */ _proto._renderMask = function _renderMask(distanceForSort) {
+                var _this = this, sprite = _this._sprite;
+                var width = this._getSpriteWidth();
+                var height = this._getSpriteHeight();
+                if (!(sprite == null ? void 0 : sprite.texture) || !width || !height) {
+                    return;
+                }
+                // @ts-ignore
+                var material = this.getMaterial();
+                if (!material) {
+                    return;
+                }
+                if (material.destroyed) {
+                    // @ts-ignore
+                    material = this._engine._basicResources.spriteMaskDefaultMaterial;
+                }
+                // Update position
+                // @ts-ignore
+                if (this._dirtyUpdateFlag & RendererUpdateFlags.WorldVolume) {
+                    exports.SimpleSpriteAssembler.updatePositions(this, this._transformEntity.transform.worldMatrix, width, height, this._getSpritePivot(), this._flipX, this._flipY);
+                    // @ts-ignore
+                    this._dirtyUpdateFlag &= ~RendererUpdateFlags.WorldVolume;
+                }
+                // Update uv
+                // @ts-ignore
+                if (this._dirtyUpdateFlag & 2) {
+                    exports.SimpleSpriteAssembler.updateUVs(this);
+                    // @ts-ignore
+                    this._dirtyUpdateFlag &= ~2;
+                }
+                var renderElement = this._renderElement;
+                var subChunk = this._subChunk;
+                // @ts-ignore
+                renderElement.set(this, material, subChunk.chunk.primitive, subChunk.subMesh, sprite.texture, subChunk);
+                // @ts-ignore
+                renderElement.priority = this.priority;
+                renderElement.distanceForSort = distanceForSort;
+                renderElement.subShader = material.shader.subShaders[0];
+            };
+            /** @internal */ _proto._onSpriteChange = function _onSpriteChange(type) {
+                switch(type){
+                    case SpriteModifyFlags.texture:
+                        // @ts-ignore
+                        this.shaderData.setTexture(MaskRenderableBase._maskTextureProperty, this.sprite.texture);
+                        break;
+                    case SpriteModifyFlags.region:
+                    case SpriteModifyFlags.atlasRegionOffset:
+                        // @ts-ignore
+                        this._dirtyUpdateFlag |= 3;
+                        break;
+                    case SpriteModifyFlags.atlasRegion:
+                        // @ts-ignore
+                        this._dirtyUpdateFlag |= 2;
+                        break;
+                    case SpriteModifyFlags.destroy:
+                        this.sprite = null;
+                        break;
+                    default:
+                        this._onSpriteChangeExtra(type);
+                        break;
+                }
+            };
+            /**
+         * @internal
+         * Hook for subclass-specific sprite change handling.
+         * SpriteMask overrides this to handle size/pivot changes.
+         */ _proto._onSpriteChangeExtra = function _onSpriteChangeExtra(type) {};
+            /** @internal */ _proto._getSpriteWidth = function _getSpriteWidth() {
+                return 0;
+            };
+            /** @internal */ _proto._getSpriteHeight = function _getSpriteHeight() {
+                return 0;
+            };
+            /** @internal */ _proto._getSpritePivot = function _getSpritePivot() {
+                return null;
+            };
+            _create_class$2(MaskRenderableBase, [
+                {
+                    key: "influenceLayers",
+                    get: /**
+         * The mask layers the sprite mask influence to.
+         */ function get() {
+                        return this._influenceLayers;
+                    },
+                    set: function set(value) {
+                        if (this._influenceLayers !== value) {
+                            this._influenceLayers = value;
+                            // @ts-ignore
+                            if (this._phasedActiveInScene) {
+                                // @ts-ignore
+                                this.scene._maskManager.onMaskInfluenceLayersChange();
+                            }
+                        }
+                    }
+                },
+                {
+                    key: "flipX",
+                    get: /**
+         * Flips the sprite on the X axis.
+         */ function get() {
+                        return this._flipX;
+                    },
+                    set: function set(value) {
+                        if (this._flipX !== value) {
+                            this._flipX = value;
+                            // @ts-ignore
+                            this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
+                        }
+                    }
+                },
+                {
+                    key: "flipY",
+                    get: /**
+         * Flips the sprite on the Y axis.
+         */ function get() {
+                        return this._flipY;
+                    },
+                    set: function set(value) {
+                        if (this._flipY !== value) {
+                            this._flipY = value;
+                            // @ts-ignore
+                            this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
+                        }
+                    }
+                },
+                {
+                    key: "sprite",
+                    get: /**
+         * The Sprite to render.
+         */ function get() {
+                        return this._sprite;
+                    },
+                    set: function set(value) {
+                        var lastSprite = this._sprite;
+                        if (lastSprite !== value) {
+                            if (lastSprite) {
+                                // @ts-ignore
+                                this._addResourceReferCount(lastSprite, -1);
+                                lastSprite._updateFlagManager.removeListener(this._onSpriteChange);
+                            }
+                            // @ts-ignore
+                            this._dirtyUpdateFlag |= 11;
+                            if (value) {
+                                // @ts-ignore
+                                this._addResourceReferCount(value, 1);
+                                value._updateFlagManager.addListener(this._onSpriteChange);
+                                // @ts-ignore
+                                this.shaderData.setTexture(MaskRenderableBase._maskTextureProperty, value.texture);
+                            } else {
+                                // @ts-ignore
+                                this.shaderData.setTexture(MaskRenderableBase._maskTextureProperty, null);
+                            }
+                            this._sprite = value;
+                        }
+                    }
+                },
+                {
+                    key: "alphaCutoff",
+                    get: /**
+         * The minimum alpha value used by the mask to select the area of influence defined over the mask's sprite. Value between 0 and 1.
+         */ function get() {
+                        return this._alphaCutoff;
+                    },
+                    set: function set(value) {
+                        if (this._alphaCutoff !== value) {
+                            this._alphaCutoff = value;
+                            // @ts-ignore
+                            this.shaderData.setFloat(MaskRenderableBase._alphaCutoffProperty, value);
+                        }
+                    }
+                }
+            ]);
+            return MaskRenderableBase;
+        }(Base);
+        MaskRenderableBase._maskTextureProperty = ShaderProperty.getByName("renderer_MaskTexture");
+        MaskRenderableBase._alphaCutoffProperty = ShaderProperty.getByName("renderer_MaskAlphaCutoff");
+        __decorate$1([
+            assignmentClone
+        ], MaskRenderableBase.prototype, "_influenceLayers", void 0);
+        __decorate$1([
+            ignoreClone
+        ], MaskRenderableBase.prototype, "_renderElement", void 0);
+        __decorate$1([
+            ignoreClone
+        ], MaskRenderableBase.prototype, "_maskIndex", void 0);
+        __decorate$1([
+            ignoreClone
+        ], MaskRenderableBase.prototype, "_sprite", void 0);
+        __decorate$1([
+            assignmentClone
+        ], MaskRenderableBase.prototype, "_flipX", void 0);
+        __decorate$1([
+            assignmentClone
+        ], MaskRenderableBase.prototype, "_flipY", void 0);
+        __decorate$1([
+            assignmentClone
+        ], MaskRenderableBase.prototype, "_alphaCutoff", void 0);
+        __decorate$1([
+            ignoreClone
+        ], MaskRenderableBase.prototype, "_onSpriteChange", null);
+        return MaskRenderableBase;
+    }
     /**
-     * A component for masking Sprites.
-     */ var SpriteMask = /*#__PURE__*/ function(Renderer) {
-        _inherits$2(SpriteMask, Renderer);
-        function SpriteMask(entity) {
+     * @remarks Extends `RendererUpdateFlags`.
+     */ var MaskDirtyFlags = /*#__PURE__*/ function(MaskDirtyFlags) {
+        /** UV. */ MaskDirtyFlags[MaskDirtyFlags["UV"] = 2] = "UV";
+        /** Automatic Size. */ MaskDirtyFlags[MaskDirtyFlags["AutomaticSize"] = 8] = "AutomaticSize";
+        /** WorldVolume and UV. */ MaskDirtyFlags[MaskDirtyFlags["WorldVolumeAndUV"] = 3] = "WorldVolumeAndUV";
+        /** All. */ MaskDirtyFlags[MaskDirtyFlags["All"] = 11] = "All";
+        return MaskDirtyFlags;
+    }({});
+    /**
+     * 2D sprite.
+     */ var Sprite = /*#__PURE__*/ function(ReferResource) {
+        _inherits$2(Sprite, ReferResource);
+        function Sprite(engine, texture, region, pivot, border, name) {
+            if (texture === void 0) texture = null;
+            if (region === void 0) region = null;
+            if (pivot === void 0) pivot = null;
+            if (border === void 0) border = null;
+            if (name === void 0) name = null;
             var _this;
-            _this = Renderer.call(this, entity) || this, /** The mask layers the sprite mask influence to. */ _this.influenceLayers = SpriteMaskLayer.Everything, /** @internal */ _this._maskIndex = -1, _this._sprite = null, _this._automaticWidth = 0, _this._automaticHeight = 0, _this._customWidth = undefined, _this._customHeight = undefined, _this._flipX = false, _this._flipY = false, _this._alphaCutoff = 0.5;
-            exports.SimpleSpriteAssembler.resetData(_this);
-            _this.setMaterial(_this._engine._basicResources.spriteMaskDefaultMaterial);
-            _this.shaderData.setFloat(SpriteMask._alphaCutoffProperty, _this._alphaCutoff);
-            _this._renderElement = new RenderElement();
-            _this._onSpriteChange = _this._onSpriteChange.bind(_this);
+            _this = ReferResource.call(this, engine) || this, _this._automaticWidth = 0, _this._automaticHeight = 0, _this._customWidth = undefined, _this._customHeight = undefined, _this._positions = [
+                new Vector2(),
+                new Vector2(),
+                new Vector2(),
+                new Vector2()
+            ], // 与 SlicedAssembler/TiledAssembler 的 vertex 索引图一致：[0]=LB, [3]=LT, [12]=RB, [15]=RT。
+            // SimpleAssembler 取 [0]/[3]/[12]/[15] 4 个 corner；Sliced/Tiled 用全 16。
+            // prettier-ignore
+            _this._uvs = [
+                new Vector2(),
+                new Vector2(),
+                new Vector2(),
+                new Vector2(),
+                new Vector2(),
+                new Vector2(),
+                new Vector2(),
+                new Vector2(),
+                new Vector2(),
+                new Vector2(),
+                new Vector2(),
+                new Vector2(),
+                new Vector2(),
+                new Vector2(),
+                new Vector2(),
+                new Vector2()
+            ], _this._bounds = new BoundingBox(), _this._texture = null, _this._atlasRotated = false, _this._atlasRegion = new Rect(0, 0, 1, 1), _this._atlasRegionOffset = new Vector4(0, 0, 0, 0), _this._region = new Rect(0, 0, 1, 1), _this._pivot = new Vector2(0.5, 0.5), _this._border = new Vector4(0, 0, 0, 0), _this._dirtyUpdateFlag = 7, /** @internal */ _this._updateFlagManager = new UpdateFlagManager();
+            _this._texture = texture;
+            _this._onRegionChange = _this._onRegionChange.bind(_this);
+            _this._onPivotChange = _this._onPivotChange.bind(_this);
+            _this._onBorderChange = _this._onBorderChange.bind(_this);
+            // @ts-ignore
+            _this._region._onValueChanged = _this._onRegionChange;
+            // @ts-ignore
+            _this._pivot._onValueChanged = _this._onPivotChange;
+            // @ts-ignore
+            _this._border._onValueChanged = _this._onBorderChange;
+            region && _this._region.copyFrom(region);
+            pivot && _this._pivot.copyFrom(pivot);
+            border && _this._border.copyFrom(border);
+            _this.name = name;
             return _this;
         }
-        var _proto = SpriteMask.prototype;
-        /**
-       * @internal
-       */ _proto._updateTransformShaderData = function _updateTransformShaderData(context, onlyMVP) {
-            //@todo: Always update world positions to buffer, should opt
-            this._updateWorldSpaceTransformShaderData(context, onlyMVP);
-        };
+        var _proto = Sprite.prototype;
         /**
-       * @internal
-       */ _proto._cloneTo = function _cloneTo(target) {
-            Renderer.prototype._cloneTo.call(this, target);
-            target.sprite = this._sprite;
+       * Clone.
+       * @returns Cloned sprite
+       */ _proto.clone = function clone() {
+            var cloneSprite = new Sprite(this._engine, this._texture, this._region, this._pivot, this._border, this.name);
+            cloneSprite._atlasRotated = this._atlasRotated;
+            cloneSprite._atlasRegion.copyFrom(this._atlasRegion);
+            cloneSprite._atlasRegionOffset.copyFrom(this._atlasRegionOffset);
+            return cloneSprite;
         };
         /**
        * @internal
-       */ _proto._canBatch = function _canBatch(preElement, curElement) {
-            return VertexMergeBatcher.canBatchSpriteMask(preElement, curElement);
+       */ _proto._getPositions = function _getPositions() {
+            this._dirtyUpdateFlag & 1 && this._updatePositions();
+            return this._positions;
         };
         /**
        * @internal
-       */ _proto._batch = function _batch(preElement, curElement) {
-            VertexMergeBatcher.batch(preElement, curElement);
+       */ _proto._getUVs = function _getUVs() {
+            this._dirtyUpdateFlag & 2 && this._updateUVs();
+            return this._uvs;
         };
         /**
        * @internal
-       */ _proto._onEnableInScene = function _onEnableInScene() {
-            Renderer.prototype._onEnableInScene.call(this);
-            this.scene._maskManager.addSpriteMask(this);
+       */ _proto._getBounds = function _getBounds() {
+            this._dirtyUpdateFlag & 1 && this._updatePositions();
+            return this._bounds;
         };
         /**
        * @internal
-       */ _proto._onDisableInScene = function _onDisableInScene() {
-            Renderer.prototype._onDisableInScene.call(this);
-            this.scene._maskManager.removeSpriteMask(this);
+       */ _proto._addReferCount = function _addReferCount(value) {
+            var _this__atlas;
+            ReferResource.prototype._addReferCount.call(this, value);
+            (_this__atlas = this._atlas) == null ? void 0 : _this__atlas._addReferCount(value);
         };
         /**
        * @internal
-       */ _proto._getChunkManager = function _getChunkManager() {
-            return this.engine._batcherManager.primitiveChunkManagerMask;
+       */ _proto._onDestroy = function _onDestroy() {
+            this._dispatchSpriteChange(SpriteModifyFlags.destroy);
+            ReferResource.prototype._onDestroy.call(this);
+            this._positions.length = 0;
+            this._positions = null;
+            this._uvs.length = 0;
+            this._uvs = null;
+            this._atlasRegion = null;
+            this._atlasRegionOffset = null;
+            this._region = null;
+            this._pivot = null;
+            this._border = null;
+            this._bounds = null;
+            this._atlas = null;
+            this._texture = null;
         };
-        _proto._updateBounds = function _updateBounds(worldBounds) {
-            var sprite = this._sprite;
-            if (sprite) {
-                exports.SimpleSpriteAssembler.updatePositions(this, this._transformEntity.transform.worldMatrix, this.width, this.height, sprite.pivot, this._flipX, this._flipY);
+        _proto._calDefaultSize = function _calDefaultSize() {
+            if (this._texture) {
+                var _this = this, _texture = _this._texture, _atlasRegion = _this._atlasRegion, _atlasRegionOffset = _this._atlasRegionOffset, _region = _this._region, _atlasRotated = _this._atlasRotated;
+                var ppuReciprocal = 1.0 / Engine._pixelsPerUnit;
+                // 先算 atlas 中绝对像素（texture 不一定是方形，必须各自乘对应维度）
+                var atlasPxW = _texture.width * _atlasRegion.width;
+                var atlasPxH = _texture.height * _atlasRegion.height;
+                // atlas 顺时针 pack 90°：原图 W×H 在 atlas 中占 H×W 区域，仅交换 atlasPx 的 W/H
+                var originWidth = _atlasRotated ? atlasPxH : atlasPxW;
+                var originHeight = _atlasRotated ? atlasPxW : atlasPxH;
+                this._automaticWidth = originWidth / (1 - _atlasRegionOffset.x - _atlasRegionOffset.z) * _region.width * ppuReciprocal;
+                this._automaticHeight = originHeight / (1 - _atlasRegionOffset.y - _atlasRegionOffset.w) * _region.height * ppuReciprocal;
             } else {
-                var worldPosition = this._transformEntity.transform.worldPosition;
-                worldBounds.min.copyFrom(worldPosition);
-                worldBounds.max.copyFrom(worldPosition);
+                this._automaticWidth = this._automaticHeight = 0;
             }
+            this._dirtyUpdateFlag &= ~4;
         };
-        /**
-       * @inheritdoc
-       */ _proto._render = function _render(context) {
-            var _this = this, sprite = _this._sprite;
-            if (!(sprite == null ? void 0 : sprite.texture) || !this.width || !this.height) {
-                return;
-            }
-            var material = this.getMaterial();
-            if (!material) {
-                return;
-            }
-            var _this1 = this, engine = _this1._engine;
-            // @todo: This question needs to be raised rather than hidden.
-            if (material.destroyed) {
-                material = engine._basicResources.spriteMaskDefaultMaterial;
-            }
-            // Update position
-            if (this._dirtyUpdateFlag & RendererUpdateFlags.WorldVolume) {
-                exports.SimpleSpriteAssembler.updatePositions(this, this._transformEntity.transform.worldMatrix, this.width, this.height, sprite.pivot, this._flipX, this._flipY);
-                this._dirtyUpdateFlag &= ~RendererUpdateFlags.WorldVolume;
-            }
-            // Update uv
-            if (this._dirtyUpdateFlag & 2) {
-                exports.SimpleSpriteAssembler.updateUVs(this);
-                this._dirtyUpdateFlag &= ~2;
-            }
-            var renderElement = this._renderElement;
-            var subChunk = this._subChunk;
-            renderElement.set(this, material, subChunk.chunk.primitive, subChunk.subMesh, this.sprite.texture, subChunk);
-            renderElement.priority = this.priority;
-            renderElement.distanceForSort = this._distanceForSort;
-            renderElement.subShader = material.shader.subShaders[0];
+        _proto._updatePositions = function _updatePositions() {
+            var blank = this._atlasRegionOffset;
+            var _this__region = this._region, regionX = _this__region.x, regionY = _this__region.y, regionW = _this__region.width, regionH = _this__region.height;
+            var regionRight = 1 - regionX - regionW;
+            var regionBottom = 1 - regionY - regionH;
+            var left = Math.max(blank.x - regionX, 0) / regionW;
+            var bottom = Math.max(blank.w - regionY, 0) / regionH;
+            var right = 1 - Math.max(blank.z - regionRight, 0) / regionW;
+            var top = 1 - Math.max(blank.y - regionBottom, 0) / regionH;
+            // Update positions.
+            // ---------------
+            //  2 - 3
+            //  |   |
+            //  0 - 1
+            // ---------------
+            var positions = this._positions;
+            positions[0].set(left, bottom);
+            positions[1].set(right, bottom);
+            positions[2].set(left, top);
+            positions[3].set(right, top);
+            var bounds = this._bounds;
+            bounds.min.set(left, bottom, 0);
+            bounds.max.set(right, top, 0);
+            this._dirtyUpdateFlag &= ~1;
         };
-        /**
-       * @inheritdoc
-       */ _proto._onDestroy = function _onDestroy() {
-            var sprite = this._sprite;
-            if (sprite) {
-                this._addResourceReferCount(sprite, -1);
-                sprite._updateFlagManager.removeListener(this._onSpriteChange);
-            }
-            Renderer.prototype._onDestroy.call(this);
-            this._sprite = null;
-            if (this._subChunk) {
-                this._getChunkManager().freeSubChunk(this._subChunk);
-                this._subChunk = null;
+        _proto._updateUVs = function _updateUVs() {
+            var _this = this, uvs = _this._uvs, atlasRotated = _this._atlasRotated, border = _this._border;
+            var _this__region = this._region, regionLeft = _this__region.x, regionTop = _this__region.y, regionW = _this__region.width, regionH = _this__region.height;
+            var regionRight = 1 - regionLeft - regionW;
+            var regionBottom = 1 - regionTop - regionH;
+            var _this__atlasRegion = this._atlasRegion, atlasRegionX = _this__atlasRegion.x, atlasRegionY = _this__atlasRegion.y, atlasRegionW = _this__atlasRegion.width, atlasRegionH = _this__atlasRegion.height;
+            var _this__atlasRegionOffset = this._atlasRegionOffset, offsetLeft = _this__atlasRegionOffset.x, offsetTop = _this__atlasRegionOffset.y, offsetRight = _this__atlasRegionOffset.z, offsetBottom = _this__atlasRegionOffset.w;
+            var realWidth = atlasRegionW / (1 - offsetLeft - offsetRight);
+            var realHeight = atlasRegionH / (1 - offsetTop - offsetBottom);
+            // 4 个外边界 + 4 个 9-slice 内边界
+            var left, top, right, bottom;
+            var bLeft, bTop, bRight, bBottom;
+            if (atlasRotated) {
+                // 原图 region/offset (left/top/right/bottom) 在 atlas 中映射为 (bottom/left/top/right)
+                left = Math.max(regionBottom - offsetLeft, 0) * realWidth + atlasRegionX;
+                top = Math.max(regionLeft - offsetTop, 0) * realHeight + atlasRegionY;
+                right = atlasRegionW + atlasRegionX - Math.max(regionTop - offsetRight, 0) * realWidth;
+                bottom = atlasRegionH + atlasRegionY - Math.max(regionRight - offsetBottom, 0) * realHeight;
+                bLeft = (regionBottom - offsetLeft + border.y * regionH) * realWidth + atlasRegionX;
+                bTop = (regionLeft - offsetTop + border.x * regionW) * realHeight + atlasRegionY;
+                bRight = atlasRegionW + atlasRegionX - (regionTop - offsetRight + border.w * regionH) * realWidth;
+                bBottom = atlasRegionH + atlasRegionY - (regionRight - offsetBottom + border.z * regionW) * realHeight;
+            } else {
+                left = Math.max(regionLeft - offsetLeft, 0) * realWidth + atlasRegionX;
+                top = Math.max(regionBottom - offsetTop, 0) * realHeight + atlasRegionY;
+                right = atlasRegionW + atlasRegionX - Math.max(regionRight - offsetRight, 0) * realWidth;
+                bottom = atlasRegionH + atlasRegionY - Math.max(regionTop - offsetBottom, 0) * realHeight;
+                bLeft = (regionLeft - offsetLeft + border.x * regionW) * realWidth + atlasRegionX;
+                bTop = (regionBottom - offsetTop + border.w * regionH) * realHeight + atlasRegionY;
+                bRight = atlasRegionW + atlasRegionX - (regionRight - offsetRight + border.z * regionW) * realWidth;
+                bBottom = atlasRegionH + atlasRegionY - (regionTop - offsetBottom + border.y * regionH) * realHeight;
             }
-            this._renderElement = null;
-        };
-        _proto._calDefaultSize = function _calDefaultSize() {
-            var sprite = this._sprite;
-            if (sprite) {
-                this._automaticWidth = sprite.width;
-                this._automaticHeight = sprite.height;
+            // 16 UV 网格填充（column-major：index=i*4+j，i=column[0=left..3=right]，j=row[0=bottom..3=top]）
+            // - 非 rotated：column 决定 atlas X (left/bLeft/bRight/right)，row 决定 atlas Y (bottom/bBottom/bTop/top)
+            // - rotated 90° 顺时针 packed：display column 对应 atlas Y 的反向（顶→底），display row 对应 atlas X
+            if (atlasRotated) {
+                uvs[0].set(left, top), uvs[1].set(bLeft, top), uvs[2].set(bRight, top), uvs[3].set(right, top);
+                uvs[4].set(left, bTop), uvs[5].set(bLeft, bTop), uvs[6].set(bRight, bTop), uvs[7].set(right, bTop);
+                uvs[8].set(left, bBottom), uvs[9].set(bLeft, bBottom), uvs[10].set(bRight, bBottom), uvs[11].set(right, bBottom);
+                uvs[12].set(left, bottom), uvs[13].set(bLeft, bottom), uvs[14].set(bRight, bottom), uvs[15].set(right, bottom);
             } else {
-                this._automaticWidth = this._automaticHeight = 0;
+                uvs[0].set(left, bottom), uvs[1].set(left, bBottom), uvs[2].set(left, bTop), uvs[3].set(left, top);
+                uvs[4].set(bLeft, bottom), uvs[5].set(bLeft, bBottom), uvs[6].set(bLeft, bTop), uvs[7].set(bLeft, top);
+                uvs[8].set(bRight, bottom), uvs[9].set(bRight, bBottom), uvs[10].set(bRight, bTop), uvs[11].set(bRight, top);
+                uvs[12].set(right, bottom), uvs[13].set(right, bBottom), uvs[14].set(right, bTop), uvs[15].set(right, top);
             }
-            this._dirtyUpdateFlag &= ~4;
+            this._dirtyUpdateFlag &= ~2;
         };
-        _proto._onSpriteChange = function _onSpriteChange(type) {
+        _proto._dispatchSpriteChange = function _dispatchSpriteChange(type) {
             switch(type){
                 case SpriteModifyFlags.texture:
-                    this.shaderData.setTexture(SpriteMask._textureProperty, this.sprite.texture);
-                    break;
-                case SpriteModifyFlags.size:
                     this._dirtyUpdateFlag |= 4;
-                    if (this._customWidth === undefined || this._customHeight === undefined) {
-                        this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
-                    }
                     break;
-                case SpriteModifyFlags.region:
                 case SpriteModifyFlags.atlasRegionOffset:
-                    this._dirtyUpdateFlag |= 3;
+                case SpriteModifyFlags.region:
+                    this._dirtyUpdateFlag |= 7;
                     break;
                 case SpriteModifyFlags.atlasRegion:
-                    this._dirtyUpdateFlag |= 2;
-                    break;
-                case SpriteModifyFlags.pivot:
-                    this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
+                    this._dirtyUpdateFlag |= 4 | 2;
                     break;
-                case SpriteModifyFlags.destroy:
-                    this.sprite = null;
+                case SpriteModifyFlags.border:
+                    this._dirtyUpdateFlag |= 2;
                     break;
             }
+            this._updateFlagManager.dispatch(type);
         };
-        _create_class$2(SpriteMask, [
+        _proto._onRegionChange = function _onRegionChange() {
+            var _this = this, region = _this._region;
+            // @ts-ignore
+            region._onValueChanged = null;
+            var x = MathUtil.clamp(region.x, 0, 1);
+            var y = MathUtil.clamp(region.y, 0, 1);
+            region.set(x, y, MathUtil.clamp(region.width, 0, 1 - x), MathUtil.clamp(region.height, 0, 1 - y));
+            this._dispatchSpriteChange(SpriteModifyFlags.region);
+            if (this._customWidth === undefined || this._customHeight === undefined) {
+                this._dispatchSpriteChange(SpriteModifyFlags.size);
+            }
+            // @ts-ignore
+            region._onValueChanged = this._onRegionChange;
+        };
+        _proto._onPivotChange = function _onPivotChange() {
+            this._dispatchSpriteChange(SpriteModifyFlags.pivot);
+        };
+        _proto._onBorderChange = function _onBorderChange() {
+            var _this = this, border = _this._border;
+            // @ts-ignore
+            border._onValueChanged = null;
+            var x = MathUtil.clamp(border.x, 0, 1);
+            var y = MathUtil.clamp(border.y, 0, 1);
+            border.set(x, y, MathUtil.clamp(border.z, 0, 1 - x), MathUtil.clamp(border.w, 0, 1 - y));
+            this._dispatchSpriteChange(SpriteModifyFlags.border);
+            // @ts-ignore
+            border._onValueChanged = this._onBorderChange;
+        };
+        _create_class$2(Sprite, [
+            {
+                key: "texture",
+                get: /**
+       * The reference to the used texture.
+       */ function get() {
+                    return this._texture;
+                },
+                set: function set(value) {
+                    if (this._texture !== value) {
+                        this._texture = value;
+                        this._dispatchSpriteChange(SpriteModifyFlags.texture);
+                        if (this._customWidth === undefined || this._customHeight === undefined) {
+                            this._dispatchSpriteChange(SpriteModifyFlags.size);
+                        }
+                    }
+                }
+            },
             {
                 key: "width",
                 get: /**
-       * Render width (in world coordinates).
+       * The width of the sprite (in world coordinates).
        *
        * @remarks
        * If width is set, return the set value,
-       * otherwise return `SpriteMask.sprite.width`.
+       * otherwise return the width calculated according to `Texture.width`, `Sprite.region`, `Sprite.atlasRegion` and `Sprite.atlasRegionOffset`.
        */ function get() {
                     if (this._customWidth !== undefined) {
                         return this._customWidth;
@@ -15203,18 +15353,18 @@
                 set: function set(value) {
                     if (this._customWidth !== value) {
                         this._customWidth = value;
-                        this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
+                        this._dispatchSpriteChange(SpriteModifyFlags.size);
                     }
                 }
             },
             {
                 key: "height",
                 get: /**
-       * Render height (in world coordinates).
+       * The height of the sprite (in world coordinates).
        *
        * @remarks
        * If height is set, return the set value,
-       * otherwise return `SpriteMask.sprite.height`.
+       * otherwise return the height calculated according to `Texture.height`, `Sprite.region`, `Sprite.atlasRegion` and `Sprite.atlasRegionOffset`.
        */ function get() {
                     if (this._customHeight !== undefined) {
                         return this._customHeight;
@@ -15226,98 +15376,241 @@
                 set: function set(value) {
                     if (this._customHeight !== value) {
                         this._customHeight = value;
-                        this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
+                        this._dispatchSpriteChange(SpriteModifyFlags.size);
                     }
                 }
             },
             {
-                key: "flipX",
+                key: "atlasRotated",
                 get: /**
-       * Flips the sprite on the X axis.
+       * Is it rotated 90 degrees clockwise when packing.
        */ function get() {
-                    return this._flipX;
+                    return this._atlasRotated;
                 },
                 set: function set(value) {
-                    if (this._flipX !== value) {
-                        this._flipX = value;
-                        this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
+                    if (this._atlasRotated != value) {
+                        this._atlasRotated = value;
                     }
                 }
             },
             {
-                key: "flipY",
+                key: "atlasRegion",
                 get: /**
-       * Flips the sprite on the Y axis.
+       * The rectangle region of the original texture on its atlas texture, specified in normalized.
        */ function get() {
-                    return this._flipY;
+                    return this._atlasRegion;
                 },
                 set: function set(value) {
-                    if (this._flipY !== value) {
-                        this._flipY = value;
-                        this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
+                    var x = MathUtil.clamp(value.x, 0, 1);
+                    var y = MathUtil.clamp(value.y, 0, 1);
+                    this._atlasRegion.set(x, y, MathUtil.clamp(value.width, 0, 1 - x), MathUtil.clamp(value.height, 0, 1 - y));
+                    this._dispatchSpriteChange(SpriteModifyFlags.atlasRegion);
+                    if (this._customWidth === undefined || this._customHeight === undefined) {
+                        this._dispatchSpriteChange(SpriteModifyFlags.size);
                     }
                 }
             },
             {
-                key: "sprite",
+                key: "atlasRegionOffset",
                 get: /**
-       * The Sprite to render.
+       * The rectangle region offset of the original texture on its atlas texture, specified in normalized.
        */ function get() {
-                    return this._sprite;
+                    return this._atlasRegionOffset;
                 },
                 set: function set(value) {
-                    var lastSprite = this._sprite;
-                    if (lastSprite !== value) {
-                        if (lastSprite) {
-                            this._addResourceReferCount(lastSprite, -1);
-                            lastSprite._updateFlagManager.removeListener(this._onSpriteChange);
-                        }
-                        this._dirtyUpdateFlag |= 7;
-                        if (value) {
-                            this._addResourceReferCount(value, 1);
-                            value._updateFlagManager.addListener(this._onSpriteChange);
-                            this.shaderData.setTexture(SpriteMask._textureProperty, value.texture);
-                        } else {
-                            this.shaderData.setTexture(SpriteMask._textureProperty, null);
-                        }
-                        this._sprite = value;
+                    var x = MathUtil.clamp(value.x, 0, 1);
+                    var y = MathUtil.clamp(value.y, 0, 1);
+                    this._atlasRegionOffset.set(x, y, MathUtil.clamp(value.z, 0, 1 - x), MathUtil.clamp(value.w, 0, 1 - y));
+                    this._dispatchSpriteChange(SpriteModifyFlags.atlasRegionOffset);
+                    if (this._customWidth === undefined || this._customHeight === undefined) {
+                        this._dispatchSpriteChange(SpriteModifyFlags.size);
                     }
                 }
             },
             {
-                key: "alphaCutoff",
+                key: "region",
                 get: /**
-       * The minimum alpha value used by the mask to select the area of influence defined over the mask's sprite. Value between 0 and 1.
+       * The rectangle region of the sprite, specified in normalized.
        */ function get() {
-                    return this._alphaCutoff;
+                    return this._region;
                 },
                 set: function set(value) {
-                    if (this._alphaCutoff !== value) {
-                        this._alphaCutoff = value;
-                        this.shaderData.setFloat(SpriteMask._alphaCutoffProperty, value);
-                    }
+                    this._region !== value && this._region.copyFrom(value);
+                }
+            },
+            {
+                key: "pivot",
+                get: /**
+       * Location of the sprite's center point in the rectangle region, specified in normalized.
+       * The origin is at the bottom left and the default value is (0.5, 0.5).
+       */ function get() {
+                    return this._pivot;
+                },
+                set: function set(value) {
+                    this._pivot !== value && this._pivot.copyFrom(value);
+                }
+            },
+            {
+                key: "border",
+                get: /**
+       * Get the border of the sprite.
+       *  x      y       z     w
+       *  |      |       |     |
+       * Left, bottom, right, top.
+       * @remarks only use in sliced mode.
+       */ function get() {
+                    return this._border;
+                },
+                set: function set(value) {
+                    this._border !== value && this._border.copyFrom(value);
                 }
             }
         ]);
-        return SpriteMask;
-    }(exports.Renderer);
-    /** @internal */ SpriteMask._textureProperty = ShaderProperty.getByName("renderer_MaskTexture");
-    /** @internal */ SpriteMask._alphaCutoffProperty = ShaderProperty.getByName("renderer_MaskAlphaCutoff");
-    __decorate$1([
-        assignmentClone
-    ], SpriteMask.prototype, "influenceLayers", void 0);
+        return Sprite;
+    }(ReferResource);
     __decorate$1([
         ignoreClone
-    ], SpriteMask.prototype, "_renderElement", void 0);
+    ], Sprite.prototype, "_onRegionChange", null);
     __decorate$1([
         ignoreClone
-    ], SpriteMask.prototype, "_subChunk", void 0);
+    ], Sprite.prototype, "_onPivotChange", null);
     __decorate$1([
         ignoreClone
-    ], SpriteMask.prototype, "_maskIndex", void 0);
+    ], Sprite.prototype, "_onBorderChange", null);
+    /**
+     * A component for masking Sprites.
+     */ var SpriteMask = /*#__PURE__*/ function(_MaskRenderable) {
+        _inherits$2(SpriteMask, _MaskRenderable);
+        function SpriteMask(entity) {
+            var _this;
+            _this = _MaskRenderable.call(this, entity) || this, _this._automaticWidth = 0, _this._automaticHeight = 0, _this._customWidth = undefined, _this._customHeight = undefined;
+            _this._initMask();
+            return _this;
+        }
+        var _proto = SpriteMask.prototype;
+        /**
+       * @internal
+       */ _proto._updateTransformShaderData = function _updateTransformShaderData(context, onlyMVP) {
+            //@todo: Always update world positions to buffer, should opt
+            this._updateWorldSpaceTransformShaderData(context, onlyMVP);
+        };
+        /**
+       * @internal
+       */ _proto._cloneTo = function _cloneTo(target) {
+            _MaskRenderable.prototype._cloneTo.call(this, target);
+            this._cloneMaskData(target);
+        };
+        /**
+       * @internal
+       */ _proto._getChunkManager = function _getChunkManager() {
+            return this.engine._batcherManager.primitiveChunkManagerMask;
+        };
+        _proto._updateBounds = function _updateBounds(worldBounds) {
+            this._updateMaskBounds(worldBounds);
+        };
+        /**
+       * @inheritdoc
+       */ _proto._render = function _render(context) {
+            this._renderMask(this._distanceForSort);
+        };
+        /**
+       * @inheritdoc
+       */ _proto._onDestroy = function _onDestroy() {
+            this._destroyMaskResources();
+            _MaskRenderable.prototype._onDestroy.call(this);
+            if (this._subChunk) {
+                this._getChunkManager().freeSubChunk(this._subChunk);
+                this._subChunk = null;
+            }
+        };
+        _proto._getSpriteWidth = function _getSpriteWidth() {
+            return this.width;
+        };
+        _proto._getSpriteHeight = function _getSpriteHeight() {
+            return this.height;
+        };
+        _proto._getSpritePivot = function _getSpritePivot() {
+            var _this_sprite;
+            return (_this_sprite = this.sprite) == null ? void 0 : _this_sprite.pivot;
+        };
+        _proto._onSpriteChangeExtra = function _onSpriteChangeExtra(type) {
+            switch(type){
+                case SpriteModifyFlags.size:
+                    this._dirtyUpdateFlag |= MaskDirtyFlags.AutomaticSize;
+                    if (this._customWidth === undefined || this._customHeight === undefined) {
+                        this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
+                    }
+                    break;
+                case SpriteModifyFlags.pivot:
+                    this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
+                    break;
+            }
+        };
+        _proto._calDefaultSize = function _calDefaultSize() {
+            var sprite = this.sprite;
+            if (sprite) {
+                this._automaticWidth = sprite.width;
+                this._automaticHeight = sprite.height;
+            } else {
+                this._automaticWidth = this._automaticHeight = 0;
+            }
+            this._dirtyUpdateFlag &= ~MaskDirtyFlags.AutomaticSize;
+        };
+        _create_class$2(SpriteMask, [
+            {
+                key: "width",
+                get: /**
+       * Render width (in world coordinates).
+       *
+       * @remarks
+       * If width is set, return the set value,
+       * otherwise return `SpriteMask.sprite.width`.
+       */ function get() {
+                    if (this._customWidth !== undefined) {
+                        return this._customWidth;
+                    } else {
+                        this._dirtyUpdateFlag & MaskDirtyFlags.AutomaticSize && this._calDefaultSize();
+                        return this._automaticWidth;
+                    }
+                },
+                set: function set(value) {
+                    if (this._customWidth !== value) {
+                        this._customWidth = value;
+                        this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
+                    }
+                }
+            },
+            {
+                key: "height",
+                get: /**
+       * Render height (in world coordinates).
+       *
+       * @remarks
+       * If height is set, return the set value,
+       * otherwise return `SpriteMask.sprite.height`.
+       */ function get() {
+                    if (this._customHeight !== undefined) {
+                        return this._customHeight;
+                    } else {
+                        this._dirtyUpdateFlag & MaskDirtyFlags.AutomaticSize && this._calDefaultSize();
+                        return this._automaticHeight;
+                    }
+                },
+                set: function set(value) {
+                    if (this._customHeight !== value) {
+                        this._customHeight = value;
+                        this._dirtyUpdateFlag |= RendererUpdateFlags.WorldVolume;
+                    }
+                }
+            }
+        ]);
+        return SpriteMask;
+    }(MaskRenderable(exports.Renderer));
+    /** @internal */ SpriteMask._alphaCutoffProperty = ShaderProperty.getByName("renderer_MaskAlphaCutoff");
+    /** @internal */ SpriteMask._textureProperty = ShaderProperty.getByName("renderer_MaskTexture");
     __decorate$1([
         ignoreClone
-    ], SpriteMask.prototype, "_sprite", void 0);
+    ], SpriteMask.prototype, "_subChunk", void 0);
     __decorate$1([
         ignoreClone
     ], SpriteMask.prototype, "_automaticWidth", void 0);
@@ -15330,18 +15623,6 @@
     __decorate$1([
         assignmentClone
     ], SpriteMask.prototype, "_customHeight", void 0);
-    __decorate$1([
-        assignmentClone
-    ], SpriteMask.prototype, "_flipX", void 0);
-    __decorate$1([
-        assignmentClone
-    ], SpriteMask.prototype, "_flipY", void 0);
-    __decorate$1([
-        assignmentClone
-    ], SpriteMask.prototype, "_alphaCutoff", void 0);
-    __decorate$1([
-        ignoreClone
-    ], SpriteMask.prototype, "_onSpriteChange", null);
     /**
      * Renders a Sprite for 2D graphics.
      */ var SpriteRenderer = /*#__PURE__*/ function(Renderer) {
@@ -16150,6 +16431,7 @@
             if (charLength > 0) {
                 this._buildChunk(curTextChunk, charLength);
             }
+            this._setDirtyFlagTrue(4);
             charRenderInfos.length = 0;
         };
         _proto._onTransformChanged = function _onTransformChanged(bit) {
@@ -29344,8 +29626,8 @@
     var spriteMaskVs = "uniform mat4 camera_VPMat;\n\nattribute vec3 POSITION;\nattribute vec2 TEXCOORD_0;\n\nvarying vec2 v_uv;\n\nvoid main()\n{\n  gl_Position = camera_VPMat * vec4(POSITION, 1.0);\n  v_uv = TEXCOORD_0;\n}\n"; // eslint-disable-line
     var spriteFs = "#include <common>\nuniform sampler2D renderer_SpriteTexture;\n\nvarying vec2 v_uv;\nvarying vec4 v_color;\n\nvoid main()\n{\n  vec4 baseColor = texture2DSRGB(renderer_SpriteTexture, v_uv);\n  gl_FragColor = baseColor * v_color;\n}\n"; // eslint-disable-line
     var spriteVs = "uniform mat4 renderer_MVPMat;\n\nattribute vec3 POSITION;\nattribute vec2 TEXCOORD_0;\nattribute vec4 COLOR_0;\n\nvarying vec2 v_uv;\nvarying vec4 v_color;\n\nvoid main()\n{\n  gl_Position = renderer_MVPMat * vec4(POSITION, 1.0);\n\n  v_uv = TEXCOORD_0;\n  v_color = COLOR_0;\n}\n"; // eslint-disable-line
-    var textFs = "uniform sampler2D renderElement_TextTexture;\n\nvarying vec2 v_uv;\nvarying vec4 v_color;\n\nvoid main()\n{\n  vec4 texColor = texture2D(renderElement_TextTexture, v_uv);\n  #ifdef GRAPHICS_API_WEBGL2\n    float coverage = texColor.r;\n  #else\n    float coverage = texColor.a;\n  #endif\n  gl_FragColor = vec4(v_color.rgb, v_color.a * coverage);\n}\n"; // eslint-disable-line
-    var textVs = "uniform mat4 renderer_MVPMat;\n\nattribute vec3 POSITION;\nattribute vec2 TEXCOORD_0;\nattribute vec4 COLOR_0;\n\nvarying vec2 v_uv;\nvarying vec4 v_color;\n\nvoid main()\n{\n  gl_Position = renderer_MVPMat * vec4(POSITION, 1.0);\n\n  v_uv = TEXCOORD_0;\n  v_color = COLOR_0;\n}\n"; // eslint-disable-line
+    var textFs = "uniform sampler2D renderElement_TextTexture;\nuniform vec4 renderer_UIRectClipRect;\nuniform float renderer_UIRectClipEnabled;\nuniform vec4 renderer_UIRectClipSoftness;\nuniform float renderer_UIRectClipHardClip;\n\nvarying vec2 v_uv;\nvarying vec4 v_color;\nvarying vec2 v_worldPosition;\n\nfloat getUIRectClipAlpha()\n{\n  vec4 edgeDistance = vec4(\n    v_worldPosition.x - renderer_UIRectClipRect.x,\n    v_worldPosition.y - renderer_UIRectClipRect.y,\n    renderer_UIRectClipRect.z - v_worldPosition.x,\n    renderer_UIRectClipRect.w - v_worldPosition.y\n  );\n  vec4 hardClipFactor = step(vec4(0.0), edgeDistance);\n  vec4 softness = max(renderer_UIRectClipSoftness, vec4(1e-5));\n  vec4 softClipFactor = clamp(edgeDistance / softness, 0.0, 1.0);\n  vec4 useSoftness = step(vec4(1e-5), renderer_UIRectClipSoftness);\n  vec4 clipFactor = mix(hardClipFactor, softClipFactor, useSoftness);\n  return clipFactor.x * clipFactor.y * clipFactor.z * clipFactor.w;\n}\n\nvoid main()\n{\n  float rectClipAlpha = 1.0;\n  if (renderer_UIRectClipEnabled > 0.5) {\n    rectClipAlpha = getUIRectClipAlpha();\n  }\n\n  vec4 texColor = texture2D(renderElement_TextTexture, v_uv);\n  #ifdef GRAPHICS_API_WEBGL2\n    float coverage = texColor.r;\n  #else\n    float coverage = texColor.a;\n  #endif\n  vec4 finalColor = vec4(v_color.rgb, v_color.a * coverage);\n  finalColor.a *= rectClipAlpha;\n  if (renderer_UIRectClipEnabled > 0.5 && renderer_UIRectClipHardClip > 0.5 && finalColor.a < 0.001) {\n    discard;\n  }\n  gl_FragColor = finalColor;\n}\n"; // eslint-disable-line
+    var textVs = "uniform mat4 renderer_MVPMat;\nuniform mat4 renderer_ModelMat;\n\nattribute vec3 POSITION;\nattribute vec2 TEXCOORD_0;\nattribute vec4 COLOR_0;\n\nvarying vec2 v_uv;\nvarying vec4 v_color;\nvarying vec2 v_worldPosition;\n\nvoid main()\n{\n  gl_Position = renderer_MVPMat * vec4(POSITION, 1.0);\n\n  v_uv = TEXCOORD_0;\n  v_color = COLOR_0;\n  v_worldPosition = POSITION.xy;\n}\n"; // eslint-disable-line
     var trailFs = "#include <common>\n\nvarying vec2 v_uv;\nvarying vec4 v_color;\n\nuniform vec4 material_BaseColor;\n\n#ifdef MATERIAL_HAS_BASETEXTURE\n    uniform sampler2D material_BaseTexture;\n#endif\n\nuniform mediump vec3 material_EmissiveColor;\n#ifdef MATERIAL_HAS_EMISSIVETEXTURE\n    uniform sampler2D material_EmissiveTexture;\n#endif\n\nvoid main() {\n    vec4 color = material_BaseColor * v_color;\n\n    #ifdef MATERIAL_HAS_BASETEXTURE\n        color *= texture2DSRGB(material_BaseTexture, v_uv);\n    #endif\n\n    // Emissive\n    vec3 emissiveRadiance = material_EmissiveColor;\n    #ifdef MATERIAL_HAS_EMISSIVETEXTURE\n        emissiveRadiance *= texture2DSRGB(material_EmissiveTexture, v_uv).rgb;\n    #endif\n\n    color.rgb += emissiveRadiance;\n\n    gl_FragColor = color;\n}\n\n"; // eslint-disable-line
     var trailVs = "attribute vec4 a_PositionBirthTime; // xyz: World position, w: Birth time (used by CPU only)\nattribute vec4 a_CornerTangent;     // x: Corner (-1 or 1), yzw: Tangent direction\nattribute float a_Distance;         // Absolute cumulative distance (written once per point)\n\nuniform vec4 renderer_TrailParams;    // x: TextureMode (0: Stretch, 1: Tile), y: TextureScaleX, z: TextureScaleY\nuniform vec2 renderer_DistanceParams;   // x: HeadDistance, y: TailDistance\nuniform vec3 camera_Position;\nuniform mat4 camera_ViewMat;\nuniform mat4 camera_ProjMat;\nuniform vec2 renderer_WidthCurve[4];   // Width curve (4 keyframes max: x=time, y=value)\nuniform vec4 renderer_ColorKeys[4];   // Color gradient (x=time, yzw=rgb)\nuniform vec2 renderer_AlphaKeys[4];   // Alpha gradient (x=time, y=alpha)\nuniform vec4 renderer_CurveMaxTime; // x: colorMaxTime, y: alphaMaxTime, z: widthMaxTime\n\nvarying vec2 v_uv;\nvarying vec4 v_color;\n\n#include <particle_common>\n\nvoid main() {\n    vec3 position = a_PositionBirthTime.xyz;\n    float corner = a_CornerTangent.x;\n    vec3 tangent = a_CornerTangent.yzw;\n\n    // Distance-based relative position: 0=head(newest), 1=tail(oldest)\n    float distFromHead = renderer_DistanceParams.x - a_Distance;\n    float totalDist = renderer_DistanceParams.x - renderer_DistanceParams.y;\n    float relativePos = totalDist > 0.0 ? distFromHead / totalDist : 0.0;\n\n    // Billboard: expand perpendicular to tangent and view direction\n    vec3 toCamera = normalize(camera_Position - position);\n    vec3 right = cross(tangent, toCamera);\n    float rightLenSq = dot(right, right);\n    if (rightLenSq < 0.000001) {\n        right = cross(tangent, vec3(0.0, 1.0, 0.0));\n        rightLenSq = dot(right, right);\n        if (rightLenSq < 0.000001) {\n            right = cross(tangent, vec3(1.0, 0.0, 0.0));\n            rightLenSq = dot(right, right);\n        }\n    }\n    right = right * inversesqrt(rightLenSq);\n\n    float width = evaluateParticleCurve(renderer_WidthCurve, min(relativePos, renderer_CurveMaxTime.z));\n    vec3 worldPosition = position + right * width * 0.5 * corner;\n\n    gl_Position = camera_ProjMat * camera_ViewMat * vec4(worldPosition, 1.0);\n\n    // u = position along trail (affected by textureMode), v = corner side.\n    float u = renderer_TrailParams.x == 0.0 ? relativePos : distFromHead;\n    float v = corner * 0.5 + 0.5;\n    v_uv = vec2(u * renderer_TrailParams.y, v * renderer_TrailParams.z);\n\n    v_color = evaluateParticleGradient(renderer_ColorKeys, renderer_CurveMaxTime.x, renderer_AlphaKeys, renderer_CurveMaxTime.y, relativePos);\n}\n"; // eslint-disable-line
     var unlitFs = "#include <common>\n#include <uv_share>\n#include <FogFragmentDeclaration>\n\nuniform vec4 material_BaseColor;\nuniform float material_AlphaCutoff;\n\n#ifdef MATERIAL_HAS_BASETEXTURE\n    uniform sampler2D material_BaseTexture;\n#endif\n\nvoid main() {\n     vec4 baseColor = material_BaseColor;\n\n    #ifdef MATERIAL_HAS_BASETEXTURE\n        baseColor *= texture2DSRGB(material_BaseTexture, v_uv);\n    #endif\n\n    #ifdef MATERIAL_IS_ALPHA_CUTOFF\n        if( baseColor.a < material_AlphaCutoff ) {\n            discard;\n        }\n    #endif\n\n    gl_FragColor = baseColor;\n\n    #ifndef MATERIAL_IS_TRANSPARENT\n        gl_FragColor.a = 1.0;\n    #endif\n\n    #include <FogFragment>\n}\n"; // eslint-disable-line
@@ -32640,9 +32922,7 @@
         function UIUtils() {}
         UIUtils.renderOverlay = function renderOverlay(engine, scene, uiCanvases) {
             engine._macroCollection.enable(UIUtils._shouldSRGBCorrect);
-            var canvas = engine.canvas;
-            engine._hardwareRenderer;
-            var renderContext = engine._renderContext, batcherManager = engine._batcherManager;
+            var canvas = engine.canvas, rhi = engine._hardwareRenderer, renderContext = engine._renderContext, batcherManager = engine._batcherManager;
             var uiRenderQueue = this._renderQueue || (this._renderQueue = new RenderQueue(RenderQueueType.Transparent));
             var virtualCamera = this._virtualCamera || (this._virtualCamera = new VirtualCamera());
             var viewport = this._viewport || (this._viewport = new Vector4(0, 0, 1, 1));
@@ -32651,10 +32931,16 @@
             camera.engine = engine;
             camera.scene = scene;
             renderContext.camera = camera;
+            var width = canvas.width, height = canvas.height;
             var _virtualCamera_projectionMatrix = virtualCamera.projectionMatrix, projectE = _virtualCamera_projectionMatrix.elements;
             var _virtualCamera_viewMatrix = virtualCamera.viewMatrix, viewE = _virtualCamera_viewMatrix.elements;
-            projectE[0] = 2 / canvas.width, projectE[5] = 2 / canvas.height, projectE[10] = 0;
-            renderContext.setRenderTarget(null, viewport, 0);
+            projectE[0] = 2 / width, projectE[5] = 2 / height, projectE[10] = 0;
+            // Render to an intermediate RT with Depth24Stencil8 so that stencil-based UI Mask works.
+            // The default canvas framebuffer is created without a stencil buffer
+            // (see WebGLGraphicDevice._webGLOptions.stencil = false).
+            var overlayRT = UIUtils._getOverlayRT(engine, width, height);
+            renderContext.setRenderTarget(overlayRT, viewport, 0);
+            rhi.clearRenderTarget(engine, CameraClearFlags.All, UIUtils._clearColor);
             for(var i = 0, n = uiCanvases.length; i < n; i++){
                 var uiCanvas = uiCanvases.get(i);
                 if (uiCanvas) {
@@ -32675,12 +32961,52 @@
                     engine._renderCount++;
                 }
             }
+            // Blit overlay RT to default framebuffer with premultiplied alpha blending.
+            // Blitter.blitTexture picks the non-flipping `blitMesh` when destination is null,
+            // but the RT contents are written in standard Y-up NDC, so we flip V here via
+            // sourceScaleOffset to match the default framebuffer orientation.
+            Blitter.blitTexture(engine, overlayRT.getColorTexture(0), null, 0, viewport, UIUtils._getOverlayBlitMaterial(engine), 0, UIUtils._flipYScaleOffset);
             renderContext.camera = null;
             engine._macroCollection.disable(UIUtils._shouldSRGBCorrect);
         };
+        UIUtils._getOverlayRT = function _getOverlayRT(engine, width, height) {
+            var rt = UIUtils._overlayRT;
+            if (!rt || rt.width !== width || rt.height !== height) {
+                if (rt) {
+                    rt.getColorTexture(0).destroy();
+                    rt.destroy();
+                }
+                var colorTexture = new Texture2D(engine, width, height, TextureFormat.R8G8B8A8, false);
+                colorTexture.isGCIgnored = true;
+                rt = new RenderTarget(engine, width, height, colorTexture, TextureFormat.Depth24Stencil8);
+                rt.isGCIgnored = true;
+                UIUtils._overlayRT = rt;
+            }
+            return rt;
+        };
+        UIUtils._getOverlayBlitMaterial = function _getOverlayBlitMaterial(engine) {
+            var material = UIUtils._overlayBlitMaterial;
+            if (!material) {
+                material = new Material(engine, Shader.find("blit"));
+                material.isGCIgnored = true;
+                var renderState = material.renderState;
+                renderState.depthState.enabled = false;
+                renderState.depthState.writeEnabled = false;
+                var target = renderState.blendState.targetBlendState;
+                target.enabled = true;
+                target.sourceColorBlendFactor = BlendFactor.One;
+                target.destinationColorBlendFactor = BlendFactor.OneMinusSourceAlpha;
+                target.sourceAlphaBlendFactor = BlendFactor.One;
+                target.destinationAlphaBlendFactor = BlendFactor.OneMinusSourceAlpha;
+                UIUtils._overlayBlitMaterial = material;
+            }
+            return material;
+        };
         return UIUtils;
     }();
     UIUtils._shouldSRGBCorrect = ShaderMacro.getByName("ENGINE_SHOULD_SRGB_CORRECT");
+    UIUtils._clearColor = new Color(0, 0, 0, 0);
+    /** Flip V so that Y-up RT content maps correctly onto the default framebuffer. */ UIUtils._flipYScaleOffset = new Vector4(1, -1, 0, 1);
     var OverlayCamera = function OverlayCamera() {
         // @ts-ignore
         this.instanceId = ++EngineObject._instanceIdCounter;
@@ -33505,16 +33831,44 @@
             this.hasStencilWritten = false;
             this._preMaskLayer = SpriteMaskLayer.Nothing;
             this._allSpriteMasks = new DisorderedArray();
+            this._filteredMasksByLayer = new Map();
+            this._isFilteredMasksDirty = true;
         }
         var _proto = MaskManager.prototype;
         _proto.addSpriteMask = function addSpriteMask(mask) {
             mask._maskIndex = this._allSpriteMasks.length;
             this._allSpriteMasks.add(mask);
+            this._setFilteredMasksDirty();
         };
         _proto.removeSpriteMask = function removeSpriteMask(mask) {
             var replaced = this._allSpriteMasks.deleteByIndex(mask._maskIndex);
             replaced && (replaced._maskIndex = mask._maskIndex);
             mask._maskIndex = -1;
+            this._setFilteredMasksDirty();
+        };
+        _proto.onMaskInfluenceLayersChange = function onMaskInfluenceLayersChange() {
+            this._setFilteredMasksDirty();
+        };
+        _proto.isVisibleByMask = function isVisibleByMask(maskInteraction, maskLayer, worldPoint) {
+            if (maskInteraction === SpriteMaskInteraction.None) {
+                return true;
+            }
+            var masks = this._getMasksByLayer(maskLayer);
+            var insideMask = false;
+            for(var i = 0, n = masks.length; i < n; i++){
+                if (masks[i]._containsWorldPoint(worldPoint)) {
+                    insideMask = true;
+                    break;
+                }
+            }
+            switch(maskInteraction){
+                case SpriteMaskInteraction.VisibleInsideMask:
+                    return insideMask;
+                case SpriteMaskInteraction.VisibleOutsideMask:
+                    return !insideMask;
+                default:
+                    return true;
+            }
         };
         _proto.drawMask = function drawMask(context, pipelineStageTagValue, maskLayer) {
             var incrementMaskQueue = MaskManager.getMaskIncrementRenderQueue();
@@ -33571,6 +33925,34 @@
             var allSpriteMasks = this._allSpriteMasks;
             allSpriteMasks.length = 0;
             allSpriteMasks.garbageCollection();
+            this._filteredMasksByLayer.clear();
+            this._isFilteredMasksDirty = true;
+        };
+        _proto._setFilteredMasksDirty = function _setFilteredMasksDirty() {
+            this._isFilteredMasksDirty = true;
+        };
+        _proto._getMasksByLayer = function _getMasksByLayer(maskLayer) {
+            if (maskLayer === SpriteMaskLayer.Nothing) {
+                return [];
+            }
+            if (this._isFilteredMasksDirty) {
+                this._filteredMasksByLayer.clear();
+                this._isFilteredMasksDirty = false;
+            }
+            var filteredMasks = this._filteredMasksByLayer.get(maskLayer);
+            if (!filteredMasks) {
+                filteredMasks = [];
+                var allMasks = this._allSpriteMasks;
+                var maskElements = allMasks._elements;
+                for(var i = 0, n = allMasks.length; i < n; i++){
+                    var mask = maskElements[i];
+                    if (mask.influenceLayers & maskLayer) {
+                        filteredMasks.push(mask);
+                    }
+                }
+                this._filteredMasksByLayer.set(maskLayer, filteredMasks);
+            }
+            return filteredMasks;
         };
         _proto._buildMaskRenderElement = function _buildMaskRenderElement(curMaskLayer, incrementMaskQueue, decrementMaskQueue) {
             var preMaskLayer = this._preMaskLayer;
@@ -45752,6 +46134,8 @@
         Logger: Logger,
         MSAASamples: MSAASamples,
         MainModule: MainModule,
+        MaskDirtyFlags: MaskDirtyFlags,
+        MaskRenderable: MaskRenderable,
         Material: Material,
         Mesh: Mesh,
         MeshColliderShape: MeshColliderShape,
@@ -45811,6 +46195,7 @@
         ReferResource: ReferResource,
         RefractionMode: RefractionMode,
         RenderBufferDepthFormat: RenderBufferDepthFormat,
+        RenderElement: RenderElement,
         RenderFace: RenderFace,
         RenderQueue: RenderQueue,
         RenderQueueFlags: RenderQueueFlags,
@@ -45867,6 +46252,7 @@
         SpriteMask: SpriteMask,
         SpriteMaskInteraction: SpriteMaskInteraction,
         SpriteMaskLayer: SpriteMaskLayer,
+        SpriteMaskUtils: SpriteMaskUtils,
         SpriteModifyFlags: SpriteModifyFlags,
         SpriteRenderer: SpriteRenderer,
         SpriteTileMode: SpriteTileMode,
@@ -55693,7 +56079,7 @@
     ], EXT_texture_webp);
 
     //@ts-ignore
-    var version = "0.0.0-experimental-2.0-game.6";
+    var version = "0.0.0-experimental-2.0-game.8";
     console.log("Galacean Engine Version: " + version);
     for(var key in CoreObjects){
         Loader.registerClass(key, CoreObjects[key]);
@@ -55845,6 +56231,8 @@
     exports.Logger = Logger;
     exports.MSAASamples = MSAASamples;
     exports.MainModule = MainModule;
+    exports.MaskDirtyFlags = MaskDirtyFlags;
+    exports.MaskRenderable = MaskRenderable;
     exports.Material = Material;
     exports.MaterialLoaderType = MaterialLoaderType;
     exports.MathUtil = MathUtil;
@@ -55918,6 +56306,7 @@
     exports.ReflectionParser = ReflectionParser;
     exports.RefractionMode = RefractionMode;
     exports.RenderBufferDepthFormat = RenderBufferDepthFormat;
+    exports.RenderElement = RenderElement;
     exports.RenderFace = RenderFace;
     exports.RenderQueue = RenderQueue;
     exports.RenderQueueFlags = RenderQueueFlags;
@@ -55974,6 +56363,7 @@
     exports.SpriteMask = SpriteMask;
     exports.SpriteMaskInteraction = SpriteMaskInteraction;
     exports.SpriteMaskLayer = SpriteMaskLayer;
+    exports.SpriteMaskUtils = SpriteMaskUtils;
     exports.SpriteModifyFlags = SpriteModifyFlags;
     exports.SpriteRenderer = SpriteRenderer;
     exports.SpriteTileMode = SpriteTileMode;