targetj 1.0.259 → 1.1.0

package/build/ParticleRenderer.js

@@ -0,0 +1,818 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { ColorUtil } from "./ColorUtil.js";
+import { TUtil } from "./TUtil.js";
+
+/**
+ * It renders GPU-backed children using WebGPU.
+ */
+var ParticleRenderer = /*#__PURE__*/function () {
+  function ParticleRenderer(tmodel) {
+    _classCallCheck(this, ParticleRenderer);
+    this.tmodel = tmodel;
+    this.canvas = undefined;
+    this.device = undefined;
+    this.context = undefined;
+    this.format = undefined;
+    this.pipeline = undefined;
+    this.bindGroup = undefined;
+    this.particleBuffer = undefined;
+    this.targetParticleBuffer = undefined;
+    this.uniformBuffer = undefined;
+    this.transitionStep = 0;
+    this.transitionActive = false;
+    this.particleCount = 0;
+    this.canvasLayer = undefined;
+    this.canvasX = 0;
+    this.canvasY = 0;
+    this.initializationPromise = undefined;
+  }
+  return _createClass(ParticleRenderer, [{
+    key: "init",
+    value: function () {
+      var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var _this = this;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!this.device) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return", true);
+            case 2:
+              if (this.tmodel.hasDom()) {
+                _context.next = 4;
+                break;
+              }
+              return _context.abrupt("return", false);
+            case 4:
+              if (!this.initializationPromise) {
+                this.initializationPromise = this.initialize().catch(function (error) {
+                  _this.initializationPromise = undefined;
+                  throw error;
+                });
+              }
+              _context.next = 7;
+              return this.initializationPromise;
+            case 7:
+              return _context.abrupt("return", !!this.device);
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function init() {
+        return _init.apply(this, arguments);
+      }
+      return init;
+    }()
+  }, {
+    key: "initialize",
+    value: function () {
+      var _initialize = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        var adapter;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (navigator.gpu) {
+                _context2.next = 2;
+                break;
+              }
+              throw new Error("WebGPU is not supported by this browser.");
+            case 2:
+              if (globalThis.GPUBufferUsage) {
+                _context2.next = 4;
+                break;
+              }
+              throw new Error("GPUBufferUsage is not available in this WebGPU environment.");
+            case 4:
+              this.createCanvas();
+              _context2.next = 7;
+              return navigator.gpu.requestAdapter();
+            case 7:
+              adapter = _context2.sent;
+              if (adapter) {
+                _context2.next = 10;
+                break;
+              }
+              throw new Error("Unable to obtain a WebGPU adapter.");
+            case 10:
+              _context2.next = 12;
+              return adapter.requestDevice();
+            case 12:
+              this.device = _context2.sent;
+              this.context = this.canvas.getContext("webgpu");
+              if (this.context) {
+                _context2.next = 16;
+                break;
+              }
+              throw new Error("Unable to obtain a WebGPU canvas context.");
+            case 16:
+              this.format = navigator.gpu.getPreferredCanvasFormat();
+              this.resizeCanvas();
+              this.context.configure({
+                device: this.device,
+                format: this.format,
+                alphaMode: "premultiplied"
+              });
+              this.createUniformBuffer();
+              this.createPipeline();
+            case 21:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function initialize() {
+        return _initialize.apply(this, arguments);
+      }
+      return initialize;
+    }()
+  }, {
+    key: "createCanvas",
+    value: function createCanvas() {
+      var _this$tmodel$$dom,
+        _this2 = this,
+        _this$tmodel$$dom2,
+        _this$tmodel$getParen;
+      if (this.canvas) {
+        return;
+      }
+      var parent = (_this$tmodel$$dom = this.tmodel.$dom) === null || _this$tmodel$$dom === void 0 ? void 0 : _this$tmodel$$dom.element;
+      if (!parent) {
+        throw new Error("Unable to create a GPU child layer without a parent DOM element.");
+      }
+      var oldLayer = parent.querySelector('[data-targetjs-gpu-layer="true"]');
+      if (oldLayer) {
+        oldLayer.remove();
+      }
+      this.canvasLayer = document.createElement("div");
+      this.canvasLayer.setAttribute("data-targetjs-gpu-layer", "true");
+      Object.assign(this.canvasLayer.style, {
+        position: "absolute",
+        left: "0px",
+        top: "0px",
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        zIndex: "0"
+      });
+      this.canvas = document.createElement("canvas");
+      this.canvas.setAttribute("data-targetjs-gpu-children", "true");
+      Object.assign(this.canvas.style, {
+        position: "absolute",
+        left: "0px",
+        top: "0px",
+        width: "1px",
+        height: "1px",
+        display: "block",
+        pointerEvents: "none"
+      });
+      this.canvasLayer.appendChild(this.canvas);
+      parent.prepend(this.canvasLayer);
+      this.onScroll = function () {
+        return _this2.tmodel.requestParticleRender();
+      };
+      this.scrollElements = _toConsumableArray(new Set([(_this$tmodel$$dom2 = this.tmodel.$dom) === null || _this$tmodel$$dom2 === void 0 ? void 0 : _this$tmodel$$dom2.element, (_this$tmodel$getParen = this.tmodel.getParent()) === null || _this$tmodel$getParen === void 0 || (_this$tmodel$getParen = _this$tmodel$getParen.$dom) === null || _this$tmodel$getParen === void 0 ? void 0 : _this$tmodel$getParen.element].filter(Boolean)));
+      var _iterator = _createForOfIteratorHelper(this.scrollElements),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var element = _step.value;
+          element.addEventListener("scroll", this.onScroll, {
+            passive: true
+          });
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+  }, {
+    key: "createUniformBuffer",
+    value: function createUniformBuffer() {
+      this.uniformBuffer = this.device.createBuffer({
+        size: 32,
+        usage: globalThis.GPUBufferUsage.UNIFORM | globalThis.GPUBufferUsage.COPY_DST
+      });
+    }
+  }, {
+    key: "createPipeline",
+    value: function createPipeline() {
+      var shaderModule = this.device.createShaderModule({
+        code: "\n                struct Uniforms {\n                    viewport: vec2f,\n                    contentOffset: vec2f,\n                    step: f32,\n                    transitionActive: f32,\n                    padding: vec2f,\n                }\n\n                @group(0) @binding(0)\n                var<uniform> uniforms: Uniforms;\n\n                struct VertexOutput {\n                    @builtin(position) position: vec4f,\n                    @location(0) localPosition: vec2f,\n                    @location(1) backgroundColor: vec4f,\n                    @location(2) size: vec2f,\n                    @location(3) borderRadius: f32,\n                }\n\n                fn getProgress(step: f32, steps: f32) -> f32 {\n                    if (uniforms.transitionActive < 0.5) {\n                        return 0.0;\n                    }\n\n                    if (steps < 0.0) {\n                        return 0.0;\n                    }\n\n                    if (steps == 0.0) {\n                        return 1.0;\n                    }\n\n                    return clamp(step / steps, 0.0, 1.0);\n                }\n\n                @vertex\n                fn vertexMain(\n                    @location(0) childPosition: vec2f,\n                    @location(1) childSize: vec2f,\n                    @location(2) childBackgroundColor: vec4f,\n                    @location(3) childGeometry: vec2f,\n                    @location(4) targetPosition: vec2f,\n                    @location(5) targetSize: vec2f,\n                    @location(6) targetBackgroundColor: vec4f,\n                    @location(7) targetGeometry: vec2f,\n                    @location(8) targetPositionSteps: vec2f,\n                    @location(9) targetSizeSteps: vec2f,\n                    @location(10) targetBackgroundColorSteps: f32,\n                    @location(11) targetGeometrySteps: vec2f,\n                    @location(12) childScale: f32,\n                    @location(13) targetScale: f32,\n                    @location(14) targetScaleSteps: f32,\n                    @builtin(vertex_index) vertexIndex: u32\n                ) -> VertexOutput {\n                    let corners = array<vec2f, 6>(\n                        vec2f(-1.0, -1.0),\n                        vec2f( 1.0, -1.0),\n                        vec2f(-1.0,  1.0),\n                        vec2f(-1.0,  1.0),\n                        vec2f( 1.0, -1.0),\n                        vec2f( 1.0,  1.0)\n                    );\n\n                    let xProgress = getProgress(uniforms.step, targetPositionSteps.x);\n                    let yProgress = getProgress(uniforms.step, targetPositionSteps.y);\n                    let widthProgress = getProgress(uniforms.step, targetSizeSteps.x);\n                    let heightProgress = getProgress(uniforms.step, targetSizeSteps.y);\n                    let backgroundColorProgress = getProgress(uniforms.step, targetBackgroundColorSteps);\n                    let borderRadiusProgress = getProgress(uniforms.step, targetGeometrySteps.x);\n                    let rotateProgress = getProgress(uniforms.step, targetGeometrySteps.y);\n                    let scaleProgress = getProgress(uniforms.step, targetScaleSteps);\n            \n                    let position = vec2f(\n                        mix(childPosition.x, targetPosition.x, xProgress),\n                        mix(childPosition.y, targetPosition.y, yProgress)\n                    );\n\n                    let size = vec2f(\n                        mix(childSize.x, targetSize.x, widthProgress),\n                        mix(childSize.y, targetSize.y, heightProgress)\n                    );\n\n                    let backgroundColor = mix(childBackgroundColor, targetBackgroundColor, backgroundColorProgress);\n                    let borderRadius = mix(childGeometry.x, targetGeometry.x, borderRadiusProgress);\n                    let rotate = mix(childGeometry.y, targetGeometry.y, rotateProgress);\n                    let scale = mix(childScale, targetScale, scaleProgress);\n\n                    let localPosition = corners[vertexIndex];\n                    let localPixelPosition = localPosition * size * 0.5 * scale;\n\n                    let angle = rotate * 3.141592653589793 / 180.0;\n                    let cosine = cos(angle);\n                    let sine = sin(angle);\n\n                    let rotatedPosition = vec2f(\n                        localPixelPosition.x * cosine - localPixelPosition.y * sine,\n                        localPixelPosition.x * sine + localPixelPosition.y * cosine\n                    );\n\n                    let elementCenter = position - uniforms.contentOffset + size * 0.5;\n                    let pixelPosition = elementCenter + rotatedPosition;\n\n                    let clipPosition = vec2f(\n                        pixelPosition.x / uniforms.viewport.x * 2.0 - 1.0,\n                        1.0 - pixelPosition.y / uniforms.viewport.y * 2.0\n                    );\n\n                    var output: VertexOutput;\n\n                    output.position = vec4f(clipPosition, 0.0, 1.0);\n                    output.localPosition = localPosition;\n                    output.backgroundColor = backgroundColor;\n                    output.size = size;\n                    output.borderRadius = borderRadius;\n\n                    return output;\n                }\n                @fragment\n                fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {\n                    let halfSize = max(input.size * 0.5, vec2f(0.0001));\n                    let radius = clamp(input.borderRadius, 0.0, min(halfSize.x, halfSize.y));\n                    let pixelPosition = input.localPosition * halfSize;\n                    let q = abs(pixelPosition) - (halfSize - vec2f(radius));\n                    let distance = length(max(q, vec2f(0.0))) + min(max(q.x, q.y), 0.0) - radius;\n                    let aa = max(fwidth(distance), 0.0001);\n\n                    if (radius <= 0.0) {\n                        return input.backgroundColor;\n                    }\n\n                    let coverage = 1.0 - smoothstep(-aa, aa, distance);\n\n                    if (coverage <= 0.0) {\n                        discard;\n                    }\n\n                    let alpha = input.backgroundColor.a * coverage;\n\n                    return vec4f(input.backgroundColor.rgb * alpha, alpha);\n                }\n            "
+      });
+      this.pipeline = this.device.createRenderPipeline({
+        layout: "auto",
+        vertex: {
+          module: shaderModule,
+          entryPoint: "vertexMain",
+          buffers: [{
+            arrayStride: 80,
+            stepMode: "instance",
+            attributes: [{
+              shaderLocation: 0,
+              offset: 0,
+              format: "float32x2"
+            }, {
+              shaderLocation: 1,
+              offset: 8,
+              format: "float32x2"
+            }, {
+              shaderLocation: 2,
+              offset: 16,
+              format: "float32x4"
+            }, {
+              shaderLocation: 3,
+              offset: 32,
+              format: "float32x2"
+            }, {
+              shaderLocation: 12,
+              offset: 68,
+              format: "float32"
+            }]
+          }, {
+            arrayStride: 80,
+            stepMode: "instance",
+            attributes: [{
+              shaderLocation: 4,
+              offset: 0,
+              format: "float32x2"
+            }, {
+              shaderLocation: 5,
+              offset: 8,
+              format: "float32x2"
+            }, {
+              shaderLocation: 6,
+              offset: 16,
+              format: "float32x4"
+            }, {
+              shaderLocation: 7,
+              offset: 32,
+              format: "float32x2"
+            }, {
+              shaderLocation: 8,
+              offset: 40,
+              format: "float32x2"
+            }, {
+              shaderLocation: 9,
+              offset: 48,
+              format: "float32x2"
+            }, {
+              shaderLocation: 10,
+              offset: 56,
+              format: "float32"
+            }, {
+              shaderLocation: 11,
+              offset: 60,
+              format: "float32x2"
+            }, {
+              shaderLocation: 13,
+              offset: 68,
+              format: "float32"
+            }, {
+              shaderLocation: 14,
+              offset: 72,
+              format: "float32"
+            }]
+          }]
+        },
+        fragment: {
+          module: shaderModule,
+          entryPoint: "fragmentMain",
+          targets: [{
+            format: this.format,
+            blend: {
+              color: {
+                srcFactor: "one",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add"
+              },
+              alpha: {
+                srcFactor: "one",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add"
+              }
+            }
+          }]
+        },
+        primitive: {
+          topology: "triangle-list"
+        }
+      });
+      this.bindGroup = this.device.createBindGroup({
+        layout: this.pipeline.getBindGroupLayout(0),
+        entries: [{
+          binding: 0,
+          resource: {
+            buffer: this.uniformBuffer
+          }
+        }]
+      });
+    }
+  }, {
+    key: "toNumber",
+    value: function toNumber(value) {
+      var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var number = typeof value === "string" ? parseFloat(value) : Number(value);
+      return Number.isFinite(number) ? number : defaultValue;
+    }
+  }, {
+    key: "getBackgroundColor",
+    value: function getBackgroundColor(value) {
+      if (!TUtil.isDefined(value)) {
+        return [0, 0, 0, 0];
+      }
+      if (Array.isArray(value)) {
+        return [this.toNumber(value[0], 0), this.toNumber(value[1], 0), this.toNumber(value[2], 0), this.toNumber(value[3], 0)];
+      }
+      var color = ColorUtil.color2Integers(value);
+      if (!color) {
+        return [0, 0, 0, 0];
+      }
+      var alpha = this.toNumber(color[3], 1);
+      if (alpha > 1) {
+        alpha /= 255;
+      }
+      return [this.toNumber(color[0], 0) / 255, this.toNumber(color[1], 0) / 255, this.toNumber(color[2], 0) / 255, alpha];
+    }
+  }, {
+    key: "getTargetStep",
+    value: function getTargetStep(steps, key) {
+      if (!steps || !Object.prototype.hasOwnProperty.call(steps, key)) {
+        return -1;
+      }
+      return Math.max(0, this.toNumber(steps[key], 0));
+    }
+  }, {
+    key: "writeParticleData",
+    value: function writeParticleData(particleData, offset, values, steps) {
+      var _values, _values2;
+      var x = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : (_values = values) === null || _values === void 0 ? void 0 : _values.x;
+      var y = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : (_values2 = values) === null || _values2 === void 0 ? void 0 : _values2.y;
+      values || (values = {});
+      var backgroundColor = this.getBackgroundColor(values.backgroundColor);
+      var opacity = Math.max(0, Math.min(1, this.toNumber(values.opacity, 1)));
+      particleData[offset] = this.toNumber(x, 0);
+      particleData[offset + 1] = this.toNumber(y, 0);
+      particleData[offset + 2] = this.toNumber(values.width, 0);
+      particleData[offset + 3] = this.toNumber(values.height, 0);
+      particleData[offset + 4] = backgroundColor[0];
+      particleData[offset + 5] = backgroundColor[1];
+      particleData[offset + 6] = backgroundColor[2];
+      particleData[offset + 7] = backgroundColor[3] * opacity;
+      particleData[offset + 8] = Math.max(0, this.toNumber(values.borderRadius, 0));
+      particleData[offset + 9] = this.toNumber(values.rotate, 0);
+      particleData[offset + 10] = this.getTargetStep(steps, "x");
+      particleData[offset + 11] = this.getTargetStep(steps, "y");
+      particleData[offset + 12] = this.getTargetStep(steps, "width");
+      particleData[offset + 13] = this.getTargetStep(steps, "height");
+      var backgroundColorSteps = this.getTargetStep(steps, "backgroundColor");
+      var opacitySteps = this.getTargetStep(steps, "opacity");
+      particleData[offset + 14] = opacitySteps >= 0 ? opacitySteps : backgroundColorSteps;
+      particleData[offset + 15] = this.getTargetStep(steps, "borderRadius");
+      particleData[offset + 16] = this.getTargetStep(steps, "rotate");
+      particleData[offset + 17] = this.toNumber(values.scale, 1);
+      particleData[offset + 18] = this.getTargetStep(steps, "scale");
+    }
+  }, {
+    key: "createChildData",
+    value: function createChildData(children) {
+      var particleData = new Float32Array(children.length * 20);
+      for (var i = 0; i < children.length; i++) {
+        var child = children[i];
+        var values = child.actualValues;
+        var _this$getParticlePosi = this.getParticlePosition(child, values),
+          x = _this$getParticlePosi.x,
+          y = _this$getParticlePosi.y;
+        this.writeParticleData(particleData, i * 20, values, undefined, x, y);
+      }
+      return particleData;
+    }
+  }, {
+    key: "createParticleData",
+    value: function createParticleData(values, targetSteps) {
+      var particleData = new Float32Array(values.length * 20);
+      for (var i = 0; i < values.length; i++) {
+        var child = this.tmodel.childHandles[i];
+        var _this$getParticlePosi2 = this.getParticlePosition(child, values[i]),
+          x = _this$getParticlePosi2.x,
+          y = _this$getParticlePosi2.y;
+        this.writeParticleData(particleData, i * 20, values[i], targetSteps === null || targetSteps === void 0 ? void 0 : targetSteps[i], x, y);
+      }
+      return particleData;
+    }
+  }, {
+    key: "uploadParticleBuffer",
+    value: function uploadParticleBuffer(buffer, particleData) {
+      if (!particleData.length) {
+        var _buffer;
+        (_buffer = buffer) === null || _buffer === void 0 || _buffer.destroy();
+        return undefined;
+      }
+      if (!buffer || buffer.size !== particleData.byteLength) {
+        var _buffer2;
+        (_buffer2 = buffer) === null || _buffer2 === void 0 || _buffer2.destroy();
+        buffer = this.device.createBuffer({
+          size: particleData.byteLength,
+          usage: globalThis.GPUBufferUsage.VERTEX | globalThis.GPUBufferUsage.COPY_DST
+        });
+      }
+      this.device.queue.writeBuffer(buffer, 0, particleData);
+      return buffer;
+    }
+  }, {
+    key: "setParticles",
+    value: function () {
+      var _setParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(children) {
+        var initialized, particleData;
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              children = Array.isArray(children) ? children : [children];
+              _context3.next = 3;
+              return this.init();
+            case 3:
+              initialized = _context3.sent;
+              if (initialized) {
+                _context3.next = 6;
+                break;
+              }
+              return _context3.abrupt("return", false);
+            case 6:
+              particleData = this.createChildData(children);
+              this.particleCount = children.length;
+              this.particleBuffer = this.uploadParticleBuffer(this.particleBuffer, particleData);
+              this.targetParticleBuffer = this.uploadParticleBuffer(this.targetParticleBuffer, particleData);
+              this.transitionStep = 0;
+              this.transitionActive = false;
+              this.render();
+              return _context3.abrupt("return", true);
+            case 14:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function setParticles(_x) {
+        return _setParticles.apply(this, arguments);
+      }
+      return setParticles;
+    }()
+  }, {
+    key: "updateParticles",
+    value: function () {
+      var _updateParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(children) {
+        var initialized, particleData;
+        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              children = Array.isArray(children) ? children : [children];
+              _context4.next = 3;
+              return this.init();
+            case 3:
+              initialized = _context4.sent;
+              if (initialized) {
+                _context4.next = 6;
+                break;
+              }
+              return _context4.abrupt("return", false);
+            case 6:
+              particleData = this.createChildData(children);
+              this.particleCount = children.length;
+              this.particleBuffer = this.uploadParticleBuffer(this.particleBuffer, particleData);
+              if (!children.length || !this.transitionActive) {
+                this.targetParticleBuffer = this.uploadParticleBuffer(this.targetParticleBuffer, particleData);
+              }
+              if (!children.length) {
+                this.transitionStep = 0;
+                this.transitionActive = false;
+              }
+              this.render();
+              return _context4.abrupt("return", true);
+            case 13:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4, this);
+      }));
+      function updateParticles(_x2) {
+        return _updateParticles.apply(this, arguments);
+      }
+      return updateParticles;
+    }()
+  }, {
+    key: "setTargetParticles",
+    value: function () {
+      var _setTargetParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(values, steps) {
+        var generation,
+          initialized,
+          currentChildren,
+          currentParticleData,
+          particleData,
+          _args5 = arguments;
+        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              generation = _args5.length > 2 && _args5[2] !== undefined ? _args5[2] : this.tmodel.childGeneration;
+              values = Array.isArray(values) ? values : [values];
+              _context5.next = 4;
+              return this.init();
+            case 4:
+              initialized = _context5.sent;
+              if (!(!initialized || generation !== this.tmodel.childGeneration)) {
+                _context5.next = 7;
+                break;
+              }
+              return _context5.abrupt("return", false);
+            case 7:
+              currentChildren = this.tmodel.childHandles;
+              if (!(values.length !== currentChildren.length)) {
+                _context5.next = 10;
+                break;
+              }
+              return _context5.abrupt("return", false);
+            case 10:
+              if (this.particleCount !== currentChildren.length || !this.particleBuffer) {
+                currentParticleData = this.createChildData(currentChildren);
+                this.particleCount = currentChildren.length;
+                this.particleBuffer = this.uploadParticleBuffer(this.particleBuffer, currentParticleData);
+              }
+              particleData = this.createParticleData(values, steps);
+              this.targetParticleBuffer = this.uploadParticleBuffer(this.targetParticleBuffer, particleData);
+              this.transitionStep = 0;
+              this.transitionActive = true;
+              this.render();
+              return _context5.abrupt("return", true);
+            case 17:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5, this);
+      }));
+      function setTargetParticles(_x3, _x4) {
+        return _setTargetParticles.apply(this, arguments);
+      }
+      return setTargetParticles;
+    }()
+  }, {
+    key: "setTransitionStep",
+    value: function setTransitionStep(step) {
+      step = Math.max(0, this.toNumber(step, 0));
+      if (step === this.transitionStep) {
+        return;
+      }
+      this.transitionStep = step;
+      this.render();
+    }
+  }, {
+    key: "getRenderWidth",
+    value: function getRenderWidth() {
+      var modelWidth = Number(this.tmodel.getWidth()) || 1;
+      var parentWidth = Number(this.tmodel.getParent().getWidth()) || window.innerWidth || 1;
+      return Math.max(1, Math.min(modelWidth, parentWidth));
+    }
+  }, {
+    key: "getRenderHeight",
+    value: function getRenderHeight() {
+      var _this$tmodel$getParen2;
+      var modelHeight = Number(this.tmodel.getHeight()) || 1;
+      var parentHeight = Number((_this$tmodel$getParen2 = this.tmodel.getParent()) === null || _this$tmodel$getParen2 === void 0 ? void 0 : _this$tmodel$getParen2.getHeight()) || window.innerHeight || 1;
+      return Math.max(1, Math.min(modelHeight, parentHeight));
+    }
+  }, {
+    key: "updateCanvasLayerWidthHeight",
+    value: function updateCanvasLayerWidthHeight() {
+      if (!this.canvasLayer) {
+        return;
+      }
+      var height = Math.max(this.getRenderHeight(), Number(this.tmodel.getContentHeight()) || 0);
+      var width = Math.max(this.getRenderWidth(), Number(this.tmodel.getContentWidth()) || 0);
+      var cssHeight = "".concat(height, "px");
+      var cssWidth = "".concat(width, "px");
+      if (this.canvasLayer.style.height !== cssHeight) {
+        this.canvasLayer.style.height = cssHeight;
+      }
+      if (this.canvasLayer.style.width !== cssWidth) {
+        this.canvasLayer.style.width = cssWidth;
+      }
+    }
+  }, {
+    key: "resizeCanvas",
+    value: function resizeCanvas() {
+      var _this$device$limits;
+      if (!this.canvas || !this.device) {
+        return;
+      }
+      var width = this.getRenderWidth();
+      var height = this.getRenderHeight();
+      var requestedPixelRatio = window.devicePixelRatio || 1;
+      var maxTextureDimension = ((_this$device$limits = this.device.limits) === null || _this$device$limits === void 0 ? void 0 : _this$device$limits.maxTextureDimension2D) || 8192;
+      var pixelRatio = Math.min(requestedPixelRatio, maxTextureDimension / width, maxTextureDimension / height);
+      var pixelWidth = Math.max(1, Math.round(width * pixelRatio));
+      var pixelHeight = Math.max(1, Math.round(height * pixelRatio));
+      var cssWidth = "".concat(width, "px");
+      var cssHeight = "".concat(height, "px");
+      if (this.canvas.style.width !== cssWidth) {
+        this.canvas.style.width = cssWidth;
+      }
+      if (this.canvas.style.height !== cssHeight) {
+        this.canvas.style.height = cssHeight;
+      }
+      if (this.canvas.width !== pixelWidth) {
+        this.canvas.width = pixelWidth;
+      }
+      if (this.canvas.height !== pixelHeight) {
+        this.canvas.height = pixelHeight;
+      }
+      this.updateCanvasLayerWidthHeight();
+    }
+  }, {
+    key: "repositionCanvas",
+    value: function repositionCanvas() {
+      var _parent$$dom, _parent$$dom2;
+      if (!this.canvas || !this.canvasLayer || !this.tmodel.hasDom()) {
+        return false;
+      }
+      var tmodel = this.tmodel;
+      var parent = tmodel.getParent();
+      var domScrollLeft = (parent === null || parent === void 0 || (_parent$$dom = parent.$dom) === null || _parent$$dom === void 0 ? void 0 : _parent$$dom.getScrollLeft()) || tmodel.$dom.getScrollLeft() || 0;
+      var domScrollTop = (parent === null || parent === void 0 || (_parent$$dom2 = parent.$dom) === null || _parent$$dom2 === void 0 ? void 0 : _parent$$dom2.getScrollTop()) || tmodel.$dom.getScrollTop() || 0;
+      var scrollLeft = tmodel.getScrollLeft();
+      var scrollTop = tmodel.getScrollTop();
+      var x = domScrollLeft - tmodel.x;
+      var y = domScrollTop - tmodel.y;
+      this.canvasX = scrollLeft + x;
+      this.canvasY = scrollTop + y;
+      var transform = "translate3d(".concat(x, "px, ").concat(y, "px, 0px)");
+      if (this.canvas.style.transform !== transform) {
+        this.canvas.style.transform = transform;
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "getParticlePosition",
+    value: function getParticlePosition(child) {
+      var values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : child === null || child === void 0 ? void 0 : child.actualValues;
+      var layoutScrollLeft = Number(this.tmodel.getScrollLeft()) || 0;
+      var layoutScrollTop = Number(this.tmodel.getScrollTop()) || 0;
+      return {
+        x: child.allTargetMap.x ? values.x : child.x + layoutScrollLeft,
+        y: child.allTargetMap.y ? values.y : child.y + layoutScrollTop
+      };
+    }
+  }, {
+    key: "updateUniforms",
+    value: function updateUniforms() {
+      var width = this.getRenderWidth();
+      var height = this.getRenderHeight();
+      this.device.queue.writeBuffer(this.uniformBuffer, 0, new Float32Array([width, height, this.canvasX, this.canvasY, this.transitionStep, this.transitionActive ? 1 : 0, 0, 0]));
+    }
+  }, {
+    key: "waitForPresentedFrame",
+    value: function () {
+      var _waitForPresentedFrame = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+        return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
+            case 0:
+              if (!this.device) {
+                _context6.next = 3;
+                break;
+              }
+              _context6.next = 3;
+              return this.device.queue.onSubmittedWorkDone();
+            case 3:
+              _context6.next = 5;
+              return new Promise(function (resolve) {
+                requestAnimationFrame(function () {
+                  requestAnimationFrame(resolve);
+                });
+              });
+            case 5:
+            case "end":
+              return _context6.stop();
+          }
+        }, _callee6, this);
+      }));
+      function waitForPresentedFrame() {
+        return _waitForPresentedFrame.apply(this, arguments);
+      }
+      return waitForPresentedFrame;
+    }()
+  }, {
+    key: "render",
+    value: function render() {
+      if (!this.device || !this.context) {
+        return;
+      }
+      this.resizeCanvas();
+      this.repositionCanvas();
+      var canDraw = this.pipeline && this.bindGroup && this.particleBuffer && this.targetParticleBuffer && this.particleCount > 0;
+      if (canDraw) {
+        this.updateUniforms();
+      }
+      var commandEncoder = this.device.createCommandEncoder();
+      var renderPass = commandEncoder.beginRenderPass({
+        colorAttachments: [{
+          view: this.context.getCurrentTexture().createView(),
+          clearValue: {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 0
+          },
+          loadOp: "clear",
+          storeOp: "store"
+        }]
+      });
+      if (canDraw) {
+        renderPass.setPipeline(this.pipeline);
+        renderPass.setBindGroup(0, this.bindGroup);
+        renderPass.setVertexBuffer(0, this.particleBuffer);
+        renderPass.setVertexBuffer(1, this.targetParticleBuffer);
+        renderPass.draw(6, this.particleCount);
+      }
+      renderPass.end();
+      this.device.queue.submit([commandEncoder.finish()]);
+    }
+  }, {
+    key: "completeTransition",
+    value: function completeTransition() {
+      if (!this.targetParticleBuffer || !this.transitionActive) {
+        return;
+      }
+      var previousBuffer = this.particleBuffer;
+      this.particleBuffer = this.targetParticleBuffer;
+      this.targetParticleBuffer = previousBuffer;
+      this.transitionStep = 0;
+      this.transitionActive = false;
+      this.render();
+    }
+  }, {
+    key: "captureBitmap",
+    value: function captureBitmap() {
+      if (!this.canvas || !this.device) {
+        return;
+      }
+      this.render();
+      return createImageBitmap(this.canvas);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$particleBuffer, _this$targetParticleB, _this$uniformBuffer, _this$context, _this$canvasLayer, _this$scrollElements;
+      var _iterator2 = _createForOfIteratorHelper((_this$scrollElements = this.scrollElements) !== null && _this$scrollElements !== void 0 ? _this$scrollElements : []),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var element = _step2.value;
+          element.removeEventListener("scroll", this.onScroll);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      this.scrollElements = undefined;
+      this.onScroll = undefined;
+      (_this$particleBuffer = this.particleBuffer) === null || _this$particleBuffer === void 0 || _this$particleBuffer.destroy();
+      (_this$targetParticleB = this.targetParticleBuffer) === null || _this$targetParticleB === void 0 || _this$targetParticleB.destroy();
+      (_this$uniformBuffer = this.uniformBuffer) === null || _this$uniformBuffer === void 0 || _this$uniformBuffer.destroy();
+      (_this$context = this.context) === null || _this$context === void 0 || _this$context.unconfigure();
+      (_this$canvasLayer = this.canvasLayer) === null || _this$canvasLayer === void 0 || _this$canvasLayer.remove();
+      this.particleBuffer = undefined;
+      this.targetParticleBuffer = undefined;
+      this.uniformBuffer = undefined;
+      this.bindGroup = undefined;
+      this.pipeline = undefined;
+      this.context = undefined;
+      this.device = undefined;
+      this.canvasLayer = undefined;
+      this.canvas = undefined;
+      this.format = undefined;
+      this.transitionStep = 0;
+      this.transitionActive = false;
+      this.particleCount = 0;
+      this.initializationPromise = undefined;
+    }
+  }]);
+}();
+export { ParticleRenderer };