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

package/dist/browser.js

@@ -419,6 +419,155 @@
         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;
+            engine.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 engine.BoundingBox());
+                engine.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
+            engine.Utils._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 engine.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) {
@@ -897,17 +1046,17 @@
         }
         var _proto = UIRenderer.prototype;
         // @ts-ignore
-        _proto._canBatch = function _canBatch(elementA, elementB) {
-            return engine.BatchUtils.canBatchSprite(elementA, elementB);
+        _proto._canBatch = function _canBatch(preElement, curElement) {
+            return engine.VertexMergeBatcher.canBatchSprite(preElement, curElement);
         };
         // @ts-ignore
-        _proto._batch = function _batch(elementA, elementB) {
-            engine.BatchUtils.batchFor2D(elementA, elementB);
+        _proto._batch = function _batch(preElement, curElement) {
+            engine.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) {
@@ -1366,7 +1515,7 @@
         _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 engine.DisorderedArray(), _this._renderMode = CanvasRenderMode.WorldSpace, _this._resolutionAdaptationMode = ResolutionAdaptationMode.HeightAdaptation, _this._sortOrder = 0, _this._distance = 10, _this._referenceResolution = new engine.Vector2(800, 600), _this._referenceResolutionPerUnit = 100, _this._hierarchyVersion = -1, _this._center = new engine.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 engine.DisorderedArray(), _this._renderMode = CanvasRenderMode.WorldSpace, _this._resolutionAdaptationMode = ResolutionAdaptationMode.HeightAdaptation, _this._sortOrder = 0, _this._distance = 10, _this._referenceResolution = new engine.Vector2(800, 600), _this._referenceResolutionPerUnit = 100, _this._hierarchyVersion = -1, _this._center = new engine.Vector3();
             _this._onCanvasSizeListener = _this._onCanvasSizeListener.bind(_this);
             _this._onCameraModifyListener = _this._onCameraModifyListener.bind(_this);
             _this._onCameraTransformListener = _this._onCameraTransformListener.bind(_this);
@@ -1423,11 +1572,10 @@
             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++){
@@ -1456,6 +1604,13 @@
                 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
@@ -1493,6 +1648,11 @@
             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) {
@@ -1933,7 +2093,10 @@
     ], exports.UICanvas.prototype, "_isRootCanvas", void 0);
     __decorate([
         engine.ignoreClone
-    ], exports.UICanvas.prototype, "_renderElement", void 0);
+    ], exports.UICanvas.prototype, "_renderElements", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UICanvas.prototype, "_batchedRenderElements", void 0);
     __decorate([
         engine.ignoreClone
     ], exports.UICanvas.prototype, "_sortDistance", void 0);
@@ -2124,16 +2287,14 @@
                 dirtyUpdateFlag &= ~UIRendererUpdateFlags.Color;
             }
             this._dirtyUpdateFlag = dirtyUpdateFlag;
-            // Init sub render element.
             var engine$1 = context.camera.engine;
-            var subRenderElement = engine$1._subRenderElementPool.get();
+            var renderElement = engine$1._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 = engine.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 === engine.SpriteDrawMode.Tiled) {
@@ -2396,24 +2557,25 @@
                 this._setDirtyFlagFalse(UIRendererUpdateFlags.Color);
             }
             var engine$1 = context.camera.engine;
-            var textSubRenderElementPool = engine$1._textSubRenderElementPool;
+            var textRenderElementPool = engine$1._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 engine.ShaderData(engine.ShaderDataGroup.RenderElement));
-                subRenderElement.shaderData.setTexture(Text._textTextureProperty, texture);
-                if (isOverlay) {
-                    subRenderElement.shaderPasses = material.shader.subShaders[0].passes;
-                    subRenderElement.renderQueueFlags = engine.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 engine.ShaderData(engine.ShaderDataGroup.RenderElement));
+                renderElement.shaderData.setTexture(Text._textTextureProperty, texture);
+                renderElement.subShader = subShader;
+                renderElement.priority = priority;
+                renderElement.distanceForSort = distanceForSort;
+                renderElements.push(renderElement);
             }
         };
         _proto._resetSubFont = function _resetSubFont() {