@longzai-intelligence-liquid-glass/webgpu 0.0.1

package/README.md

@@ -0,0 +1,12 @@
+# @longzai-intelligence-liquid-glass/webgpu
+
+Liquid Glass WebGPU 渲染后端（experimental）：WGSL 多 pass 管线。
+
+## 用法
+
+```bash
+bun run --cwd packages/webgpu lint      # 代码检查
+bun run --cwd packages/webgpu typecheck # 类型检查（tsgo）
+bun run --cwd packages/webgpu test      # 单元测试
+bun run --cwd packages/webgpu build     # 构建（lzi-builder → dist）
+```

package/dist/index.d.ts

@@ -0,0 +1,266 @@
+import { BackdropMetrics, LiquidGlassParams, LiquidGlassRenderer, LiquidGlassSize, RendererCapability } from "@longzai-intelligence-liquid-glass/core";
+//#region src/shaders.constants.d.ts
+/**
+ * WebGPU 着色器（WGSL）
+ *
+ * liquid-dom 的多 pass 概念落地（experimental）：
+ * - 主合成 pass：SDF 高度剖面 → 折射位移 → 三通道色散 → tint/specular；
+ * - 降采样 / 升采样 pass：渐进模糊（box 降采样 + 双线性升采样）；
+ * - 亮度统计 pass：输出背景亮度，驱动自适应色调（liquid-dom adaptive tint）。
+ */
+/**
+ * uniform 参数结构
+ */
+declare const PARAMS_STRUCT = "\nstruct Params {\n  resolution: vec2f,\n  halfSize: vec2f,\n  radius: f32,\n  refraction: f32,\n  band: f32,\n  bevel: f32,\n  bevelExp: f32,\n  dispersion: f32,\n  blur: f32,\n  frost: f32,\n  tint: vec4f,\n  saturation: f32,\n  brightness: f32,\n  specular: f32,\n  specularExp: f32,\n  tilt: vec2f,\n  time: f32,\n  _pad0: f32,\n  _pad1: f32,\n};\n";
+/**
+ * 顶点着色器（全屏 quad，输出 uv）
+ */
+declare const VERTEX_WGSL = "\nstruct VertexOutput {\n  @builtin(position) position: vec4f,\n  @location(0) uv: vec2f,\n};\n\n@vertex\nfn main(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {\n  var quad = array<vec2f, 4>(\n    vec2f(-1.0, -1.0),\n    vec2f(1.0, -1.0),\n    vec2f(-1.0, 1.0),\n    vec2f(1.0, 1.0),\n  );\n  let pos = quad[vertexIndex];\n  var output: VertexOutput;\n  output.position = vec4f(pos, 0.0, 1.0);\n  output.uv = pos * 0.5 + vec2f(0.5);\n  return output;\n}\n";
+/**
+ * 降采样 pass：4 采样 box 滤波（liquid-dom DOWNSAMPLE 思路）
+ */
+declare const DOWNSAMPLE_WGSL = "\n@group(0) @binding(0) var srcSampler: sampler;\n@group(0) @binding(1) var srcTex: texture_2d<f32>;\n\n@fragment\nfn main(@location(0) uv: vec2f) -> @location(0) vec4f {\n  let texel = 1.0 / vec2f(textureDimensions(srcTex));\n  var color = textureSample(srcTex, srcSampler, uv) * 4.0;\n  color += textureSample(srcTex, srcSampler, uv + vec2f(texel.x, texel.y));\n  color += textureSample(srcTex, srcSampler, uv + vec2f(-texel.x, texel.y));\n  color += textureSample(srcTex, srcSampler, uv + vec2f(texel.x, -texel.y));\n  color += textureSample(srcTex, srcSampler, uv + vec2f(-texel.x, -texel.y));\n  return color / 8.0;\n}\n";
+/**
+ * 升采样 pass：双线性 4 tap（liquid-dom UPSAMPLE 思路）
+ */
+declare const UPSAMPLE_WGSL = "\n@group(0) @binding(0) var srcSampler: sampler;\n@group(0) @binding(1) var srcTex: texture_2d<f32>;\n\n@fragment\nfn main(@location(0) uv: vec2f) -> @location(0) vec4f {\n  let texel = 1.0 / vec2f(textureDimensions(srcTex));\n  var color = textureSample(srcTex, srcSampler, uv) * 4.0;\n  color += textureSample(srcTex, srcSampler, uv + vec2f(texel.x, 0.0));\n  color += textureSample(srcTex, srcSampler, uv + vec2f(-texel.x, 0.0));\n  color += textureSample(srcTex, srcSampler, uv + vec2f(0.0, texel.y));\n  color += textureSample(srcTex, srcSampler, uv + vec2f(0.0, -texel.y));\n  return color / 8.0;\n}\n";
+/**
+ * 主合成 pass：完整玻璃管线（位移折射 + 三通道色散 + tint + rim specular）
+ */
+declare const MAIN_WGSL = "\n\nstruct Params {\n  resolution: vec2f,\n  halfSize: vec2f,\n  radius: f32,\n  refraction: f32,\n  band: f32,\n  bevel: f32,\n  bevelExp: f32,\n  dispersion: f32,\n  blur: f32,\n  frost: f32,\n  tint: vec4f,\n  saturation: f32,\n  brightness: f32,\n  specular: f32,\n  specularExp: f32,\n  tilt: vec2f,\n  time: f32,\n  _pad0: f32,\n  _pad1: f32,\n};\n\n\n@group(0) @binding(0) var params: Params;\n@group(0) @binding(1) var backdropSampler: sampler;\n@group(0) @binding(2) var backdropTex: texture_2d<f32>;\n\n/**\n * 圆角矩形 SDF\n */\nfn sdRoundBox(p: vec2f, b: vec2f, r: f32) -> f32 {\n  let q = abs(p) - b + vec2f(r);\n  let outside = length(max(q, vec2f(0.0)));\n  let inside = min(max(q.x, q.y), 0.0);\n  return outside + inside - r;\n}\n\n/**\n * SDF 数值梯度 → 单位外法线\n */\nfn sdNormal(p: vec2f, b: vec2f, r: f32) -> vec2f {\n  let e = 1.0;\n  let dx = sdRoundBox(p + vec2f(e, 0.0), b, r) - sdRoundBox(p - vec2f(e, 0.0), b, r);\n  let dy = sdRoundBox(p + vec2f(0.0, e), b, r) - sdRoundBox(p - vec2f(0.0, e), b, r);\n  return normalize(vec2f(dx, dy) + vec2f(1e-6));\n}\n\n@fragment\nfn main(@location(0) uv: vec2f) -> @location(0) vec4f {\n  let p = (uv - vec2f(0.5)) * params.resolution + params.tilt * 20.0;\n  let sdf = sdRoundBox(p, params.halfSize, params.radius);\n  let normal = sdNormal(p, params.halfSize, params.radius);\n\n  let edge = clamp(1.0 + sdf / max(params.band, 1e-4), 0.0, 1.0);\n  let height = params.refraction * edge + params.bevel * pow(edge, params.bevelExp);\n  let displacement = -normal * height * params.band;\n\n  let uvDisp = uv + displacement / params.resolution;\n\n  // 三通道色散：R/B 沿位移对称缩放（蓝端更大）\n  let rScale = 1.0 - 0.5 * params.dispersion;\n  let bScale = 1.0 + 0.7 * params.dispersion;\n  var color = vec3f(\n    textureSample(backdropTex, backdropSampler, uv + displacement * rScale / params.resolution).r,\n    textureSample(backdropTex, backdropSampler, uvDisp).g,\n    textureSample(backdropTex, backdropSampler, uv + displacement * bScale / params.resolution).b,\n  );\n\n  // 饱和度 / 亮度\n  let luma = dot(color, vec3f(0.299, 0.587, 0.114));\n  color = mix(vec3f(luma), color, params.saturation) * params.brightness;\n\n  // tint 着色\n  color = mix(color, params.tint.rgb, params.tint.a);\n\n  // 双光斑 rim specular（主光随时间轻移 + 对侧镜像光）\n  let lightDir = normalize(vec2f(cos(params.time * 0.3), sin(params.time * 0.3)) + vec2f(0.6, -0.6));\n  let rimMain = pow(clamp(dot(normal, lightDir), 0.0, 1.0), params.specularExp);\n  let rimMirror = pow(clamp(dot(normal, -lightDir), 0.0, 1.0), params.specularExp) * 0.5;\n  color += vec3f((rimMain + rimMirror) * params.specular * edge);\n\n  // SDF mask（1.5px 抗锯齿）\n  let mask = 1.0 - smoothstep(-1.5, 1.5, sdf);\n  return vec4f(color, mask);\n}\n";
+/**
+ * 亮度统计 pass：输出背景亮度（r 通道），供 readback 直方图求 P50/P90
+ */
+declare const LUMA_WGSL = "\n@group(0) @binding(0) var srcSampler: sampler;\n@group(0) @binding(1) var srcTex: texture_2d<f32>;\n\n@fragment\nfn main(@location(0) uv: vec2f) -> @location(0) vec4f {\n  let c = textureSample(srcTex, srcSampler, uv).rgb;\n  let luma = dot(c, vec3f(0.299, 0.587, 0.114));\n  return vec4f(luma, 0.0, 0.0, 1.0);\n}\n";
+//#endregion
+//#region src/renderer-context.types.d.ts
+/**
+ * 背景源（帧 + 脏标记；HTML-in-Canvas 实验特性开启时可用 DOM canvas 源，
+ * 否则使用图片 / 视频 / canvas 纹理源降级）
+ */
+type WebGPUBackdropSource = {
+  /**
+   * 背景源标识
+   */
+  readonly id: string;
+  /**
+   * 捕获当前背景帧（canvas / image / video）
+   *
+   * @returns 可上传 WebGPU 纹理的帧
+   */
+  capture(): HTMLCanvasElement | HTMLImageElement | HTMLVideoElement | Promise<HTMLCanvasElement | HTMLImageElement | HTMLVideoElement>;
+  /**
+   * 帧是否变化（决定是否重传纹理）
+   */
+  isDirty(): boolean;
+  /**
+   * 释放资源
+   */
+  dispose(): void;
+};
+/**
+ * 渲染上下文（构造入参）
+ */
+type WebGPURendererContext = {
+  /**
+   * 初始参数
+   */
+  params: LiquidGlassParams;
+  /**
+   * 初始尺寸
+   */
+  size: LiquidGlassSize;
+  /**
+   * 背景源（缺省时渲染纯 tint 玻璃）
+   */
+  backdropSource?: WebGPUBackdropSource;
+};
+//#endregion
+//#region src/webgpu-renderer.utils.d.ts
+/**
+ * WebGPU 渲染器（experimental）
+ */
+declare class WebGPURenderer implements LiquidGlassRenderer<HTMLElement> {
+  /**
+   * 后端标识
+   */
+  readonly backend: 'webgpu';
+  /**
+   * 宿主元素
+   */
+  private host;
+  /**
+   * 渲染 canvas
+   */
+  private canvas;
+  /**
+   * WebGPU 上下文
+   */
+  private context;
+  /**
+   * GPU 设备
+   */
+  private device;
+  /**
+   * 输出纹理格式
+   */
+  private format;
+  /**
+   * uniform 缓冲
+   */
+  private uniformBuffer;
+  /**
+   * uniform 浮点数组
+   */
+  private uniformData;
+  /**
+   * 管线集合
+   */
+  private pipelines;
+  /**
+   * 纹理与缓冲集合
+   */
+  private resources;
+  /**
+   * 当前参数
+   */
+  private params;
+  /**
+   * 当前尺寸
+   */
+  private size;
+  /**
+   * 背景源
+   */
+  private source;
+  /**
+   * 初始化完成 promise
+   */
+  private ready;
+  /**
+   * 渲染循环 id
+   */
+  private rafId;
+  /**
+   * 捕获进行中标记
+   */
+  private capturing;
+  /**
+   * 上次 metrics 采样时间（节流）
+   */
+  private lastMetricsTime;
+  /**
+   * 构造渲染器
+   *
+   * @param context - 渲染上下文
+   */
+  constructor(context: WebGPURendererContext);
+  /**
+   * 等待设备初始化完成
+   *
+   * @returns 初始化 promise
+   */
+  whenReady(): Promise<void>;
+  /**
+   * 挂载到 DOM 元素
+   *
+   * @param target - 宿主元素
+   */
+  mount(target: HTMLElement): void;
+  /**
+   * 热更新参数
+   *
+   * @param params - 完整参数
+   */
+  update(params: LiquidGlassParams): void;
+  /**
+   * 尺寸变化
+   *
+   * @param size - 新尺寸
+   */
+  resize(size: LiquidGlassSize): void;
+  /**
+   * 更换背景源
+   *
+   * @param source - WebGPU 背景源
+   */
+  setBackdropSource(source: WebGPUBackdropSource): void;
+  /**
+   * 获取能力描述（experimental 标注）
+   *
+   * @returns 能力描述
+   */
+  getCapabilities(): RendererCapability;
+  /**
+   * 读取背景亮度统计（250ms 节流；自适应色调数据源）
+   *
+   * @returns 亮度统计；未就绪返回 null
+   */
+  getMetrics(): Promise<BackdropMetrics | null>;
+  /**
+   * 卸载并释放资源（幂等）
+   */
+  unmount(): void;
+  /**
+   * 初始化设备、管线与资源
+   */
+  private init;
+  /**
+   * 构建四条渲染管线
+   *
+   * @param device - GPU 设备
+   */
+  private buildPipelines;
+  /**
+   * 构建尺寸无关资源（uniform 缓冲、采样器、亮度统计）
+   *
+   * @param device - GPU 设备
+   */
+  private buildStaticResources;
+  /**
+   * 重建尺寸相关纹理（背景 / 模糊 ping-pong）
+   */
+  private recreateTargets;
+  /**
+   * 捕获背景并上传纹理
+   */
+  private captureBackdrop;
+  /**
+   * 启动渲染循环
+   */
+  private startLoop;
+  /**
+   * 渲染一帧（可选渐进模糊 pass + 主合成 pass）
+   */
+  private renderFrame;
+}
+//#endregion
+//#region src/support.utils.d.ts
+/**
+ * WebGPU 路线支持检测
+ */
+/**
+ * 支持检测结果
+ */
+type WebGPUSupport = {
+  /**
+   * 是否支持 WebGPU 路线
+   */
+  supported: boolean;
+  /**
+   * 不支持原因（支持时为空）
+   */
+  reason: string;
+  /**
+   * HTML-in-Canvas（DOM 折射）实验特性是否可用
+   */
+  htmlInCanvas: boolean;
+};
+/**
+ * 检测当前环境对 WebGPU 的支持
+ *
+ * @returns 支持检测结果
+ */
+declare function detectWebGPUSupport(): WebGPUSupport;
+//#endregion
+export { DOWNSAMPLE_WGSL, LUMA_WGSL, MAIN_WGSL, PARAMS_STRUCT, UPSAMPLE_WGSL, VERTEX_WGSL, type WebGPUBackdropSource, WebGPURenderer, type WebGPURendererContext, type WebGPUSupport, detectWebGPUSupport };

package/dist/index.js

@@ -0,0 +1,146 @@
+const e=`
+struct Params {
+  resolution: vec2f,
+  halfSize: vec2f,
+  radius: f32,
+  refraction: f32,
+  band: f32,
+  bevel: f32,
+  bevelExp: f32,
+  dispersion: f32,
+  blur: f32,
+  frost: f32,
+  tint: vec4f,
+  saturation: f32,
+  brightness: f32,
+  specular: f32,
+  specularExp: f32,
+  tilt: vec2f,
+  time: f32,
+  _pad0: f32,
+  _pad1: f32,
+};
+`,t=`
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+};
+
+@vertex
+fn main(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+  var quad = array<vec2f, 4>(
+    vec2f(-1.0, -1.0),
+    vec2f(1.0, -1.0),
+    vec2f(-1.0, 1.0),
+    vec2f(1.0, 1.0),
+  );
+  let pos = quad[vertexIndex];
+  var output: VertexOutput;
+  output.position = vec4f(pos, 0.0, 1.0);
+  output.uv = pos * 0.5 + vec2f(0.5);
+  return output;
+}
+`,n=`
+@group(0) @binding(0) var srcSampler: sampler;
+@group(0) @binding(1) var srcTex: texture_2d<f32>;
+
+@fragment
+fn main(@location(0) uv: vec2f) -> @location(0) vec4f {
+  let texel = 1.0 / vec2f(textureDimensions(srcTex));
+  var color = textureSample(srcTex, srcSampler, uv) * 4.0;
+  color += textureSample(srcTex, srcSampler, uv + vec2f(texel.x, texel.y));
+  color += textureSample(srcTex, srcSampler, uv + vec2f(-texel.x, texel.y));
+  color += textureSample(srcTex, srcSampler, uv + vec2f(texel.x, -texel.y));
+  color += textureSample(srcTex, srcSampler, uv + vec2f(-texel.x, -texel.y));
+  return color / 8.0;
+}
+`,r=`
+@group(0) @binding(0) var srcSampler: sampler;
+@group(0) @binding(1) var srcTex: texture_2d<f32>;
+
+@fragment
+fn main(@location(0) uv: vec2f) -> @location(0) vec4f {
+  let texel = 1.0 / vec2f(textureDimensions(srcTex));
+  var color = textureSample(srcTex, srcSampler, uv) * 4.0;
+  color += textureSample(srcTex, srcSampler, uv + vec2f(texel.x, 0.0));
+  color += textureSample(srcTex, srcSampler, uv + vec2f(-texel.x, 0.0));
+  color += textureSample(srcTex, srcSampler, uv + vec2f(0.0, texel.y));
+  color += textureSample(srcTex, srcSampler, uv + vec2f(0.0, -texel.y));
+  return color / 8.0;
+}
+`,i=`
+${e}
+
+@group(0) @binding(0) var params: Params;
+@group(0) @binding(1) var backdropSampler: sampler;
+@group(0) @binding(2) var backdropTex: texture_2d<f32>;
+
+/**
+ * 圆角矩形 SDF
+ */
+fn sdRoundBox(p: vec2f, b: vec2f, r: f32) -> f32 {
+  let q = abs(p) - b + vec2f(r);
+  let outside = length(max(q, vec2f(0.0)));
+  let inside = min(max(q.x, q.y), 0.0);
+  return outside + inside - r;
+}
+
+/**
+ * SDF 数值梯度 → 单位外法线
+ */
+fn sdNormal(p: vec2f, b: vec2f, r: f32) -> vec2f {
+  let e = 1.0;
+  let dx = sdRoundBox(p + vec2f(e, 0.0), b, r) - sdRoundBox(p - vec2f(e, 0.0), b, r);
+  let dy = sdRoundBox(p + vec2f(0.0, e), b, r) - sdRoundBox(p - vec2f(0.0, e), b, r);
+  return normalize(vec2f(dx, dy) + vec2f(1e-6));
+}
+
+@fragment
+fn main(@location(0) uv: vec2f) -> @location(0) vec4f {
+  let p = (uv - vec2f(0.5)) * params.resolution + params.tilt * 20.0;
+  let sdf = sdRoundBox(p, params.halfSize, params.radius);
+  let normal = sdNormal(p, params.halfSize, params.radius);
+
+  let edge = clamp(1.0 + sdf / max(params.band, 1e-4), 0.0, 1.0);
+  let height = params.refraction * edge + params.bevel * pow(edge, params.bevelExp);
+  let displacement = -normal * height * params.band;
+
+  let uvDisp = uv + displacement / params.resolution;
+
+  // 三通道色散：R/B 沿位移对称缩放（蓝端更大）
+  let rScale = 1.0 - 0.5 * params.dispersion;
+  let bScale = 1.0 + 0.7 * params.dispersion;
+  var color = vec3f(
+    textureSample(backdropTex, backdropSampler, uv + displacement * rScale / params.resolution).r,
+    textureSample(backdropTex, backdropSampler, uvDisp).g,
+    textureSample(backdropTex, backdropSampler, uv + displacement * bScale / params.resolution).b,
+  );
+
+  // 饱和度 / 亮度
+  let luma = dot(color, vec3f(0.299, 0.587, 0.114));
+  color = mix(vec3f(luma), color, params.saturation) * params.brightness;
+
+  // tint 着色
+  color = mix(color, params.tint.rgb, params.tint.a);
+
+  // 双光斑 rim specular（主光随时间轻移 + 对侧镜像光）
+  let lightDir = normalize(vec2f(cos(params.time * 0.3), sin(params.time * 0.3)) + vec2f(0.6, -0.6));
+  let rimMain = pow(clamp(dot(normal, lightDir), 0.0, 1.0), params.specularExp);
+  let rimMirror = pow(clamp(dot(normal, -lightDir), 0.0, 1.0), params.specularExp) * 0.5;
+  color += vec3f((rimMain + rimMirror) * params.specular * edge);
+
+  // SDF mask（1.5px 抗锯齿）
+  let mask = 1.0 - smoothstep(-1.5, 1.5, sdf);
+  return vec4f(color, mask);
+}
+`,a=`
+@group(0) @binding(0) var srcSampler: sampler;
+@group(0) @binding(1) var srcTex: texture_2d<f32>;
+
+@fragment
+fn main(@location(0) uv: vec2f) -> @location(0) vec4f {
+  let c = textureSample(srcTex, srcSampler, uv).rgb;
+  let luma = dot(c, vec3f(0.299, 0.587, 0.114));
+  return vec4f(luma, 0.0, 0.0, 1.0);
+}
+`;function o(e){let t=e.reduce((e,t)=>e+t,0);if(t===0)return{averageLuminance:0,luminanceP50:0,luminanceP90:0};let n=0;for(let t=0;t<e.length;t+=1)n+=(e[t]??0)*t;let r=n=>{let r=0;for(let i=0;i<e.length;i+=1)if(r+=e[i]??0,r/t>=n)return i/255;return 1};return{averageLuminance:n/t/255,luminanceP50:r(.5),luminanceP90:r(.9)}}function s(e){let t=Array(256).fill(0);for(let n=0;n+3<e.length;n+=4){let r=e[n]??0;t[r]=(t[r]??0)+1}return t}function c(e,t,n){return e.beginRenderPass({colorAttachments:[{view:t.createView(),loadOp:`clear`,storeOp:`store`,clearValue:{r:0,g:0,b:0,a:n}}]})}function l(e,t,n,r){return e.createBindGroup({layout:t.getBindGroupLayout(0),entries:[{binding:0,resource:n},{binding:1,resource:r}]})}function u(e,t,n,r,i){if(r.blur+r.frost*8<=.5)return n.backdrop.createView();let a=c(i,n.blurHalf,1);a.setPipeline(t.down),a.setBindGroup(0,l(e,t.down,n.sampler,n.backdrop.createView())),a.draw(4),a.end();let o=c(i,n.blurFull,1);return o.setPipeline(t.up),o.setBindGroup(0,l(e,t.up,n.sampler,n.blurHalf.createView())),o.draw(4),o.end(),n.blurFull.createView()}function d(e,t,n,r){let i=c(r,n.luma,1);i.setPipeline(t.luma),i.setBindGroup(0,l(e,t.luma,n.sampler,n.backdrop.createView())),i.draw(4),i.end(),r.copyTextureToBuffer({texture:n.luma},{buffer:n.lumaBuffer,bytesPerRow:256,rowsPerImage:64},[64,64])}function f(e,t,n){let r=t.shape===`circle`?Math.min(t.width,t.height)/2:t.width/2,i=t.shape===`circle`?Math.min(t.width,t.height)/2:t.height/2,a=t.shape===`circle`?Math.min(r,i):Math.min(t.cornerRadius,Math.min(r,i)-.5);e[0]=n.width,e[1]=n.height,e[2]=r,e[3]=i,e[4]=a,e[5]=t.refraction,e[6]=t.refractionHeight,e[7]=t.bevel,e[8]=t.bevelExponent,e[9]=t.dispersion,e[10]=t.blur,e[11]=t.frost,e[12]=t.tint.r,e[13]=t.tint.g,e[14]=t.tint.b,e[15]=t.tint.a,e[16]=t.saturation,e[17]=t.brightness,e[18]=t.specular,e[19]=t.specularExponent,e[20]=0,e[21]=0,e[22]=performance.now()/1e3}var p=class{backend=`webgpu`;host=null;canvas=null;context=null;device=null;format=`bgra8unorm`;uniformBuffer=null;uniformData=new Float32Array(28);pipelines=null;resources=null;params;size;source=null;ready=Promise.resolve();rafId=0;capturing=!1;lastMetricsTime=0;constructor(e){this.params=e.params,this.size=e.size,this.source=e.backdropSource??null}whenReady(){return this.ready}mount(e){this.host=e;let t=document.createElement(`canvas`);t.style.position=`absolute`,t.style.inset=`0`,t.style.width=`100%`,t.style.height=`100%`,t.style.pointerEvents=`none`,t.style.borderRadius=this.params.shape===`circle`?`50%`:`${this.params.cornerRadius}px`,getComputedStyle(e).position===`static`&&(e.style.position=`relative`),e.appendChild(t),this.canvas=t,this.ready=this.init()}update(e){this.params=e,this.canvas!==null&&(this.canvas.style.borderRadius=e.shape===`circle`?`50%`:`${e.cornerRadius}px`)}resize(e){this.size=e,this.recreateTargets()}setBackdropSource(e){this.source=e}getCapabilities(){return{backend:`webgpu`,supportsRefraction:!0,supportsDispersion:!0,supportsBlur:!0,supportsSpecular:!0,supportsDomBackdrop:!1,experimental:`依赖 WebGPU；DOM 折射需 HTML-in-Canvas 实验特性，未开启时使用纹理源降级`}}async getMetrics(){let e=performance.now(),t=this.device;if(e-this.lastMetricsTime<250||t===null||this.pipelines===null||this.resources===null)return null;this.lastMetricsTime=e;try{let e=t.createCommandEncoder();d(t,this.pipelines,this.resources,e),t.queue.submit([e.finish()]),await this.resources.lumaBuffer.mapAsync(GPUMapMode.READ);let n=new Uint8Array(this.resources.lumaBuffer.getMappedRange().slice(0));return this.resources.lumaBuffer.unmap(),o(s(n))}catch{return null}}unmount(){cancelAnimationFrame(this.rafId),this.source!==null&&this.source.dispose(),this.resources?.backdrop.destroy(),this.resources?.blurHalf.destroy(),this.resources?.blurFull.destroy(),this.resources?.luma.destroy(),this.resources?.lumaBuffer.destroy(),this.uniformBuffer?.destroy(),this.device?.destroy(),this.canvas!==null&&this.canvas.remove(),this.host=null,this.canvas=null,this.context=null,this.device=null,this.resources=null,this.source=null}async init(){if(this.canvas===null||navigator.gpu===void 0)return;let e=await navigator.gpu.requestAdapter();if(e===null)return;let t=await e.requestDevice(),n=this.canvas.getContext(`webgpu`);if(n===null)return;this.device=t,this.context=n,this.format=navigator.gpu.getPreferredCanvasFormat();let r=window.devicePixelRatio>0?window.devicePixelRatio:1;this.canvas.width=Math.max(2,Math.round(this.size.width*r)),this.canvas.height=Math.max(2,Math.round(this.size.height*r)),n.configure({device:t,format:this.format,alphaMode:`premultiplied`}),this.buildPipelines(t),this.buildStaticResources(t),await this.recreateTargets(),await this.captureBackdrop(),this.startLoop()}buildPipelines(e){let t=(t,n)=>({layout:`auto`,vertex:{module:e.createShaderModule({code:t}),entryPoint:`main`},fragment:{module:e.createShaderModule({code:t}),entryPoint:`main`,targets:[{format:n}]},primitive:{topology:`triangle-strip`}});this.pipelines={down:e.createRenderPipeline(t(n,`rgba8unorm`)),up:e.createRenderPipeline(t(r,`rgba8unorm`)),main:e.createRenderPipeline(t(i,this.format)),luma:e.createRenderPipeline(t(a,`rgba8unorm`))}}buildStaticResources(e){this.uniformBuffer=e.createBuffer({size:112,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),this.resources={backdrop:m(e),blurHalf:m(e),blurFull:m(e),luma:e.createTexture({size:[64,64],format:`rgba8unorm`,usage:GPUTextureUsage.RENDER_ATTACHMENT|GPUTextureUsage.COPY_SRC}),lumaBuffer:e.createBuffer({size:16384,usage:GPUBufferUsage.COPY_DST|GPUBufferUsage.MAP_READ}),sampler:e.createSampler({addressModeU:`clamp-to-edge`,addressModeV:`clamp-to-edge`,minFilter:`linear`,magFilter:`linear`})}}async recreateTargets(){let e=this.device;if(e===null||this.canvas===null||this.resources===null)return;let t=Math.max(2,this.canvas.width),n=Math.max(2,this.canvas.height);this.resources.backdrop.destroy(),this.resources.blurHalf.destroy(),this.resources.blurFull.destroy(),this.resources.backdrop=e.createTexture({size:[t,n],format:`rgba8unorm`,usage:GPUTextureUsage.TEXTURE_BINDING|GPUTextureUsage.COPY_DST|GPUTextureUsage.RENDER_ATTACHMENT}),this.resources.blurHalf=e.createTexture({size:[Math.max(2,Math.floor(t/2)),Math.max(2,Math.floor(n/2))],format:`rgba8unorm`,usage:GPUTextureUsage.TEXTURE_BINDING|GPUTextureUsage.RENDER_ATTACHMENT}),this.resources.blurFull=e.createTexture({size:[t,n],format:`rgba8unorm`,usage:GPUTextureUsage.TEXTURE_BINDING|GPUTextureUsage.RENDER_ATTACHMENT})}async captureBackdrop(){let e=this.device;if(!(this.source===null||e===null||this.resources===null||this.canvas===null||this.capturing)){this.capturing=!0;try{let t=await this.source.capture();e.queue.copyExternalImageToTexture({source:t},{texture:this.resources.backdrop},[this.canvas.width,this.canvas.height])}catch{}finally{this.capturing=!1}}}startLoop(){let e=()=>{this.source!==null&&this.source.isDirty()&&this.captureBackdrop(),this.renderFrame(),this.rafId=requestAnimationFrame(e)};this.rafId=requestAnimationFrame(e)}renderFrame(){let e=this.device;if(e===null||this.context===null||this.pipelines===null||this.resources===null||this.uniformBuffer===null)return;f(this.uniformData,this.params,this.size),e.queue.writeBuffer(this.uniformBuffer,0,this.uniformData);let t=e.createCommandEncoder(),n=u(e,this.pipelines,this.resources,this.params,t),r=c(t,this.context.getCurrentTexture(),0);r.setPipeline(this.pipelines.main),r.setBindGroup(0,e.createBindGroup({layout:this.pipelines.main.getBindGroupLayout(0),entries:[{binding:0,resource:{buffer:this.uniformBuffer}},{binding:1,resource:this.resources.sampler},{binding:2,resource:n}]})),r.draw(4),r.end(),e.queue.submit([t.finish()])}};function m(e){return e.createTexture({size:[1,1],format:`rgba8unorm`,usage:GPUTextureUsage.TEXTURE_BINDING})}function h(){return typeof navigator>`u`||typeof window>`u`?{supported:!1,reason:`SSR 或非浏览器环境`,htmlInCanvas:!1}:navigator.gpu===void 0?{supported:!1,reason:`navigator.gpu 不可用`,htmlInCanvas:!1}:{supported:!0,reason:``,htmlInCanvas:typeof HTMLCanvasElement<`u`&&`layoutSubtree`in HTMLCanvasElement.prototype}}export{n as DOWNSAMPLE_WGSL,a as LUMA_WGSL,i as MAIN_WGSL,e as PARAMS_STRUCT,r as UPSAMPLE_WGSL,t as VERTEX_WGSL,p as WebGPURenderer,h as detectWebGPUSupport};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@longzai-intelligence-liquid-glass/webgpu",
+  "version": "0.0.1",
+  "description": "Liquid Glass WebGPU 渲染后端（experimental）",
+  "license": "UNLICENSED",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "lzi-builder",
+    "build:prod": "NODE_ENV=production bun run build",
+    "prepublishOnly": "bun run build:prod",
+    "typecheck": "bun run typecheck:app && bun run typecheck:node && bun run typecheck:test",
+    "typecheck:app": "lzi-tsgo typecheck tsconfig/app.json",
+    "typecheck:node": "lzi-tsgo typecheck tsconfig/node.json",
+    "typecheck:test": "lzi-tsgo typecheck tsconfig/test.json",
+    "lint": "oxlint && oxfmt --check",
+    "lint:fix": "oxlint --fix && oxfmt",
+    "test": "lzi-bun-cli test",
+    "test:watch": "lzi-bun-cli test --watch",
+    "test:coverage": "lzi-bun-cli test --coverage",
+    "clean": "lzi-dev-cli clean"
+  },
+  "dependencies": {
+    "@longzai-intelligence-liquid-glass/core": "0.0.1"
+  },
+  "devDependencies": {
+    "@webgpu/types": "^0.1.64"
+  },
+  "packageManager": "bun@1.3.14"
+}