@cruxgarden/plasma-ui 0.2.2 → 0.2.4

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 0.2.4
+
+- **Fixed:** the field stopped rendering after a window resize and never came
+  back. Two causes, both now addressed. A drag-resize reallocated the eight
+  render targets once per distinct size — 88 allocations across a 60-step drag
+  in the repro — and the driver dropped the WebGL context under it. And there
+  was no `webglcontextlost` / `webglcontextrestored` handling at all, so once
+  the context went, the frame loop kept running against a dead context
+  forever. The resize now settles before reallocating (88 allocations became
+  8, and the context survives), and a lost context is caught, restored and
+  fully rebuilt. `preventDefault` on the loss event is what asks the browser
+  to attempt the restore in the first place.
+- **Fixed:** the field never rendered at all under React StrictMode. `destroy()`
+  called `WEBGL_lose_context.loseContext()`, but the `<canvas>` belongs to the
+  host component and outlives the renderer, so the remount StrictMode performs
+  in development got a context that could never draw again. Cleanup now
+  deletes its own textures, framebuffers, programs and buffer and leaves the
+  canvas usable. A renderer replacing another on the same canvas also zeroes
+  the canvas size, so the next allocation is never skipped as a no-op — that
+  skip left the multi-target framebuffer with no attachments and drew
+  "Framebuffer is incomplete".
+
 ## 0.2.1
 
 Fixes for the reports that came in after 0.2.0, and one new option.

package/dist/index.js

@@ -419,13 +419,18 @@ var _PlasmaRenderer = class _PlasmaRenderer {
     this.imgSrc = null;
     this.bgColor = null;
     this.srcEl = null;
+    // re-uploaded each frame
+    this.floatOK = false;
+    /** True between webglcontextlost and webglcontextrestored: draw nothing. */
+    this.lost = false;
+    /** Everything initGL() created, so destroy() can free it by hand. */
+    this.owned = { tex: [], fb: [], prog: [], buf: [] };
     this.recs = /* @__PURE__ */ new Map();
     this.nextId = 1;
     this.raf = 0;
     this.last = 0;
     this.time = 0;
     this.dpr = 1;
-    this.resizeQueued = false;
     /** Coarse pointer = touch. Only there does a fling run on the compositor with rAF deferred. */
     this.coarse = typeof matchMedia === "function" && matchMedia("(pointer: coarse)").matches;
     this.frozen = false;
@@ -450,6 +455,26 @@ var _PlasmaRenderer = class _PlasmaRenderer {
     this.lightQuery = typeof matchMedia !== "undefined" ? matchMedia("(prefers-color-scheme: light)") : null;
     this.tintCache = /* @__PURE__ */ new Map();
     this.RP = new Float32Array(MAX_PULSES * 4);
+    /**
+     * A drag-resize reallocates eight render targets per distinct size, and the
+     * driver can drop the context under that. Without these two handlers the
+     * field simply stopped: the frame loop kept running against a dead context
+     * and nothing ever brought it back. preventDefault is what asks the browser
+     * to attempt a restore at all.
+     */
+    this.onContextLost = (e) => {
+      e.preventDefault();
+      this.lost = true;
+      cancelAnimationFrame(this.raf);
+      this.raf = 0;
+    };
+    this.onContextRestored = () => {
+      this.lost = false;
+      this.initGL();
+      this.applyResize();
+      this.last = 0;
+      if (!document.hidden && !this.raf) this.raf = requestAnimationFrame(this.frame);
+    };
     /**
      * A hidden tab draws nothing anyone can see. Browsers throttle rAF there
      * but do not all stop it, so the loop stops itself and picks up where it
@@ -511,12 +536,8 @@ var _PlasmaRenderer = class _PlasmaRenderer {
      * otherwise reallocated every texture repeatedly mid-scroll.
      */
     this.resize = () => {
-      if (this.resizeQueued) return;
-      this.resizeQueued = true;
-      requestAnimationFrame(() => {
-        this.resizeQueued = false;
-        this.applyResize();
-      });
+      clearTimeout(this.resizeSettle);
+      this.resizeSettle = setTimeout(this.applyResize, 120);
     };
     this.applyResize = () => {
       if (this.frozen) {
@@ -559,6 +580,10 @@ var _PlasmaRenderer = class _PlasmaRenderer {
       gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     };
     this.frame = (now2) => {
+      if (this.lost) {
+        this.raf = 0;
+        return;
+      }
       if (!this.oneShot) this.raf = requestAnimationFrame(this.frame);
       const dt = this.last ? Math.min((now2 - this.last) / 1e3, 0.05) : 0.016;
       this.last = now2;
@@ -580,7 +605,7 @@ var _PlasmaRenderer = class _PlasmaRenderer {
       this.recs.forEach((r) => {
         if (!r.el.isConnected) return;
         if (!s.reducedMotion) {
-          r.formV += (170 * (1 - r.form) - 12 * r.formV) * dt;
+          r.formV += (170 * (1 - r.form) - 26 * r.formV) * dt;
           r.form += r.formV * dt;
         } else r.form = 1;
         const b = elementBox(r.el);
@@ -696,26 +721,11 @@ var _PlasmaRenderer = class _PlasmaRenderer {
     this.FR = new Float32Array(this.max);
     this.EL = new Float32Array(this.max);
     this.SOLO = new Float32Array(this.max);
-    this.floatOK = !!gl.getExtension("EXT_color_buffer_float");
-    const sh = makeShaders(this.max);
-    this.progs = { bg: this.program(sh.bgFrag), mask: this.program(sh.maskFrag), tint: this.program(sh.tintFrag), blur: this.program(sh.blurFrag), comp: this.program(sh.compFrag) };
-    const buf = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
-    gl.enableVertexAttribArray(0);
-    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
-    this.rtA = this.target();
-    this.rtB = this.target();
-    this.rtC = this.target();
-    this.rtT = this.target();
-    this.rtFr = this.target();
-    this.rtBg = this.target();
-    this.rtBgM = this.target();
-    this.rtBgH = this.target();
-    this.mrtFb = gl.createFramebuffer();
-    this.configure(settings, true);
+    this.initGL();
     this.mouse.x = this.mouse.tx = innerWidth / 2;
     this.mouse.y = this.mouse.ty = innerHeight / 2;
+    canvas.addEventListener("webglcontextlost", this.onContextLost);
+    canvas.addEventListener("webglcontextrestored", this.onContextRestored);
     addEventListener("resize", this.resize);
     document.addEventListener("visibilitychange", this.onVisibility);
     if (this.coarse) addEventListener("scroll", this.onScroll, { passive: true });
@@ -893,8 +903,41 @@ var _PlasmaRenderer = class _PlasmaRenderer {
   bump(e) {
     this.energy = Math.max(this.energy, Math.min(e, 1));
   }
+  /**
+   * Every GL object this renderer owns. A lost context invalidates all of
+   * them, so creation lives here rather than in the constructor: the restore
+   * handler runs exactly the same path.
+   */
+  initGL() {
+    const gl = this.gl;
+    this.owned = { tex: [], fb: [], prog: [], buf: [] };
+    this.floatOK = !!gl.getExtension("EXT_color_buffer_float");
+    const sh = makeShaders(this.max);
+    this.progs = { bg: this.program(sh.bgFrag), mask: this.program(sh.maskFrag), tint: this.program(sh.tintFrag), blur: this.program(sh.blurFrag), comp: this.program(sh.compFrag) };
+    const buf = gl.createBuffer();
+    if (buf) this.owned.buf.push(buf);
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    this.rtA = this.target();
+    this.rtB = this.target();
+    this.rtC = this.target();
+    this.rtT = this.target();
+    this.rtFr = this.target();
+    this.rtBg = this.target();
+    this.rtBgM = this.target();
+    this.rtBgH = this.target();
+    this.mrtFb = gl.createFramebuffer();
+    this.owned.fb.push(this.mrtFb);
+    this.configure(this.settings, true);
+    this.canvas.width = this.canvas.height = 0;
+  }
   destroy() {
     cancelAnimationFrame(this.raf);
+    clearTimeout(this.resizeSettle);
+    this.canvas.removeEventListener("webglcontextlost", this.onContextLost);
+    this.canvas.removeEventListener("webglcontextrestored", this.onContextRestored);
     removeEventListener("resize", this.resize);
     document.removeEventListener("visibilitychange", this.onVisibility);
     removeEventListener("scroll", this.onScroll);
@@ -906,7 +949,14 @@ var _PlasmaRenderer = class _PlasmaRenderer {
       r.el.style.scale = "";
     });
     this.recs.clear();
-    this.gl.getExtension("WEBGL_lose_context")?.loseContext();
+    const gl = this.gl;
+    if (!gl.isContextLost()) {
+      this.owned.tex.forEach((t) => gl.deleteTexture(t));
+      this.owned.fb.forEach((f) => gl.deleteFramebuffer(f));
+      this.owned.prog.forEach((pr) => gl.deleteProgram(pr));
+      this.owned.buf.forEach((b) => gl.deleteBuffer(b));
+    }
+    this.owned = { tex: [], fb: [], prog: [], buf: [] };
   }
   freeze() {
     const c = this.canvas;
@@ -1149,6 +1199,7 @@ var _PlasmaRenderer = class _PlasmaRenderer {
     UNIFORMS.forEach((n) => {
       u[n] = gl.getUniformLocation(pr, n);
     });
+    this.owned.prog.push(pr);
     return { pr, u };
   }
   target() {
@@ -1159,7 +1210,10 @@ var _PlasmaRenderer = class _PlasmaRenderer {
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-    return { tex, fb: gl.createFramebuffer(), w: 0, h: 0 };
+    const fb = gl.createFramebuffer();
+    this.owned.tex.push(tex);
+    this.owned.fb.push(fb);
+    return { tex, fb, w: 0, h: 0 };
   }
 };
 _PlasmaRenderer.RUNWAY = 1;

package/dist/renderer.d.ts

@@ -94,13 +94,17 @@ export declare class PlasmaRenderer {
     private bgColor;
     private srcEl;
     private floatOK;
+    /** True between webglcontextlost and webglcontextrestored: draw nothing. */
+    private lost;
+    private resizeSettle;
+    /** Everything initGL() created, so destroy() can free it by hand. */
+    private owned;
     private recs;
     private nextId;
     private raf;
     private last;
     private time;
     private dpr;
-    private resizeQueued;
     /** Coarse pointer = touch. Only there does a fling run on the compositor with rAF deferred. */
     private coarse;
     private frozen;
@@ -148,6 +152,21 @@ export declare class PlasmaRenderer {
     pulse(x: number, y: number, strength?: number): void;
     /** Raise the material's energy (brightens contours and color); it decays on its own. */
     bump(e: number): void;
+    /**
+     * Every GL object this renderer owns. A lost context invalidates all of
+     * them, so creation lives here rather than in the constructor: the restore
+     * handler runs exactly the same path.
+     */
+    private initGL;
+    /**
+     * A drag-resize reallocates eight render targets per distinct size, and the
+     * driver can drop the context under that. Without these two handlers the
+     * field simply stopped: the frame loop kept running against a dead context
+     * and nothing ever brought it back. preventDefault is what asks the browser
+     * to attempt a restore at all.
+     */
+    private onContextLost;
+    private onContextRestored;
     destroy(): void;
     /**
      * A hidden tab draws nothing anyone can see. Browsers throttle rAF there

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cruxgarden/plasma-ui",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Liquid panels for React, rendered in WebGL on canvas: every panel is one shared plasma - they fuse on contact, refract, and snap to a grid.",
   "main": "dist/index.js",
   "scripts": {