@liquid-glass-forge/webgl 0.1.0-rc.1 → 0.1.0-rc.2

package/README.md

@@ -1,8 +1,23 @@
-# Liquid Glass Forge WebGL
+# @liquid-glass-forge/webgl
 
-Experimental preview. API and device/performance qualification remain open; iPad is unqualified.
+WebGL2 glass refraction and a shared atlas for compositing optical surfaces.
 
-Experimental preview package, `0.1.0-rc.1`. Shared persistent WebGL2 atlas,
+[![A live glass lens bends the lettering beneath it](https://raw.githubusercontent.com/namipsg/liquid-glass-forge/main/docs/assets/glass-playground.gif)](https://namipsg.github.io/liquid-glass-forge/#playground)
+
+[Live showcase](https://namipsg.github.io/liquid-glass-forge/#playground) · [Examples](https://namipsg.github.io/liquid-glass-forge/examples.html) · [Documentation](https://github.com/namipsg/liquid-glass-forge/blob/main/docs/PHASE-6.md) · [Support](https://namipsg.github.io/liquid-glass-forge/support.html) · [Install by framework](https://github.com/namipsg/liquid-glass-forge/blob/main/docs/QUICKSTART.md)
+
+## Install
+
+```sh
+npm install @liquid-glass-forge/webgl@0.1.0-rc.2
+```
+
+Keep the Forge packages at matching versions. This is an experimental preview.
+The [support guide](https://namipsg.github.io/liquid-glass-forge/support.html) describes browser and device qualification.
+
+## Usage
+
+Experimental preview package, `0.1.0-rc.2`. Shared persistent WebGL2 atlas,
 versioned optics, GPU blur and synchronous Canvas2D tile presentation.
 
 Use `WebGLAtlas` from `@liquid-glass-forge/webgl` for owned Canvas2D targets.

package/dist/atlas.js

@@ -257,7 +257,7 @@ export class WebGLAtlas {
             throw new WebGLError('ATTRIBUTES_UNSUPPORTED', 'Required context attributes not granted');
         this.#maxSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
         this.#maxViewport = gl.getParameter(gl.MAX_VIEWPORT_DIMS);
-        this.#optics = this.#program(OPTICS, ['Source', 'Encoding', 'Size', 'Origin', 'Rect', 'Radius', 'Bevel', 'Strength', 'Prepared', 'QuantizeUp', 'SourceLinear', 'Calibration', 'Dispersion', 'Tint', 'Light', 'Rim', 'Specular']);
+        this.#optics = this.#program(OPTICS, ['Source', 'Encoding', 'Size', 'Origin', 'Rect', 'Radius', 'Bevel', 'Strength', 'Prepared', 'QuantizeUp', 'SourceLinear', 'Calibration', 'Dispersion', 'Tint', 'Light', 'Rim', 'Specular', 'LensProfile']);
         this.#blur = this.#program(BLUR, ['Source', 'Encoding', 'Axis', 'Radius', 'Prepared', 'SourceLinear']);
         this.#source = this.#texture();
         this.#encoding = this.#texture();
@@ -541,6 +541,7 @@ export class WebGLAtlas {
             gl.uniform1i(u.SourceLinear, this.#sourceLinear ? 1 : 0);
             gl.uniform1i(u.Prepared, e.blur ? 1 : 0);
             gl.uniform1i(u.QuantizeUp, this.#quantizeUp ? 1 : 0);
+            gl.uniform1i(u.LensProfile, e.lens ? 1 : 0);
             gl.uniform1f(u.Dispersion, e.dispersion);
             gl.uniform4f(u.Tint, ...e.tint);
             gl.uniform2f(u.Light, ...e.light);

package/dist/dom.d.ts

@@ -111,13 +111,15 @@ export declare class OpticalRenderer implements GlassRenderer {
             effectiveHeight: number | undefined;
             qualityReduced: boolean;
             reasons: readonly string[];
-            quality: Required<{
+            quality: Required<Omit<{
                 readonly maxPixels?: number;
                 readonly maxWidth?: number;
                 readonly maxHeight?: number;
                 readonly maxUpdatesPerSecond?: number;
                 readonly maxSourcePixels?: number;
-            }>;
+                readonly cadence?: 'balanced' | 'interactive';
+            }, "cadence">>;
+            cadencePolicy?: "interactive";
             timings: (import("@liquid-glass-forge/cpu").CpuTimings & {
                 readonly captureMs: number;
                 readonly rateWaitMs: number;

package/dist/effects.d.ts

@@ -1,5 +1,5 @@
 export interface WebGLEffects {
-    readonly model: 'rounded-material-v1';
+    readonly model: 'rounded-material-v1' | 'refractive-lens-v2';
     readonly blurRadius?: number;
     readonly dispersion?: number;
     readonly tint?: readonly [number, number, number, number];
@@ -8,6 +8,7 @@ export interface WebGLEffects {
     readonly light?: readonly [number, number];
 }
 export declare function effects(input?: WebGLEffects): Readonly<{
+    lens: boolean;
     blur: number;
     dispersion: number;
     rim: number;

package/dist/effects.js

@@ -1,7 +1,7 @@
 import { decodeSrgb, ContractError } from '@liquid-glass-forge/core';
 export function effects(input) {
     if (input !== undefined && (!input || typeof input !== 'object' || Array.isArray(input) ||
-        Reflect.ownKeys(input).some(k => typeof k !== 'string' || !['model', 'blurRadius', 'dispersion', 'tint', 'rim', 'specular', 'light'].includes(k)) || input.model !== 'rounded-material-v1'))
+        Reflect.ownKeys(input).some(k => typeof k !== 'string' || !['model', 'blurRadius', 'dispersion', 'tint', 'rim', 'specular', 'light'].includes(k)) || !['rounded-material-v1', 'refractive-lens-v2'].includes(input.model)))
         throw new ContractError('Invalid WebGL material');
     const blur = input?.blurRadius === undefined ? 0 : input.blurRadius, dispersion = input?.dispersion === undefined ? 0 : input.dispersion, rim = input?.rim === undefined ? 0 : input.rim, specular = input?.specular === undefined ? 0 : input.specular;
     if (!Number.isInteger(blur) || blur < 0 || blur > 16 || ![dispersion, rim, specular].every(v => typeof v === 'number' && Number.isFinite(v) && v >= 0 && v <= 1))
@@ -13,5 +13,5 @@ export function effects(input) {
     if (!scale)
         throw new ContractError('Light must be nonzero');
     const x = light[0] / scale, y = light[1] / scale, length = Math.hypot(x, y);
-    return Object.freeze({ blur, dispersion, rim, specular, tint: [decodeSrgb(tint[0]), decodeSrgb(tint[1]), decodeSrgb(tint[2]), tint[3]], light: [x / length, y / length] });
+    return Object.freeze({ lens: input?.model === 'refractive-lens-v2', blur, dispersion, rim, specular, tint: [decodeSrgb(tint[0]), decodeSrgb(tint[1]), decodeSrgb(tint[2]), tint[3]], light: [x / length, y / length] });
 }

package/dist/shaders.d.ts

@@ -1,4 +1,4 @@
 export declare const VERTEX = "#version 300 es\nvoid main(){vec2 p=vec2(float((gl_VertexID<<1)&2),float(gl_VertexID&2));gl_Position=vec4(p*2.0-1.0,0,1);}";
-export declare const OPTICS = "#version 300 es\nprecision highp float;\nprecision highp int;\nuniform highp sampler2D uSource;\nuniform highp sampler2D uEncoding;\nuniform vec2 uSize,uOrigin,uLight;\nuniform vec4 uRect,uTint;\nuniform float uRadius,uBevel,uStrength,uDispersion,uRim,uSpecular;\nuniform bool uPrepared,uQuantizeUp,uSourceLinear,uCalibration;\nout vec4 result;\nfloat encodeByte(float v){int i=min(int(v*4096.0),4095);vec3 e=texelFetch(uEncoding,ivec2(i&63,i>>6),0).rgb;return e.r+(v>=e.b?1.0:(v<e.g?-1.0:0.0));}\nfloat decodeByte(float v){return v<=.04045?v/12.92:pow((v+.055)/1.055,2.4);}\nvec4 texel(ivec2 p){vec4 c=texelFetch(uSource,p,0);return uPrepared?c:(uSourceLinear?vec4(c.rgb*c.a,c.a):vec4(vec3(decodeByte(c.r),decodeByte(c.g),decodeByte(c.b))*c.a,c.a));}\nvec4 sampleAt(vec2 p){ivec2 s=textureSize(uSource,0);p=clamp(p,vec2(0.0),vec2(float(s.x-1),float(s.y-1)));ivec2 lo=ivec2(floor(p)),hi=min(lo+1,s-1);vec2 t=fract(p);\nif(t.x==0.0&&t.y==0.0)return texel(lo);\nreturn (texel(lo)*(1.0-t.x)+texel(ivec2(hi.x,lo.y))*t.x)*(1.0-t.y)+(texel(ivec2(lo.x,hi.y))*(1.0-t.x)+texel(hi)*t.x)*t.y;}\nvoid main(){\nif(uCalibration){vec4 c=texelFetch(uSource,ivec2(int(gl_FragCoord.x),0),0);float n=floor(c.r*65535.0+.5);result=vec4(floor(n/256.0)/255.0,mod(n,256.0)/255.0,0,1);return;}\nvec2 local=gl_FragCoord.xy-uOrigin,center=vec2(local.x,uSize.y-local.y),p=center-uSize*.5;\nvec2 q=abs(p)-(uSize*.5-uRadius),a=max(q,0.0);float len=length(a),d=len+min(max(q.x,q.y),0.0)-uRadius;\nfloat mask=clamp(.5-d,0.0,1.0);if(mask==0.0){result=vec4(0.0);return;}\nfloat w=clamp(1.0+d/uBevel,0.0,1.0);w*=w;\nvec2 n=w>0.0?(len>0.0?a/len*sign(p):(q.x>q.y?vec2(sign(p.x),0.0):vec2(0.0,sign(p.y)))):vec2(0.0);\nvec2 scale=uRect.zw/uSize,base=uRect.xy+center*scale-.5,delta=n*uStrength*w*scale;\n// An exact source texel with all optional passes disabled is byte identity.\n// Avoid decode/interpolate/encode work only where bilinear weights are exactly zero.\nif(!uPrepared&&!uSourceLinear&&uDispersion==0.0&&uTint.a==0.0&&uRim==0.0&&uSpecular==0.0){\n  vec2 at=clamp(base+delta,vec2(0.0),vec2(float(textureSize(uSource,0).x-1),float(textureSize(uSource,0).y-1)));\n  if(all(equal(fract(at),vec2(0.0)))){vec4 raw=texelFetch(uSource,ivec2(at),0);float alpha=floor(raw.a*mask*255.0+.5);ivec3 bytes=ivec3(floor(raw.rgb*255.0+.5));ivec3 premult=(bytes*int(alpha)+(uQuantizeUp?254:127))/255;result=alpha==0.0?vec4(0.0):vec4(vec3(premult)/255.0,alpha/255.0);return;}\n}\nvec4 c=sampleAt(base+delta);float alpha=floor(c.a*mask*255.0+.5);\nif(alpha==0.0){result=vec4(0.0);return;}\nvec3 rgb=c.a>0.0?c.rgb/c.a:vec3(0.0);\nif(uDispersion>0.0){vec4 r=sampleAt(base+delta*(1.0+uDispersion)),b=sampleAt(base+delta*(1.0-uDispersion));rgb.r=r.a>0.0?r.r/r.a:0.0;rgb.b=b.a>0.0?b.b/b.a:0.0;}\nif(uTint.a>0.0)rgb=mix(rgb,uTint.rgb,uTint.a);\nif(w>0.0&&(uRim>0.0||uSpecular>0.0)){float l=max(dot(n,uLight),0.0);l*=l;l*=l;l*=l;float h=clamp(w*(uRim+uSpecular*l),0.0,1.0);rgb=clamp(rgb+(1.0-rgb)*h,0.0,1.0);}\nivec3 bytes=ivec3(encodeByte(rgb.r),encodeByte(rgb.g),encodeByte(rgb.b));\nivec3 premult=(bytes*int(alpha)+(uQuantizeUp?254:127))/255;\nresult=vec4(vec3(premult)/255.0,alpha/255.0);\n}";
+export declare const OPTICS = "#version 300 es\nprecision highp float;\nprecision highp int;\nuniform highp sampler2D uSource;\nuniform highp sampler2D uEncoding;\nuniform vec2 uSize,uOrigin,uLight;\nuniform vec4 uRect,uTint;\nuniform float uRadius,uBevel,uStrength,uDispersion,uRim,uSpecular;\nuniform bool uPrepared,uQuantizeUp,uSourceLinear,uCalibration,uLensProfile;\nout vec4 result;\nfloat encodeByte(float v){int i=min(int(v*4096.0),4095);vec3 e=texelFetch(uEncoding,ivec2(i&63,i>>6),0).rgb;return e.r+(v>=e.b?1.0:(v<e.g?-1.0:0.0));}\nfloat decodeByte(float v){return v<=.04045?v/12.92:pow((v+.055)/1.055,2.4);}\nvec4 texel(ivec2 p){vec4 c=texelFetch(uSource,p,0);return uPrepared?c:(uSourceLinear?vec4(c.rgb*c.a,c.a):vec4(vec3(decodeByte(c.r),decodeByte(c.g),decodeByte(c.b))*c.a,c.a));}\nvec4 sampleAt(vec2 p){ivec2 s=textureSize(uSource,0);p=clamp(p,vec2(0.0),vec2(float(s.x-1),float(s.y-1)));ivec2 lo=ivec2(floor(p)),hi=min(lo+1,s-1);vec2 t=fract(p);\nif(t.x==0.0&&t.y==0.0)return texel(lo);\nreturn (texel(lo)*(1.0-t.x)+texel(ivec2(hi.x,lo.y))*t.x)*(1.0-t.y)+(texel(ivec2(lo.x,hi.y))*(1.0-t.x)+texel(hi)*t.x)*t.y;}\nvoid main(){\nif(uCalibration){vec4 c=texelFetch(uSource,ivec2(int(gl_FragCoord.x),0),0);float n=floor(c.r*65535.0+.5);result=vec4(floor(n/256.0)/255.0,mod(n,256.0)/255.0,0,1);return;}\nvec2 local=gl_FragCoord.xy-uOrigin,center=vec2(local.x,uSize.y-local.y),p=center-uSize*.5;\nvec2 q=abs(p)-(uSize*.5-uRadius),a=max(q,0.0);float len=length(a),d=len+min(max(q.x,q.y),0.0)-uRadius;\nfloat mask=clamp(.5-d,0.0,1.0);if(mask==0.0){result=vec4(0.0);return;}\n// Keep v2's bevel outside the medial axis at small corner radii. V1 is unchanged.\nfloat bevel=uLensProfile?min(uBevel,max(uRadius,.5)):uBevel;\nfloat w=clamp(1.0+d/bevel,0.0,1.0);w*=w;\nvec2 n=w>0.0?(len>0.0?a/len*sign(p):(q.x>q.y?vec2(sign(p.x),0.0):vec2(0.0,sign(p.y)))):vec2(0.0);\nfloat displacement=w;\nif(uLensProfile&&w>0.0){float u=sqrt(w),nz=sqrt(max(0.0,1.0-u*u)),eta=2.0/3.0;\nfloat bend=sqrt(1.0-eta*eta*u*u)-eta*nz;displacement=-u*bend/(eta+bend*nz);}\nvec2 scale=uRect.zw/uSize,base=uRect.xy+center*scale-.5,delta=n*uStrength*displacement*scale;\n// An exact source texel with all optional passes disabled is byte identity.\n// Avoid decode/interpolate/encode work only where bilinear weights are exactly zero.\nif(!uPrepared&&!uSourceLinear&&uDispersion==0.0&&uTint.a==0.0&&uRim==0.0&&uSpecular==0.0){\n  vec2 at=clamp(base+delta,vec2(0.0),vec2(float(textureSize(uSource,0).x-1),float(textureSize(uSource,0).y-1)));\n  if(all(equal(fract(at),vec2(0.0)))){vec4 raw=texelFetch(uSource,ivec2(at),0);float alpha=floor(raw.a*mask*255.0+.5);ivec3 bytes=ivec3(floor(raw.rgb*255.0+.5));ivec3 premult=(bytes*int(alpha)+(uQuantizeUp?254:127))/255;result=alpha==0.0?vec4(0.0):vec4(vec3(premult)/255.0,alpha/255.0);return;}\n}\nvec4 c=sampleAt(base+delta);float alpha=floor(c.a*mask*255.0+.5);\nif(alpha==0.0){result=vec4(0.0);return;}\nvec3 rgb=c.a>0.0?c.rgb/c.a:vec3(0.0);\nif(uDispersion>0.0){vec4 r=sampleAt(base+delta*(1.0+uDispersion)),b=sampleAt(base+delta*(1.0-uDispersion));rgb.r=r.a>0.0?r.r/r.a:0.0;rgb.b=b.a>0.0?b.b/b.a:0.0;}\nif(uTint.a>0.0)rgb=mix(rgb,uTint.rgb,uTint.a);\nif(w>0.0&&(uRim>0.0||uSpecular>0.0)){float l=max(dot(n,uLight),0.0);l*=l;l*=l;l*=l;float h=clamp(w*(uRim+uSpecular*l),0.0,1.0);rgb=clamp(rgb+(1.0-rgb)*h,0.0,1.0);}\nivec3 bytes=ivec3(encodeByte(rgb.r),encodeByte(rgb.g),encodeByte(rgb.b));\nivec3 premult=(bytes*int(alpha)+(uQuantizeUp?254:127))/255;\nresult=vec4(vec3(premult)/255.0,alpha/255.0);\n}";
 export declare const BLUR = "#version 300 es\nprecision highp float;\nprecision highp int;\nuniform highp sampler2D uSource;\nuniform highp sampler2D uEncoding;\nuniform ivec2 uAxis;\nuniform int uRadius;\nuniform bool uPrepared,uSourceLinear;\nout vec4 result;\nfloat decodeByte(float v){return v<=.04045?v/12.92:pow((v+.055)/1.055,2.4);}\nvoid main(){ivec2 p=ivec2(gl_FragCoord.xy),size=textureSize(uSource,0);vec4 sum=vec4(0.0);\nfor(int k=-16;k<=16;k++){if(abs(k)<=uRadius){vec4 c=texelFetch(uSource,clamp(p+uAxis*k,ivec2(0),size-1),0);sum+=uPrepared?c:(uSourceLinear?vec4(c.rgb*c.a,c.a):vec4(vec3(decodeByte(c.r),decodeByte(c.g),decodeByte(c.b))*c.a,c.a));}}\nresult=sum/float(2*uRadius+1);\n}";
 export declare function encodingTextureData(): Float32Array;

package/dist/shaders.js

@@ -1,6 +1,7 @@
 export const VERTEX = `#version 300 es
 void main(){vec2 p=vec2(float((gl_VertexID<<1)&2),float(gl_VertexID&2));gl_Position=vec4(p*2.0-1.0,0,1);}`;
-// Same versioned equations as CONTRACTS.md and PHASE-5.md. The scalar oracle
+// The v1 path retains CONTRACTS.md and PHASE-5.md; the opt-in v2 path
+// traces an air-to-glass ray through an elliptical bevel. The scalar oracle
 // remains independent; production never obtains pixels from a GPU framebuffer.
 // Explicit float constructors avoid ANGLE/D3D11 generating an ambiguous HLSL
 // vec2_ctor_int overload for mixed integer and floating-point arguments.
@@ -12,7 +13,7 @@ uniform highp sampler2D uEncoding;
 uniform vec2 uSize,uOrigin,uLight;
 uniform vec4 uRect,uTint;
 uniform float uRadius,uBevel,uStrength,uDispersion,uRim,uSpecular;
-uniform bool uPrepared,uQuantizeUp,uSourceLinear,uCalibration;
+uniform bool uPrepared,uQuantizeUp,uSourceLinear,uCalibration,uLensProfile;
 out vec4 result;
 float encodeByte(float v){int i=min(int(v*4096.0),4095);vec3 e=texelFetch(uEncoding,ivec2(i&63,i>>6),0).rgb;return e.r+(v>=e.b?1.0:(v<e.g?-1.0:0.0));}
 float decodeByte(float v){return v<=.04045?v/12.92:pow((v+.055)/1.055,2.4);}
@@ -25,9 +26,14 @@ if(uCalibration){vec4 c=texelFetch(uSource,ivec2(int(gl_FragCoord.x),0),0);float
 vec2 local=gl_FragCoord.xy-uOrigin,center=vec2(local.x,uSize.y-local.y),p=center-uSize*.5;
 vec2 q=abs(p)-(uSize*.5-uRadius),a=max(q,0.0);float len=length(a),d=len+min(max(q.x,q.y),0.0)-uRadius;
 float mask=clamp(.5-d,0.0,1.0);if(mask==0.0){result=vec4(0.0);return;}
-float w=clamp(1.0+d/uBevel,0.0,1.0);w*=w;
+// Keep v2's bevel outside the medial axis at small corner radii. V1 is unchanged.
+float bevel=uLensProfile?min(uBevel,max(uRadius,.5)):uBevel;
+float w=clamp(1.0+d/bevel,0.0,1.0);w*=w;
 vec2 n=w>0.0?(len>0.0?a/len*sign(p):(q.x>q.y?vec2(sign(p.x),0.0):vec2(0.0,sign(p.y)))):vec2(0.0);
-vec2 scale=uRect.zw/uSize,base=uRect.xy+center*scale-.5,delta=n*uStrength*w*scale;
+float displacement=w;
+if(uLensProfile&&w>0.0){float u=sqrt(w),nz=sqrt(max(0.0,1.0-u*u)),eta=2.0/3.0;
+float bend=sqrt(1.0-eta*eta*u*u)-eta*nz;displacement=-u*bend/(eta+bend*nz);}
+vec2 scale=uRect.zw/uSize,base=uRect.xy+center*scale-.5,delta=n*uStrength*displacement*scale;
 // An exact source texel with all optional passes disabled is byte identity.
 // Avoid decode/interpolate/encode work only where bilinear weights are exactly zero.
 if(!uPrepared&&!uSourceLinear&&uDispersion==0.0&&uTint.a==0.0&&uRim==0.0&&uSpecular==0.0){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liquid-glass-forge/webgl",
-  "version": "0.1.0-rc.1",
+  "version": "0.1.0-rc.2",
   "private": false,
   "description": "Experimental shared-atlas WebGL2 optics and optional vanilla integration",
   "type": "module",
@@ -28,10 +28,11 @@
     "README.md"
   ],
   "dependencies": {
-    "@liquid-glass-forge/core": "0.1.0-rc.1",
-    "@liquid-glass-forge/cpu": "0.1.0-rc.1",
-    "@liquid-glass-forge/dom": "0.1.0-rc.1"
+    "@liquid-glass-forge/core": "0.1.0-rc.2",
+    "@liquid-glass-forge/cpu": "0.1.0-rc.2",
+    "@liquid-glass-forge/dom": "0.1.0-rc.2"
   },
+  "homepage": "https://namipsg.github.io/liquid-glass-forge/#playground",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/namipsg/liquid-glass-forge.git",