@tsparticles/preset-matrix 4.0.0-beta.15 → 4.0.0-beta.17

package/tsparticles.preset.matrix.bundle.js

@@ -1,5 +1,5 @@
 (function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
-/* Preset v4.0.0-beta.15 */
+/* Preset v4.0.0-beta.17 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -15,7 +15,7 @@
         b: 0,
         c: 0,
         d: 1,
-    }, randomColorValue = "random", double = 2, doublePI = Math.PI * double, defaultFps = 60, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, spatialHashGridCellSize = 100, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, inverseFactorNumerator = 1, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, defaultTransformValue = 1, minimumSize = 0, zIndexFactorOffset = 1, defaultOpacity$1 = 1, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minZ = 0, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, defaultAngle = 0, identity$1 = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0, defaultZoom = 1;
+    }, randomColorValue = "random", double = 2, doublePI = Math.PI * double, defaultFps = 60, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, spatialHashGridCellSize = 100, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, inverseFactorNumerator = 1, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, defaultTransformValue = 1, minimumSize = 0, zIndexFactorOffset = 1, defaultOpacity$1 = 1, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minZ = 0, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, defaultDensityFactor = 1, deleteCount = 1, defaultAngle = 0, identity$1 = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0, defaultZoom = 1;
 
     var MoveDirection;
     (function (MoveDirection) {
@@ -959,7 +959,7 @@
             }
         }
         else {
-            const existingCanvases = domContainer.getElementsByTagName(canvasTag), foundCanvas = existingCanvases[canvasFirstIndex];
+            const existingCanvases = domContainer.getElementsByTagName(canvasTag), foundCanvas = existingCanvases.item(canvasFirstIndex);
             if (foundCanvas) {
                 canvasEl = foundCanvas;
                 canvasEl.dataset[generatedAttribute] = generatedFalse;
@@ -996,7 +996,7 @@
             return this._domArray;
         }
         get version() {
-            return "4.0.0-beta.15";
+            return "4.0.0-beta.17";
         }
         addEventListener(type, listener) {
             this._eventDispatcher.addEventListener(type, listener);
@@ -1027,7 +1027,11 @@
         }
         async load(params) {
             await this.init();
-            const { Container } = await Promise.resolve().then(function () { return Container$1; }), id = params.id ?? params.element?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container({
+            let domSourceElement;
+            if (typeof HTMLElement !== "undefined" && params.element instanceof HTMLElement) {
+                domSourceElement = params.element;
+            }
+            const { Container } = await Promise.resolve().then(function () { return Container$1; }), id = params.id ?? domSourceElement?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container({
                 dispatchCallback: (eventType, args) => {
                     this.dispatchEvent(eventType, args);
                 },
@@ -1054,8 +1058,10 @@
             else {
                 items.push(newItem);
             }
-            const domContainer = getDomContainer(id, params.element), canvasEl = getCanvasFromContainer(domContainer);
-            newItem.canvas.loadCanvas(canvasEl);
+            const sourceCanvas = typeof OffscreenCanvas !== "undefined" && params.element instanceof OffscreenCanvas
+                ? params.element
+                : getCanvasFromContainer(getDomContainer(id, domSourceElement));
+            newItem.canvas.loadCanvas(sourceCanvas);
             await newItem.start();
             return newItem;
         }
@@ -2848,7 +2854,7 @@
     }
 
     async function loadCircleShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["circle"], () => {
                 return Promise.resolve(new CircleDrawer());
@@ -2896,7 +2902,7 @@
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -2949,7 +2955,7 @@
     }
 
     async function loadHslColorPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsl", new HslColorManager());
         });
@@ -2973,7 +2979,7 @@
     }
 
     async function loadMovePlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             const moveEngine = e, movePluginManager = moveEngine.pluginManager;
             movePluginManager.initializers.pathGenerators ??= new Map();
@@ -3034,7 +3040,7 @@
     }
 
     async function loadOpacityUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("opacity", container => {
                 return Promise.resolve(new OpacityUpdater(container));
@@ -3386,7 +3392,7 @@
     }
 
     async function loadOutModesUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("outModes", container => {
                 return Promise.resolve(new OutOfCanvasUpdater(container));
@@ -3457,7 +3463,7 @@
     }
 
     async function loadPaintUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -3512,7 +3518,7 @@
     }
 
     async function loadRgbColorPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("rgb", new RgbColorManager());
         });
@@ -3555,7 +3561,7 @@
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -3564,7 +3570,7 @@
     }
 
     async function loadBasic(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadHexColorPlugin(e),
@@ -3795,7 +3801,7 @@
     }
 
     async function loadMatrixShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["matrix"], () => Promise.resolve(new MatrixDrawer()));
         });
@@ -3855,7 +3861,7 @@
     }
 
     async function loadPoissonDiscPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new PoissonDiscPlugin());
         });
@@ -3893,7 +3899,7 @@
     }
 
     async function loadShadowEffect(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("shadow", container => {
                 return Promise.resolve(new ShadowDrawer(e.pluginManager, container));
@@ -3968,7 +3974,7 @@
     }
 
     async function loadTrailPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new TrailPlugin(e.pluginManager));
         });
@@ -4371,6 +4377,25 @@
         };
     }
 
+    const transferredCanvases = new WeakMap(), getTransferredCanvas = (canvas) => {
+        const transferredCanvas = transferredCanvases.get(canvas);
+        if (transferredCanvas) {
+            return transferredCanvas;
+        }
+        if (typeof canvas.transferControlToOffscreen !== "function") {
+            throw new TypeError("OffscreenCanvas is required but not supported by this browser");
+        }
+        try {
+            const offscreenCanvas = canvas.transferControlToOffscreen();
+            transferredCanvases.set(canvas, offscreenCanvas);
+            return offscreenCanvas;
+        }
+        catch {
+            throw new TypeError("OffscreenCanvas transfer failed");
+        }
+    }, isHtmlCanvasElement = (canvas) => {
+        return typeof HTMLCanvasElement !== "undefined" && canvas instanceof HTMLCanvasElement;
+    };
     function setStyle(canvas, style, important = false) {
         if (!style) {
             return;
@@ -4401,8 +4426,9 @@
         }
     }
     class CanvasManager {
-        element;
+        domElement;
         render;
+        renderCanvas;
         size;
         zoom = defaultZoom;
         _container;
@@ -4437,9 +4463,10 @@
         destroy() {
             this.stop();
             if (this._generated) {
-                const element = this.element;
+                const element = this.domElement;
                 element?.remove();
-                this.element = undefined;
+                this.domElement = undefined;
+                this.renderCanvas = undefined;
             }
             else {
                 this._resetOriginalStyle();
@@ -4472,16 +4499,17 @@
             this._initStyle();
             this.initBackground();
             this._safeMutationObserver(obs => {
-                if (!this.element || !(this.element instanceof Node)) {
+                const element = this.domElement;
+                if (!element || !(element instanceof Node)) {
                     return;
                 }
-                obs.observe(this.element, { attributes: true });
+                obs.observe(element, { attributes: true });
             });
             this.initPlugins();
             this.render.init();
         }
         initBackground() {
-            const { _container } = this, options = _container.actualOptions, background = options.background, element = this.element;
+            const { _container } = this, options = _container.actualOptions, background = options.background, element = this.domElement;
             if (!element) {
                 return;
             }
@@ -4506,21 +4534,30 @@
             }
         }
         loadCanvas(canvas) {
-            if (this._generated && this.element) {
-                this.element.remove();
+            if (this._generated && this.domElement) {
+                this.domElement.remove();
+            }
+            const container = this._container, domCanvas = isHtmlCanvasElement(canvas) ? canvas : undefined;
+            this.domElement = domCanvas;
+            this._generated = domCanvas ? domCanvas.dataset[generatedAttribute] === "true" : false;
+            this.renderCanvas = domCanvas ? getTransferredCanvas(domCanvas) : canvas;
+            const domElement = this.domElement;
+            if (domElement) {
+                domElement.ariaHidden = "true";
+                this._originalStyle = cloneStyle(domElement.style);
+            }
+            const standardSize = this._standardSize, renderCanvas = this.renderCanvas;
+            if (domElement) {
+                standardSize.height = domElement.offsetHeight;
+                standardSize.width = domElement.offsetWidth;
+            }
+            else {
+                standardSize.height = renderCanvas.height;
+                standardSize.width = renderCanvas.width;
             }
-            const container = this._container;
-            this._generated =
-                generatedAttribute in canvas.dataset ? canvas.dataset[generatedAttribute] === "true" : this._generated;
-            this.element = canvas;
-            this.element.ariaHidden = "true";
-            this._originalStyle = cloneStyle(this.element.style);
-            const standardSize = this._standardSize;
-            standardSize.height = canvas.offsetHeight;
-            standardSize.width = canvas.offsetWidth;
             const pxRatio = this._container.retina.pixelRatio, retinaSize = this.size;
-            canvas.height = retinaSize.height = standardSize.height * pxRatio;
-            canvas.width = retinaSize.width = standardSize.width * pxRatio;
+            renderCanvas.height = retinaSize.height = standardSize.height * pxRatio;
+            renderCanvas.width = retinaSize.width = standardSize.width * pxRatio;
             const canSupportHdrQuery = safeMatchMedia("(color-gamut: p3)");
             this.render.setContextSettings({
                 alpha: true,
@@ -4528,42 +4565,48 @@
                 desynchronized: true,
                 willReadFrequently: false,
             });
-            this.render.setContext(this.element.getContext("2d", this.render.settings));
+            this.render.setContext(renderCanvas.getContext("2d", this.render.settings));
             this._safeMutationObserver(obs => {
                 obs.disconnect();
             });
             container.retina.init();
             this.initBackground();
             this._safeMutationObserver(obs => {
-                if (!this.element || !(this.element instanceof Node)) {
+                const element = this.domElement;
+                if (!element || !(element instanceof Node)) {
                     return;
                 }
-                obs.observe(this.element, { attributes: true });
+                obs.observe(element, { attributes: true });
             });
         }
         resize() {
-            if (!this.element) {
+            const element = this.domElement;
+            if (!element) {
+                return false;
+            }
+            const container = this._container, renderCanvas = this.renderCanvas;
+            if (renderCanvas === undefined) {
                 return false;
             }
-            const container = this._container, currentSize = container.canvas._standardSize, newSize = {
-                width: this.element.offsetWidth,
-                height: this.element.offsetHeight,
+            const currentSize = container.canvas._standardSize, newSize = {
+                width: element.offsetWidth,
+                height: element.offsetHeight,
             }, pxRatio = container.retina.pixelRatio, retinaSize = {
                 width: newSize.width * pxRatio,
                 height: newSize.height * pxRatio,
             };
             if (newSize.height === currentSize.height &&
                 newSize.width === currentSize.width &&
-                retinaSize.height === this.element.height &&
-                retinaSize.width === this.element.width) {
+                retinaSize.height === renderCanvas.height &&
+                retinaSize.width === renderCanvas.width) {
                 return false;
             }
             const oldSize = { ...currentSize };
             currentSize.height = newSize.height;
             currentSize.width = newSize.width;
             const canvasSize = this.size;
-            this.element.width = canvasSize.width = retinaSize.width;
-            this.element.height = canvasSize.height = retinaSize.height;
+            renderCanvas.width = canvasSize.width = retinaSize.width;
+            renderCanvas.height = canvasSize.height = retinaSize.height;
             if (this._container.started) {
                 container.particles.setResizeFactor({
                     width: currentSize.width / oldSize.width,
@@ -4573,7 +4616,7 @@
             return true;
         }
         setPointerEvents(type) {
-            const element = this.element;
+            const element = this.domElement;
             if (!element) {
                 return;
             }
@@ -4592,7 +4635,7 @@
             this.render.stop();
         }
         async windowResize() {
-            if (!this.element || !this.resize()) {
+            if (!this.domElement || !this.resize()) {
                 return;
             }
             const container = this._container, needsRefresh = container.updateActualOptions();
@@ -4608,7 +4651,7 @@
             }
         };
         _initStyle = () => {
-            const element = this.element, options = this._container.actualOptions;
+            const element = this.domElement, options = this._container.actualOptions;
             if (!element) {
                 return;
             }
@@ -4630,7 +4673,7 @@
             }
         };
         _repairStyle = () => {
-            const element = this.element;
+            const element = this.domElement;
             if (!element) {
                 return;
             }
@@ -4650,7 +4693,7 @@
             });
         };
         _resetOriginalStyle = () => {
-            const element = this.element, originalStyle = this._originalStyle;
+            const element = this.domElement, originalStyle = this._originalStyle;
             if (!element || !originalStyle) {
                 return;
             }
@@ -4663,7 +4706,7 @@
             callback(this._mutationObserver);
         };
         _setFullScreenStyle = () => {
-            const element = this.element;
+            const element = this.domElement;
             if (!element) {
                 return;
             }
@@ -4737,7 +4780,7 @@
                 manageListener(globalThis, resizeEvent, handlers.resize, add);
                 return;
             }
-            const canvasEl = container.canvas.element;
+            const canvasEl = container.canvas.domElement;
             if (this._resizeObserver && !add) {
                 if (canvasEl) {
                     this._resizeObserver.unobserve(canvasEl);
@@ -4992,8 +5035,6 @@
             this._initPosition(position);
             this.initialVelocity = this._calculateVelocity();
             this.velocity = this.initialVelocity.copy();
-            const particles = container.particles;
-            particles.setLastZIndex(this.position.z);
             this.zIndexFactor = this.position.z / container.zLayers;
             this.sides = 24;
             let effectDrawer, shapeDrawer;
@@ -5143,7 +5184,7 @@
             return color;
         };
         _initPosition = position => {
-            const container = this._container, zIndexValue = getRangeValue(this.options.zIndex.value), initialPosition = this._calcPosition(position, clamp(zIndexValue, minZ, container.zLayers));
+            const container = this._container, zIndexValue = Math.floor(getRangeValue(this.options.zIndex.value)), initialPosition = this._calcPosition(position, clamp(zIndexValue, minZ, container.zLayers));
             if (!initialPosition) {
                 throw new Error("a valid position cannot be found for particle");
             }
@@ -5277,10 +5318,8 @@
         _container;
         _groupLimits;
         _limit;
-        _maxZIndex;
-        _minZIndex;
-        _needsSort;
         _nextId;
+        _particleBuckets;
         _particleResetPlugins;
         _particleUpdatePlugins;
         _pluginManager;
@@ -5289,19 +5328,17 @@
         _postUpdatePlugins;
         _resizeFactor;
         _updatePlugins;
-        _zArray;
+        _zBuckets;
         constructor(pluginManager, container) {
             this._pluginManager = pluginManager;
             this._container = container;
             this._nextId = 0;
             this._array = [];
-            this._zArray = [];
             this._pool = [];
             this._limit = 0;
             this._groupLimits = new Map();
-            this._needsSort = false;
-            this._minZIndex = 0;
-            this._maxZIndex = 0;
+            this._particleBuckets = new Map();
+            this._zBuckets = this._createBuckets(this._container.zLayers);
             this.grid = new SpatialHashGrid(spatialHashGridCellSize);
             this.checkParticlePositionPlugins = [];
             this._particleResetPlugins = [];
@@ -5343,7 +5380,7 @@
                     return;
                 }
                 this._array.push(particle);
-                this._zArray.push(particle);
+                this._insertParticleIntoBucket(particle);
                 this._nextId++;
                 this._container.dispatchEvent(EventType.particleAdded, {
                     particle,
@@ -5357,12 +5394,14 @@
         }
         clear() {
             this._array = [];
-            this._zArray = [];
+            this._particleBuckets.clear();
+            this._resetBuckets(this._container.zLayers);
         }
         destroy() {
             this._array = [];
             this._pool.length = 0;
-            this._zArray = [];
+            this._particleBuckets.clear();
+            this._zBuckets = [];
             this.checkParticlePositionPlugins = [];
             this._particleResetPlugins = [];
             this._particleUpdatePlugins = [];
@@ -5371,8 +5410,14 @@
             this._updatePlugins = [];
         }
         drawParticles(delta) {
-            for (const particle of this._zArray) {
-                particle.draw(delta);
+            for (let i = this._zBuckets.length - one; i >= minIndex; i--) {
+                const bucket = this._zBuckets[i];
+                if (!bucket) {
+                    continue;
+                }
+                for (const particle of bucket) {
+                    particle.draw(delta);
+                }
             }
         }
         filter(condition) {
@@ -5386,15 +5431,14 @@
         }
         async init() {
             const container = this._container, options = container.actualOptions;
-            this._minZIndex = 0;
-            this._maxZIndex = 0;
-            this._needsSort = false;
             this.checkParticlePositionPlugins = [];
             this._updatePlugins = [];
             this._particleUpdatePlugins = [];
             this._postUpdatePlugins = [];
             this._particleResetPlugins = [];
             this._postParticleUpdatePlugins = [];
+            this._particleBuckets.clear();
+            this._resetBuckets(container.zLayers);
             this.grid = new SpatialHashGrid(spatialHashGridCellSize * container.retina.pixelRatio);
             for (const plugin of container.plugins) {
                 if (plugin.redrawInit) {
@@ -5495,79 +5539,25 @@
             }
             this._applyDensity(options.particles, pluginsCount);
         }
-        setLastZIndex(zIndex) {
-            this._needsSort ||= zIndex >= this._maxZIndex || (zIndex > this._minZIndex && zIndex < this._maxZIndex);
-        }
         setResizeFactor(factor) {
             this._resizeFactor = factor;
         }
         update(delta) {
-            const particlesToDelete = new Set();
             this.grid.clear();
             for (const plugin of this._updatePlugins) {
                 plugin.update?.(delta);
             }
-            const resizeFactor = this._resizeFactor;
-            for (const particle of this._array) {
-                if (resizeFactor && !particle.ignoresResizeRatio) {
-                    particle.position.x *= resizeFactor.width;
-                    particle.position.y *= resizeFactor.height;
-                    particle.initialPosition.x *= resizeFactor.width;
-                    particle.initialPosition.y *= resizeFactor.height;
-                }
-                particle.ignoresResizeRatio = false;
-                for (const plugin of this._particleResetPlugins) {
-                    plugin.particleReset?.(particle);
-                }
-                for (const plugin of this._particleUpdatePlugins) {
-                    if (particle.destroyed) {
-                        break;
-                    }
-                    plugin.particleUpdate?.(particle, delta);
-                }
-                if (particle.destroyed) {
-                    particlesToDelete.add(particle);
-                    continue;
-                }
-                this.grid.insert(particle);
-            }
+            const particlesToDelete = this._updateParticlesPhase1(delta);
             for (const plugin of this._postUpdatePlugins) {
                 plugin.postUpdate?.(delta);
             }
-            for (const particle of this._array) {
-                if (particle.destroyed) {
-                    particlesToDelete.add(particle);
-                    continue;
-                }
-                for (const updater of this._container.particleUpdaters) {
-                    updater.update(particle, delta);
-                }
-                if (!particle.destroyed && !particle.spawning) {
-                    for (const plugin of this._postParticleUpdatePlugins) {
-                        plugin.postParticleUpdate?.(particle, delta);
-                    }
-                }
-                else if (particle.destroyed) {
-                    particlesToDelete.add(particle);
-                }
-            }
+            this._updateParticlesPhase2(delta, particlesToDelete);
             if (particlesToDelete.size) {
                 for (const particle of particlesToDelete) {
                     this.remove(particle);
                 }
             }
             delete this._resizeFactor;
-            if (this._needsSort) {
-                const zArray = this._zArray;
-                zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-                const firstItem = zArray[minIndex], lastItem = zArray[zArray.length - lengthOffset];
-                if (!firstItem || !lastItem) {
-                    return;
-                }
-                this._maxZIndex = firstItem.position.z;
-                this._minZIndex = lastItem.position.z;
-                this._needsSort = false;
-            }
         }
         _addToPool = (...particles) => {
             this._pool.push(...particles);
@@ -5597,13 +5587,52 @@
                 this.removeQuantity(particlesCount - particlesNumber, group);
             }
         };
+        _createBuckets = (zLayers) => {
+            const bucketCount = Math.max(Math.floor(zLayers), one);
+            return Array.from({ length: bucketCount }, () => []);
+        };
+        _getBucketIndex = (zIndex) => {
+            const maxBucketIndex = this._zBuckets.length - one;
+            if (maxBucketIndex <= minIndex) {
+                return minIndex;
+            }
+            return Math.min(Math.max(Math.floor(zIndex), minIndex), maxBucketIndex);
+        };
+        _getParticleInsertIndex = (bucket, particleId) => {
+            let start = minIndex, end = bucket.length;
+            while (start < end) {
+                const middle = Math.floor((start + end) / double), middleParticle = bucket[middle];
+                if (!middleParticle) {
+                    end = middle;
+                    continue;
+                }
+                if (middleParticle.id < particleId) {
+                    start = middle + one;
+                }
+                else {
+                    end = middle;
+                }
+            }
+            return start;
+        };
         _initDensityFactor = densityOptions => {
             const container = this._container;
-            if (!container.canvas.element || !densityOptions.enable) {
+            if (!densityOptions.enable) {
+                return defaultDensityFactor;
+            }
+            const canvasSize = container.canvas.size, pxRatio = container.retina.pixelRatio;
+            if (!canvasSize.width || !canvasSize.height) {
                 return defaultDensityFactor;
             }
-            const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
-            return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp);
+            return ((canvasSize.width * canvasSize.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp));
+        };
+        _insertParticleIntoBucket = (particle) => {
+            const bucketIndex = this._getBucketIndex(particle.position.z), bucket = this._zBuckets[bucketIndex];
+            if (!bucket) {
+                return;
+            }
+            bucket.splice(this._getParticleInsertIndex(bucket, particle.id), empty, particle);
+            this._particleBuckets.set(particle.id, bucketIndex);
         };
         _removeParticle = (index, group, override) => {
             const particle = this._array[index];
@@ -5613,9 +5642,8 @@
             if (particle.group !== group) {
                 return false;
             }
-            const zIdx = this._zArray.indexOf(particle);
             this._array.splice(index, deleteCount);
-            this._zArray.splice(zIdx, deleteCount);
+            this._removeParticleFromBucket(particle);
             particle.destroy(override);
             this._container.dispatchEvent(EventType.particleRemoved, {
                 particle,
@@ -5623,6 +5651,98 @@
             this._addToPool(particle);
             return true;
         };
+        _removeParticleFromBucket = (particle) => {
+            const bucketIndex = this._particleBuckets.get(particle.id) ?? this._getBucketIndex(particle.position.z), bucket = this._zBuckets[bucketIndex];
+            if (!bucket) {
+                this._particleBuckets.delete(particle.id);
+                return;
+            }
+            const particleIndex = this._getParticleInsertIndex(bucket, particle.id);
+            if (bucket[particleIndex]?.id !== particle.id) {
+                this._particleBuckets.delete(particle.id);
+                return;
+            }
+            bucket.splice(particleIndex, deleteCount);
+            this._particleBuckets.delete(particle.id);
+        };
+        _resetBuckets = (zLayers) => {
+            const bucketCount = Math.max(Math.floor(zLayers), one);
+            if (this._zBuckets.length !== bucketCount) {
+                this._zBuckets = this._createBuckets(bucketCount);
+                return;
+            }
+            for (const bucket of this._zBuckets) {
+                bucket.length = minIndex;
+            }
+        };
+        _updateParticleBucket = (particle) => {
+            const newBucketIndex = this._getBucketIndex(particle.position.z), currentBucketIndex = this._particleBuckets.get(particle.id);
+            if (currentBucketIndex === undefined) {
+                this._insertParticleIntoBucket(particle);
+                return;
+            }
+            if (currentBucketIndex === newBucketIndex) {
+                return;
+            }
+            const currentBucket = this._zBuckets[currentBucketIndex];
+            if (currentBucket) {
+                const particleIndex = this._getParticleInsertIndex(currentBucket, particle.id);
+                if (currentBucket[particleIndex]?.id === particle.id) {
+                    currentBucket.splice(particleIndex, deleteCount);
+                }
+            }
+            const newBucket = this._zBuckets[newBucketIndex];
+            if (!newBucket) {
+                this._particleBuckets.set(particle.id, newBucketIndex);
+                return;
+            }
+            newBucket.splice(this._getParticleInsertIndex(newBucket, particle.id), empty, particle);
+            this._particleBuckets.set(particle.id, newBucketIndex);
+        };
+        _updateParticlesPhase1 = (delta) => {
+            const particlesToDelete = new Set(), resizeFactor = this._resizeFactor;
+            for (const particle of this._array) {
+                if (resizeFactor && !particle.ignoresResizeRatio) {
+                    particle.position.x *= resizeFactor.width;
+                    particle.position.y *= resizeFactor.height;
+                    particle.initialPosition.x *= resizeFactor.width;
+                    particle.initialPosition.y *= resizeFactor.height;
+                }
+                particle.ignoresResizeRatio = false;
+                for (const plugin of this._particleResetPlugins) {
+                    plugin.particleReset?.(particle);
+                }
+                for (const plugin of this._particleUpdatePlugins) {
+                    if (particle.destroyed) {
+                        break;
+                    }
+                    plugin.particleUpdate?.(particle, delta);
+                }
+                if (particle.destroyed) {
+                    particlesToDelete.add(particle);
+                    continue;
+                }
+                this.grid.insert(particle);
+            }
+            return particlesToDelete;
+        };
+        _updateParticlesPhase2 = (delta, particlesToDelete) => {
+            for (const particle of this._array) {
+                if (particle.destroyed) {
+                    particlesToDelete.add(particle);
+                    continue;
+                }
+                for (const updater of this._container.particleUpdaters) {
+                    updater.update(particle, delta);
+                }
+                if (!particle.spawning) {
+                    for (const plugin of this._postParticleUpdatePlugins) {
+                        plugin.postParticleUpdate?.(particle, delta);
+                    }
+                }
+                this._updateParticleBucket(particle);
+            }
+        };
     }
 
     class Retina {
@@ -5638,9 +5758,8 @@
             const container = this.container, options = container.actualOptions;
             this.pixelRatio = options.detectRetina ? devicePixelRatio : defaultRatio;
             this.reduceFactor = defaultReduceFactor;
-            const ratio = this.pixelRatio, canvas = container.canvas;
-            if (canvas.element) {
-                const element = canvas.element;
+            const ratio = this.pixelRatio, canvas = container.canvas, element = canvas.domElement;
+            if (element) {
                 canvas.size.width = element.offsetWidth * ratio;
                 canvas.size.height = element.offsetHeight * ratio;
             }