liquid-gl 2.2.2 → 2.2.4

package/README.md

@@ -2,12 +2,12 @@
 
 <a href="https://liquidgl.naughtyduk.com"><img src="https://raw.githubusercontent.com/naughtyduk/liquidGL/main/assets/liquidGL-npm-preview.gif" alt="liquidGL" width="100%" height="auto"/></a>
 
-### v2.2.2
+### v2.2.4
 
-> [!NOTE]
+> **NOTE**
 > `liquidGL` is free to use for both non-commercial and commercial purposes.
 
-> [!WARNING]
+> **WARNING**
 > **v2.0.1 changed snapshot capture.** `liquidGL` now snapshots the page with its own built-in rasteriser, so `html2canvas` is no longer a dependency. Nothing needs to change in your code.
 >
 > | Rasteriser    | Median  | Min     | Max      | Worst single stall |
@@ -29,6 +29,8 @@
 
 **Features**
 
+- **2.2.4 - HD Glass on Mobile** — Snapshot capture is no longer hard capped by the device's screen resolution, and is instead capped by the GPU texture limit set by the browser, allowing for higher quality glass on mobile devices.
+
 - **2.2.0 - WebGPU rendering** — `liquidGL` now renders with WebGPU where available, with an automatic fallback chain of WebGPU → WebGL2 → WebGL1 → CSS `backdrop-filter`. Nothing to configure, the chain is fully automatic. Choose where the chain starts with the new `engine` option (`'auto'`, `'webgpu'`, `'webgl2'`, `'webgl'`), or test quickly via the URL parameter `?liquidGL-engine=webgl2`.
 
 - **2.2.0 - Helper GUI is now a separate file** — the dev GUI no longer ships in the main bundle. Import `liquid-gl/liquidGL-helper.js` in development to keep using `helper: true`. If the module is missing you'll get a console error and everything else works as normal.

package/liquidGL-helper.js

@@ -4,7 +4,7 @@
  *
  * Author: NaughtyDuk© – https://liquidgl.naughtyduk.com
  * Licence: MIT
- * Version: v2.2.2
+ * Version: v2.2.4
  */
 
 (() => {
@@ -127,8 +127,8 @@
 
       @media (max-width: 768px) {
         .lil-gui.root.liquidgl-helper {
-          top: 1rem !important;
-          right: 1rem !important;
+          top: 0.5rem !important;
+          right: 0.5rem !important;
         }
       }
     `;
@@ -149,6 +149,7 @@
     });
     gui.domElement.classList.add("liquidgl-helper");
     gui.$title.style.cursor = "default";
+    gui.close();
 
     const topOffset = 1 + instanceIndex * 3;
     gui.domElement.style.top = `${topOffset}rem`;

package/liquidGL.js

@@ -4,7 +4,7 @@
  *
  * Author: NaughtyDuk© – https://liquidgl.naughtyduk.com
  * Licence: MIT
- * Version: v2.2.2
+ * Version: v2.2.4
  */
 
 const liquidGL = (() => {
@@ -2822,7 +2822,7 @@ fn fs() -> @location(0) vec4<f32> {
 
     drawLens(lens, p) {
       const cx = Math.max(0, p.x);
-      const cy = Math.max(0, p.y);
+      const cy = Math.max(0, this.canvas.height - p.y - p.h);
       const cw = Math.min(this.canvas.width - cx, p.w);
       const ch = Math.min(this.canvas.height - cy, p.h);
       if (cw <= 0 || ch <= 0) return;
@@ -2914,7 +2914,10 @@ fn fs() -> @location(0) vec4<f32> {
       pass.setVertexBuffer(0, this._vb);
       rects.forEach(({ x, y, w, h }) => {
         const cx = Math.max(0, Math.min(this.canvas.width, x));
-        const cy = Math.max(0, Math.min(this.canvas.height, y));
+        const cy = Math.max(
+          0,
+          Math.min(this.canvas.height, this.canvas.height - y - h),
+        );
         const cw = Math.max(0, Math.min(this.canvas.width - cx, w));
         const ch = Math.max(0, Math.min(this.canvas.height - cy, h));
         if (cw > 0 && ch > 0) {
@@ -2958,6 +2961,7 @@ fn fs() -> @location(0) vec4<f32> {
       if (!this.snapshotTarget) this.snapshotTarget = document.body;
 
       this._isScrolling = false;
+      this._pendingViewportResize = false;
       let lastScrollY = window.scrollY;
       let scrollTimeout;
       const scrollCheck = () => {
@@ -2967,6 +2971,10 @@ fn fs() -> @location(0) vec4<f32> {
           clearTimeout(scrollTimeout);
           scrollTimeout = setTimeout(() => {
             this._isScrolling = false;
+            if (this._pendingViewportResize) {
+              this._pendingViewportResize = false;
+              onResize();
+            }
           }, 200);
         }
         requestAnimationFrame(scrollCheck);
@@ -2974,7 +2982,12 @@ fn fs() -> @location(0) vec4<f32> {
       requestAnimationFrame(scrollCheck);
 
       const onResize = debounce(() => {
-        if (this._capturing || this._isScrolling) return;
+        if (this._capturing) return;
+        if (this._isScrolling) {
+          this._pendingViewportResize = true;
+          return;
+        }
+        this._pendingViewportResize = false;
 
         if (window.visualViewport && window.visualViewport.scale !== 1) {
           return;
@@ -3152,8 +3165,6 @@ fn fs() -> @location(0) vec4<f32> {
           const fullW = this.snapshotTarget.scrollWidth;
           const fullH = this.snapshotTarget.scrollHeight;
           const maxTex = (this.backend && this.backend.maxTextureSize) || 8192;
-          const MAX_MOBILE_DIM = 4096;
-          const isMobileSafari = /iPad|iPhone|iPod/.test(navigator.userAgent);
 
           let scale = Math.min(
             this._snapshotResolution,
@@ -3161,12 +3172,7 @@ fn fs() -> @location(0) vec4<f32> {
             maxTex / fullH,
           );
 
-          if (isMobileSafari) {
-            const over = (Math.max(fullW, fullH) * scale) / MAX_MOBILE_DIM;
-            if (over > 1) scale = scale / over;
-          }
-
-          const maxArea = isMobileSafari ? 4096 * 4096 : 16384 * 16384;
+          const maxArea = maxTex * maxTex;
           if (fullW * fullH * scale * scale > maxArea) {
             scale = Math.sqrt(maxArea / (fullW * fullH));
             console.warn(
@@ -3333,6 +3339,13 @@ fn fs() -> @location(0) vec4<f32> {
       const backend = this.backend;
       if (!backend || !this.hasTexture) return;
 
+      const dprNow = Math.min(2, window.devicePixelRatio || 1);
+      const bufW = Math.trunc(innerWidth * dprNow);
+      const bufH = Math.trunc(innerHeight * dprNow);
+      if (this.canvas.width !== bufW || this.canvas.height !== bufH) {
+        this._resizeCanvas();
+      }
+
       this.lenses.forEach((ln) => {
         if (ln._isSticky && !ln._mirrorActive) ln.updateMetrics();
       });
@@ -4235,16 +4248,24 @@ fn fs() -> @location(0) vec4<f32> {
           ? this._baseRect
           : this.el.getBoundingClientRect();
 
+      const vv = window.visualViewport;
+      const vpX = vv && Math.abs(vv.scale - 1) < 0.01 ? vv.offsetLeft : 0;
+      const vpY = vv && Math.abs(vv.scale - 1) < 0.01 ? vv.offsetTop : 0;
+
       const prev = this.rectPx;
       if (
         prev &&
         rect.left === prev.left &&
         rect.top === prev.top &&
         rect.width === prev.width &&
-        rect.height === prev.height
+        rect.height === prev.height &&
+        vpX === this._vpOffsetX &&
+        vpY === this._vpOffsetY
       ) {
         return;
       }
+      this._vpOffsetX = vpX;
+      this._vpOffsetY = vpY;
 
       this.rectPx = {
         left: rect.left,
@@ -4362,8 +4383,11 @@ fn fs() -> @location(0) vec4<f32> {
           this._mirrorActive && this._baseRect
             ? this._baseRect
             : this.el.getBoundingClientRect();
-        this._shadowEl.style.left = `${r.left}px`;
-        this._shadowEl.style.top = `${r.top}px`;
+        const vv = window.visualViewport;
+        const ox = vv && Math.abs(vv.scale - 1) < 0.01 ? vv.offsetLeft : 0;
+        const oy = vv && Math.abs(vv.scale - 1) < 0.01 ? vv.offsetTop : 0;
+        this._shadowEl.style.left = `${r.left + ox}px`;
+        this._shadowEl.style.top = `${r.top + oy}px`;
         this._shadowEl.style.width = `${r.width}px`;
         this._shadowEl.style.height = `${r.height}px`;
         this._shadowEl.style.borderRadius = `${this.radiusCss}px`;
@@ -4380,7 +4404,7 @@ fn fs() -> @location(0) vec4<f32> {
             zIndex: effectiveZ(this.el) - 2,
             boxShadow: SHADOW_VAL,
             willChange: "transform, width, height",
-            opacity: this.revealTypeIndex === 1 ? 0 : 1,
+            opacity: this._revealProgress ?? 1,
           });
           document.body.appendChild(this._shadowEl);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "liquid-gl",
-  "version": "2.2.2",
+  "version": "v2.2.4",
   "description": "Liquid Glass - Powered by WebGPU/WebGL.",
   "type": "module",
   "main": "./liquidGL.js",