pigl-js 1.0.0

package/dist/pigl.mjs

@@ -0,0 +1,3212 @@
+class V {
+  constructor(e = 0, t = 0, i = 0) {
+    this.data = new Float32Array([e, t, i]);
+  }
+  get x() {
+    return this.data[0];
+  }
+  set x(e) {
+    this.data[0] = e;
+  }
+  get y() {
+    return this.data[1];
+  }
+  set y(e) {
+    this.data[1] = e;
+  }
+  get z() {
+    return this.data[2];
+  }
+  set z(e) {
+    this.data[2] = e;
+  }
+  set(e, t, i) {
+    return this.data[0] = e, this.data[1] = t, this.data[2] = i, this;
+  }
+  copy(e) {
+    return this.data[0] = e.x, this.data[1] = e.y, this.data[2] = e.z, this;
+  }
+  toArray() {
+    return [this.data[0], this.data[1], this.data[2]];
+  }
+}
+const R = {
+  identity(s) {
+    return s.fill(0), s[0] = 1, s[5] = 1, s[10] = 1, s[15] = 1, s;
+  },
+  multiply(s, e, t) {
+    let i = e[0], r = e[1], n = e[2], o = e[3], a = e[4], l = e[5], c = e[6], h = e[7], d = e[8], u = e[9], f = e[10], x = e[11], v = e[12], C = e[13], m = e[14], p = e[15], g = t[0], w = t[1], b = t[2], E = t[3];
+    return s[0] = g * i + w * a + b * d + E * v, s[1] = g * r + w * l + b * u + E * C, s[2] = g * n + w * c + b * f + E * m, s[3] = g * o + w * h + b * x + E * p, g = t[4], w = t[5], b = t[6], E = t[7], s[4] = g * i + w * a + b * d + E * v, s[5] = g * r + w * l + b * u + E * C, s[6] = g * n + w * c + b * f + E * m, s[7] = g * o + w * h + b * x + E * p, g = t[8], w = t[9], b = t[10], E = t[11], s[8] = g * i + w * a + b * d + E * v, s[9] = g * r + w * l + b * u + E * C, s[10] = g * n + w * c + b * f + E * m, s[11] = g * o + w * h + b * x + E * p, g = t[12], w = t[13], b = t[14], E = t[15], s[12] = g * i + w * a + b * d + E * v, s[13] = g * r + w * l + b * u + E * C, s[14] = g * n + w * c + b * f + E * m, s[15] = g * o + w * h + b * x + E * p, s;
+  },
+  translate(s, e, t) {
+    let i = t.x !== void 0 ? t.x : t[0], r = t.y !== void 0 ? t.y : t[1], n = t.z !== void 0 ? t.z : t[2];
+    if (e === s)
+      s[12] = e[0] * i + e[4] * r + e[8] * n + e[12], s[13] = e[1] * i + e[5] * r + e[9] * n + e[13], s[14] = e[2] * i + e[6] * r + e[10] * n + e[14], s[15] = e[3] * i + e[7] * r + e[11] * n + e[15];
+    else {
+      let o = e[0], a = e[1], l = e[2], c = e[3], h = e[4], d = e[5], u = e[6], f = e[7], x = e[8], v = e[9], C = e[10], m = e[11];
+      s[0] = o, s[1] = a, s[2] = l, s[3] = c, s[4] = h, s[5] = d, s[6] = u, s[7] = f, s[8] = x, s[9] = v, s[10] = C, s[11] = m, s[12] = o * i + h * r + x * n + e[12], s[13] = a * i + d * r + v * n + e[13], s[14] = l * i + u * r + C * n + e[14], s[15] = c * i + f * r + m * n + e[15];
+    }
+    return s;
+  },
+  scale(s, e, t) {
+    let i = t.x !== void 0 ? t.x : t[0], r = t.y !== void 0 ? t.y : t[1], n = t.z !== void 0 ? t.z : t[2];
+    return s[0] = e[0] * i, s[1] = e[1] * i, s[2] = e[2] * i, s[3] = e[3] * i, s[4] = e[4] * r, s[5] = e[5] * r, s[6] = e[6] * r, s[7] = e[7] * r, s[8] = e[8] * n, s[9] = e[9] * n, s[10] = e[10] * n, s[11] = e[11] * n, s[12] = e[12], s[13] = e[13], s[14] = e[14], s[15] = e[15], s;
+  },
+  rotateX(s, e, t) {
+    let i = Math.sin(t), r = Math.cos(t), n = e[4], o = e[5], a = e[6], l = e[7], c = e[8], h = e[9], d = e[10], u = e[11];
+    return e !== s && (s[0] = e[0], s[1] = e[1], s[2] = e[2], s[3] = e[3], s[12] = e[12], s[13] = e[13], s[14] = e[14], s[15] = e[15]), s[4] = n * r + c * i, s[5] = o * r + h * i, s[6] = a * r + d * i, s[7] = l * r + u * i, s[8] = c * r - n * i, s[9] = h * r - o * i, s[10] = d * r - a * i, s[11] = u * r - l * i, s;
+  },
+  rotateY(s, e, t) {
+    let i = Math.sin(t), r = Math.cos(t), n = e[0], o = e[1], a = e[2], l = e[3], c = e[8], h = e[9], d = e[10], u = e[11];
+    return e !== s && (s[4] = e[4], s[5] = e[5], s[6] = e[6], s[7] = e[7], s[12] = e[12], s[13] = e[13], s[14] = e[14], s[15] = e[15]), s[0] = n * r - c * i, s[1] = o * r - h * i, s[2] = a * r - d * i, s[3] = l * r - u * i, s[8] = n * i + c * r, s[9] = o * i + h * r, s[10] = a * i + d * r, s[11] = l * i + u * r, s;
+  },
+  rotateZ(s, e, t) {
+    let i = Math.sin(t), r = Math.cos(t), n = e[0], o = e[1], a = e[2], l = e[3], c = e[4], h = e[5], d = e[6], u = e[7];
+    return e !== s && (s[8] = e[8], s[9] = e[9], s[10] = e[10], s[11] = e[11], s[12] = e[12], s[13] = e[13], s[14] = e[14], s[15] = e[15]), s[0] = n * r + c * i, s[1] = o * r + h * i, s[2] = a * r + d * i, s[3] = l * r + u * i, s[4] = c * r - n * i, s[5] = h * r - o * i, s[6] = d * r - a * i, s[7] = u * r - l * i, s;
+  },
+  invert(s, e) {
+    let t = e[0], i = e[1], r = e[2], n = e[3], o = e[4], a = e[5], l = e[6], c = e[7], h = e[8], d = e[9], u = e[10], f = e[11], x = e[12], v = e[13], C = e[14], m = e[15], p = t * a - i * o, g = t * l - r * o, w = t * c - n * o, b = i * l - r * a, E = i * c - n * a, _ = r * c - n * l, F = h * v - d * x, D = h * C - u * x, A = h * m - f * x, S = d * C - u * v, M = d * m - f * v, P = u * m - f * C, T = p * P - g * M + w * S + b * A - E * D + _ * F;
+    return T ? (T = 1 / T, s[0] = (a * P - l * M + c * S) * T, s[1] = (r * M - i * P - n * S) * T, s[2] = (v * _ - C * E + m * b) * T, s[3] = (u * E - d * _ - f * b) * T, s[4] = (l * A - o * P - c * D) * T, s[5] = (t * P - r * A + n * D) * T, s[6] = (C * w - x * _ - m * g) * T, s[7] = (h * _ - u * w + f * g) * T, s[8] = (o * M - a * A + c * F) * T, s[9] = (i * A - t * M - n * F) * T, s[10] = (x * E - v * w + m * p) * T, s[11] = (d * w - h * E - f * p) * T, s[12] = (a * D - o * S - l * F) * T, s[13] = (t * S - i * D + r * F) * T, s[14] = (v * g - x * b - C * p) * T, s[15] = (h * b - d * g + u * p) * T, s) : null;
+  }
+};
+class H {
+  constructor() {
+    this.position = new V(0, 0, 0), this.rotation = new V(0, 0, 0), this.scale = new V(1, 1, 1), this.localMatrix = new Float32Array(16), this.worldMatrix = new Float32Array(16), R.identity(this.localMatrix), R.identity(this.worldMatrix), this.parent = null, this.children = [];
+  }
+  add(e) {
+    e.parent && e.parent.remove(e), e.parent = this, this.children.push(e);
+  }
+  remove(e) {
+    const t = this.children.indexOf(e);
+    t !== -1 && (e.parent = null, this.children.splice(t, 1));
+  }
+  updateLocalMatrix() {
+    R.identity(this.localMatrix), R.translate(this.localMatrix, this.localMatrix, this.position), R.rotateY(this.localMatrix, this.localMatrix, this.rotation.y), R.rotateX(this.localMatrix, this.localMatrix, this.rotation.x), R.rotateZ(this.localMatrix, this.localMatrix, this.rotation.z), R.scale(this.localMatrix, this.localMatrix, this.scale);
+  }
+  updateWorldMatrix() {
+    if (this.updateLocalMatrix(), this.parent)
+      R.multiply(this.worldMatrix, this.parent.worldMatrix, this.localMatrix);
+    else
+      for (let e = 0; e < 16; e++)
+        this.worldMatrix[e] = this.localMatrix[e];
+    for (let e = 0; e < this.children.length; e++)
+      this.children[e].updateWorldMatrix();
+  }
+}
+class X {
+  constructor(e, t, i = null, r = "GameObject") {
+    this.name = r, this.transform = new H(), this.renderer = e, this.material = t, this.mesh = i;
+  }
+  render(e, t = void 0, i = null) {
+    this.transform.updateWorldMatrix();
+    const r = i || this.material;
+    this.renderer && r && this.renderer.draw(this, e, t, r);
+  }
+}
+class W {
+  constructor() {
+    this.time = 0, this.deltaTime = 0, this.unscaledTime = 0, this.unscaledDeltaTime = 0, this.timeScale = 1, this._lastTime = 0, this._initialized = !1;
+  }
+  update(e) {
+    const t = e * 1e-3;
+    this._initialized || (this._lastTime = t, this._initialized = !0), this.unscaledDeltaTime = t - this._lastTime, this.unscaledTime += this.unscaledDeltaTime, this.deltaTime = this.unscaledDeltaTime * this.timeScale, this.time += this.deltaTime, this._lastTime = t;
+  }
+}
+const Pe = new W();
+class Re {
+  constructor(e, t) {
+    this.camera = e, this.domElement = t, this.moveSpeed = 10, this.mouseSensitivity = 2e-3, this.keys = {
+      w: !1,
+      a: !1,
+      s: !1,
+      d: !1,
+      q: !1,
+      e: !1
+    }, this.mouse = {
+      x: 0,
+      y: 0,
+      lastX: 0,
+      lastY: 0,
+      isDown: !1
+    }, this.rotation = {
+      x: e.transform.rotation.x,
+      y: e.transform.rotation.y
+    }, this._initEvents();
+  }
+  _initEvents() {
+    window.addEventListener("keydown", (e) => this._onKey(e, !0)), window.addEventListener("keyup", (e) => this._onKey(e, !1)), this.domElement.addEventListener("mousedown", (e) => {
+      e.button === 2 && (this.mouse.isDown = !0, this.mouse.lastX = e.clientX, this.mouse.lastY = e.clientY);
+    }), window.addEventListener("mouseup", (e) => {
+      e.button === 2 && (this.mouse.isDown = !1);
+    }), window.addEventListener("mousemove", (e) => {
+      if (!this.mouse.isDown) return;
+      const t = e.clientX - this.mouse.lastX, i = e.clientY - this.mouse.lastY;
+      this.mouse.lastX = e.clientX, this.mouse.lastY = e.clientY, this.rotation.y -= t * this.mouseSensitivity, this.rotation.x -= i * this.mouseSensitivity;
+      const r = Math.PI / 2 - 0.01;
+      this.rotation.x = Math.max(-r, Math.min(r, this.rotation.x)), this.camera.transform.rotation.x = this.rotation.x, this.camera.transform.rotation.y = this.rotation.y;
+    }), this.domElement.addEventListener("contextmenu", (e) => e.preventDefault());
+  }
+  _onKey(e, t) {
+    const i = e.key.toLowerCase();
+    this.keys.hasOwnProperty(i) && (this.keys[i] = t);
+  }
+  update(e) {
+    const t = this.moveSpeed * e, i = this.camera.transform, r = Math.sin(i.rotation.y), n = Math.cos(i.rotation.y), o = -r, a = -n, l = n, c = -r;
+    let h = 0, d = 0, u = 0;
+    if (this.keys.w && (d += 1), this.keys.s && (d -= 1), this.keys.a && (h -= 1), this.keys.d && (h += 1), this.keys.q && (u += 1), this.keys.e && (u -= 1), h !== 0 || d !== 0) {
+      const f = Math.sqrt(h * h + d * d);
+      h /= f, d /= f;
+    }
+    i.position.x += (o * d + l * h) * t, i.position.z += (a * d + c * h) * t, i.position.y += u * t;
+  }
+}
+class N {
+  constructor(e, t, i, r, n = null) {
+    this.gl = e, this.vertices = t, this.uvs = i, this.normals = r, this.indices = n, this.count = n ? n.length : t.length / 3, this.vertexBuffer = e.createBuffer(), e.bindBuffer(e.ARRAY_BUFFER, this.vertexBuffer), e.bufferData(e.ARRAY_BUFFER, this.vertices, e.STATIC_DRAW), this.uvs && this.uvs.length > 0 && (this.uvBuffer = e.createBuffer(), e.bindBuffer(e.ARRAY_BUFFER, this.uvBuffer), e.bufferData(e.ARRAY_BUFFER, this.uvs, e.STATIC_DRAW)), this.normals && this.normals.length > 0 && (this.normalBuffer = e.createBuffer(), e.bindBuffer(e.ARRAY_BUFFER, this.normalBuffer), e.bufferData(e.ARRAY_BUFFER, this.normals, e.STATIC_DRAW)), this.indices && this.indices.length > 0 && (this.indexBuffer = e.createBuffer(), e.bindBuffer(e.ELEMENT_ARRAY_BUFFER, this.indexBuffer), e.bufferData(e.ELEMENT_ARRAY_BUFFER, this.indices, e.STATIC_DRAW));
+  }
+  bind(e) {
+    const t = this.gl;
+    t.bindBuffer(t.ARRAY_BUFFER, this.vertexBuffer);
+    const i = e.getAttribLocation("aVertexPosition");
+    if (i !== -1 && (t.enableVertexAttribArray(i), t.vertexAttribPointer(i, 3, t.FLOAT, !1, 0, 0)), this.uvBuffer) {
+      t.bindBuffer(t.ARRAY_BUFFER, this.uvBuffer);
+      const r = e.getAttribLocation("aTexCoord");
+      r !== -1 && (t.enableVertexAttribArray(r), t.vertexAttribPointer(r, 2, t.FLOAT, !1, 0, 0));
+    }
+    if (this.normalBuffer) {
+      t.bindBuffer(t.ARRAY_BUFFER, this.normalBuffer);
+      const r = e.getAttribLocation("aNormal");
+      r !== -1 && (t.enableVertexAttribArray(r), t.vertexAttribPointer(r, 3, t.FLOAT, !1, 0, 0));
+    }
+    this.indexBuffer && t.bindBuffer(t.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+  }
+  draw() {
+    const e = this.gl;
+    this.indices && this.indices.length > 0 ? e.drawElements(e.TRIANGLES, this.count, e.UNSIGNED_SHORT, 0) : e.drawArrays(e.TRIANGLES, 0, this.count);
+  }
+}
+class Le {
+  static async load(e, t) {
+    const r = await (await fetch(t)).text(), n = this.parse(e, r);
+    return new N(e, n.positions, n.uvs, n.normals);
+  }
+  static parse(e, t) {
+    const i = [], r = [], n = [], o = [], a = [], l = [], c = t.split(`
+`);
+    for (let h of c) {
+      if (h = h.trim(), h.startsWith("#") || h === "") continue;
+      const d = h.split(/\s+/), u = d[0];
+      if (u === "v")
+        i.push([
+          parseFloat(d[1]),
+          parseFloat(d[2]),
+          parseFloat(d[3])
+        ]);
+      else if (u === "vt")
+        r.push([
+          parseFloat(d[1]),
+          parseFloat(d[2])
+        ]);
+      else if (u === "vn")
+        n.push([
+          parseFloat(d[1]),
+          parseFloat(d[2]),
+          parseFloat(d[3])
+        ]);
+      else if (u === "f") {
+        const f = d.slice(1);
+        for (let x = 1; x < f.length - 1; x++) {
+          const v = f[0], C = f[x], m = f[x + 1];
+          this.processVertex(v, i, r, n, o, a, l), this.processVertex(C, i, r, n, o, a, l), this.processVertex(m, i, r, n, o, a, l);
+        }
+      }
+    }
+    return {
+      positions: new Float32Array(o),
+      uvs: new Float32Array(a),
+      normals: new Float32Array(l),
+      vertexCount: o.length / 3
+    };
+  }
+  static processVertex(e, t, i, r, n, o, a) {
+    const l = e.split("/"), c = parseInt(l[0]) - 1, h = l[1] ? parseInt(l[1]) - 1 : -1, d = l[2] ? parseInt(l[2]) - 1 : -1, u = t[c];
+    if (n.push(u[0], u[1], u[2]), h >= 0) {
+      const f = i[h];
+      o.push(f[0], f[1]);
+    } else
+      o.push(0, 0);
+    if (d >= 0) {
+      const f = r[d];
+      a.push(f[0], f[1], f[2]);
+    } else
+      a.push(0, 1, 0);
+  }
+}
+class Y {
+  constructor() {
+    this.enabled = !1, this.metrics = {
+      startTime: 0,
+      endTime: 0,
+      frameTime: 0,
+      cpuTime: 0,
+      passes: []
+    }, this.lastFrameStart = 0, this.fps = 0, this.history = [], this.maxHistory = 60, this.currentPass = null;
+  }
+  enable() {
+    this.enabled = !0;
+  }
+  disable() {
+    this.enabled = !1, this.metrics.passes = [];
+  }
+  beginFrame() {
+    if (!this.enabled) return;
+    const e = performance.now();
+    if (this.lastFrameStart > 0) {
+      const t = e - this.lastFrameStart;
+      this.fps = 1e3 / t;
+    }
+    this.lastFrameStart = e, this.metrics.startTime = e, this.metrics.passes = [];
+  }
+  endFrame() {
+    this.enabled && (this.metrics.endTime = performance.now(), this.metrics.cpuTime = this.metrics.endTime - this.metrics.startTime, this.addToHistory(this.metrics.cpuTime));
+  }
+  beginPass(e) {
+    if (!this.enabled) return;
+    const t = {
+      id: this.metrics.passes.length,
+      name: e,
+      startTime: performance.now(),
+      endTime: 0,
+      duration: 0,
+      drawCalls: []
+    };
+    this.metrics.passes.push(t), this.currentPass = t;
+  }
+  endPass() {
+    !this.enabled || !this.currentPass || (this.currentPass.endTime = performance.now(), this.currentPass.duration = this.currentPass.endTime - this.currentPass.startTime, this.currentPass = null);
+  }
+  recordDrawCall(e, t, i, r, n) {
+    !this.enabled || !this.currentPass || this.currentPass.drawCalls.push({
+      object: e,
+      material: t,
+      shader: i,
+      duration: n - r
+    });
+  }
+  addToHistory(e) {
+    this.history.push(e), this.history.length > this.maxHistory && this.history.shift();
+  }
+}
+class Ue {
+  static attach(e, t) {
+    const i = new Y(), r = e.execute.bind(e);
+    e.execute = function(o, a, l) {
+      i.enabled && i.beginFrame();
+      const c = e.passes || [];
+      for (let h = 0; h < c.length; h++) {
+        const d = c[h];
+        if (!d.__profilerInstrumented) {
+          const u = d.execute.bind(d), f = d.constructor.name;
+          d.execute = function(x, v, C) {
+            i.enabled && i.beginPass(f), u(x, v, C), i.enabled && i.endPass();
+          }, d.__profilerInstrumented = !0;
+        }
+      }
+      r(o, a, l), i.enabled && i.endFrame();
+    };
+    const n = t.draw.bind(t);
+    return t.draw = function(o, a, l, c) {
+      const h = performance.now();
+      n(o, a, l, c);
+      const d = performance.now();
+      if (i.enabled) {
+        const u = o ? o.name : "Unknown", f = c ? c.name : "Unknown";
+        i.recordDrawCall(u, f, 0, h, d);
+      }
+    }, i.disable(), i;
+  }
+}
+class G extends X {
+  constructor() {
+    super(null), this.projectionMatrix = new Float32Array(16), this.viewMatrix = new Float32Array(16), this.fov = 45 * Math.PI / 180, this.aspect = 1, this.near = 0.1, this.far = 100, this.orthographic = !1, this.orthoSize = 30, R.identity(this.projectionMatrix), R.identity(this.viewMatrix), this.transform.position.set(0, 0, 5), this.name = "Camera";
+  }
+  setPerspective(e, t, i, r) {
+    this.fov = e, this.aspect = t, this.near = i, this.far = r, this.orthographic = !1;
+    const n = 1 / Math.tan(e / 2), o = this.projectionMatrix;
+    o.fill(0), o[0] = n / t, o[5] = n, o[10] = (r + i) / (i - r), o[11] = -1, o[14] = 2 * r * i / (i - r);
+  }
+  setOrthographic(e, t, i, r, n, o) {
+    this.near = n, this.far = o, this.orthographic = !0, this.orthoSize = (r - i) / 2;
+    const a = this.projectionMatrix, l = 1 / (e - t), c = 1 / (i - r), h = 1 / (n - o);
+    a.fill(0), a[0] = -2 * l, a[5] = -2 * c, a[10] = 2 * h, a[12] = (e + t) * l, a[13] = (r + i) * c, a[14] = (o + n) * h, a[15] = 1;
+  }
+  updateProjection() {
+    if (this.orthographic) {
+      const e = this.orthoSize;
+      this.setOrthographic(-e * this.aspect, e * this.aspect, -e, e, this.near, this.far);
+    } else
+      this.setPerspective(this.fov, this.aspect, this.near, this.far);
+  }
+  updateView() {
+    this.transform.updateWorldMatrix(), R.invert(this.viewMatrix, this.transform.worldMatrix);
+  }
+  getScreenPosition(e) {
+    const t = this.viewMatrix, i = this.projectionMatrix;
+    e.transform.updateWorldMatrix();
+    const r = e.transform.worldMatrix, n = r[12], o = r[13], a = r[14], l = 1, c = t[0] * n + t[4] * o + t[8] * a + t[12] * l, h = t[1] * n + t[5] * o + t[9] * a + t[13] * l, d = t[2] * n + t[6] * o + t[10] * a + t[14] * l, u = t[3] * n + t[7] * o + t[11] * a + t[15] * l, f = i[0] * c + i[4] * h + i[8] * d + i[12] * u, x = i[1] * c + i[5] * h + i[9] * d + i[13] * u;
+    i[2] * c + i[6] * h + i[10] * d + i[14] * u;
+    const v = i[3] * c + i[7] * h + i[11] * d + i[15] * u;
+    if (v === 0) return [0.5, 0.5];
+    const C = f / v, m = x / v;
+    return [(C + 1) * 0.5, (m + 1) * 0.5];
+  }
+}
+class j {
+  constructor(e) {
+    this.gl = e;
+    const t = new Float32Array([
+      -1,
+      1,
+      0,
+      1,
+      // Top-Left
+      -1,
+      -1,
+      0,
+      0,
+      // Bottom-Left
+      1,
+      1,
+      1,
+      1,
+      // Top-Right
+      1,
+      -1,
+      1,
+      0
+      // Bottom-Right
+    ]);
+    this.buffer = e.createBuffer(), e.bindBuffer(e.ARRAY_BUFFER, this.buffer), e.bufferData(e.ARRAY_BUFFER, t, e.STATIC_DRAW);
+  }
+  /**
+   * Executes a shader pass.
+   * @param {Shader|Material} shaderOrMaterial - The shader to use or a Material object.
+   * @param {Object} uniforms - Key-value pairs of uniforms (if passing raw Shader). Ignored if Material is used.
+   * @param {RenderTarget|null} target - The output target. If null, renders to screen.
+   */
+  draw(e, t = {}, i = null) {
+    const r = this.gl;
+    let n, o = t;
+    if (e.uniforms && e.shader) {
+      n = e.shader, o = {};
+      for (const h in e.uniforms)
+        o[h] = e.uniforms[h].value;
+      t && (t.bind || t === null) && (i = t);
+    } else
+      n = e;
+    i ? i.bind() : (r.bindFramebuffer(r.FRAMEBUFFER, null), r.viewport(0, 0, r.canvas.width, r.canvas.height)), n.use(), r.bindBuffer(r.ARRAY_BUFFER, this.buffer);
+    const a = n.getAttribLocation("aVertexPosition");
+    a !== -1 && (r.enableVertexAttribArray(a), r.vertexAttribPointer(a, 2, r.FLOAT, !1, 16, 0));
+    const l = n.getAttribLocation("aTexCoord");
+    l !== -1 && (r.enableVertexAttribArray(l), r.vertexAttribPointer(l, 2, r.FLOAT, !1, 16, 8));
+    let c = 0;
+    for (const h in o) {
+      const d = o[h];
+      d instanceof WebGLTexture ? (r.activeTexture(r.TEXTURE0 + c), r.bindTexture(r.TEXTURE_2D, d), n.setUniform(h, c, "1i"), c++) : n.setUniform(h, d);
+    }
+    r.drawArrays(r.TRIANGLE_STRIP, 0, 4);
+    for (let h = 0; h < c; h++)
+      r.activeTexture(r.TEXTURE0 + h), r.bindTexture(r.TEXTURE_2D, null);
+  }
+}
+class $e {
+  constructor(e, t = "Material") {
+    this.shader = e, this.uniforms = {}, this.name = t;
+  }
+  setUniforms(e) {
+    for (const t in e) {
+      let i = e[t];
+      Array.isArray(i) || i instanceof Float32Array ? i.length === 2 ? this.setVec2(t, i[0], i[1]) : i.length === 3 ? this.setVec3(t, i[0], i[1], i[2]) : i.length === 4 ? this.setVec4(t, i[0], i[1], i[2], i[3]) : i.length === 16 && this.setMat4(t, i) : typeof i == "number" ? this.setFloat(t, i) : i instanceof WebGLTexture && (this.uniforms[t] = { value: i, type: "Texture" });
+    }
+    return this;
+  }
+  setFloat(e, t) {
+    this.uniforms[e] && this.uniforms[e].type === "1f" ? this.uniforms[e].value = t : this.uniforms[e] = { type: "1f", value: t };
+  }
+  setVec2(e, t, i) {
+    if (this.uniforms[e] && this.uniforms[e].type === "2fv") {
+      const r = this.uniforms[e].value;
+      r[0] = t, r[1] = i;
+    } else
+      this.uniforms[e] = { type: "2fv", value: new Float32Array([t, i]) };
+  }
+  setVec3(e, t, i, r) {
+    if (this.uniforms[e] && this.uniforms[e].type === "3fv") {
+      const n = this.uniforms[e].value;
+      n[0] = t, n[1] = i, n[2] = r;
+    } else
+      this.uniforms[e] = { type: "3fv", value: new Float32Array([t, i, r]) };
+  }
+  setVec4(e, t, i, r, n) {
+    if (this.uniforms[e] && this.uniforms[e].type === "4fv") {
+      const o = this.uniforms[e].value;
+      o[0] = t, o[1] = i, o[2] = r, o[3] = n;
+    } else
+      this.uniforms[e] = { type: "4fv", value: new Float32Array([t, i, r, n]) };
+  }
+  setMat4(e, t) {
+    this.uniforms[e] = { type: "Matrix4fv", value: t };
+  }
+  // Helper for direct array setting if user prefers
+  setUniform(e, t, i) {
+    this.uniforms[e] = { type: i, value: t };
+  }
+}
+class ke {
+  constructor(e) {
+    this.gl = e, this.drawCalls = 0, this.currentPassDrawCalls = [], this.drawCallDetails = [];
+    const t = new Float32Array([
+      -0.5,
+      0.5,
+      0,
+      -0.5,
+      -0.5,
+      0,
+      0.5,
+      0.5,
+      0,
+      0.5,
+      0.5,
+      0,
+      -0.5,
+      -0.5,
+      0,
+      0.5,
+      -0.5,
+      0
+    ]), i = new Float32Array([
+      0,
+      1,
+      0,
+      0,
+      1,
+      1,
+      1,
+      1,
+      0,
+      0,
+      1,
+      0
+    ]), r = new Float32Array([
+      0,
+      0,
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+      1
+    ]);
+    this.defaultMesh = new N(e, t, i, r);
+  }
+  draw(e, t, i = void 0, r = null) {
+    const n = r || e.material;
+    if (!n || !n.shader) return;
+    const o = this.gl, a = e.mesh || this.defaultMesh;
+    i !== void 0 && (i ? i.bind() : (o.bindFramebuffer(o.FRAMEBUFFER, null), o.viewport(0, 0, o.canvas.width, o.canvas.height)));
+    const l = n.shader;
+    l.use(), a.bind(l), l.setUniform("uProjectionMatrix", t.projectionMatrix), l.setUniform("uViewMatrix", t.viewMatrix), l.setUniform("uModelMatrix", e.transform.worldMatrix);
+    let c = 0;
+    for (const h in n.uniforms) {
+      const d = n.uniforms[h];
+      let u = d.value, f = d.type;
+      (u instanceof WebGLTexture || f === "1i" && u && typeof u == "object") && (o.activeTexture(o.TEXTURE0 + c), o.bindTexture(o.TEXTURE_2D, u), (o.isTexture(u) || u instanceof WebGLTexture) && (u = c, f = "1i", c++)), l.setUniform(h, u, f);
+    }
+    a.draw(), this.drawCalls++, this.drawCallDetails.push({
+      object: e ? e.name : "Unknown",
+      material: n ? n.name : "Unknown",
+      shader: l ? l.name || "Shader" : "Unknown",
+      target: i ? "RenderTarget" : "Screen"
+    });
+  }
+  resetDrawCalls() {
+    const e = this.drawCalls, t = [...this.drawCallDetails];
+    return this.drawCalls = 0, this.drawCallDetails = [], { count: e, details: t };
+  }
+}
+class Ve {
+  constructor(e, t, i, r = {}) {
+    this.gl = e, this.width = t, this.height = i, this.framebuffer = e.createFramebuffer(), e.bindFramebuffer(e.FRAMEBUFFER, this.framebuffer), this.texture = e.createTexture(), e.bindTexture(e.TEXTURE_2D, this.texture), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, t, i, 0, e.RGBA, e.UNSIGNED_BYTE, null);
+    const n = r.minFilter !== void 0 ? r.minFilter : e.LINEAR, o = r.magFilter !== void 0 ? r.magFilter : e.LINEAR, a = r.wrapS !== void 0 ? r.wrapS : e.CLAMP_TO_EDGE, l = r.wrapT !== void 0 ? r.wrapT : e.CLAMP_TO_EDGE;
+    e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, n), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, o), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, a), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, l), e.framebufferTexture2D(e.FRAMEBUFFER, e.COLOR_ATTACHMENT0, e.TEXTURE_2D, this.texture, 0), this.depthBuffer = e.createRenderbuffer(), e.bindRenderbuffer(e.RENDERBUFFER, this.depthBuffer), e.renderbufferStorage(e.RENDERBUFFER, e.DEPTH_COMPONENT16, t, i), e.framebufferRenderbuffer(e.FRAMEBUFFER, e.DEPTH_ATTACHMENT, e.RENDERBUFFER, this.depthBuffer);
+    const c = e.checkFramebufferStatus(e.FRAMEBUFFER);
+    c !== e.FRAMEBUFFER_COMPLETE && console.error("Framebuffer is not complete: " + c), e.bindTexture(e.TEXTURE_2D, null), e.bindRenderbuffer(e.RENDERBUFFER, null), e.bindFramebuffer(e.FRAMEBUFFER, null);
+  }
+  bind() {
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer), this.gl.viewport(0, 0, this.width, this.height);
+  }
+  unbind() {
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
+  }
+  resize(e, t) {
+    if (this.width === e && this.height === t) return;
+    this.width = e, this.height = t;
+    const i = this.gl;
+    i.bindTexture(i.TEXTURE_2D, this.texture), i.texImage2D(i.TEXTURE_2D, 0, i.RGBA, e, t, 0, i.RGBA, i.UNSIGNED_BYTE, null), i.bindRenderbuffer(i.RENDERBUFFER, this.depthBuffer), i.renderbufferStorage(i.RENDERBUFFER, i.DEPTH_COMPONENT16, e, t), i.bindTexture(i.TEXTURE_2D, null), i.bindRenderbuffer(i.RENDERBUFFER, null);
+  }
+}
+class Oe {
+  constructor(e, t, i) {
+    this.gl = e;
+    const r = this.loadShader(e.VERTEX_SHADER, t), n = this.loadShader(e.FRAGMENT_SHADER, i);
+    this.program = e.createProgram(), e.attachShader(this.program, r), e.attachShader(this.program, n), e.linkProgram(this.program), e.getProgramParameter(this.program, e.LINK_STATUS) || console.error("Shader init error:", e.getProgramInfoLog(this.program)), this.uniforms = {}, this.attributes = {};
+  }
+  getUniformLocation(e) {
+    return this.uniforms[e] === void 0 && (this.uniforms[e] = this.gl.getUniformLocation(this.program, e)), this.uniforms[e];
+  }
+  setUniform(e, t, i) {
+    const r = this.gl, n = this.getUniformLocation(e);
+    if (n) {
+      if (i) {
+        i === "1i" ? r.uniform1i(n, t) : i === "1f" ? r.uniform1f(n, t) : i === "2fv" ? r.uniform2fv(n, t) : i === "3fv" ? r.uniform3fv(n, t) : i === "4fv" ? r.uniform4fv(n, t) : i === "Matrix4fv" && r.uniformMatrix4fv(n, !1, t);
+        return;
+      }
+      if (typeof t == "number")
+        r.uniform1f(n, t);
+      else if (Array.isArray(t) || t instanceof Float32Array)
+        switch (t.length) {
+          case 2:
+            r.uniform2fv(n, t);
+            break;
+          case 3:
+            r.uniform3fv(n, t);
+            break;
+          case 4:
+            r.uniform4fv(n, t);
+            break;
+          case 16:
+            r.uniformMatrix4fv(n, !1, t);
+            break;
+          default:
+            console.warn(`Unsupported uniform array length: ${t.length} for ${e}`);
+        }
+    }
+  }
+  getAttribLocation(e) {
+    return this.attributes[e] === void 0 && (this.attributes[e] = this.gl.getAttribLocation(this.program, e)), this.attributes[e];
+  }
+  use() {
+    this.gl.useProgram(this.program);
+  }
+  loadShader(e, t) {
+    const i = this.gl.createShader(e);
+    return this.gl.shaderSource(i, t), this.gl.compileShader(i), this.gl.getShaderParameter(i, this.gl.COMPILE_STATUS) ? i : (console.error("Shader compile error:", this.gl.getShaderInfoLog(i)), this.gl.deleteShader(i), null);
+  }
+}
+class Be {
+  constructor(e, t) {
+    this.gl = e, this.texture = e.createTexture(), this.image = new Image(), this.loaded = !1, e.bindTexture(e.TEXTURE_2D, this.texture), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, 1, 1, 0, e.RGBA, e.UNSIGNED_BYTE, new Uint8Array([255, 0, 255, 255])), this.image.onload = () => {
+      e.bindTexture(e.TEXTURE_2D, this.texture), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, e.RGBA, e.UNSIGNED_BYTE, this.image), this.isPowerOf2(this.image.width) && this.isPowerOf2(this.image.height) ? e.generateMipmap(e.TEXTURE_2D) : (e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR)), this.loaded = !0;
+    }, this.image.src = t;
+  }
+  isPowerOf2(e) {
+    return (e & e - 1) === 0;
+  }
+}
+class ze {
+  constructor() {
+    this.passes = [];
+  }
+  addPass(e) {
+    this.passes.push(e);
+  }
+  removePass(e) {
+    const t = this.passes.indexOf(e);
+    t > -1 && this.passes.splice(t, 1);
+  }
+  execute(e, t, i) {
+    for (const r of this.passes)
+      r.enabled && r.execute(e, t, i);
+  }
+  resize(e, t) {
+    for (const i of this.passes)
+      i.resize(e, t);
+  }
+}
+class z {
+  constructor(e, t, i, r = "RenderPass") {
+    this.gl = e, this.width = t, this.height = i, this.name = r, this.enabled = !0, this.autoResize = !0, this.drawCount = 0, this.executionTime = 0;
+  }
+  resize(e, t) {
+    this.autoResize && (this.width = e, this.height = t);
+  }
+  execute(e, t, i) {
+    console.warn("RenderPass.execute() not implemented");
+  }
+}
+class k extends z {
+  constructor(e, t, i, r, n = null, o = "ScreenPass") {
+    super(e, t, i, o), this.material = r, this.renderTarget = n, this.fullScreenQuad = new j(e), this.inputs = {}, this.clearColor = null;
+  }
+  setTexture(e, t) {
+    this.inputs[e] = t;
+  }
+  resize(e, t) {
+    super.resize(e, t), this.renderTarget && this.renderTarget.resize(e, t);
+  }
+  execute(e, t, i) {
+    const r = performance.now();
+    e.resetDrawCalls(), this.renderTarget ? this.renderTarget.bind() : (this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null), this.gl.viewport(0, 0, this.width, this.height)), this.clearColor && (this.gl.clearColor(this.clearColor[0], this.clearColor[1], this.clearColor[2], this.clearColor[3]), this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT));
+    for (const [o, a] of Object.entries(this.inputs))
+      this.material.setUniform(o, a);
+    this.material.setUniform("uResolution", [this.width, this.height]), this.fullScreenQuad.draw(this.material, this.renderTarget), this.renderTarget && this.renderTarget.unbind();
+    const n = e.resetDrawCalls();
+    this.drawCount = n.count, this.drawDetails = n.details, this.executionTime = performance.now() - r;
+  }
+}
+class Ie extends z {
+  constructor(e, t, i, r = null, n = null, o = "ObjectPass") {
+    super(e, t, i, o), this.renderTarget = r, this.materialOverride = n, this.clearColor = [0, 0, 0, 1], this.clearDepth = !0, this.camera = null;
+  }
+  resize(e, t) {
+    this.autoResize && (super.resize(e, t), this.renderTarget && this.renderTarget.resize(e, t));
+  }
+  execute(e, t, i) {
+    const r = this.camera || i;
+    this.camera && r.updateView();
+    const n = performance.now();
+    if (e.resetDrawCalls(), this.renderTarget ? this.renderTarget.bind() : (this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null), this.gl.viewport(0, 0, this.width, this.height)), this.clearColor) {
+      this.gl.clearColor(this.clearColor[0], this.clearColor[1], this.clearColor[2], this.clearColor[3]);
+      let a = this.gl.COLOR_BUFFER_BIT;
+      this.clearDepth && (a |= this.gl.DEPTH_BUFFER_BIT), this.gl.clear(a);
+    }
+    if (t && Array.isArray(t))
+      for (const a of t)
+        if (this.materialOverride) {
+          let l = this.materialOverride;
+          this.name === "Depth Pass" && a.depthMaterial ? l = a.depthMaterial : this.name === "Normal Pass" && a.normalMaterial ? l = a.normalMaterial : this.name === "Shadow Pass" && a.shadowMaterial && (l = a.shadowMaterial), a.render(r, this.renderTarget, l);
+        } else
+          a.render(r, this.renderTarget);
+    else t && t.render && t.render(r, this.renderTarget, this.materialOverride);
+    this.renderTarget && this.renderTarget.unbind();
+    const o = e.resetDrawCalls();
+    this.drawCount = o.count, this.drawDetails = o.details, this.executionTime = performance.now() - n;
+  }
+}
+class Ne extends z {
+  constructor(e, t, i, r) {
+    super(e, t, i, "ViewportComposition"), this.material = r, this.fullScreenQuad = new j(e), this.buffers = {}, this.viewports = [], this.overlay = null;
+  }
+  setBuffer(e, t) {
+    this.buffers[e] = t;
+  }
+  setOverlay(e) {
+    this.overlay = e;
+  }
+  setViewports(e) {
+    this.viewports = e;
+  }
+  execute(e, t, i) {
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null), this.gl.viewport(0, 0, this.width, this.height), this.gl.clearColor(0.1, 0.1, 0.1, 1), this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+    for (const r of this.viewports) {
+      const n = Math.floor(r.x * this.width), o = Math.floor(r.y * this.height), a = Math.floor(r.w * this.width), l = Math.floor(r.h * this.height);
+      this.gl.viewport(n, o, a, l);
+      let c = this.buffers.Final;
+      const h = r.pass;
+      this.buffers[h] && (c = this.buffers[h]), this.material.setUniform("uTexture", c), this.overlay ? (this.material.setUniform("uOverlay", this.overlay), this.material.setUniform("uUseOverlay", 1)) : this.material.setUniform("uUseOverlay", 0), this.fullScreenQuad.draw(this.material);
+    }
+  }
+}
+class je extends k {
+  constructor(e, t, i, r, n = null, o = "Lighting Pass") {
+    super(e, t, i, r, n, o), this.lightCamera = null;
+  }
+  // Set buffers from previous passes
+  setInputBuffers(e, t, i, r) {
+    this.setTexture("uSceneTexture", e), this.setTexture("uNormalTexture", t), this.setTexture("uDepthTexture", i), this.setTexture("uShadowMap", r);
+  }
+  execute(e, t, i) {
+    this.lightCamera && this.setMatricesFromCameras(i, this.lightCamera), super.execute(e, t, i);
+  }
+  setMatricesFromCameras(e, t) {
+    const i = new Float32Array(16);
+    R.multiply(i, t.projectionMatrix, t.viewMatrix);
+    const r = new Float32Array(16);
+    R.multiply(r, e.projectionMatrix, e.viewMatrix);
+    const n = new Float32Array(16);
+    this.invertMatrix(r, n);
+    const o = e.transform.position;
+    this.material.setUniforms({
+      uLightSpaceMatrix: i,
+      uInverseViewProjection: n,
+      uCameraPos: [o.x, o.y, o.z]
+    });
+  }
+  setMatrices(e, t) {
+    this.material.setUniforms({
+      uInverseViewProjection: e,
+      uLightSpaceMatrix: t
+    });
+  }
+  setLight(e, t, i) {
+    this.material.setUniforms({
+      uLightDir: e,
+      uLightColor: t,
+      uAmbient: i
+    });
+  }
+  invertMatrix(e, t) {
+    let i = e[0], r = e[1], n = e[2], o = e[3], a = e[4], l = e[5], c = e[6], h = e[7], d = e[8], u = e[9], f = e[10], x = e[11], v = e[12], C = e[13], m = e[14], p = e[15], g = i * l - r * a, w = i * c - n * a, b = i * h - o * a, E = r * c - n * l, _ = r * h - o * l, F = n * h - o * c, D = d * C - u * v, A = d * m - f * v, S = d * p - x * v, M = u * m - f * C, P = u * p - x * C, T = f * p - x * m, y = g * T - w * P + b * M + E * S - _ * A + F * D;
+    return y ? (y = 1 / y, t[0] = (l * T - c * P + h * M) * y, t[1] = (n * P - r * T - o * M) * y, t[2] = (C * F - m * _ + p * E) * y, t[3] = (f * _ - u * F - x * E) * y, t[4] = (c * S - a * T - h * A) * y, t[5] = (i * T - n * S + o * A) * y, t[6] = (m * b - v * F - p * w) * y, t[7] = (d * F - f * b + x * w) * y, t[8] = (a * P - l * S + h * D) * y, t[9] = (r * S - i * P - o * D) * y, t[10] = (v * _ - C * b + p * g) * y, t[11] = (u * b - d * _ - x * g) * y, t[12] = (l * A - a * M - c * D) * y, t[13] = (i * M - r * A + n * D) * y, t[14] = (C * w - v * E - m * g) * y, t[15] = (d * E - u * w + f * g) * y, !0) : !1;
+  }
+}
+class He extends k {
+  constructor(e, t, i, r, n = null, o = "Skybox Pass") {
+    super(e, t, i, r, n, o), this.clearColor = null, this.clearDepth = !1;
+  }
+  setCamera(e) {
+    const t = new Float32Array(16);
+    R.multiply(t, e.projectionMatrix, e.viewMatrix);
+    const i = new Float32Array(16);
+    this.invertMatrix(t, i), this.material.setUniforms({
+      uInverseViewProjection: i,
+      uCameraPos: [e.transform.position.x, e.transform.position.y, e.transform.position.z]
+      // We pass pos as array or vec3
+    });
+  }
+  setLight(e, t, i, r) {
+    this.material.setUniforms({
+      uLightDir: e,
+      uSunColor: t,
+      uTopColor: i,
+      uBottomColor: r
+    });
+  }
+  setInputTexture(e) {
+    this.setTexture("uDepthTexture", e);
+  }
+  execute(e, t, i) {
+    this.setCamera(i), super.execute(e, t, i);
+  }
+  invertMatrix(e, t) {
+    let i = e[0], r = e[1], n = e[2], o = e[3], a = e[4], l = e[5], c = e[6], h = e[7], d = e[8], u = e[9], f = e[10], x = e[11], v = e[12], C = e[13], m = e[14], p = e[15], g = i * l - r * a, w = i * c - n * a, b = i * h - o * a, E = r * c - n * l, _ = r * h - o * l, F = n * h - o * c, D = d * C - u * v, A = d * m - f * v, S = d * p - x * v, M = u * m - f * C, P = u * p - x * C, T = f * p - x * m, y = g * T - w * P + b * M + E * S - _ * A + F * D;
+    return y ? (y = 1 / y, t[0] = (l * T - c * P + h * M) * y, t[1] = (n * P - r * T - o * M) * y, t[2] = (C * F - m * _ + p * E) * y, t[3] = (f * _ - u * F - x * E) * y, t[4] = (c * S - a * T - h * A) * y, t[5] = (i * T - n * S + o * A) * y, t[6] = (m * b - v * F - p * w) * y, t[7] = (d * F - f * b + x * w) * y, t[8] = (a * P - l * S + h * D) * y, t[9] = (r * S - i * P - o * D) * y, t[10] = (v * _ - C * b + p * g) * y, t[11] = (u * b - d * _ - x * g) * y, t[12] = (l * A - a * M - c * D) * y, t[13] = (i * M - r * A + n * D) * y, t[14] = (C * w - v * E - m * g) * y, t[15] = (d * E - u * w + f * g) * y, !0) : !1;
+  }
+}
+class Xe extends k {
+  constructor(e, t, i, r, n = null, o = "Outline Pass") {
+    super(e, t, i, r, n, o), this.clearColor = [0, 0, 0, 0];
+  }
+  setInputBuffers(e, t) {
+    this.setTexture("uDepthTexture", e), this.setTexture("uNormalTexture", t), this.setTexture("uSceneTexture", e);
+  }
+  resize(e, t) {
+    super.resize(e, t), this.material.setUniform("uResolution", [e, t]);
+  }
+}
+class We extends k {
+  constructor(e, t, i, r, n, o = "PixelArt Pass") {
+    super(e, t, i, r, n, o);
+  }
+  setInputBuffers(e, t, i) {
+    this.setTexture("uSceneTexture", e), this.setTexture("uDepthTexture", t), this.setTexture("uNormalTexture", i);
+  }
+  resize(e, t) {
+    super.resize(e, t), this.material.setUniform("uResolution", [e, t]);
+  }
+}
+class q {
+  constructor() {
+    this.container = document.createElement("div"), this.container.id = "editor-ui-root", Object.assign(this.container.style, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      zIndex: "9999",
+      fontFamily: "sans-serif"
+    }), document.body.appendChild(this.container), this.initNavBar();
+  }
+  initNavBar() {
+    this.navBar = document.createElement("div"), this.navBar.id = "editor-navbar", Object.assign(this.navBar.style, {
+      position: "absolute",
+      top: "10px",
+      left: "50%",
+      transform: "translateX(-50%)",
+      display: "flex",
+      gap: "5px",
+      background: "rgba(26, 26, 26, 0.9)",
+      padding: "5px 10px",
+      borderRadius: "20px",
+      border: "1px solid #333",
+      pointerEvents: "auto",
+      boxShadow: "0 4px 10px rgba(0,0,0,0.5)",
+      zIndex: "10001"
+    }), this.container.appendChild(this.navBar), this.addDragLogic(this.navBar, this.navBar);
+  }
+  addNavItem(e, t) {
+    const i = document.createElement("button");
+    i.innerText = e, Object.assign(i.style, {
+      background: "#252525",
+      color: "#ccc",
+      border: "1px solid #444",
+      padding: "4px 12px",
+      borderRadius: "15px",
+      fontSize: "10px",
+      fontWeight: "bold",
+      cursor: "pointer",
+      transition: "background 0.2s",
+      outline: "none"
+    }), i.onclick = () => {
+      const r = t.style.display === "none";
+      t.style.display = r ? "flex" : "none", i.style.background = r ? "#444" : "#252525";
+    }, i.onmouseover = () => {
+      t.style.display === "none" && (i.style.background = "#333");
+    }, i.onmouseout = () => {
+      t.style.display === "none" && (i.style.background = "#252525");
+    }, i.style.background = t.style.display === "none" ? "#252525" : "#444", this.navBar.appendChild(i);
+  }
+  addNavSelect(e, t) {
+    const i = document.createElement("select");
+    Object.assign(i.style, {
+      background: "#252525",
+      color: "#ccc",
+      border: "1px solid #444",
+      padding: "4px 8px",
+      borderRadius: "15px",
+      fontSize: "10px",
+      fontWeight: "bold",
+      cursor: "pointer",
+      outline: "none",
+      marginLeft: "10px"
+    }), e.forEach((r) => {
+      const n = document.createElement("option");
+      n.value = r, n.text = r, i.appendChild(n);
+    }), i.onchange = (r) => t(r.target.value), this.navBar.appendChild(i);
+  }
+  toggleVisibility() {
+    const e = this.container.style.display === "none";
+    this.container.style.display = e ? "block" : "none";
+  }
+  createWindow(e, t, i, r, n) {
+    const o = document.createElement("div");
+    Object.assign(o.style, {
+      position: "absolute",
+      left: `${t}px`,
+      top: `${i}px`,
+      width: `${r}px`,
+      height: `${n}px`,
+      backgroundColor: "#1a1a1a",
+      border: "1px solid #333",
+      display: "flex",
+      flexDirection: "column",
+      pointerEvents: "auto",
+      overflow: "hidden",
+      boxShadow: "0 4px 15px rgba(0,0,0,0.5)"
+    });
+    const a = document.createElement("div");
+    a.innerText = e, Object.assign(a.style, {
+      padding: "6px 10px",
+      background: "#252525",
+      color: "#ccc",
+      fontSize: "11px",
+      fontWeight: "bold",
+      cursor: "move",
+      userSelect: "none",
+      borderBottom: "1px solid #333",
+      textTransform: "uppercase",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center"
+    });
+    const l = document.createElement("span");
+    l.innerHTML = "×", Object.assign(l.style, {
+      cursor: "pointer",
+      fontSize: "16px",
+      lineHeight: "1",
+      padding: "0 4px",
+      color: "#888"
+    }), l.onclick = () => {
+      o.style.display = "none";
+    }, l.onmouseover = () => {
+      l.style.color = "#fff";
+    }, l.onmouseout = () => {
+      l.style.color = "#888";
+    }, a.appendChild(l);
+    const c = document.createElement("div");
+    c.classList.add("window-content"), Object.assign(c.style, {
+      flex: "1",
+      overflow: "auto",
+      background: "#111",
+      position: "relative",
+      width: "100%",
+      height: "100%"
+    });
+    const h = document.createElement("div");
+    return Object.assign(h.style, {
+      width: "10px",
+      height: "10px",
+      background: "#444",
+      position: "absolute",
+      right: "0",
+      bottom: "0",
+      cursor: "nwse-resize",
+      zIndex: "10"
+    }), o.appendChild(a), o.appendChild(c), o.appendChild(h), this.container.appendChild(o), this.addDragLogic(o, a), this.addResizeLogic(o, h), { content: c, window: o };
+  }
+  addResizeLogic(e, t) {
+    let i = !1, r, n, o, a;
+    t.addEventListener("mousedown", (h) => {
+      h.preventDefault(), h.stopPropagation(), i = !0, o = h.clientX, a = h.clientY, r = e.offsetWidth, n = e.offsetHeight, document.addEventListener("mousemove", l), document.addEventListener("mouseup", c);
+    });
+    const l = (h) => {
+      if (!i) return;
+      const d = r + (h.clientX - o), u = n + (h.clientY - a);
+      d > 100 && (e.style.width = d + "px"), u > 100 && (e.style.height = u + "px");
+    }, c = () => {
+      i = !1, document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", c);
+    };
+  }
+  addDragLogic(e, t) {
+    let i = !1, r, n, o, a;
+    t.addEventListener("mousedown", (h) => {
+      h.target.tagName !== "BUTTON" && (i = !0, r = h.clientX, n = h.clientY, o = e.offsetLeft, a = e.offsetTop, document.addEventListener("mousemove", l), document.addEventListener("mouseup", c), e.style.zIndex = "10000", e === this.navBar && (e.style.zIndex = "10001"), e !== this.navBar && (this.container.querySelectorAll(".window").forEach((d) => d.style.zIndex = "9999"), e.style.zIndex = "10000"));
+    });
+    const l = (h) => {
+      if (!i) return;
+      let d = o + (h.clientX - r), u = a + (h.clientY - n);
+      const f = 20;
+      d < f && (d = 0), u < f && (u = 0), Math.abs(window.innerWidth - (d + e.offsetWidth)) < f && (d = window.innerWidth - e.offsetWidth), Math.abs(window.innerHeight - (u + e.offsetHeight)) < f && (u = window.innerHeight - e.offsetHeight), e.style.left = d + "px", e.style.top = u + "px";
+    }, c = () => {
+      i = !1, document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", c);
+    };
+  }
+}
+/**
+ * lil-gui
+ * https://lil-gui.georgealways.com
+ * @version 0.21.0
+ * @author George Michael Brower
+ * @license MIT
+ */
+class L {
+  constructor(e, t, i, r, n = "div") {
+    this.parent = e, this.object = t, this.property = i, this._disabled = !1, this._hidden = !1, this.initialValue = this.getValue(), this.domElement = document.createElement(n), this.domElement.classList.add("lil-controller"), this.domElement.classList.add(r), this.$name = document.createElement("div"), this.$name.classList.add("lil-name"), L.nextNameID = L.nextNameID || 0, this.$name.id = `lil-gui-name-${++L.nextNameID}`, this.$widget = document.createElement("div"), this.$widget.classList.add("lil-widget"), this.$disable = this.$widget, this.domElement.appendChild(this.$name), this.domElement.appendChild(this.$widget), this.domElement.addEventListener("keydown", (o) => o.stopPropagation()), this.domElement.addEventListener("keyup", (o) => o.stopPropagation()), this.parent.children.push(this), this.parent.controllers.push(this), this.parent.$children.appendChild(this.domElement), this._listenCallback = this._listenCallback.bind(this), this.name(i);
+  }
+  /**
+   * Sets the name of the controller and its label in the GUI.
+   * @param {string} name
+   * @returns {this}
+   */
+  name(e) {
+    return this._name = e, this.$name.textContent = e, this;
+  }
+  /**
+   * Pass a function to be called whenever the value is modified by this controller.
+   * The function receives the new value as its first parameter. The value of `this` will be the
+   * controller.
+   *
+   * For function controllers, the `onChange` callback will be fired on click, after the function
+   * executes.
+   * @param {Function} callback
+   * @returns {this}
+   * @example
+   * const controller = gui.add( object, 'property' );
+   *
+   * controller.onChange( function( v ) {
+   * 	console.log( 'The value is now ' + v );
+   * 	console.assert( this === controller );
+   * } );
+   */
+  onChange(e) {
+    return this._onChange = e, this;
+  }
+  /**
+   * Calls the onChange methods of this controller and its parent GUI.
+   * @protected
+   */
+  _callOnChange() {
+    this.parent._callOnChange(this), this._onChange !== void 0 && this._onChange.call(this, this.getValue()), this._changed = !0;
+  }
+  /**
+   * Pass a function to be called after this controller has been modified and loses focus.
+   * @param {Function} callback
+   * @returns {this}
+   * @example
+   * const controller = gui.add( object, 'property' );
+   *
+   * controller.onFinishChange( function( v ) {
+   * 	console.log( 'Changes complete: ' + v );
+   * 	console.assert( this === controller );
+   * } );
+   */
+  onFinishChange(e) {
+    return this._onFinishChange = e, this;
+  }
+  /**
+   * Should be called by Controller when its widgets lose focus.
+   * @protected
+   */
+  _callOnFinishChange() {
+    this._changed && (this.parent._callOnFinishChange(this), this._onFinishChange !== void 0 && this._onFinishChange.call(this, this.getValue())), this._changed = !1;
+  }
+  /**
+   * Sets the controller back to its initial value.
+   * @returns {this}
+   */
+  reset() {
+    return this.setValue(this.initialValue), this._callOnFinishChange(), this;
+  }
+  /**
+   * Enables this controller.
+   * @param {boolean} enabled
+   * @returns {this}
+   * @example
+   * controller.enable();
+   * controller.enable( false ); // disable
+   * controller.enable( controller._disabled ); // toggle
+   */
+  enable(e = !0) {
+    return this.disable(!e);
+  }
+  /**
+   * Disables this controller.
+   * @param {boolean} disabled
+   * @returns {this}
+   * @example
+   * controller.disable();
+   * controller.disable( false ); // enable
+   * controller.disable( !controller._disabled ); // toggle
+   */
+  disable(e = !0) {
+    return e === this._disabled ? this : (this._disabled = e, this.domElement.classList.toggle("lil-disabled", e), this.$disable.toggleAttribute("disabled", e), this);
+  }
+  /**
+   * Shows the Controller after it's been hidden.
+   * @param {boolean} show
+   * @returns {this}
+   * @example
+   * controller.show();
+   * controller.show( false ); // hide
+   * controller.show( controller._hidden ); // toggle
+   */
+  show(e = !0) {
+    return this._hidden = !e, this.domElement.style.display = this._hidden ? "none" : "", this;
+  }
+  /**
+   * Hides the Controller.
+   * @returns {this}
+   */
+  hide() {
+    return this.show(!1);
+  }
+  /**
+   * Changes this controller into a dropdown of options.
+   *
+   * Calling this method on an option controller will simply update the options. However, if this
+   * controller was not already an option controller, old references to this controller are
+   * destroyed, and a new controller is added to the end of the GUI.
+   * @example
+   * // safe usage
+   *
+   * gui.add( obj, 'prop1' ).options( [ 'a', 'b', 'c' ] );
+   * gui.add( obj, 'prop2' ).options( { Big: 10, Small: 1 } );
+   * gui.add( obj, 'prop3' );
+   *
+   * // danger
+   *
+   * const ctrl1 = gui.add( obj, 'prop1' );
+   * gui.add( obj, 'prop2' );
+   *
+   * // calling options out of order adds a new controller to the end...
+   * const ctrl2 = ctrl1.options( [ 'a', 'b', 'c' ] );
+   *
+   * // ...and ctrl1 now references a controller that doesn't exist
+   * assert( ctrl2 !== ctrl1 )
+   * @param {object|Array} options
+   * @returns {Controller}
+   */
+  options(e) {
+    const t = this.parent.add(this.object, this.property, e);
+    return t.name(this._name), this.destroy(), t;
+  }
+  /**
+   * Sets the minimum value. Only works on number controllers.
+   * @param {number} min
+   * @returns {this}
+   */
+  min(e) {
+    return this;
+  }
+  /**
+   * Sets the maximum value. Only works on number controllers.
+   * @param {number} max
+   * @returns {this}
+   */
+  max(e) {
+    return this;
+  }
+  /**
+   * Values set by this controller will be rounded to multiples of `step`. Only works on number
+   * controllers.
+   * @param {number} step
+   * @returns {this}
+   */
+  step(e) {
+    return this;
+  }
+  /**
+   * Rounds the displayed value to a fixed number of decimals, without affecting the actual value
+   * like `step()`. Only works on number controllers.
+   * @example
+   * gui.add( object, 'property' ).listen().decimals( 4 );
+   * @param {number} decimals
+   * @returns {this}
+   */
+  decimals(e) {
+    return this;
+  }
+  /**
+   * Calls `updateDisplay()` every animation frame. Pass `false` to stop listening.
+   * @param {boolean} listen
+   * @returns {this}
+   */
+  listen(e = !0) {
+    return this._listening = e, this._listenCallbackID !== void 0 && (cancelAnimationFrame(this._listenCallbackID), this._listenCallbackID = void 0), this._listening && this._listenCallback(), this;
+  }
+  _listenCallback() {
+    this._listenCallbackID = requestAnimationFrame(this._listenCallback);
+    const e = this.save();
+    e !== this._listenPrevValue && this.updateDisplay(), this._listenPrevValue = e;
+  }
+  /**
+   * Returns `object[ property ]`.
+   * @returns {any}
+   */
+  getValue() {
+    return this.object[this.property];
+  }
+  /**
+   * Sets the value of `object[ property ]`, invokes any `onChange` handlers and updates the display.
+   * @param {any} value
+   * @returns {this}
+   */
+  setValue(e) {
+    return this.getValue() !== e && (this.object[this.property] = e, this._callOnChange(), this.updateDisplay()), this;
+  }
+  /**
+   * Updates the display to keep it in sync with the current value. Useful for updating your
+   * controllers when their values have been modified outside of the GUI.
+   * @returns {this}
+   */
+  updateDisplay() {
+    return this;
+  }
+  load(e) {
+    return this.setValue(e), this._callOnFinishChange(), this;
+  }
+  save() {
+    return this.getValue();
+  }
+  /**
+   * Destroys this controller and removes it from the parent GUI.
+   */
+  destroy() {
+    this.listen(!1), this.parent.children.splice(this.parent.children.indexOf(this), 1), this.parent.controllers.splice(this.parent.controllers.indexOf(this), 1), this.parent.$children.removeChild(this.domElement);
+  }
+}
+class Z extends L {
+  constructor(e, t, i) {
+    super(e, t, i, "lil-boolean", "label"), this.$input = document.createElement("input"), this.$input.setAttribute("type", "checkbox"), this.$input.setAttribute("aria-labelledby", this.$name.id), this.$widget.appendChild(this.$input), this.$input.addEventListener("change", () => {
+      this.setValue(this.$input.checked), this._callOnFinishChange();
+    }), this.$disable = this.$input, this.updateDisplay();
+  }
+  updateDisplay() {
+    return this.$input.checked = this.getValue(), this;
+  }
+}
+function B(s) {
+  let e, t;
+  return (e = s.match(/(#|0x)?([a-f0-9]{6})/i)) ? t = e[2] : (e = s.match(/rgb\(\s*(\d*)\s*,\s*(\d*)\s*,\s*(\d*)\s*\)/)) ? t = parseInt(e[1]).toString(16).padStart(2, 0) + parseInt(e[2]).toString(16).padStart(2, 0) + parseInt(e[3]).toString(16).padStart(2, 0) : (e = s.match(/^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i)) && (t = e[1] + e[1] + e[2] + e[2] + e[3] + e[3]), t ? "#" + t : !1;
+}
+const Q = {
+  isPrimitive: !0,
+  match: (s) => typeof s == "string",
+  fromHexString: B,
+  toHexString: B
+}, $ = {
+  isPrimitive: !0,
+  match: (s) => typeof s == "number",
+  fromHexString: (s) => parseInt(s.substring(1), 16),
+  toHexString: (s) => "#" + s.toString(16).padStart(6, 0)
+}, K = {
+  isPrimitive: !1,
+  match: (s) => Array.isArray(s) || ArrayBuffer.isView(s),
+  fromHexString(s, e, t = 1) {
+    const i = $.fromHexString(s);
+    e[0] = (i >> 16 & 255) / 255 * t, e[1] = (i >> 8 & 255) / 255 * t, e[2] = (i & 255) / 255 * t;
+  },
+  toHexString([s, e, t], i = 1) {
+    i = 255 / i;
+    const r = s * i << 16 ^ e * i << 8 ^ t * i << 0;
+    return $.toHexString(r);
+  }
+}, J = {
+  isPrimitive: !1,
+  match: (s) => Object(s) === s,
+  fromHexString(s, e, t = 1) {
+    const i = $.fromHexString(s);
+    e.r = (i >> 16 & 255) / 255 * t, e.g = (i >> 8 & 255) / 255 * t, e.b = (i & 255) / 255 * t;
+  },
+  toHexString({ r: s, g: e, b: t }, i = 1) {
+    i = 255 / i;
+    const r = s * i << 16 ^ e * i << 8 ^ t * i << 0;
+    return $.toHexString(r);
+  }
+}, ee = [Q, $, K, J];
+function te(s) {
+  return ee.find((e) => e.match(s));
+}
+class ie extends L {
+  constructor(e, t, i, r) {
+    super(e, t, i, "lil-color"), this.$input = document.createElement("input"), this.$input.setAttribute("type", "color"), this.$input.setAttribute("tabindex", -1), this.$input.setAttribute("aria-labelledby", this.$name.id), this.$text = document.createElement("input"), this.$text.setAttribute("type", "text"), this.$text.setAttribute("spellcheck", "false"), this.$text.setAttribute("aria-labelledby", this.$name.id), this.$display = document.createElement("div"), this.$display.classList.add("lil-display"), this.$display.appendChild(this.$input), this.$widget.appendChild(this.$display), this.$widget.appendChild(this.$text), this._format = te(this.initialValue), this._rgbScale = r, this._initialValueHexString = this.save(), this._textFocused = !1, this.$input.addEventListener("input", () => {
+      this._setValueFromHexString(this.$input.value);
+    }), this.$input.addEventListener("blur", () => {
+      this._callOnFinishChange();
+    }), this.$text.addEventListener("input", () => {
+      const n = B(this.$text.value);
+      n && this._setValueFromHexString(n);
+    }), this.$text.addEventListener("focus", () => {
+      this._textFocused = !0, this.$text.select();
+    }), this.$text.addEventListener("blur", () => {
+      this._textFocused = !1, this.updateDisplay(), this._callOnFinishChange();
+    }), this.$disable = this.$text, this.updateDisplay();
+  }
+  reset() {
+    return this._setValueFromHexString(this._initialValueHexString), this;
+  }
+  _setValueFromHexString(e) {
+    if (this._format.isPrimitive) {
+      const t = this._format.fromHexString(e);
+      this.setValue(t);
+    } else
+      this._format.fromHexString(e, this.getValue(), this._rgbScale), this._callOnChange(), this.updateDisplay();
+  }
+  save() {
+    return this._format.toHexString(this.getValue(), this._rgbScale);
+  }
+  load(e) {
+    return this._setValueFromHexString(e), this._callOnFinishChange(), this;
+  }
+  updateDisplay() {
+    return this.$input.value = this._format.toHexString(this.getValue(), this._rgbScale), this._textFocused || (this.$text.value = this.$input.value.substring(1)), this.$display.style.backgroundColor = this.$input.value, this;
+  }
+}
+class O extends L {
+  constructor(e, t, i) {
+    super(e, t, i, "lil-function"), this.$button = document.createElement("button"), this.$button.appendChild(this.$name), this.$widget.appendChild(this.$button), this.$button.addEventListener("click", (r) => {
+      r.preventDefault(), this.getValue().call(this.object), this._callOnChange();
+    }), this.$button.addEventListener("touchstart", () => {
+    }, { passive: !0 }), this.$disable = this.$button;
+  }
+}
+class re extends L {
+  constructor(e, t, i, r, n, o) {
+    super(e, t, i, "lil-number"), this._initInput(), this.min(r), this.max(n);
+    const a = o !== void 0;
+    this.step(a ? o : this._getImplicitStep(), a), this.updateDisplay();
+  }
+  decimals(e) {
+    return this._decimals = e, this.updateDisplay(), this;
+  }
+  min(e) {
+    return this._min = e, this._onUpdateMinMax(), this;
+  }
+  max(e) {
+    return this._max = e, this._onUpdateMinMax(), this;
+  }
+  step(e, t = !0) {
+    return this._step = e, this._stepExplicit = t, this;
+  }
+  updateDisplay() {
+    const e = this.getValue();
+    if (this._hasSlider) {
+      let t = (e - this._min) / (this._max - this._min);
+      t = Math.max(0, Math.min(t, 1)), this.$fill.style.width = t * 100 + "%";
+    }
+    return this._inputFocused || (this.$input.value = this._decimals === void 0 ? e : e.toFixed(this._decimals)), this;
+  }
+  _initInput() {
+    this.$input = document.createElement("input"), this.$input.setAttribute("type", "text"), this.$input.setAttribute("aria-labelledby", this.$name.id), window.matchMedia("(pointer: coarse)").matches && (this.$input.setAttribute("type", "number"), this.$input.setAttribute("step", "any")), this.$widget.appendChild(this.$input), this.$disable = this.$input;
+    const t = () => {
+      let p = parseFloat(this.$input.value);
+      isNaN(p) || (this._stepExplicit && (p = this._snap(p)), this.setValue(this._clamp(p)));
+    }, i = (p) => {
+      const g = parseFloat(this.$input.value);
+      isNaN(g) || (this._snapClampSetValue(g + p), this.$input.value = this.getValue());
+    }, r = (p) => {
+      p.key === "Enter" && this.$input.blur(), p.code === "ArrowUp" && (p.preventDefault(), i(this._step * this._arrowKeyMultiplier(p))), p.code === "ArrowDown" && (p.preventDefault(), i(this._step * this._arrowKeyMultiplier(p) * -1));
+    }, n = (p) => {
+      this._inputFocused && (p.preventDefault(), i(this._step * this._normalizeMouseWheel(p)));
+    };
+    let o = !1, a, l, c, h, d;
+    const u = 5, f = (p) => {
+      a = p.clientX, l = c = p.clientY, o = !0, h = this.getValue(), d = 0, window.addEventListener("mousemove", x), window.addEventListener("mouseup", v);
+    }, x = (p) => {
+      if (o) {
+        const g = p.clientX - a, w = p.clientY - l;
+        Math.abs(w) > u ? (p.preventDefault(), this.$input.blur(), o = !1, this._setDraggingStyle(!0, "vertical")) : Math.abs(g) > u && v();
+      }
+      if (!o) {
+        const g = p.clientY - c;
+        d -= g * this._step * this._arrowKeyMultiplier(p), h + d > this._max ? d = this._max - h : h + d < this._min && (d = this._min - h), this._snapClampSetValue(h + d);
+      }
+      c = p.clientY;
+    }, v = () => {
+      this._setDraggingStyle(!1, "vertical"), this._callOnFinishChange(), window.removeEventListener("mousemove", x), window.removeEventListener("mouseup", v);
+    }, C = () => {
+      this._inputFocused = !0;
+    }, m = () => {
+      this._inputFocused = !1, this.updateDisplay(), this._callOnFinishChange();
+    };
+    this.$input.addEventListener("input", t), this.$input.addEventListener("keydown", r), this.$input.addEventListener("wheel", n, { passive: !1 }), this.$input.addEventListener("mousedown", f), this.$input.addEventListener("focus", C), this.$input.addEventListener("blur", m);
+  }
+  _initSlider() {
+    this._hasSlider = !0, this.$slider = document.createElement("div"), this.$slider.classList.add("lil-slider"), this.$fill = document.createElement("div"), this.$fill.classList.add("lil-fill"), this.$slider.appendChild(this.$fill), this.$widget.insertBefore(this.$slider, this.$input), this.domElement.classList.add("lil-has-slider");
+    const e = (m, p, g, w, b) => (m - p) / (g - p) * (b - w) + w, t = (m) => {
+      const p = this.$slider.getBoundingClientRect();
+      let g = e(m, p.left, p.right, this._min, this._max);
+      this._snapClampSetValue(g);
+    }, i = (m) => {
+      this._setDraggingStyle(!0), t(m.clientX), window.addEventListener("mousemove", r), window.addEventListener("mouseup", n);
+    }, r = (m) => {
+      t(m.clientX);
+    }, n = () => {
+      this._callOnFinishChange(), this._setDraggingStyle(!1), window.removeEventListener("mousemove", r), window.removeEventListener("mouseup", n);
+    };
+    let o = !1, a, l;
+    const c = (m) => {
+      m.preventDefault(), this._setDraggingStyle(!0), t(m.touches[0].clientX), o = !1;
+    }, h = (m) => {
+      m.touches.length > 1 || (this._hasScrollBar ? (a = m.touches[0].clientX, l = m.touches[0].clientY, o = !0) : c(m), window.addEventListener("touchmove", d, { passive: !1 }), window.addEventListener("touchend", u));
+    }, d = (m) => {
+      if (o) {
+        const p = m.touches[0].clientX - a, g = m.touches[0].clientY - l;
+        Math.abs(p) > Math.abs(g) ? c(m) : (window.removeEventListener("touchmove", d), window.removeEventListener("touchend", u));
+      } else
+        m.preventDefault(), t(m.touches[0].clientX);
+    }, u = () => {
+      this._callOnFinishChange(), this._setDraggingStyle(!1), window.removeEventListener("touchmove", d), window.removeEventListener("touchend", u);
+    }, f = this._callOnFinishChange.bind(this), x = 400;
+    let v;
+    const C = (m) => {
+      if (Math.abs(m.deltaX) < Math.abs(m.deltaY) && this._hasScrollBar) return;
+      m.preventDefault();
+      const g = this._normalizeMouseWheel(m) * this._step;
+      this._snapClampSetValue(this.getValue() + g), this.$input.value = this.getValue(), clearTimeout(v), v = setTimeout(f, x);
+    };
+    this.$slider.addEventListener("mousedown", i), this.$slider.addEventListener("touchstart", h, { passive: !1 }), this.$slider.addEventListener("wheel", C, { passive: !1 });
+  }
+  _setDraggingStyle(e, t = "horizontal") {
+    this.$slider && this.$slider.classList.toggle("lil-active", e), document.body.classList.toggle("lil-dragging", e), document.body.classList.toggle(`lil-${t}`, e);
+  }
+  _getImplicitStep() {
+    return this._hasMin && this._hasMax ? (this._max - this._min) / 1e3 : 0.1;
+  }
+  _onUpdateMinMax() {
+    !this._hasSlider && this._hasMin && this._hasMax && (this._stepExplicit || this.step(this._getImplicitStep(), !1), this._initSlider(), this.updateDisplay());
+  }
+  _normalizeMouseWheel(e) {
+    let { deltaX: t, deltaY: i } = e;
+    return Math.floor(e.deltaY) !== e.deltaY && e.wheelDelta && (t = 0, i = -e.wheelDelta / 120, i *= this._stepExplicit ? 1 : 10), t + -i;
+  }
+  _arrowKeyMultiplier(e) {
+    let t = this._stepExplicit ? 1 : 10;
+    return e.shiftKey ? t *= 10 : e.altKey && (t /= 10), t;
+  }
+  _snap(e) {
+    let t = 0;
+    return this._hasMin ? t = this._min : this._hasMax && (t = this._max), e -= t, e = Math.round(e / this._step) * this._step, e += t, e = parseFloat(e.toPrecision(15)), e;
+  }
+  _clamp(e) {
+    return e < this._min && (e = this._min), e > this._max && (e = this._max), e;
+  }
+  _snapClampSetValue(e) {
+    this.setValue(this._clamp(this._snap(e)));
+  }
+  get _hasScrollBar() {
+    const e = this.parent.root.$children;
+    return e.scrollHeight > e.clientHeight;
+  }
+  get _hasMin() {
+    return this._min !== void 0;
+  }
+  get _hasMax() {
+    return this._max !== void 0;
+  }
+}
+class ne extends L {
+  constructor(e, t, i, r) {
+    super(e, t, i, "lil-option"), this.$select = document.createElement("select"), this.$select.setAttribute("aria-labelledby", this.$name.id), this.$display = document.createElement("div"), this.$display.classList.add("lil-display"), this.$select.addEventListener("change", () => {
+      this.setValue(this._values[this.$select.selectedIndex]), this._callOnFinishChange();
+    }), this.$select.addEventListener("focus", () => {
+      this.$display.classList.add("lil-focus");
+    }), this.$select.addEventListener("blur", () => {
+      this.$display.classList.remove("lil-focus");
+    }), this.$widget.appendChild(this.$select), this.$widget.appendChild(this.$display), this.$disable = this.$select, this.options(r);
+  }
+  options(e) {
+    return this._values = Array.isArray(e) ? e : Object.values(e), this._names = Array.isArray(e) ? e : Object.keys(e), this.$select.replaceChildren(), this._names.forEach((t) => {
+      const i = document.createElement("option");
+      i.textContent = t, this.$select.appendChild(i);
+    }), this.updateDisplay(), this;
+  }
+  updateDisplay() {
+    const e = this.getValue(), t = this._values.indexOf(e);
+    return this.$select.selectedIndex = t, this.$display.textContent = t === -1 ? e : this._names[t], this;
+  }
+}
+class se extends L {
+  constructor(e, t, i) {
+    super(e, t, i, "lil-string"), this.$input = document.createElement("input"), this.$input.setAttribute("type", "text"), this.$input.setAttribute("spellcheck", "false"), this.$input.setAttribute("aria-labelledby", this.$name.id), this.$input.addEventListener("input", () => {
+      this.setValue(this.$input.value);
+    }), this.$input.addEventListener("keydown", (r) => {
+      r.code === "Enter" && this.$input.blur();
+    }), this.$input.addEventListener("blur", () => {
+      this._callOnFinishChange();
+    }), this.$widget.appendChild(this.$input), this.$disable = this.$input, this.updateDisplay();
+  }
+  updateDisplay() {
+    return this.$input.value = this.getValue(), this;
+  }
+}
+var oe = `.lil-gui {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: 1;
+  font-weight: normal;
+  font-style: normal;
+  text-align: left;
+  color: var(--text-color);
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  --background-color: #1f1f1f;
+  --text-color: #ebebeb;
+  --title-background-color: #111111;
+  --title-text-color: #ebebeb;
+  --widget-color: #424242;
+  --hover-color: #4f4f4f;
+  --focus-color: #595959;
+  --number-color: #2cc9ff;
+  --string-color: #a2db3c;
+  --font-size: 11px;
+  --input-font-size: 11px;
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
+  --font-family-mono: Menlo, Monaco, Consolas, "Droid Sans Mono", monospace;
+  --padding: 4px;
+  --spacing: 4px;
+  --widget-height: 20px;
+  --title-height: calc(var(--widget-height) + var(--spacing) * 1.25);
+  --name-width: 45%;
+  --slider-knob-width: 2px;
+  --slider-input-width: 27%;
+  --color-input-width: 27%;
+  --slider-input-min-width: 45px;
+  --color-input-min-width: 45px;
+  --folder-indent: 7px;
+  --widget-padding: 0 0 0 3px;
+  --widget-border-radius: 2px;
+  --checkbox-size: calc(0.75 * var(--widget-height));
+  --scrollbar-width: 5px;
+}
+.lil-gui, .lil-gui * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+.lil-gui.lil-root {
+  width: var(--width, 245px);
+  display: flex;
+  flex-direction: column;
+  background: var(--background-color);
+}
+.lil-gui.lil-root > .lil-title {
+  background: var(--title-background-color);
+  color: var(--title-text-color);
+}
+.lil-gui.lil-root > .lil-children {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.lil-gui.lil-root > .lil-children::-webkit-scrollbar {
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-width);
+  background: var(--background-color);
+}
+.lil-gui.lil-root > .lil-children::-webkit-scrollbar-thumb {
+  border-radius: var(--scrollbar-width);
+  background: var(--focus-color);
+}
+@media (pointer: coarse) {
+  .lil-gui.lil-allow-touch-styles, .lil-gui.lil-allow-touch-styles .lil-gui {
+    --widget-height: 28px;
+    --padding: 6px;
+    --spacing: 6px;
+    --font-size: 13px;
+    --input-font-size: 16px;
+    --folder-indent: 10px;
+    --scrollbar-width: 7px;
+    --slider-input-min-width: 50px;
+    --color-input-min-width: 65px;
+  }
+}
+.lil-gui.lil-force-touch-styles, .lil-gui.lil-force-touch-styles .lil-gui {
+  --widget-height: 28px;
+  --padding: 6px;
+  --spacing: 6px;
+  --font-size: 13px;
+  --input-font-size: 16px;
+  --folder-indent: 10px;
+  --scrollbar-width: 7px;
+  --slider-input-min-width: 50px;
+  --color-input-min-width: 65px;
+}
+.lil-gui.lil-auto-place, .lil-gui.autoPlace {
+  max-height: 100%;
+  position: fixed;
+  top: 0;
+  right: 15px;
+  z-index: 1001;
+}
+
+.lil-controller {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--padding);
+  margin: var(--spacing) 0;
+}
+.lil-controller.lil-disabled {
+  opacity: 0.5;
+}
+.lil-controller.lil-disabled, .lil-controller.lil-disabled * {
+  pointer-events: none !important;
+}
+.lil-controller > .lil-name {
+  min-width: var(--name-width);
+  flex-shrink: 0;
+  white-space: pre;
+  padding-right: var(--spacing);
+  line-height: var(--widget-height);
+}
+.lil-controller .lil-widget {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--widget-height);
+}
+.lil-controller.lil-string input {
+  color: var(--string-color);
+}
+.lil-controller.lil-boolean {
+  cursor: pointer;
+}
+.lil-controller.lil-color .lil-display {
+  width: 100%;
+  height: var(--widget-height);
+  border-radius: var(--widget-border-radius);
+  position: relative;
+}
+@media (hover: hover) {
+  .lil-controller.lil-color .lil-display:hover:before {
+    content: " ";
+    display: block;
+    position: absolute;
+    border-radius: var(--widget-border-radius);
+    border: 1px solid #fff9;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
+.lil-controller.lil-color input[type=color] {
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+.lil-controller.lil-color input[type=text] {
+  margin-left: var(--spacing);
+  font-family: var(--font-family-mono);
+  min-width: var(--color-input-min-width);
+  width: var(--color-input-width);
+  flex-shrink: 0;
+}
+.lil-controller.lil-option select {
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+  max-width: 100%;
+}
+.lil-controller.lil-option .lil-display {
+  position: relative;
+  pointer-events: none;
+  border-radius: var(--widget-border-radius);
+  height: var(--widget-height);
+  line-height: var(--widget-height);
+  max-width: 100%;
+  overflow: hidden;
+  word-break: break-all;
+  padding-left: 0.55em;
+  padding-right: 1.75em;
+  background: var(--widget-color);
+}
+@media (hover: hover) {
+  .lil-controller.lil-option .lil-display.lil-focus {
+    background: var(--focus-color);
+  }
+}
+.lil-controller.lil-option .lil-display.lil-active {
+  background: var(--focus-color);
+}
+.lil-controller.lil-option .lil-display:after {
+  font-family: "lil-gui";
+  content: "↕";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  padding-right: 0.375em;
+}
+.lil-controller.lil-option .lil-widget,
+.lil-controller.lil-option select {
+  cursor: pointer;
+}
+@media (hover: hover) {
+  .lil-controller.lil-option .lil-widget:hover .lil-display {
+    background: var(--hover-color);
+  }
+}
+.lil-controller.lil-number input {
+  color: var(--number-color);
+}
+.lil-controller.lil-number.lil-has-slider input {
+  margin-left: var(--spacing);
+  width: var(--slider-input-width);
+  min-width: var(--slider-input-min-width);
+  flex-shrink: 0;
+}
+.lil-controller.lil-number .lil-slider {
+  width: 100%;
+  height: var(--widget-height);
+  background: var(--widget-color);
+  border-radius: var(--widget-border-radius);
+  padding-right: var(--slider-knob-width);
+  overflow: hidden;
+  cursor: ew-resize;
+  touch-action: pan-y;
+}
+@media (hover: hover) {
+  .lil-controller.lil-number .lil-slider:hover {
+    background: var(--hover-color);
+  }
+}
+.lil-controller.lil-number .lil-slider.lil-active {
+  background: var(--focus-color);
+}
+.lil-controller.lil-number .lil-slider.lil-active .lil-fill {
+  opacity: 0.95;
+}
+.lil-controller.lil-number .lil-fill {
+  height: 100%;
+  border-right: var(--slider-knob-width) solid var(--number-color);
+  box-sizing: content-box;
+}
+
+.lil-dragging .lil-gui {
+  --hover-color: var(--widget-color);
+}
+.lil-dragging * {
+  cursor: ew-resize !important;
+}
+.lil-dragging.lil-vertical * {
+  cursor: ns-resize !important;
+}
+
+.lil-gui .lil-title {
+  height: var(--title-height);
+  font-weight: 600;
+  padding: 0 var(--padding);
+  width: 100%;
+  text-align: left;
+  background: none;
+  text-decoration-skip: objects;
+}
+.lil-gui .lil-title:before {
+  font-family: "lil-gui";
+  content: "▾";
+  padding-right: 2px;
+  display: inline-block;
+}
+.lil-gui .lil-title:active {
+  background: var(--title-background-color);
+  opacity: 0.75;
+}
+@media (hover: hover) {
+  body:not(.lil-dragging) .lil-gui .lil-title:hover {
+    background: var(--title-background-color);
+    opacity: 0.85;
+  }
+  .lil-gui .lil-title:focus {
+    text-decoration: underline var(--focus-color);
+  }
+}
+.lil-gui.lil-root > .lil-title:focus {
+  text-decoration: none !important;
+}
+.lil-gui.lil-closed > .lil-title:before {
+  content: "▸";
+}
+.lil-gui.lil-closed > .lil-children {
+  transform: translateY(-7px);
+  opacity: 0;
+}
+.lil-gui.lil-closed:not(.lil-transition) > .lil-children {
+  display: none;
+}
+.lil-gui.lil-transition > .lil-children {
+  transition-duration: 300ms;
+  transition-property: height, opacity, transform;
+  transition-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
+  overflow: hidden;
+  pointer-events: none;
+}
+.lil-gui .lil-children:empty:before {
+  content: "Empty";
+  padding: 0 var(--padding);
+  margin: var(--spacing) 0;
+  display: block;
+  height: var(--widget-height);
+  font-style: italic;
+  line-height: var(--widget-height);
+  opacity: 0.5;
+}
+.lil-gui.lil-root > .lil-children > .lil-gui > .lil-title {
+  border: 0 solid var(--widget-color);
+  border-width: 1px 0;
+  transition: border-color 300ms;
+}
+.lil-gui.lil-root > .lil-children > .lil-gui.lil-closed > .lil-title {
+  border-bottom-color: transparent;
+}
+.lil-gui + .lil-controller {
+  border-top: 1px solid var(--widget-color);
+  margin-top: 0;
+  padding-top: var(--spacing);
+}
+.lil-gui .lil-gui .lil-gui > .lil-title {
+  border: none;
+}
+.lil-gui .lil-gui .lil-gui > .lil-children {
+  border: none;
+  margin-left: var(--folder-indent);
+  border-left: 2px solid var(--widget-color);
+}
+.lil-gui .lil-gui .lil-controller {
+  border: none;
+}
+
+.lil-gui label, .lil-gui input, .lil-gui button {
+  -webkit-tap-highlight-color: transparent;
+}
+.lil-gui input {
+  border: 0;
+  outline: none;
+  font-family: var(--font-family);
+  font-size: var(--input-font-size);
+  border-radius: var(--widget-border-radius);
+  height: var(--widget-height);
+  background: var(--widget-color);
+  color: var(--text-color);
+  width: 100%;
+}
+@media (hover: hover) {
+  .lil-gui input:hover {
+    background: var(--hover-color);
+  }
+  .lil-gui input:active {
+    background: var(--focus-color);
+  }
+}
+.lil-gui input:disabled {
+  opacity: 1;
+}
+.lil-gui input[type=text],
+.lil-gui input[type=number] {
+  padding: var(--widget-padding);
+  -moz-appearance: textfield;
+}
+.lil-gui input[type=text]:focus,
+.lil-gui input[type=number]:focus {
+  background: var(--focus-color);
+}
+.lil-gui input[type=checkbox] {
+  appearance: none;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  border-radius: var(--widget-border-radius);
+  text-align: center;
+  cursor: pointer;
+}
+.lil-gui input[type=checkbox]:checked:before {
+  font-family: "lil-gui";
+  content: "✓";
+  font-size: var(--checkbox-size);
+  line-height: var(--checkbox-size);
+}
+@media (hover: hover) {
+  .lil-gui input[type=checkbox]:focus {
+    box-shadow: inset 0 0 0 1px var(--focus-color);
+  }
+}
+.lil-gui button {
+  outline: none;
+  cursor: pointer;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  color: var(--text-color);
+  width: 100%;
+  border: none;
+}
+.lil-gui .lil-controller button {
+  height: var(--widget-height);
+  text-transform: none;
+  background: var(--widget-color);
+  border-radius: var(--widget-border-radius);
+}
+@media (hover: hover) {
+  .lil-gui .lil-controller button:hover {
+    background: var(--hover-color);
+  }
+  .lil-gui .lil-controller button:focus {
+    box-shadow: inset 0 0 0 1px var(--focus-color);
+  }
+}
+.lil-gui .lil-controller button:active {
+  background: var(--focus-color);
+}
+
+@font-face {
+  font-family: "lil-gui";
+  src: url("data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAALkAAsAAAAABtQAAAKVAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDMgqBBIEbATYCJAMUCwwABCAFhAoHgQQbHAbIDiUFEYVARAAAYQTVWNmz9MxhEgodq49wYRUFKE8GWNiUBxI2LBRaVnc51U83Gmhs0Q7JXWMiz5eteLwrKwuxHO8VFxUX9UpZBs6pa5ABRwHA+t3UxUnH20EvVknRerzQgX6xC/GH6ZUvTcAjAv122dF28OTqCXrPuyaDER30YBA1xnkVutDDo4oCi71Ca7rrV9xS8dZHbPHefsuwIyCpmT7j+MnjAH5X3984UZoFFuJ0yiZ4XEJFxjagEBeqs+e1iyK8Xf/nOuwF+vVK0ur765+vf7txotUi0m3N0m/84RGSrBCNrh8Ee5GjODjF4gnWP+dJrH/Lk9k4oT6d+gr6g/wssA2j64JJGP6cmx554vUZnpZfn6ZfX2bMwPPrlANsB86/DiHjhl0OP+c87+gaJo/gY084s3HoYL/ZkWHTRfBXvvoHnnkHvngKun4KBE/ede7tvq3/vQOxDXB1/fdNz6XbPdcr0Vhpojj9dG+owuSKFsslCi1tgEjirjXdwMiov2EioadxmqTHUCIwo8NgQaeIasAi0fTYSPTbSmwbMOFduyh9wvBrESGY0MtgRjtgQR8Q1bRPohn2UoCRZf9wyYANMXFeJTysqAe0I4mrherOekFdKMrYvJjLvOIUM9SuwYB5DVZUwwVjJJOaUnZCmcEkIZZrKqNvRGRMvmFZsmhP4VMKCSXBhSqUBxgMS7h0cZvEd71AWkEhGWaeMFcNnpqyJkyXgYL7PQ1MoSq0wDAkRtJIijkZSmqYTiSImfLiSWXIZwhRh3Rug2X0kk1Dgj+Iu43u5p98ghopcpSo0Uyc8SnjlYX59WUeaMoDqmVD2TOWD9a4pCRAzf2ECgwGcrHjPOWY9bNxq/OL3I/QjwEAAAA=") format("woff2");
+}`;
+function ae(s) {
+  const e = document.createElement("style");
+  e.innerHTML = s;
+  const t = document.querySelector("head link[rel=stylesheet], head style");
+  t ? document.head.insertBefore(e, t) : document.head.appendChild(e);
+}
+let I = !1;
+class U {
+  /**
+   * Creates a panel that holds controllers.
+   * @example
+   * new GUI();
+   * new GUI( { container: document.getElementById( 'custom' ) } );
+   *
+   * @param {object} [options]
+   * @param {boolean} [options.autoPlace=true]
+   * Adds the GUI to `document.body` and fixes it to the top right of the page.
+   *
+   * @param {Node} [options.container]
+   * Adds the GUI to this DOM element. Overrides `autoPlace`.
+   *
+   * @param {number} [options.width=245]
+   * Width of the GUI in pixels, usually set when name labels become too long. Note that you can make
+   * name labels wider in CSS with `.lil‑gui { ‑‑name‑width: 55% }`.
+   *
+   * @param {string} [options.title=Controls]
+   * Name to display in the title bar.
+   *
+   * @param {boolean} [options.closeFolders=false]
+   * Pass `true` to close all folders in this GUI by default.
+   *
+   * @param {boolean} [options.injectStyles=true]
+   * Injects the default stylesheet into the page if this is the first GUI.
+   * Pass `false` to use your own stylesheet.
+   *
+   * @param {number} [options.touchStyles=true]
+   * Makes controllers larger on touch devices. Pass `false` to disable touch styles.
+   *
+   * @param {GUI} [options.parent]
+   * Adds this GUI as a child in another GUI. Usually this is done for you by `addFolder()`.
+   */
+  constructor({
+    parent: e,
+    autoPlace: t = e === void 0,
+    container: i,
+    width: r,
+    title: n = "Controls",
+    closeFolders: o = !1,
+    injectStyles: a = !0,
+    touchStyles: l = !0
+  } = {}) {
+    if (this.parent = e, this.root = e ? e.root : this, this.children = [], this.controllers = [], this.folders = [], this._closed = !1, this._hidden = !1, this.domElement = document.createElement("div"), this.domElement.classList.add("lil-gui"), this.$title = document.createElement("button"), this.$title.classList.add("lil-title"), this.$title.setAttribute("aria-expanded", !0), this.$title.addEventListener("click", () => this.openAnimated(this._closed)), this.$title.addEventListener("touchstart", () => {
+    }, { passive: !0 }), this.$children = document.createElement("div"), this.$children.classList.add("lil-children"), this.domElement.appendChild(this.$title), this.domElement.appendChild(this.$children), this.title(n), this.parent) {
+      this.parent.children.push(this), this.parent.folders.push(this), this.parent.$children.appendChild(this.domElement);
+      return;
+    }
+    this.domElement.classList.add("lil-root"), l && this.domElement.classList.add("lil-allow-touch-styles"), !I && a && (ae(oe), I = !0), i ? i.appendChild(this.domElement) : t && (this.domElement.classList.add("lil-auto-place", "autoPlace"), document.body.appendChild(this.domElement)), r && this.domElement.style.setProperty("--width", r + "px"), this._closeFolders = o;
+  }
+  /**
+   * Adds a controller to the GUI, inferring controller type using the `typeof` operator.
+   * @example
+   * gui.add( object, 'property' );
+   * gui.add( object, 'number', 0, 100, 1 );
+   * gui.add( object, 'options', [ 1, 2, 3 ] );
+   *
+   * @param {object} object The object the controller will modify.
+   * @param {string} property Name of the property to control.
+   * @param {number|object|Array} [$1] Minimum value for number controllers, or the set of
+   * selectable values for a dropdown.
+   * @param {number} [max] Maximum value for number controllers.
+   * @param {number} [step] Step value for number controllers.
+   * @returns {Controller}
+   */
+  add(e, t, i, r, n) {
+    if (Object(i) === i)
+      return new ne(this, e, t, i);
+    const o = e[t];
+    switch (typeof o) {
+      case "number":
+        return new re(this, e, t, i, r, n);
+      case "boolean":
+        return new Z(this, e, t);
+      case "string":
+        return new se(this, e, t);
+      case "function":
+        return new O(this, e, t);
+    }
+    console.error(`gui.add failed
+	property:`, t, `
+	object:`, e, `
+	value:`, o);
+  }
+  /**
+   * Adds a color controller to the GUI.
+   * @example
+   * params = {
+   * 	cssColor: '#ff00ff',
+   * 	rgbColor: { r: 0, g: 0.2, b: 0.4 },
+   * 	customRange: [ 0, 127, 255 ],
+   * };
+   *
+   * gui.addColor( params, 'cssColor' );
+   * gui.addColor( params, 'rgbColor' );
+   * gui.addColor( params, 'customRange', 255 );
+   *
+   * @param {object} object The object the controller will modify.
+   * @param {string} property Name of the property to control.
+   * @param {number} rgbScale Maximum value for a color channel when using an RGB color. You may
+   * need to set this to 255 if your colors are too bright.
+   * @returns {Controller}
+   */
+  addColor(e, t, i = 1) {
+    return new ie(this, e, t, i);
+  }
+  /**
+   * Adds a folder to the GUI, which is just another GUI. This method returns
+   * the nested GUI so you can add controllers to it.
+   * @example
+   * const folder = gui.addFolder( 'Position' );
+   * folder.add( position, 'x' );
+   * folder.add( position, 'y' );
+   * folder.add( position, 'z' );
+   *
+   * @param {string} title Name to display in the folder's title bar.
+   * @returns {GUI}
+   */
+  addFolder(e) {
+    const t = new U({ parent: this, title: e });
+    return this.root._closeFolders && t.close(), t;
+  }
+  /**
+   * Recalls values that were saved with `gui.save()`.
+   * @param {object} obj
+   * @param {boolean} recursive Pass false to exclude folders descending from this GUI.
+   * @returns {this}
+   */
+  load(e, t = !0) {
+    return e.controllers && this.controllers.forEach((i) => {
+      i instanceof O || i._name in e.controllers && i.load(e.controllers[i._name]);
+    }), t && e.folders && this.folders.forEach((i) => {
+      i._title in e.folders && i.load(e.folders[i._title]);
+    }), this;
+  }
+  /**
+   * Returns an object mapping controller names to values. The object can be passed to `gui.load()` to
+   * recall these values.
+   * @example
+   * {
+   * 	controllers: {
+   * 		prop1: 1,
+   * 		prop2: 'value',
+   * 		...
+   * 	},
+   * 	folders: {
+   * 		folderName1: { controllers, folders },
+   * 		folderName2: { controllers, folders }
+   * 		...
+   * 	}
+   * }
+   *
+   * @param {boolean} recursive Pass false to exclude folders descending from this GUI.
+   * @returns {object}
+   */
+  save(e = !0) {
+    const t = {
+      controllers: {},
+      folders: {}
+    };
+    return this.controllers.forEach((i) => {
+      if (!(i instanceof O)) {
+        if (i._name in t.controllers)
+          throw new Error(`Cannot save GUI with duplicate property "${i._name}"`);
+        t.controllers[i._name] = i.save();
+      }
+    }), e && this.folders.forEach((i) => {
+      if (i._title in t.folders)
+        throw new Error(`Cannot save GUI with duplicate folder "${i._title}"`);
+      t.folders[i._title] = i.save();
+    }), t;
+  }
+  /**
+   * Opens a GUI or folder. GUI and folders are open by default.
+   * @param {boolean} open Pass false to close.
+   * @returns {this}
+   * @example
+   * gui.open(); // open
+   * gui.open( false ); // close
+   * gui.open( gui._closed ); // toggle
+   */
+  open(e = !0) {
+    return this._setClosed(!e), this.$title.setAttribute("aria-expanded", !this._closed), this.domElement.classList.toggle("lil-closed", this._closed), this;
+  }
+  /**
+   * Closes the GUI.
+   * @returns {this}
+   */
+  close() {
+    return this.open(!1);
+  }
+  _setClosed(e) {
+    this._closed !== e && (this._closed = e, this._callOnOpenClose(this));
+  }
+  /**
+   * Shows the GUI after it's been hidden.
+   * @param {boolean} show
+   * @returns {this}
+   * @example
+   * gui.show();
+   * gui.show( false ); // hide
+   * gui.show( gui._hidden ); // toggle
+   */
+  show(e = !0) {
+    return this._hidden = !e, this.domElement.style.display = this._hidden ? "none" : "", this;
+  }
+  /**
+   * Hides the GUI.
+   * @returns {this}
+   */
+  hide() {
+    return this.show(!1);
+  }
+  openAnimated(e = !0) {
+    return this._setClosed(!e), this.$title.setAttribute("aria-expanded", !this._closed), requestAnimationFrame(() => {
+      const t = this.$children.clientHeight;
+      this.$children.style.height = t + "px", this.domElement.classList.add("lil-transition");
+      const i = (n) => {
+        n.target === this.$children && (this.$children.style.height = "", this.domElement.classList.remove("lil-transition"), this.$children.removeEventListener("transitionend", i));
+      };
+      this.$children.addEventListener("transitionend", i);
+      const r = e ? this.$children.scrollHeight : 0;
+      this.domElement.classList.toggle("lil-closed", !e), requestAnimationFrame(() => {
+        this.$children.style.height = r + "px";
+      });
+    }), this;
+  }
+  /**
+   * Change the title of this GUI.
+   * @param {string} title
+   * @returns {this}
+   */
+  title(e) {
+    return this._title = e, this.$title.textContent = e, this;
+  }
+  /**
+   * Resets all controllers to their initial values.
+   * @param {boolean} recursive Pass false to exclude folders descending from this GUI.
+   * @returns {this}
+   */
+  reset(e = !0) {
+    return (e ? this.controllersRecursive() : this.controllers).forEach((i) => i.reset()), this;
+  }
+  /**
+   * Pass a function to be called whenever a controller in this GUI changes.
+   * @param {function({object:object, property:string, value:any, controller:Controller})} callback
+   * @returns {this}
+   * @example
+   * gui.onChange( event => {
+   * 	event.object     // object that was modified
+   * 	event.property   // string, name of property
+   * 	event.value      // new value of controller
+   * 	event.controller // controller that was modified
+   * } );
+   */
+  onChange(e) {
+    return this._onChange = e, this;
+  }
+  _callOnChange(e) {
+    this.parent && this.parent._callOnChange(e), this._onChange !== void 0 && this._onChange.call(this, {
+      object: e.object,
+      property: e.property,
+      value: e.getValue(),
+      controller: e
+    });
+  }
+  /**
+   * Pass a function to be called whenever a controller in this GUI has finished changing.
+   * @param {function({object:object, property:string, value:any, controller:Controller})} callback
+   * @returns {this}
+   * @example
+   * gui.onFinishChange( event => {
+   * 	event.object     // object that was modified
+   * 	event.property   // string, name of property
+   * 	event.value      // new value of controller
+   * 	event.controller // controller that was modified
+   * } );
+   */
+  onFinishChange(e) {
+    return this._onFinishChange = e, this;
+  }
+  _callOnFinishChange(e) {
+    this.parent && this.parent._callOnFinishChange(e), this._onFinishChange !== void 0 && this._onFinishChange.call(this, {
+      object: e.object,
+      property: e.property,
+      value: e.getValue(),
+      controller: e
+    });
+  }
+  /**
+   * Pass a function to be called when this GUI or its descendants are opened or closed.
+   * @param {function(GUI)} callback
+   * @returns {this}
+   * @example
+   * gui.onOpenClose( changedGUI => {
+   * 	console.log( changedGUI._closed );
+   * } );
+   */
+  onOpenClose(e) {
+    return this._onOpenClose = e, this;
+  }
+  _callOnOpenClose(e) {
+    this.parent && this.parent._callOnOpenClose(e), this._onOpenClose !== void 0 && this._onOpenClose.call(this, e);
+  }
+  /**
+   * Destroys all DOM elements and event listeners associated with this GUI.
+   */
+  destroy() {
+    this.parent && (this.parent.children.splice(this.parent.children.indexOf(this), 1), this.parent.folders.splice(this.parent.folders.indexOf(this), 1)), this.domElement.parentElement && this.domElement.parentElement.removeChild(this.domElement), Array.from(this.children).forEach((e) => e.destroy());
+  }
+  /**
+   * Returns an array of controllers contained by this GUI and its descendents.
+   * @returns {Controller[]}
+   */
+  controllersRecursive() {
+    let e = Array.from(this.controllers);
+    return this.folders.forEach((t) => {
+      e = e.concat(t.controllersRecursive());
+    }), e;
+  }
+  /**
+   * Returns an array of folders contained by this GUI and its descendents.
+   * @returns {GUI[]}
+   */
+  foldersRecursive() {
+    let e = Array.from(this.folders);
+    return this.folders.forEach((t) => {
+      e = e.concat(t.foldersRecursive());
+    }), e;
+  }
+}
+class le {
+  constructor(e, t) {
+    this.editor = e, this.gui = new U({
+      container: t,
+      title: "Hierarchy",
+      touchEventTarget: t,
+      autoPlace: !1
+    }), this.gui.domElement.style.width = "100%", this.gui.domElement.style.height = "auto", this.init(), setInterval(() => this.refresh(), 1e3);
+  }
+  refresh() {
+    const e = this.editor.game.scene || [];
+    this.lastCount !== e.length && (this.lastCount = e.length, this.init());
+  }
+  init() {
+    [...this.gui.children].forEach((n) => n.destroy());
+    const t = this.editor.game.camera;
+    t && this.gui.add({ select: () => this.editor.selectObject(t) }, "select").name("Main Camera");
+    const i = this.editor.game.lightCamera;
+    i && this.gui.add({ select: () => this.editor.selectObject(i) }, "select").name("Light Camera"), (this.editor.game.scene || []).forEach((n, o) => {
+      const a = n.name || `Object ${o}`;
+      this.gui.add({ select: () => this.editor.selectObject(n) }, "select").name(a);
+    });
+  }
+}
+class he {
+  constructor(e, t) {
+    this.editor = e, this.container = t, this.gui = new U({
+      container: t,
+      title: "Inspector",
+      touchEventTarget: t,
+      autoPlace: !1
+    }), this.gui.domElement.style.width = "100%", this.gui.domElement.style.height = "auto", this.selectedObject = null, this.refresh();
+  }
+  inspect(e) {
+    this.selectedObject = e, this.refresh();
+  }
+  refresh() {
+    if ([...this.gui.children].forEach((r) => r.destroy()), !this.selectedObject) {
+      this.gui.add({ status: "No selection" }, "status").name("Object").disable();
+      return;
+    }
+    const t = this.selectedObject, i = t.name || "GameObject";
+    if (t.transform) {
+      const r = t.transform, n = this.gui.addFolder(`Transform: ${i}`), o = n.addFolder("Position");
+      o.add(r.position, "x").step(0.1).listen().name("X"), o.add(r.position, "y").step(0.1).listen().name("Y"), o.add(r.position, "z").step(0.1).listen().name("Z");
+      const a = n.addFolder("Rotation");
+      a.add(r.rotation, "x").step(0.1).listen().name("X"), a.add(r.rotation, "y").step(0.1).listen().name("Y"), a.add(r.rotation, "z").step(0.1).listen().name("Z");
+      const l = n.addFolder("Scale");
+      l.add(r.scale, "x").step(0.1).listen().name("X"), l.add(r.scale, "y").step(0.1).listen().name("Y"), l.add(r.scale, "z").step(0.1).listen().name("Z");
+    }
+    if (t instanceof G) {
+      const r = this.gui.addFolder("Camera Settings");
+      r.add(t, "orthographic").name("Orthographic").onChange(() => t.updateProjection());
+      const n = r.addFolder("Perspective");
+      n.add(t, "fov", 0.1, 3.14).step(0.01).name("FOV").onChange(() => t.updateProjection()), r.addFolder("Orthographic").add(t, "orthoSize", 0.1, 100).step(1).name("Size (Half Height)").onChange(() => t.updateProjection()), r.add(t, "near", 0.01, 10).step(0.01).name("Near Plane").onChange(() => t.updateProjection()), r.add(t, "far", 10.1, 1e3).step(1).name("Far Plane").onChange(() => t.updateProjection()), n.open();
+    }
+    if (t.material) {
+      const r = this.gui.addFolder("Material");
+      r.add(t.material, "name").name("Material Name").disable().listen(), r.add({ select: () => {
+        this.editor.windows.material && (this.editor.windows.material.inspect(t.material), this.editor.windows.material.container.parentElement.style.display = "flex");
+      } }, "select").name("Open in Material Editor");
+    }
+  }
+}
+class de {
+  constructor(e, t) {
+    this.editor = e, this.container = t, this.gui = new U({
+      container: t,
+      title: "Material Editor",
+      touchEventTarget: t,
+      autoPlace: !1
+    }), this.gui.domElement.style.width = "100%", this.gui.domElement.style.height = "auto", this.selectedMaterial = null, this.init();
+  }
+  init() {
+    this.refreshList();
+  }
+  refreshList() {
+    [...this.gui.children].forEach((r) => r.destroy()), this.propertyFolder = null;
+    const t = this.editor.game.materials || {}, i = this.gui.addFolder("Project Materials");
+    for (const r in t) {
+      const n = t[r];
+      i.add({ select: () => this.inspect(n) }, "select").name(r);
+    }
+    this.selectedMaterial ? this.drawMaterialProperties(this.selectedMaterial) : this.gui.add({ info: "Select a material" }, "info").name("Status").disable();
+  }
+  inspect(e) {
+    this.selectedMaterial = e, this.refreshList();
+  }
+  drawMaterialProperties(e) {
+    let t;
+    if (this.propertyFolder ? (t = this.propertyFolder, [...t.children].forEach((r) => r.destroy()), t.title(`Properties: ${e.name || "Unnamed"}`)) : (t = this.gui.addFolder(`Properties: ${e.name || "Unnamed"}`), this.propertyFolder = t), !!e.uniforms)
+      for (const i in e.uniforms) {
+        const r = e.uniforms[i], n = r.value;
+        if (r.type, Array.isArray(n) || n instanceof Float32Array)
+          if (i.toLowerCase().includes("color") && (n.length === 3 || n.length === 4))
+            t.addColor(r, "value").name(i).listen();
+          else {
+            const a = t.addFolder(i), l = ["x", "y", "z", "w"];
+            for (let c = 0; c < n.length; c++) {
+              const h = {
+                get val() {
+                  return n[c];
+                },
+                set val(d) {
+                  n[c] = d;
+                }
+              };
+              a.add(h, "val").step(0.01).name(l[c] || `[${c}]`).listen();
+            }
+          }
+        else if (typeof n == "number") {
+          const o = {
+            get val() {
+              return r.value;
+            },
+            // Access from source object
+            set val(l) {
+              r.value = l;
+            }
+          };
+          let a = t.add(o, "val").name(i);
+          i.toLowerCase().includes("threshold") || i.toLowerCase().includes("factor") ? a = a.min(0).max(1).step(0.01) : a = a.step(0.01), a.listen();
+        } else n instanceof WebGLTexture && t.add({ info: "Texture" }, "info").name(i).disable();
+      }
+  }
+}
+class ce {
+  constructor(e, t) {
+    this.editor = e, this.container = t, this.gui = new U({
+      container: t,
+      title: "Render Passes",
+      touchEventTarget: t,
+      autoPlace: !1
+    }), this.gui.domElement.style.width = "100%", this.gui.domElement.style.height = "auto", this.init();
+  }
+  init() {
+    this.refresh(), setInterval(() => this.updateStats(), 1e3);
+  }
+  refresh() {
+    [...this.gui.children].forEach((i) => i.destroy());
+    const t = this.editor.game.renderQueue;
+    !t || !t.passes || t.passes.forEach((i, r) => {
+      const n = this.gui.addFolder(`${r}: ${i.name || "Pass"}`);
+      if (n.add(i, "enabled").name("Active"), n.add(i, "drawCount").name("Draw Calls").disable().listen(), n.add(i, "executionTime").name("Time (ms)").disable().listen(), i.clearColor) {
+        const l = {
+          get color() {
+            return [i.clearColor[0], i.clearColor[1], i.clearColor[2]];
+          },
+          set color(c) {
+            i.clearColor[0] = c[0], i.clearColor[1] = c[1], i.clearColor[2] = c[2];
+          }
+        };
+        n.addColor(l, "color").name("Clear Color");
+      }
+      i.renderTarget ? n.add({ info: `${i.renderTarget.width}x${i.renderTarget.height}` }, "info").name("Resolution").disable() : n.add({ info: "Screen" }, "info").name("Target").disable(), i.material && n.add({ select: () => {
+        this.editor.windows.material && this.editor.windows.material.inspect(i.material);
+      } }, "select").name("Inspect Material");
+      const o = { show: !1 }, a = n.addFolder("Performance Details");
+      a.add(o, "show").name("List Draw Calls").onChange((l) => {
+        l ? this.showDetails(a, i) : this.clearDetails(a);
+      });
+    });
+  }
+  showDetails(e, t) {
+    if (this.clearDetails(e), !t.drawDetails || t.drawDetails.length === 0) {
+      e.add({ info: "No draw calls" }, "info").name("Status").disable();
+      return;
+    }
+    t.drawDetails.forEach((i, r) => {
+      const n = e.addFolder(`Draw ${r}: ${i.object}`);
+      n.add(i, "material").name("Material").disable(), n.add(i, "shader").name("Shader").disable(), n.add(i, "target").name("Target").disable();
+    });
+  }
+  clearDetails(e) {
+    [...e.children].forEach((i) => {
+      i.property !== "show" && i.destroy();
+    });
+  }
+  updateStats() {
+  }
+}
+class ue {
+  constructor(e, t) {
+    this.editor = e, this.container = t, this.gui = new U({
+      container: t,
+      title: "Engine Profiler",
+      touchEventTarget: t,
+      autoPlace: !1
+    }), this.gui.domElement.style.width = "100%", this.gui.domElement.style.height = "auto", this.stats = {
+      fps: 0,
+      ms: 0,
+      totalDrawCalls: 0,
+      totalPasses: 0
+    }, this.init();
+  }
+  init() {
+    this.gui.add(this.stats, "fps").name("FPS").disable().listen(), this.gui.add(this.stats, "ms").name("Frame Time (ms)").disable().listen(), this.gui.add(this.stats, "totalDrawCalls").name("Total Draw Calls").disable().listen(), this.gui.add(this.stats, "totalPasses").name("Total Passes").disable().listen(), this.passesFolder = this.gui.addFolder("Pass Performance"), this.showPassDetails = !1, this.passesFolder.add(this, "showPassDetails").name("Show Details").onChange(() => this.rebuildPassFolders()), setInterval(() => this.update(), 500);
+  }
+  rebuildPassFolders() {
+    if ([...this.passesFolder.children].forEach((i) => {
+      i.property !== "showPassDetails" && i.destroy();
+    }), !this.showPassDetails) return;
+    const t = this.editor.game;
+    t.renderQueue && t.renderQueue.passes && t.renderQueue.passes.forEach((i) => {
+      const r = this.passesFolder.addFolder(i.name || "Pass");
+      r.add(i, "drawCount").name("Draw Calls").disable().listen(), r.add(i, "executionTime").name("Perf (ms)").disable().listen(), r.add(i, "enabled").name("Active").disable().listen();
+    });
+  }
+  update() {
+    const e = this.editor.game;
+    if (!e) return;
+    this.stats.fps = Math.round(1 / (this.editor.game.deltaTime || 0.016)), this.stats.ms = ((this.editor.game.deltaTime || 0.016) * 1e3).toFixed(2);
+    let t = 0;
+    e.renderQueue && e.renderQueue.passes && (this.stats.totalPasses = e.renderQueue.passes.length, e.renderQueue.passes.forEach((i) => {
+      t += i.drawCount || 0;
+    })), this.stats.totalDrawCalls = t, e.renderQueue.passes.forEach((i) => {
+      `${i.name}${i.drawCount}`;
+    });
+  }
+}
+class Ye {
+  constructor(e) {
+    this.game = e, this.wm = new q(), this.windows = {}, this.initWindows();
+  }
+  initWindows() {
+    const e = this.wm.createWindow("Hierarchy", 20, 20, 250, 400);
+    this.windows.hierarchy = new le(this, e.content), this.wm.addNavItem("HIERARCHY", e.window), e.window.style.display = "none";
+    const t = this.wm.createWindow("Inspector", 290, 20, 320, 500);
+    this.windows.inspector = new he(this, t.content), this.wm.addNavItem("INSPECTOR", t.window), t.window.style.display = "none";
+    const i = this.wm.createWindow("Materials", 630, 20, 320, 500);
+    this.windows.material = new de(this, i.content), this.wm.addNavItem("MATERIALS", i.window), i.window.style.display = "none";
+    const r = this.wm.createWindow("Render Passes", 970, 20, 320, 500);
+    this.windows.renderPass = new ce(this, r.content), this.wm.addNavItem("PASSES", r.window), r.window.style.display = "none";
+    const n = this.wm.createWindow("Profiler", 20, 440, 250, 250);
+    this.windows.profiler = new ue(this, n.content), this.wm.addNavItem("PROFILER", n.window), n.window.style.display = "none";
+    let o = ["Final"];
+    this.game.viewportPass && this.game.viewportPass.buffers && (o = Object.keys(this.game.viewportPass.buffers)), this.wm.addNavSelect(o, (a) => {
+      this.game.setViewports(a);
+    }), this.setupShortcuts();
+  }
+  setupShortcuts() {
+    window.addEventListener("keydown", (e) => {
+      e.key.toLowerCase() === "h" && this.wm.toggleVisibility();
+    });
+  }
+  selectObject(e) {
+    e && (this.windows.inspector.inspect(e), this.windows.inspector.gui.parentElement.style.display === "none" && (this.windows.inspector.gui.parentElement.style.display = "block"));
+  }
+  update() {
+  }
+}
+const fe = `attribute vec4 aVertexPosition;\r
+attribute vec2 aTexCoord;\r
+\r
+uniform mat4 uViewMatrix;\r
+uniform mat4 uProjectionMatrix;\r
+uniform mat4 uModelMatrix;\r
+\r
+varying highp vec2 vTexCoord;\r
+\r
+void main() {\r
+    gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aVertexPosition;\r
+    vTexCoord = aTexCoord;\r
+}\r
+`, me = `precision highp float;\r
+varying highp vec2 vTexCoord;\r
+uniform highp vec4 uColor;\r
+\r
+void main() {\r
+    gl_FragColor = uColor;\r
+}\r
+`, pe = `precision highp float;\r
+\r
+attribute vec2 aVertexPosition;\r
+attribute vec2 aTexCoord;\r
+\r
+varying vec2 vTexCoord;\r
+\r
+void main() {\r
+    // Just forward texture coordinates, no transforms needed for screen-space quad\r
+    gl_Position = vec4(aVertexPosition.x, aVertexPosition.y, 0.0, 1.0);\r
+    vTexCoord = aTexCoord;\r
+}\r
+`, ge = `precision highp float;\r
+\r
+varying vec2 vTexCoord;\r
+uniform sampler2D uTexture;\r
+uniform sampler2D uOverlay; // Optional outline texture\r
+uniform float uUseOverlay;   // Toggle overlay blending (float 0.0 or 1.0)\r
+\r
+void main() {\r
+    vec4 baseColor = texture2D(uTexture, vTexCoord);\r
+    \r
+    if (uUseOverlay > 0.5) {\r
+        vec4 overlayColor = texture2D(uOverlay, vTexCoord);\r
+        // Simple alpha blend: overlay over base\r
+        gl_FragColor = vec4(mix(baseColor.rgb, overlayColor.rgb, overlayColor.a), baseColor.a);\r
+    } else {\r
+        gl_FragColor = baseColor;\r
+    }\r
+}\r
+`, ve = `precision highp float;\r
+\r
+attribute vec4 aVertexPosition;\r
+\r
+uniform mat4 uModelMatrix;\r
+uniform mat4 uViewMatrix;\r
+uniform mat4 uProjectionMatrix;\r
+\r
+void main() {\r
+    gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aVertexPosition;\r
+}\r
+`, xe = `precision highp float;\r
+\r
+void main() {\r
+    float near = 0.1; \r
+    float far = 100.0; \r
+  \r
+    float z = gl_FragCoord.z * 2.0 - 1.0; // Back to NDC \r
+    float linearDepth = (2.0 * near * far) / (far + near - z * (far - near)); // Linearize\r
+  \r
+    linearDepth /= far; // Normalize to [0, 1] range\r
+\r
+    gl_FragColor = vec4(vec3(linearDepth), 1.0);\r
+}\r
+`, we = `precision highp float;\r
+\r
+attribute vec4 aVertexPosition;\r
+attribute vec3 aVertexNormal;\r
+\r
+uniform mat4 uModelMatrix;\r
+uniform mat4 uViewMatrix;\r
+uniform mat4 uProjectionMatrix;\r
+\r
+varying vec3 vWorldPos;\r
+\r
+void main() {\r
+    vec4 worldPos = uModelMatrix * aVertexPosition;\r
+    vWorldPos = worldPos.xyz;\r
+    gl_Position = uProjectionMatrix * uViewMatrix * worldPos;\r
+}\r
+`, be = `#extension GL_OES_standard_derivatives : enable\r
+precision highp float;\r
+\r
+varying vec3 vWorldPos;\r
+\r
+void main() {\r
+    // Calculate face normal using derivatives of world position\r
+    vec3 dx = dFdx(vWorldPos);\r
+    vec3 dy = dFdy(vWorldPos);\r
+    vec3 normal = normalize(cross(dx, dy));\r
+    \r
+    // Remap to 0-1 range for visualization\r
+    gl_FragColor = vec4(normal * 0.5 + 0.5, 1.0);\r
+}\r
+`, ye = `precision highp float;\r
+\r
+varying vec2 vTexCoord;\r
+\r
+uniform sampler2D uDepthTexture;\r
+uniform sampler2D uNormalTexture;\r
+uniform sampler2D uSceneTexture;\r
+\r
+uniform vec2 uResolution;\r
+\r
+// Tunable Uniforms\r
+uniform float uDepthThreshold;\r
+uniform float uNormalThreshold;\r
+uniform float uThickness;\r
+uniform vec4 uOutlineColor;\r
+\r
+void main() {\r
+    // Determine thickness scale\r
+    float thickness = uThickness > 0.0 ? uThickness : 1.0;\r
+    vec2 texelSize = (1.0 / uResolution) * thickness;\r
+\r
+    // Default fallbacks if uniform is 0 (optional, but good for safety)\r
+    float dThresh = uDepthThreshold > 0.0 ? uDepthThreshold : 0.5; \r
+    float nThresh = uNormalThreshold > 0.0 ? uNormalThreshold : 0.4;\r
+\r
+    // 1. Sample Center\r
+    float depthCenter = texture2D(uDepthTexture, vTexCoord).r;\r
+    vec3 normalCenter = texture2D(uNormalTexture, vTexCoord).rgb;\r
+\r
+    // 2. Sample Neighbors (Top, Right) for finite difference\r
+    vec2 uvTop = vTexCoord + vec2(0.0, texelSize.y);\r
+    vec2 uvRight = vTexCoord + vec2(texelSize.x, 0.0);\r
+\r
+    float depthTop = texture2D(uDepthTexture, uvTop).r;\r
+    float depthRight = texture2D(uDepthTexture, uvRight).r;\r
+\r
+    vec3 normalTop = texture2D(uNormalTexture, uvTop).rgb;\r
+    vec3 normalRight = texture2D(uNormalTexture, uvRight).rgb;\r
+\r
+    // 3. Compute Differences\r
+    // Depth: simple derivative magnitude\r
+    float depthDiff0 = depthCenter - depthTop;\r
+    float depthDiff1 = depthCenter - depthRight;\r
+    // Scale by 100 to make depth differences more significant relative to threshold\r
+    float edgeDepth = sqrt(pow(depthDiff0, 2.0) + pow(depthDiff1, 2.0)) * 100.0;\r
+    \r
+    // Normal: distance between normal vectors\r
+    vec3 normalDiff0 = normalCenter - normalTop;\r
+    vec3 normalDiff1 = normalCenter - normalRight;\r
+    float edgeNormal = sqrt(dot(normalDiff0, normalDiff0) + dot(normalDiff1, normalDiff1));\r
+\r
+    // 4. Thresholding\r
+    float edge = 0.0;\r
+    if (edgeDepth > dThresh) { edge = 1.0; }\r
+    if (edgeNormal > nThresh) { edge = 1.0; }\r
+\r
+    // 5. Output Outline Only\r
+    // Transparent where no edge\r
+    gl_FragColor = vec4(uOutlineColor.rgb, uOutlineColor.a * edge);\r
+}\r
+`, Ce = `precision highp float;\r
+\r
+varying highp vec2 vTexCoord;\r
+\r
+uniform highp float uTime; \r
+uniform highp float uSpeed; \r
+uniform vec2 uWind;  \r
+uniform float uScale;\r
+\r
+uniform vec3 uColor1; \r
+uniform vec3 uColor2; \r
+uniform vec3 uColor3; \r
+\r
+vec2 hash(vec2 p) {\r
+    p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));\r
+    return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);\r
+}\r
+\r
+float gradientNoise(vec2 p) {\r
+    vec2 i = floor(p);\r
+    vec2 f = fract(p);\r
+    vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);\r
+    float a = dot(hash(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0));\r
+    float b = dot(hash(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0));\r
+    float c = dot(hash(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0));\r
+    float d = dot(hash(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0));\r
+    return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);\r
+}\r
+\r
+void main() {\r
+    float time = uTime * uSpeed;\r
+    vec2 movement = uWind * time;\r
+\r
+    // Layer 1: The Macro "Gust" (Very large, slow-moving shadows)\r
+    float n1 = gradientNoise((vTexCoord * uScale * 0.25) + (movement * 0.3));\r
+    \r
+    // Layer 2: The "Tuft" (Medium scale, standard waving)\r
+    float n2 = gradientNoise((vTexCoord * uScale * 1.5) + movement);\r
+    \r
+    // Layer 3: The "Jitter" (High frequency, moves slightly faster)\r
+    // We rotate the wind vector slightly for this layer to create "cross-winds"\r
+    vec2 jitterMovement = vec2(movement.y, -movement.x) * 1.5; \r
+    float n3 = gradientNoise((vTexCoord * uScale * 4.0) + jitterMovement);\r
+\r
+    // Combine them with weighted averages\r
+    // 20% big gust, 50% main tuft, 30% jitter detail\r
+    float n = (n1 * 0.2) + (n2 * 0.5) + (n3 * 0.3);\r
+    \r
+    // Smoothstep creates that "hand-painted" clumped look\r
+    // Using a tighter range (e.g. -0.3 to 0.4) makes the grass "edges" sharper\r
+    n = smoothstep(-0.4, 0.4, n);\r
+\r
+    vec3 finalColor;\r
+    if (n < 0.5) {\r
+        finalColor = mix(uColor1, uColor2, n * 2.0);\r
+    } else {\r
+        finalColor = mix(uColor2, uColor3, (n - 0.5) * 2.0);\r
+    }\r
+\r
+    gl_FragColor = vec4(finalColor, 1.0);\r
+}   `, Ee = `precision highp float;\r
+\r
+attribute vec2 aVertexPosition;\r
+attribute vec2 aTexCoord;\r
+\r
+varying vec2 vUv;\r
+\r
+void main() {\r
+    vUv = aTexCoord;\r
+    gl_Position = vec4(aVertexPosition, 0.0, 1.0);\r
+}\r
+`, Te = `precision highp float;\r
+\r
+varying vec2 vUv;\r
+\r
+uniform sampler2D uSceneTexture;\r
+uniform sampler2D uNormalTexture;\r
+uniform sampler2D uDepthTexture;\r
+\r
+// Shadows & Transform\r
+uniform sampler2D uShadowMap;\r
+uniform mat4 uInverseViewProjection;\r
+uniform mat4 uLightSpaceMatrix;\r
+uniform vec3 uCameraPos; \r
+uniform float uTime; // Optional for noise\r
+\r
+uniform vec3 uLightDir;\r
+uniform vec3 uLightColor;\r
+uniform float uAmbient;\r
+\r
+// --- SPECULAR UNIFORMS ---\r
+uniform float uSpecularStrength;\r
+uniform float uShininess;\r
+\r
+// --- VOLUMETRIC UNIFORMS ---\r
+uniform float uVolumetricSteps;\r
+uniform float uVolumetricIntensity; \r
+uniform float uVolumetricScattering; \r
+\r
+const int MAX_VOLUMETRIC_STEPS = 50; // Hard limit for loop\r
+\r
+// Helper for shadow check without bias issues inside volume\r
+float isLit(vec3 pos) {\r
+    vec4 posLightSpace = uLightSpaceMatrix * vec4(pos, 1.0);\r
+    vec3 projCoords = posLightSpace.xyz / posLightSpace.w;\r
+    projCoords = projCoords * 0.5 + 0.5;\r
+    \r
+    if (projCoords.z > 1.0 || projCoords.x < 0.0 || projCoords.x > 1.0 || projCoords.y < 0.0 || projCoords.y > 1.0) \r
+        return 0.0; // Outside light cone\r
+\r
+    float closestDepth = texture2D(uShadowMap, projCoords.xy).r; \r
+    float currentDepth = projCoords.z;\r
+    \r
+    // Slightly larger bias for volume sampling to avoid self-shadowing acne in air\r
+    float bias = 0.01; \r
+    \r
+    return currentDepth - bias > closestDepth ? 0.0 : 1.0; // 1.0 = Lit, 0.0 = Shadow\r
+}\r
+\r
+vec3 calculateVolumetricLight(vec3 startPos, vec3 endPos) {\r
+    vec3 rayVector = endPos - startPos;\r
+    float rayLength = length(rayVector);\r
+    vec3 rayDir = rayVector / rayLength;\r
+    \r
+    // Max distance for volumetric fog\r
+    float maxDist = 50.0;\r
+    if(rayLength > maxDist) {\r
+        rayLength = maxDist;\r
+    }\r
+    \r
+    float stepSize = rayLength / uVolumetricSteps;\r
+    vec3 currentPos = startPos;\r
+    \r
+    // Simple dither to break banding (using UV)\r
+    float dither = fract(sin(dot(vUv, vec2(12.9898, 78.233))) * 43758.5453);\r
+    currentPos += rayDir * stepSize * dither;\r
+\r
+    float accumulation = 0.0;\r
+\r
+    for(int i = 0; i < MAX_VOLUMETRIC_STEPS; i++) {\r
+        if(float(i) >= uVolumetricSteps) break;\r
+        accumulation += isLit(currentPos);\r
+        currentPos += rayDir * stepSize;\r
+    }\r
+    \r
+    accumulation /= uVolumetricSteps;\r
+    \r
+    // Scattering phase function (simple isotropic for now)\r
+    // float phase = 1.0 / (4.0 * 3.14159); \r
+    \r
+    return uLightColor * accumulation * uVolumetricIntensity; // * phase;\r
+}\r
+\r
+vec3 getWorldPosition(vec2 uv, float depth) {\r
+    float near = 0.1;\r
+    float far = 100.0;\r
+    float linearDepth = depth * far;\r
+    \r
+    float z_ndc = 1.0; \r
+    if (linearDepth > 0.0001) {\r
+        z_ndc = (far + near - (2.0 * near * far) / linearDepth) / (far - near);\r
+    }\r
+    \r
+    vec4 clipSpacePosition = vec4(uv * 2.0 - 1.0, z_ndc, 1.0);\r
+    vec4 worldPosition = uInverseViewProjection * clipSpacePosition;\r
+    \r
+    return worldPosition.xyz / worldPosition.w;\r
+}\r
+\r
+float calculateShadow(vec3 worldPos) {\r
+    vec4 posLightSpace = uLightSpaceMatrix * vec4(worldPos, 1.0);\r
+    vec3 projCoords = posLightSpace.xyz / posLightSpace.w;\r
+    projCoords = projCoords * 0.5 + 0.5;\r
+    \r
+    if (projCoords.z > 1.0 || projCoords.x < 0.0 || projCoords.x > 1.0 || projCoords.y < 0.0 || projCoords.y > 1.0) \r
+        return 0.0;\r
+\r
+    float closestDepth = texture2D(uShadowMap, projCoords.xy).r; \r
+    float currentDepth = projCoords.z;\r
+    float bias = 0.005; \r
+    \r
+    return currentDepth - bias > closestDepth ? 1.0 : 0.0;\r
+}\r
+\r
+void main() {\r
+    vec4 sceneColor = texture2D(uSceneTexture, vUv);\r
+    vec3 normalOrig = texture2D(uNormalTexture, vUv).rgb;\r
+    float depthVal = texture2D(uDepthTexture, vUv).r;\r
+    \r
+    // 1. Reconstruct World Position\r
+    vec3 worldPos = getWorldPosition(vUv, depthVal);\r
+\r
+    // 2. Vectors\r
+    vec3 N = normalize(normalOrig * 2.0 - 1.0);\r
+    vec3 L = normalize(uLightDir);\r
+    vec3 V = normalize(uCameraPos - worldPos); // View Direction\r
+    vec3 H = normalize(L + V);                // Halfway Vector (Blinn-Phong)\r
+\r
+    // 3. Diffuse Component\r
+    float diff = max(dot(N, L), 0.0);\r
+    \r
+    // 4. Specular Component\r
+    // Only calculate specular if the surface is facing the light (diff > 0)\r
+    float spec = pow(max(dot(N, H), 0.0), uShininess);\r
+    vec3 specular = uSpecularStrength * spec * uLightColor;\r
+    \r
+    // 5. Shadow Calculation\r
+    float shadow = calculateShadow(worldPos);\r
+    \r
+    // 6. Volumetric Lighting\r
+    vec3 volumeLight = calculateVolumetricLight(uCameraPos, worldPos);\r
+\r
+    // 7. Final Radiance Calculation\r
+    vec3 ambient = uAmbient * uLightColor;\r
+    vec3 diffuse = diff * uLightColor;\r
+    \r
+    // Shadow affects both Diffuse and Specular, but not Ambient\r
+    vec3 lightContribution = (1.0 - shadow) * (diffuse + specular);\r
+    \r
+    // Add volumetric light (additive blending)\r
+    vec3 radiance = (ambient + lightContribution) * sceneColor.rgb + volumeLight;\r
+\r
+    gl_FragColor = vec4(radiance, sceneColor.a);\r
+}`, _e = `precision highp float;\r
+\r
+attribute vec4 aVertexPosition;\r
+\r
+uniform mat4 uModelMatrix;\r
+uniform mat4 uViewMatrix;\r
+uniform mat4 uProjectionMatrix;\r
+\r
+void main() {\r
+    gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aVertexPosition;\r
+}\r
+`, Fe = `precision highp float;\r
+\r
+void main() {\r
+    gl_FragColor = vec4(gl_FragCoord.z, gl_FragCoord.z, gl_FragCoord.z, 1.0);\r
+}\r
+`, De = `precision highp float;\r
+\r
+varying vec2 vTexCoord;\r
+\r
+uniform sampler2D uDepthTexture;\r
+uniform mat4 uInverseViewProjection;\r
+uniform vec3 uCameraPos;\r
+uniform vec3 uLightDir;\r
+uniform float uTime;\r
+\r
+uniform vec3 uTopColor;\r
+uniform vec3 uBottomColor;\r
+uniform vec3 uSunColor;\r
+\r
+// --- STYLIZED UNIFORMS ---\r
+uniform float uCloudScale;\r
+uniform float uCloudThreshold; \r
+uniform float uCloudDensity;    // Global Opacity (0.0 to 1.0)\r
+uniform float uCloudCoverage;   // Higher = more clusters appear\r
+uniform float uCloudSpeed;\r
+uniform vec3  uCloudMainColor;\r
+uniform vec3  uCloudShadeColor; \r
+\r
+vec2 hash22(vec2 p) {\r
+    p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));\r
+    return fract(sin(p) * 43758.5453123);\r
+}\r
+\r
+float worley(vec2 p) {\r
+    vec2 n = floor(p);\r
+    vec2 f = fract(p);\r
+    float minDist = 1.0;\r
+    for (int y = -1; y <= 1; y++) {\r
+        for (int x = -1; x <= 1; x++) {\r
+            vec2 g = vec2(float(x), float(y));\r
+            vec2 o = hash22(n + g);\r
+            o = 0.5 + 0.5 * sin(uTime * uCloudSpeed + 6.2831 * o);\r
+            vec2 r = g + o - f;\r
+            float d = dot(r, r);\r
+            minDist = min(minDist, d);\r
+        }\r
+    }\r
+    return 1.0 - sqrt(minDist);\r
+}\r
+\r
+void main() {\r
+    float depth = texture2D(uDepthTexture, vTexCoord).r;\r
+    if (depth < 0.99) discard;\r
+\r
+    vec4 clipPos = vec4(vTexCoord * 2.0 - 1.0, 1.0, 1.0);\r
+    vec4 worldPosH = uInverseViewProjection * clipPos;\r
+    vec3 worldPos = worldPosH.xyz / worldPosH.w;\r
+    vec3 dir = normalize(worldPos - uCameraPos);\r
+\r
+    // 1. Sky Gradient\r
+    vec3 skyColor = mix(uBottomColor, uTopColor, smoothstep(-0.1, 0.8, dir.y));\r
+\r
+    // 2. Spherical Cloud Logic\r
+    vec2 cloudUV = dir.xz / (max(dir.y, 0.01) + 0.2); \r
+    vec2 wind = vec2(uTime * uCloudSpeed);\r
+    \r
+    float n = worley((cloudUV + wind) * uCloudScale);\r
+    \r
+    // --- DENSITY CONTROL ---\r
+    // Subtracting coverage from the noise value determines "how many" spheres survive\r
+    float baseMask = n - (1.0 - uCloudCoverage);\r
+    float cloudMask = smoothstep(uCloudThreshold, uCloudThreshold + 0.02, baseMask);\r
+    \r
+    // Fade out at horizon and apply global density/opacity\r
+    cloudMask *= smoothstep(0.0, 0.15, dir.y);\r
+    float finalOpacity = cloudMask * uCloudDensity;\r
+\r
+    // 3. Cel-Shaded Volume\r
+    float shadowMask = smoothstep(uCloudThreshold + 0.1, uCloudThreshold + 0.12, baseMask);\r
+    \r
+    // 4. Directional Rim Light\r
+    float lightN = worley((cloudUV + wind + normalize(uLightDir.xz) * 0.1) * uCloudScale) - (1.0 - uCloudCoverage);\r
+    float rimLight = smoothstep(uCloudThreshold, uCloudThreshold + 0.05, lightN);\r
+    \r
+    vec3 cloudCol = mix(uCloudShadeColor, uCloudMainColor, shadowMask);\r
+    \r
+    float sunDot = max(dot(dir, normalize(uLightDir)), 0.0);\r
+    cloudCol += uSunColor * pow(sunDot, 15.0) * rimLight * 0.5;\r
+\r
+\r
+    // 5. Final Composition using the Opacity factor\r
+    vec3 color = mix(skyColor, cloudCol, finalOpacity);\r
+\r
+    // Stylized Sun\r
+    float sunDisk = smoothstep(0.998, 0.999, sunDot); \r
+    color += uSunColor * sunDisk * 1.5;\r
+    \r
+    gl_FragColor = vec4(color, 1.0);\r
+}`, Ae = `precision highp float;\r
+\r
+varying vec2 vTexCoord;\r
+\r
+uniform sampler2D uSceneTexture;\r
+uniform sampler2D uNormalTexture;\r
+uniform sampler2D uDepthTexture;\r
+\r
+uniform float uPixelSize;\r
+uniform float uColorLevels;\r
+uniform vec2 uResolution;\r
+\r
+// Fine-tuned thresholds\r
+uniform float uDepthThreshold;\r
+uniform float uNormalThreshold;\r
+\r
+// Color modifiers for edges\r
+uniform float uSilhouetteDarkening; // Very dark for outer edges\r
+uniform float uCreaseDarkening;     // Subtler darkening for inner corners\r
+\r
+void main() {\r
+    // 1. PIXELATION\r
+    vec2 size = uResolution / uPixelSize;\r
+    vec2 uv = floor(vTexCoord * size) / size;\r
+    vec2 texelSize = 1.0 / size;\r
+\r
+    // 2. SAMPLING\r
+    float depthCenter = texture2D(uDepthTexture, uv).r;\r
+    vec3 normalCenter = texture2D(uNormalTexture, uv).rgb * 2.0 - 1.0;\r
+    vec4 sceneColor = texture2D(uSceneTexture, uv);\r
+\r
+    // Quantize scene color early so edge colors are based on the "flat" art style\r
+    vec3 quantizedColor = floor(sceneColor.rgb * uColorLevels) / uColorLevels;\r
+\r
+    float depthEdge = 0.0;\r
+    float normalEdge = 0.0;\r
+\r
+    // 3. EDGE DETECTION LOOP\r
+    vec2 offsets[4];\r
+    offsets[0] = vec2(1.0, 0.0);\r
+    offsets[1] = vec2(-1.0, 0.0);\r
+    offsets[2] = vec2(0.0, 1.0);\r
+    offsets[3] = vec2(0.0, -1.0);\r
+\r
+    for(int i = 0; i < 4; i++) {\r
+        vec2 neighborUV = uv + offsets[i] * texelSize;\r
+        \r
+        // Depth logic\r
+        float depthNeighbor = texture2D(uDepthTexture, neighborUV).r;\r
+        depthEdge = max(depthEdge, abs(depthCenter - depthNeighbor));\r
+\r
+        // Normal logic\r
+        vec3 normalNeighbor = texture2D(uNormalTexture, neighborUV).rgb * 2.0 - 1.0;\r
+        normalEdge = max(normalEdge, (1.0 - dot(normalCenter, normalNeighbor)));\r
+    }\r
+\r
+    // 4. ADAPTIVE COLOR LOGIC\r
+    vec3 finalColor = quantizedColor;\r
+\r
+    // Is it an internal crease? (Normal-based)\r
+    if (normalEdge > uNormalThreshold) {\r
+        // Darken the surface color rather than making it black\r
+        finalColor = quantizedColor * uCreaseDarkening;\r
+    }\r
+\r
+    // Is it a silhouette? (Depth-based)\r
+    // We do this second so silhouette (outer) edges override crease (inner) edges\r
+    if (depthEdge > uDepthThreshold) {\r
+        // Use a much heavier darkening for the outer silhouette\r
+        finalColor = quantizedColor * uSilhouetteDarkening;\r
+    }\r
+\r
+    gl_FragColor = vec4(finalColor, 1.0);\r
+}`, Se = `attribute vec4 aVertexPosition;\r
+attribute vec2 aTexCoord;\r
+\r
+uniform mat4 uViewMatrix;\r
+uniform mat4 uProjectionMatrix;\r
+uniform mat4 uModelMatrix;\r
+\r
+uniform lowp float uTime; \r
+uniform lowp float uSpeed; \r
+uniform vec2 uWind;  \r
+uniform float uScale;\r
+uniform float udisplacement;\r
+\r
+\r
+varying lowp vec2 vTexCoord;\r
+varying lowp float vNoise;\r
+varying vec3 vWorldPos;\r
+\r
+// Noise functions must be in both or shared via an include\r
+vec2 hash(vec2 p) {\r
+    p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));\r
+    return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);\r
+}\r
+\r
+\r
+float gradientNoise(vec2 p) {\r
+    vec2 i = floor(p);\r
+    vec2 f = fract(p);\r
+    vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);\r
+    float a = dot(hash(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0));\r
+    float b = dot(hash(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0));\r
+    float c = dot(hash(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0));\r
+    float d = dot(hash(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0));\r
+    return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);\r
+}\r
+\r
+void main() {\r
+    vec4 worldPos = uModelMatrix * aVertexPosition;\r
+    \r
+    float time = uTime * uSpeed;\r
+    vec2 movement = uWind * time;\r
+\r
+    // Use World Position XZ for noise so displacement is seamless across objects\r
+    vec2 noiseCoord = worldPos.xz * uScale;\r
+\r
+    float n1 = gradientNoise((noiseCoord * 0.25) + (movement * 0.3));\r
+    float n2 = gradientNoise((noiseCoord * 1.5) + movement);\r
+    vec2 jitterMovement = vec2(movement.y, -movement.x) * 1.5; \r
+    float n3 = gradientNoise((noiseCoord * 4.0) + jitterMovement);\r
+\r
+    float n = (n1 * 0.2) + (n2 * 0.5) + (n3 * 0.3);\r
+    vNoise = smoothstep(-0.4, 0.4, n);\r
+\r
+    // Displace the Y position based on noise\r
+    worldPos.y += vNoise * udisplacement; // Adjust '2.0' for displacement strength\r
+\r
+    gl_Position = uProjectionMatrix * uViewMatrix * worldPos;\r
+    \r
+    vTexCoord = aTexCoord;\r
+    vWorldPos = worldPos.xyz;\r
+}`, Me = `precision lowp float;\r
+\r
+varying lowp vec2 vTexCoord;\r
+varying lowp float vNoise;\r
+varying vec3 vWorldPos;\r
+\r
+uniform vec3 uColor1; \r
+uniform vec3 uColor2; \r
+uniform vec3 uColor3; \r
+\r
+void main() {\r
+    float n = clamp(vNoise, 0.0, 1.0);\r
+\r
+    // 1. Create a smooth transition for the first blend (Deep to Shallow)\r
+    // This blend happens between 0.0 and 0.6\r
+    float blend1 = smoothstep(0.0, 0.6, n);\r
+    vec3 waterBase = mix(uColor1, uColor2, blend1);\r
+\r
+    // 2. Create a smooth transition for the second blend (Shallow to Foam)\r
+    // This blend starts late (at 0.7) and ends at the peak (1.0)\r
+    float blend2 = smoothstep(0.7, 1.0, n);\r
+    vec3 finalColor = mix(waterBase, uColor3, blend2);\r
+\r
+    gl_FragColor = vec4(finalColor, 1.0);\r
+}`, Ge = {
+  quadVert: fe,
+  quadFrag: me,
+  quadScreenVert: pe,
+  quadScreenFrag: ge,
+  depthVert: ve,
+  depthFrag: xe,
+  normalVert: we,
+  normalFrag: be,
+  outlineFrag: ye,
+  noiseFrag: Ce,
+  lightingVert: Ee,
+  lightingFrag: Te,
+  shadowVert: _e,
+  shadowFrag: Fe,
+  skyboxFrag: De,
+  pixelArtFrag: Ae,
+  waterVert: Se,
+  waterFrag: Me
+};
+export {
+  G as Camera,
+  Re as CameraController,
+  Ye as Editor,
+  j as FullScreenQuad,
+  X as GameObject,
+  le as HierarchyWindow,
+  he as InspectorWindow,
+  je as LightingPass,
+  $e as Material,
+  de as MaterialWindow,
+  N as Mesh,
+  Le as ObjLoader,
+  Ie as ObjectRenderPass,
+  Xe as OutlinePass,
+  We as PixelArtPass,
+  Ue as ProfilerInstrumenter,
+  ue as ProfilerWindow,
+  z as RenderPass,
+  ce as RenderPassWindow,
+  ze as RenderQueue,
+  Ve as RenderTarget,
+  ke as Renderer,
+  k as ScreenRenderPass,
+  Oe as Shader,
+  Ge as Shaders,
+  He as SkyboxPass,
+  Be as Texture,
+  Pe as Time,
+  H as Transform,
+  V as Vector3,
+  Ne as ViewportPass,
+  q as WindowManager
+};