@galacean/engine-ui 2.0.0-alpha.33 → 2.0.0-alpha.35

package/dist/module.js

@@ -1,4 +1,4 @@
-import { EntityModifyFlags, ignoreClone, assignmentClone, DisorderedArray, Component, TransformModifyFlags, Transform, deepClone, Vector2, Rect, MathUtil, Vector3, Matrix, Plane, ShaderProperty, dependentComponents, DependentMode, BatchUtils, ShaderMacroCollection, Renderer, Vector4, Color, RendererUpdateFlags, Script, CameraModifyFlags, Logger, Signal, SpriteDrawMode, RenderQueueFlags, SpriteModifyFlags, SpriteTileMode, TiledSpriteAssembler, SlicedSpriteAssembler, SimpleSpriteAssembler, BoundingBox, ShaderData, ShaderDataGroup, TextUtils, Engine, TextVerticalAlignment, TextHorizontalAlignment, OverflowMode, CharRenderInfo, FontStyle, ReferResource, registerPointerEventEmitter, PointerEventEmitter, CameraClearFlags, Material, Entity, Loader, Shader } from '@galacean/engine';
+import { EntityModifyFlags, ignoreClone, assignmentClone, DisorderedArray, Component, Matrix, BoundingBox, Utils as Utils$1, TransformModifyFlags, Transform, deepClone, Vector2, Rect, MathUtil, Vector3, Plane, ShaderProperty, dependentComponents, DependentMode, VertexMergeBatcher, ShaderMacroCollection, Renderer, Vector4, Color, RendererUpdateFlags, Script, CameraModifyFlags, Logger, Signal, SpriteDrawMode, SpriteModifyFlags, SpriteTileMode, TiledSpriteAssembler, SlicedSpriteAssembler, SimpleSpriteAssembler, ShaderData, ShaderDataGroup, TextUtils, Engine, TextVerticalAlignment, TextHorizontalAlignment, OverflowMode, CharRenderInfo, FontStyle, ReferResource, registerPointerEventEmitter, PointerEventEmitter, CameraClearFlags, Material, Entity, Loader, Shader } from '@galacean/engine';
 
 function _defineProperties(target, props) {
     for (var i = 0; i < props.length; i++) {
@@ -415,6 +415,155 @@ var Utils = /*#__PURE__*/ function() {
     return Utils;
 }();
 
+/**
+ * @internal
+ * Visual-layering driven UI batching: solve visual correctness first, batching falls out for free.
+ *
+ * Think of it as stacking elements onto numbered shelves (depths):
+ *   - Non-overlapping elements share shelf 0  — free to cluster regardless of material.
+ *   - Overlapping + batch-compatible          — share the same shelf, still cluster.
+ *   - Overlapping + batch-incompatible        — bumped one shelf higher (drawn on top).
+ *
+ * `depth` is a global tag, not a spatial group: distant elements at the same visual layer
+ * share the same depth and get clustered together. Once depth is assigned, sort by
+ * (depth, material, texture, hierarchyIndex) — visual order is locked, batching is the
+ * by-product of materials clustering within each depth band.
+ *
+ * Overlap detection is accelerated by a 10×10 spatial grid. Grid origin and cell size
+ * are derived from the union AABB of input elements (the bounds transform itself is the
+ * work the loop must do anyway, so the union accumulation just piggybacks). This stays
+ * correct across SS/WS canvases, any pivot, and any element distribution — no dependency
+ * on canvas configuration.
+ */ var UIBatchSorter = /*#__PURE__*/ function() {
+    function UIBatchSorter() {}
+    /**
+   * Reorders `elements` in place for optimal batching.
+   * @param elements - in hierarchy order (depth-first traversal); mutated in place
+   * @param canvasWorldMatrix - reduces world bounds to canvas-local for precise overlap
+   */ UIBatchSorter.sort = function sort(elements, canvasWorldMatrix) {
+        var count = elements.length;
+        if (count <= 1) return;
+        var gridDim = this._gridDim;
+        var entries = this._entries;
+        var grid = this._grid;
+        var dirtyCells = this._dirtyCells;
+        var localBoundsPool = this._localBoundsPool;
+        var worldToLocal = this._worldToLocal;
+        Matrix.invert(canvasWorldMatrix, worldToLocal);
+        while(entries.length < count)entries.push(new SortEntry());
+        // Allocate grid once, reuse forever (each cell must be a real [], not a sparse hole)
+        if (grid.length < gridDim) {
+            while(grid.length < gridDim)grid.push([]);
+            for(var i = 0; i < gridDim; i++){
+                var row = grid[i];
+                while(row.length < gridDim)row.push([]);
+            }
+        }
+        // Clear only previously-used cells (no full sweep)
+        for(var k = 0, n = dirtyCells.length; k < n; k += 2){
+            grid[dirtyCells[k]][dirtyCells[k + 1]].length = 0;
+        }
+        dirtyCells.length = 0;
+        // Pass 1: transform world bounds to canvas-local + accumulate the union AABB.
+        // Transform is already required to do precise overlap, so the union accumulation
+        // is essentially free — just a few minmax compares riding on the existing pass
+        var unionMinX = Infinity;
+        var unionMinY = Infinity;
+        var unionMaxX = -Infinity;
+        var unionMaxY = -Infinity;
+        for(var i1 = 0; i1 < count; i1++){
+            var _localBoundsPool, _i;
+            var localBounds = (_localBoundsPool = localBoundsPool)[_i = i1] || (_localBoundsPool[_i] = new BoundingBox());
+            BoundingBox.transform(elements[i1].component.bounds, worldToLocal, localBounds);
+            var min = localBounds.min, max = localBounds.max;
+            if (min.x < unionMinX) unionMinX = min.x;
+            if (min.y < unionMinY) unionMinY = min.y;
+            if (max.x > unionMaxX) unionMaxX = max.x;
+            if (max.y > unionMaxY) unionMaxY = max.y;
+        }
+        // Guard against a degenerate union (all elements collapsed onto a single point /
+        // axis); the grid then collapses to cell 0 which is semantically correct
+        var cellSizeX = Math.max(1e-6, unionMaxX - unionMinX) / gridDim;
+        var cellSizeY = Math.max(1e-6, unionMaxY - unionMinY) / gridDim;
+        var maxCell = gridDim - 1;
+        // Pass 2: register each element into grid cells and compute its depth
+        for(var i2 = 0; i2 < count; i2++){
+            var element = elements[i2];
+            var localBounds1 = localBoundsPool[i2];
+            var materialId = element.material.instanceId;
+            var textureId = element.texture ? element.texture.instanceId : 0;
+            // Floor + clamp guards floating-point edge cases (a `max` exactly on the union
+            // boundary would otherwise produce `gridDim`)
+            var minCellX = Math.min(maxCell, Math.max(0, Math.floor((localBounds1.min.x - unionMinX) / cellSizeX)));
+            var maxCellX = Math.min(maxCell, Math.max(0, Math.floor((localBounds1.max.x - unionMinX) / cellSizeX)));
+            var minCellY = Math.min(maxCell, Math.max(0, Math.floor((localBounds1.min.y - unionMinY) / cellSizeY)));
+            var maxCellY = Math.min(maxCell, Math.max(0, Math.floor((localBounds1.max.y - unionMinY) / cellSizeY)));
+            // Find the deepest overlapping prior, and whether that shelf has any incompatible occupant
+            var maxDepth = -1;
+            var maxDepthIncompatible = false;
+            for(var cellY = minCellY; cellY <= maxCellY; cellY++){
+                for(var cellX = minCellX; cellX <= maxCellX; cellX++){
+                    var cell = grid[cellX][cellY];
+                    for(var j = 0, m = cell.length; j < m; j++){
+                        var other = cell[j];
+                        if (!UIBatchSorter._rectOverlap(localBounds1, other.bounds)) continue;
+                        var otherDepth = other.depth;
+                        var otherIncompatible = other.materialId !== materialId || other.textureId !== textureId;
+                        if (otherDepth > maxDepth) {
+                            maxDepth = otherDepth;
+                            maxDepthIncompatible = otherIncompatible;
+                        } else if (otherDepth === maxDepth && otherIncompatible) {
+                            maxDepthIncompatible = true;
+                        }
+                    }
+                }
+            }
+            var entry = entries[i2];
+            entry.element = element;
+            entry.hierarchyIndex = i2;
+            // Share the deepest shelf if compatible; bump up one if blocked by an incompatible occupant
+            entry.depth = maxDepth < 0 ? 0 : maxDepth + (maxDepthIncompatible ? 1 : 0);
+            entry.materialId = materialId;
+            entry.textureId = textureId;
+            entry.bounds = localBounds1;
+            for(var cellY1 = minCellY; cellY1 <= maxCellY; cellY1++){
+                for(var cellX1 = minCellX; cellX1 <= maxCellX; cellX1++){
+                    var cell1 = grid[cellX1][cellY1];
+                    if (cell1.length === 0) dirtyCells.push(cellX1, cellY1);
+                    cell1.push(entry);
+                }
+            }
+        }
+        // @ts-ignore — Utils._quickSort is @internal
+        Utils$1._quickSort(entries, 0, count, UIBatchSorter._compareEntries);
+        for(var i3 = 0; i3 < count; i3++)elements[i3] = entries[i3].element;
+    };
+    UIBatchSorter._rectOverlap = function _rectOverlap(a, b) {
+        return a.min.x < b.max.x && a.max.x > b.min.x && a.min.y < b.max.y && a.max.y > b.min.y;
+    };
+    UIBatchSorter._compareEntries = function _compareEntries(a, b) {
+        return a.depth - b.depth || a.materialId - b.materialId || a.textureId - b.textureId || a.hierarchyIndex - b.hierarchyIndex;
+    };
+    return UIBatchSorter;
+}();
+// Spatial-hash is fastest when cell size ≈ typical element size (one element per cell).
+// UI elements typically span ~10% of the canvas → 10×10 grid.
+UIBatchSorter._gridDim = 10;
+UIBatchSorter._entries = new Array();
+UIBatchSorter._grid = [];
+// Interleaved (x, y) cell coords touched in the previous frame
+UIBatchSorter._dirtyCells = new Array();
+UIBatchSorter._localBoundsPool = new Array();
+UIBatchSorter._worldToLocal = new Matrix();
+// materialId/textureId/bounds are flattened from RenderElement to avoid
+// multi-hop property access in the hot inner loop and the sort comparator.
+var SortEntry = function SortEntry() {
+    this.hierarchyIndex = 0;
+    this.depth = 0;
+    this.materialId = 0;
+    this.textureId = 0;
+};
+
 /**
  * Render mode for ui canvas.
  */ var CanvasRenderMode = /*#__PURE__*/ function(CanvasRenderMode) {
@@ -893,17 +1042,17 @@ var UIRenderer = /*#__PURE__*/ function(Renderer) {
     }
     var _proto = UIRenderer.prototype;
     // @ts-ignore
-    _proto._canBatch = function _canBatch(elementA, elementB) {
-        return BatchUtils.canBatchSprite(elementA, elementB);
+    _proto._canBatch = function _canBatch(preElement, curElement) {
+        return VertexMergeBatcher.canBatchSprite(preElement, curElement);
     };
     // @ts-ignore
-    _proto._batch = function _batch(elementA, elementB) {
-        BatchUtils.batchFor2D(elementA, elementB);
+    _proto._batch = function _batch(preElement, curElement) {
+        VertexMergeBatcher.batch(preElement, curElement);
     };
     // @ts-ignore
-    _proto._updateTransformShaderData = function _updateTransformShaderData(context, onlyMVP, batched) {
+    _proto._updateTransformShaderData = function _updateTransformShaderData(context, onlyMVP) {
         // @ts-ignore
-        Renderer.prototype._updateTransformShaderData.call(this, context, onlyMVP, true);
+        this._updateWorldSpaceTransformShaderData(context, onlyMVP);
     };
     // @ts-ignore
     _proto._prepareRender = function _prepareRender(context) {
@@ -1362,7 +1511,7 @@ var UICanvas = /*#__PURE__*/ function(Component) {
     _inherits(UICanvas, Component);
     function UICanvas(entity) {
         var _this;
-        _this = Component.call(this, entity) || this, /** @internal */ _this._canvasIndex = -1, /** @internal */ _this._indexInRootCanvas = -1, /** @internal */ _this._isRootCanvasDirty = false, /** @internal */ _this._rootCanvasListeningEntities = [], /** @internal */ _this._isRootCanvas = false, /** @internal */ _this._sortDistance = 0, /** @internal */ _this._orderedRenderers = [], /** @internal */ _this._realRenderMode = 4, /** @internal */ _this._disorderedElements = new DisorderedArray(), _this._renderMode = CanvasRenderMode.WorldSpace, _this._resolutionAdaptationMode = ResolutionAdaptationMode.HeightAdaptation, _this._sortOrder = 0, _this._distance = 10, _this._referenceResolution = new Vector2(800, 600), _this._referenceResolutionPerUnit = 100, _this._hierarchyVersion = -1, _this._center = new Vector3();
+        _this = Component.call(this, entity) || this, /** @internal */ _this._canvasIndex = -1, /** @internal */ _this._indexInRootCanvas = -1, /** @internal */ _this._isRootCanvasDirty = false, /** @internal */ _this._rootCanvasListeningEntities = [], /** @internal */ _this._isRootCanvas = false, /** @internal */ _this._renderElements = [], /** @internal */ _this._batchedRenderElements = [], /** @internal */ _this._sortDistance = 0, /** @internal */ _this._orderedRenderers = [], /** @internal */ _this._realRenderMode = 4, /** @internal */ _this._disorderedElements = new DisorderedArray(), _this._renderMode = CanvasRenderMode.WorldSpace, _this._resolutionAdaptationMode = ResolutionAdaptationMode.HeightAdaptation, _this._sortOrder = 0, _this._distance = 10, _this._referenceResolution = new Vector2(800, 600), _this._referenceResolutionPerUnit = 100, _this._hierarchyVersion = -1, _this._center = new Vector3();
         _this._onCanvasSizeListener = _this._onCanvasSizeListener.bind(_this);
         _this._onCameraModifyListener = _this._onCameraModifyListener.bind(_this);
         _this._onCameraTransformListener = _this._onCameraTransformListener.bind(_this);
@@ -1419,11 +1568,10 @@ var UICanvas = /*#__PURE__*/ function(Component) {
         var _this = this, engine = _this.engine, mode = _this._realRenderMode;
         var _context_camera = context.camera, enableFrustumCulling = _context_camera.enableFrustumCulling, cullingMask = _context_camera.cullingMask, frustum = _context_camera._frustum;
         var frameCount = engine.time.frameCount;
-        // @ts-ignore
-        var renderElement = this._renderElement = engine._renderElementPool.get();
+        var renderElements = this._renderElements;
+        renderElements.length = 0;
         var virtualCamera = context.virtualCamera;
         this._updateSortDistance(virtualCamera.isOrthographic, virtualCamera.position, virtualCamera.forward);
-        renderElement.set(this.sortOrder, this._sortDistance);
         var _engine_canvas = engine.canvas, width = _engine_canvas.width, height = _engine_canvas.height;
         var renderers = this._getRenderers();
         for(var i = 0, n = renderers.length; i < n; i++){
@@ -1452,6 +1600,13 @@ var UICanvas = /*#__PURE__*/ function(Component) {
             renderer._prepareRender(context);
             renderer._renderFrameCount = frameCount;
         }
+        var batchedRenderElements = this._batchedRenderElements;
+        batchedRenderElements.length = 0;
+        UIBatchSorter.sort(renderElements, this.entity.transform.worldMatrix);
+        engine._batcherManager.batch(renderElements, batchedRenderElements);
+        for(var i1 = 0, n1 = batchedRenderElements.length; i1 < n1; i1++){
+            batchedRenderElements[i1].subDistancePriority = i1;
+        }
     };
     /**
    * @internal
@@ -1489,6 +1644,11 @@ var UICanvas = /*#__PURE__*/ function(Component) {
         this._setIsRootCanvas(false);
         Utils.cleanRootCanvas(this);
     };
+    // @ts-ignore
+    _proto._onDisable = function _onDisable() {
+        this._renderElements.length = 0;
+        this._batchedRenderElements.length = 0;
+    };
     /**
    * @internal
    */ _proto._rootCanvasListener = function _rootCanvasListener(flag, param) {
@@ -1929,7 +2089,10 @@ __decorate([
 ], UICanvas.prototype, "_isRootCanvas", void 0);
 __decorate([
     ignoreClone
-], UICanvas.prototype, "_renderElement", void 0);
+], UICanvas.prototype, "_renderElements", void 0);
+__decorate([
+    ignoreClone
+], UICanvas.prototype, "_batchedRenderElements", void 0);
 __decorate([
     ignoreClone
 ], UICanvas.prototype, "_sortDistance", void 0);
@@ -2120,16 +2283,14 @@ __decorate([
             dirtyUpdateFlag &= ~UIRendererUpdateFlags.Color;
         }
         this._dirtyUpdateFlag = dirtyUpdateFlag;
-        // Init sub render element.
         var engine = context.camera.engine;
-        var subRenderElement = engine._subRenderElementPool.get();
+        var renderElement = engine._renderElementPool.get();
         var subChunk = this._subChunk;
-        subRenderElement.set(this, material, subChunk.chunk.primitive, subChunk.subMesh, this.sprite.texture, subChunk);
-        if (canvas._realRenderMode === CanvasRenderMode.ScreenSpaceOverlay) {
-            subRenderElement.shaderPasses = material.shader.subShaders[0].passes;
-            subRenderElement.renderQueueFlags = RenderQueueFlags.All;
-        }
-        canvas._renderElement.addSubRenderElement(subRenderElement);
+        renderElement.set(this, material, subChunk.chunk.primitive, subChunk.subMesh, this.sprite.texture, subChunk);
+        renderElement.subShader = material.shader.subShaders[0];
+        renderElement.priority = canvas.sortOrder;
+        renderElement.distanceForSort = canvas._sortDistance;
+        canvas._renderElements.push(renderElement);
     };
     _proto._onTransformChanged = function _onTransformChanged(type) {
         if (type & UITransformModifyFlags.Size && this._drawMode === SpriteDrawMode.Tiled) {
@@ -2392,24 +2553,25 @@ __decorate([
             this._setDirtyFlagFalse(UIRendererUpdateFlags.Color);
         }
         var engine = context.camera.engine;
-        var textSubRenderElementPool = engine._textSubRenderElementPool;
+        var textRenderElementPool = engine._textRenderElementPool;
         var material = this.getMaterial();
-        var renderElement = canvas._renderElement;
+        var renderElements = canvas._renderElements;
+        var priority = canvas.sortOrder;
+        var distanceForSort = canvas._sortDistance;
         var textChunks = this._textChunks;
-        var isOverlay = canvas._realRenderMode === CanvasRenderMode.ScreenSpaceOverlay;
+        var subShader = material.shader.subShaders[0];
         for(var i = 0, n = textChunks.length; i < n; ++i){
             var // @ts-ignore
-            _subRenderElement;
+            _renderElement;
             var _textChunks_i = textChunks[i], subChunk = _textChunks_i.subChunk, texture = _textChunks_i.texture;
-            var subRenderElement = textSubRenderElementPool.get();
-            subRenderElement.set(this, material, subChunk.chunk.primitive, subChunk.subMesh, texture, subChunk);
-            (_subRenderElement = subRenderElement).shaderData || (_subRenderElement.shaderData = new ShaderData(ShaderDataGroup.RenderElement));
-            subRenderElement.shaderData.setTexture(Text._textTextureProperty, texture);
-            if (isOverlay) {
-                subRenderElement.shaderPasses = material.shader.subShaders[0].passes;
-                subRenderElement.renderQueueFlags = RenderQueueFlags.All;
-            }
-            renderElement.addSubRenderElement(subRenderElement);
+            var renderElement = textRenderElementPool.get();
+            renderElement.set(this, material, subChunk.chunk.primitive, subChunk.subMesh, texture, subChunk);
+            (_renderElement = renderElement).shaderData || (_renderElement.shaderData = new ShaderData(ShaderDataGroup.RenderElement));
+            renderElement.shaderData.setTexture(Text._textTextureProperty, texture);
+            renderElement.subShader = subShader;
+            renderElement.priority = priority;
+            renderElement.distanceForSort = distanceForSort;
+            renderElements.push(renderElement);
         }
     };
     _proto._resetSubFont = function _resetSubFont() {