wgpu-kit 0.9.11 → 1.0.1

package/dist/packs/life/physarum.js

@@ -0,0 +1,228 @@
+import { GpuContext } from "../../core/context.js";
+import { Buffer } from "../../core/buffer.js";
+import { PingPong } from "../../core/pingpong.js";
+import { CompileError } from "../../core/errors.js";
+import { MapRenderer } from "./map.js";
+import { mulberry32 } from "../particles/presets.js";
+const AWG = 32; // count(u32) pad(u32) + sensorAngle, sensorDist, turnAngle, step, deposit, worldHalf (f32×6) = 32
+export async function physarum(config = {}) {
+    const { agents: N = 100_000, mapSize = 1024, sensorAngle = 0.5, sensorDist = 0.012, turnAngle = 0.45, step = 0.003, decay = 0.06, seed = 'physarum', colormap = 'amber', } = config;
+    const seedHash = typeof seed === 'string' ? hashStr(seed) : (seed ?? 7);
+    const ctx = await GpuContext.get();
+    const device = ctx.device;
+    // —— 智能体:中心圆盘出发,朝外 ——
+    const posBuf = await Buffer.create('vec2f', N);
+    const angBuf = await Buffer.create('f32', N);
+    {
+        const rand = mulberry32(seedHash);
+        const p = new Float32Array(N * 2);
+        const a = new Float32Array(N);
+        for (let i = 0; i < N; i++) {
+            const t = rand() * Math.PI * 2;
+            const r = Math.sqrt(rand()) * 0.08;
+            p[i * 2] = Math.cos(t) * r;
+            p[i * 2 + 1] = Math.sin(t) * r;
+            a[i] = t;
+        }
+        posBuf.write(p);
+        angBuf.write(a);
+    }
+    // —— 信息素图(双缓冲) ——
+    const trail = await PingPong.create({ t: 'f32' }, mapSize * mapSize);
+    const trailA = trail.current.t;
+    const trailB = trail.other.t;
+    const uniform = device.createBuffer({ size: AWG, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+    const writeUniform = () => {
+        const buf = new ArrayBuffer(AWG);
+        const v = new DataView(buf);
+        v.setUint32(0, N, true);
+        v.setUint32(4, 0, true);
+        v.setFloat32(8, sensorAngle, true);
+        v.setFloat32(12, sensorDist, true);
+        v.setFloat32(16, turnAngle, true);
+        v.setFloat32(20, step, true);
+        v.setFloat32(24, 1.0, true); // deposit
+        v.setFloat32(28, 1.0, true); // worldHalf
+        device.queue.writeBuffer(uniform, 0, buf);
+    };
+    writeUniform();
+    const diffuseUniform = device.createBuffer({ size: 16, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+    device.queue.writeBuffer(diffuseUniform, 0, new Uint32Array([mapSize, mapSize]));
+    // decay 写进 diffuse kernel 的第二个 uniform?并成 16B:w,h,decayFrac,pad
+    device.queue.writeBuffer(diffuseUniform, 8, new Float32Array([1 - decay, 0]));
+    const compile = async (code, label) => {
+        const m = device.createShaderModule({ code, label });
+        const info = await m.getCompilationInfo();
+        const errors = info.messages.filter((x) => x.type === 'error');
+        if (errors.length > 0)
+            throw new CompileError(label, errors.map((x) => ({ line: x.lineNum, msg: x.message })), 0);
+        return m;
+    };
+    const mAgent = await compile(agentWgsl(mapSize), 'physarum-agent');
+    const mDiffuse = await compile(diffuseWgsl(), 'physarum-diffuse');
+    const pAgent = device.createComputePipeline({ layout: 'auto', compute: { module: mAgent, entryPoint: 'main' } });
+    const pDiffuse = device.createComputePipeline({ layout: 'auto', compute: { module: mDiffuse, entryPoint: 'main' } });
+    const bgAgent = (t) => device.createBindGroup({
+        layout: pAgent.getBindGroupLayout(0),
+        entries: [
+            { binding: 0, resource: { buffer: uniform } },
+            { binding: 1, resource: { buffer: posBuf.gpuBuffer } },
+            { binding: 2, resource: { buffer: angBuf.gpuBuffer } },
+            { binding: 3, resource: { buffer: t.gpuBuffer } },
+        ],
+    });
+    const bgDiffuse = (read, write) => device.createBindGroup({
+        layout: pDiffuse.getBindGroupLayout(0),
+        entries: [
+            { binding: 0, resource: { buffer: diffuseUniform } },
+            { binding: 1, resource: { buffer: read.gpuBuffer } },
+            { binding: 2, resource: { buffer: write.gpuBuffer } },
+        ],
+    });
+    let renderer = null;
+    let frame = 0;
+    let lastFps = 0;
+    let fFrames = 0;
+    let fAcc = 0;
+    let fLast = performance.now();
+    return {
+        async attach(canvas) {
+            const dpr = Math.min(window.devicePixelRatio || 1, 2);
+            canvas.width = Math.max(1, Math.floor(canvas.clientWidth * dpr));
+            canvas.height = Math.max(1, Math.floor(canvas.clientHeight * dpr));
+            renderer = await MapRenderer.create(canvas, { width: mapSize, height: mapSize, maxV: 6.0, gamma: 0.6, colormap });
+        },
+        tick() {
+            const readT = trail.current.t;
+            const writeT = trail.other.t;
+            const enc = device.createCommandEncoder();
+            const pass = enc.beginComputePass();
+            // 智能体:感知/转向/移动/沉积(在当前 trail 上就地沉积)
+            pass.setPipeline(pAgent);
+            pass.setBindGroup(0, bgAgent(readT));
+            pass.dispatchWorkgroups(Math.ceil(N / 64));
+            // 扩散 + 衰减 → 另一侧
+            pass.setPipeline(pDiffuse);
+            pass.setBindGroup(0, bgDiffuse(readT, writeT));
+            pass.dispatchWorkgroups(Math.ceil((mapSize * mapSize) / 64));
+            pass.end();
+            device.queue.submit([enc.finish()]);
+            renderer?.render(writeT);
+            trail.swap();
+            frame++;
+            fFrames++;
+            const now = performance.now();
+            fAcc += now - fLast;
+            fLast = now;
+            if (fAcc >= 500) {
+                lastFps = fFrames / (fAcc / 1000);
+                fFrames = 0;
+                fAcc = 0;
+            }
+        },
+        stats() { return { fps: lastFps }; },
+        async sampleTrail() {
+            return (await trail.current.t.read());
+        },
+        destroy() {
+            posBuf.destroy();
+            angBuf.destroy();
+            trail.destroy();
+            uniform.destroy();
+            diffuseUniform.destroy();
+        },
+    };
+}
+function agentWgsl(trailW) {
+    return /* wgsl */ `
+const TRAIL_W: u32 = ${trailW}u;
+const TRAIL_MASK: u32 = ${trailW - 1}u;
+struct Params {
+  count: u32, _pad: u32,
+  sensorAngle: f32, sensorDist: f32, turnAngle: f32, step: f32,
+  deposit: f32, worldHalf: f32,
+};
+@group(0) @binding(0) var<uniform> params: Params;
+@group(0) @binding(1) var<storage, read_write> pos: array<vec2f>;
+@group(0) @binding(2) var<storage, read_write> ang: array<f32>;
+@group(0) @binding(3) var<storage, read_write> trail: array<f32>;
+
+fn texel(p: vec2f) -> u32 {
+  let x = min(u32((p.x * 0.5 + 0.5) * f32(TRAIL_W)), TRAIL_MASK);
+  let y = min(u32((p.y * 0.5 + 0.5) * f32(TRAIL_W)), TRAIL_MASK);
+  return y * TRAIL_W + x;
+}
+
+fn sense(p: vec2f, a: f32) -> f32 {
+  return trail[texel(p + vec2f(cos(a), sin(a)) * params.sensorDist)];
+}
+
+@compute @workgroup_size(64)
+fn main(@builtin(global_invocation_id) gid: vec3u) {
+  let i = gid.x;
+  if (i >= params.count) { return; }
+  let p = pos[i];
+  var a = ang[i];
+
+  let fwd = sense(p, a);
+  let left = sense(p, a - params.sensorAngle);
+  let right = sense(p, a + params.sensorAngle);
+
+  let jitter = (f32((i * 2654435761u + 1u) % 100u) / 100.0 - 0.5) * 0.1;
+  if (fwd > left && fwd > right) {
+    // 直行
+  } else if (left > right) {
+    a = a - params.turnAngle;
+  } else if (right > left) {
+    a = a + params.turnAngle;
+  }
+  a = a + jitter * 0.1;
+
+  var np = p + vec2f(cos(a), sin(a)) * params.step;
+  let h = params.worldHalf;
+  if (abs(np.x) > h || abs(np.y) > h) {
+    np = clamp(np, vec2f(-h), vec2f(h));
+    a = a + 3.14159265; // 撞墙掉头
+  }
+  pos[i] = np;
+  ang[i] = a;
+  let t = texel(np);
+  trail[t] = trail[t] + params.deposit;
+}
+`;
+}
+function diffuseWgsl() {
+    return /* wgsl */ `
+@group(0) @binding(0) var<uniform> vp: vec4f; // w, h, keep(1-decay), pad
+@group(0) @binding(1) var<storage, read> src: array<f32>;
+@group(0) @binding(2) var<storage, read_write> dst: array<f32>;
+
+@compute @workgroup_size(64)
+fn main(@builtin(global_invocation_id) gid: vec3u) {
+  let i = gid.x;
+  let w = u32(vp.x);
+  let h = u32(vp.y);
+  if (i >= w * h) { return; }
+  let x = i32(i % w);
+  let y = i32(i / w);
+
+  // 4 邻域 + 自身 混合(扩散),再乘 keep(衰减)
+  let c = src[i];
+  var s = c * 2.0;
+  s = s + src[u32(clamp(y - 1, 0, i32(h) - 1)) * w + u32(clamp(x, 0, i32(w) - 1))];
+  s = s + src[u32(clamp(y + 1, 0, i32(h) - 1)) * w + u32(clamp(x, 0, i32(w) - 1))];
+  s = s + src[u32(clamp(y, 0, i32(h) - 1)) * w + u32(clamp(x - 1, 0, i32(w) - 1))];
+  s = s + src[u32(clamp(y, 0, i32(h) - 1)) * w + u32(clamp(x + 1, 0, i32(w) - 1))];
+  let blurred = s / 6.0;
+  dst[i] = mix(blurred, c, 0.5) * vp.z;
+}
+`;
+}
+function hashStr(s) {
+    let h = 2166136261;
+    for (let i = 0; i < s.length; i++) {
+        h ^= s.charCodeAt(i);
+        h = Math.imul(h, 16777619);
+    }
+    return h >>> 0;
+}

package/dist/packs/life/tentacles.js

@@ -0,0 +1,238 @@
+import { GpuContext } from "../../core/context.js";
+import { Buffer } from "../../core/buffer.js";
+import { PingPong } from "../../core/pingpong.js";
+import { CompileError } from "../../core/errors.js";
+const USIZE = 32;
+export async function tentacles(config = {}) {
+    const { chains = 48, segments = 64, segLen = 0.018, gravity = 0.00035, damping = 0.985, iterations = 10, thickness = 0.006, colorCycle = 0.35, } = config;
+    const N = chains * segments;
+    const ctx = await GpuContext.get();
+    const device = ctx.device;
+    const pp = await PingPong.create({ pos: 'vec2f' }, N);
+    const prev = await Buffer.create('vec2f', N);
+    {
+        const p = new Float32Array(N * 2);
+        pp.current.pos.write(p);
+        prev.write(p);
+    }
+    const uniform = device.createBuffer({ size: USIZE, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+    let time = 0;
+    const writeUniform = () => {
+        const b = new ArrayBuffer(USIZE);
+        const v = new DataView(b);
+        v.setUint32(0, N, true);
+        v.setUint32(4, segments, true);
+        v.setFloat32(8, segLen, true);
+        v.setFloat32(12, gravity, true);
+        v.setFloat32(16, damping, true);
+        v.setFloat32(20, time, true);
+        v.setFloat32(24, 0.45, true); // anchorR
+        v.setUint32(28, iterations, true);
+        device.queue.writeBuffer(uniform, 0, b);
+    };
+    const module = device.createShaderModule({ code: tentaclesWgsl(thickness, colorCycle), label: 'tentacles' });
+    const info = await module.getCompilationInfo();
+    const errors = info.messages.filter((m) => m.type === 'error');
+    if (errors.length > 0)
+        throw new CompileError('tentacles', errors.map((m) => ({ line: m.lineNum, msg: m.message })), 0);
+    const pIntegrate = device.createComputePipeline({ layout: 'auto', compute: { module, entryPoint: 'main_integrate' } });
+    const pConstraint = device.createComputePipeline({ layout: 'auto', compute: { module, entryPoint: 'main_constraint' } });
+    const pRender = device.createRenderPipeline({
+        layout: 'auto',
+        vertex: { module, entryPoint: 'vs' },
+        fragment: { module, entryPoint: 'fs', targets: [{ format: navigator.gpu.getPreferredCanvasFormat() }] },
+        primitive: { topology: 'triangle-list' },
+    });
+    const bgIntegrate = (read, write) => device.createBindGroup({
+        layout: pIntegrate.getBindGroupLayout(0),
+        entries: [
+            { binding: 0, resource: { buffer: uniform } },
+            { binding: 1, resource: { buffer: read.gpuBuffer } },
+            { binding: 2, resource: { buffer: prev.gpuBuffer } },
+            { binding: 3, resource: { buffer: write.gpuBuffer } },
+        ],
+    });
+    const bgConstraint = (read, write) => device.createBindGroup({
+        layout: pConstraint.getBindGroupLayout(0),
+        entries: [
+            { binding: 0, resource: { buffer: uniform } },
+            { binding: 1, resource: { buffer: read.gpuBuffer } },
+            { binding: 2, resource: { buffer: write.gpuBuffer } },
+        ],
+    });
+    const bgRenderCache = new Map();
+    const ids = new WeakMap();
+    const bgRender = (pos) => {
+        let id = ids.get(pos.gpuBuffer);
+        if (id === undefined) {
+            id = bgRenderCache.size + 1;
+            ids.set(pos.gpuBuffer, id);
+        }
+        let bg = bgRenderCache.get(id);
+        if (!bg) {
+            bg = device.createBindGroup({
+                layout: pRender.getBindGroupLayout(0),
+                entries: [
+                    { binding: 0, resource: { buffer: uniform } },
+                    { binding: 1, resource: { buffer: pos.gpuBuffer } },
+                ],
+            });
+            bgRenderCache.set(id, bg);
+        }
+        return bg;
+    };
+    let gpuCtx = null;
+    let frame = 0;
+    let lastFps = 0;
+    let fFrames = 0;
+    let fAcc = 0;
+    let fLast = performance.now();
+    return {
+        async attach(canvas) {
+            const dpr = Math.min(window.devicePixelRatio || 1, 2);
+            canvas.width = Math.max(1, Math.floor(canvas.clientWidth * dpr));
+            canvas.height = Math.max(1, Math.floor(canvas.clientHeight * dpr));
+            const c = canvas.getContext('webgpu');
+            if (!c)
+                throw new Error('canvas.getContext("webgpu") 返回空');
+            c.configure({ device, format: navigator.gpu.getPreferredCanvasFormat(), alphaMode: 'opaque' });
+            gpuCtx = c;
+        },
+        tick() {
+            time += 1 / 60;
+            writeUniform();
+            // 积分:读 current 写 other,swap 后 current = 最新
+            const enc = device.createCommandEncoder();
+            const pass = enc.beginComputePass();
+            pass.setPipeline(pIntegrate);
+            pass.setBindGroup(0, bgIntegrate(pp.current.pos, pp.other.pos));
+            pass.dispatchWorkgroups(Math.ceil(N / 64));
+            pass.end();
+            device.queue.submit([enc.finish()]);
+            pp.swap();
+            // 约束:每轮 ping-pong,杜绝同 dispatch 内相邻节点竞态
+            const enc2 = device.createCommandEncoder();
+            const pass2 = enc2.beginComputePass();
+            pass2.setPipeline(pConstraint);
+            for (let r = 0; r < iterations; r++) {
+                pass2.setBindGroup(0, bgConstraint(pp.current.pos, pp.other.pos));
+                pass2.dispatchWorkgroups(Math.ceil(N / 64));
+                pp.swap();
+            }
+            pass2.end();
+            device.queue.submit([enc2.finish()]);
+            if (gpuCtx) {
+                const re = device.createCommandEncoder();
+                const rp = re.beginRenderPass({
+                    colorAttachments: [{
+                            view: gpuCtx.getCurrentTexture().createView(),
+                            clearValue: { r: 0.012, g: 0.016, b: 0.03, a: 1 },
+                            loadOp: 'clear', storeOp: 'store',
+                        }],
+                });
+                rp.setPipeline(pRender);
+                rp.setBindGroup(0, bgRender(pp.current.pos));
+                rp.draw(6, N);
+                rp.end();
+                device.queue.submit([re.finish()]);
+            }
+            frame++;
+            fFrames++;
+            const now = performance.now();
+            fAcc += now - fLast;
+            fLast = now;
+            if (fAcc >= 500) {
+                lastFps = fFrames / (fAcc / 1000);
+                fFrames = 0;
+                fAcc = 0;
+            }
+        },
+        stats() { return { fps: lastFps }; },
+        buffers() { return { pos: pp.current.pos }; },
+        destroy() {
+            pp.destroy();
+            prev.destroy();
+            uniform.destroy();
+        },
+    };
+}
+function tentaclesWgsl(thickness, colorCycle) {
+    return /* wgsl */ `
+struct Params {
+  count: u32, segments: u32,
+  segLen: f32, gravity: f32, damping: f32, time: f32,
+  anchorR: f32, iterations: u32,
+};
+@group(0) @binding(0) var<uniform> params: Params;
+@group(0) @binding(1) var<storage, read> posIn: array<vec2f>;
+@group(0) @binding(2) var<storage, read_write> posOut: array<vec2f>;
+@group(0) @binding(3) var<storage, read_write> prev: array<vec2f>;
+
+fn anchorPos(chain: u32, t: f32) -> vec2f {
+  let phase = f32(chain) * 2.399963; // 黄金角:链与链永不重叠排布
+  let x = cos(t * 0.7 + phase) * params.anchorR;
+  let y = sin(t * 1.13 + phase * 1.7) * params.anchorR * 0.55;
+  return vec2f(x, y);
+}
+
+@compute @workgroup_size(64)
+fn main_integrate(@builtin(global_invocation_id) gid: vec3u) {
+  let i = gid.x;
+  if (i >= params.count) { return; }
+  let segs = params.segments;
+  let k = i % segs;
+  let chain = i / segs;
+  if (k == 0u) {
+    let anchor = anchorPos(chain, params.time);
+    posOut[i] = anchor;
+    prev[i] = anchor;
+    return;
+  }
+  let vel = (posIn[i] - prev[i]) * params.damping;
+  prev[i] = posIn[i];
+  posOut[i] = posIn[i] + vel + vec2f(0.0, -params.gravity);
+}
+
+// 跟随约束:读 posIn 写 posOut(单线程单数据,零竞态)
+@compute @workgroup_size(64)
+fn main_constraint(@builtin(global_invocation_id) gid: vec3u) {
+  let i = gid.x;
+  if (i >= params.count) { return; }
+  let segs = params.segments;
+  let k = i % segs;
+  if (k == 0u) { posOut[i] = posIn[i]; return; }
+  let d = posIn[i] - posIn[i - 1u];
+  let l = length(d) + 1e-6;
+  posOut[i] = posIn[i - 1u] + d / l * params.segLen;
+}
+
+struct VsOut {
+  @builtin(position) clip: vec4f,
+  @location(0) color: vec3f,
+};
+@group(0) @binding(0) var<uniform> vp: Params;
+@group(0) @binding(1) var<storage, read> posR: array<vec2f>;
+
+@vertex
+fn vs(@builtin(vertex_index) v: u32, @builtin(instance_index) inst: u32) -> VsOut {
+  let segs = vp.segments;
+  let k = inst % segs;
+  let chain = inst / segs;
+  let taper = 1.0 - f32(k) / f32(segs);
+  let r = ${(thickness * 1.1).toFixed(5)} * (0.25 + 0.75 * taper);
+  var corner = array<vec2f, 6>(
+    vec2f(-r, -r), vec2f(r, -r), vec2f(-r, r),
+    vec2f(-r, r), vec2f(r, -r), vec2f(r, r)
+  );
+  var out: VsOut;
+  out.clip = vec4f(posR[inst] + corner[v], 0.0, 1.0);
+  out.color = 0.5 + 0.5 * cos(f32(chain) * ${colorCycle.toFixed(3)} + vec3f(0.0, 2.1, 4.2)) * (0.4 + 0.6 * taper);
+  return out;
+}
+
+@fragment
+fn fs(in: VsOut) -> @location(0) vec4f {
+  return vec4f(in.color, 1.0);
+}
+`;
+}

package/dist/packs/life/turing.js

@@ -0,0 +1,203 @@
+import { GpuContext } from "../../core/context.js";
+import { Buffer } from "../../core/buffer.js";
+import { PingPong } from "../../core/pingpong.js";
+import { CompileError } from "../../core/errors.js";
+import { MapRenderer } from "./map.js";
+import { mulberry32 } from "../particles/presets.js";
+const PRESETS = {
+    coral: { f: 0.0545, k: 0.062 },
+    mitosis: { f: 0.0367, k: 0.0649 },
+    spots: { f: 0.03, k: 0.062 },
+    waves: { f: 0.014, k: 0.045 },
+};
+const USIZE = 32; // w,h (u32×2) + f,k,dA,dB,dt (f32×5) = 28 → 32
+export async function turing(config = {}) {
+    const size = config.size ?? 512;
+    const preset = config.preset ?? 'coral';
+    const p = preset === 'custom' ? { f: config.feed ?? 0.037, k: config.kill ?? 0.06 } : PRESETS[preset];
+    const steps = config.steps ?? 12;
+    const seedHash = typeof config.seed === 'string' ? hashStr(config.seed) : (config.seed ?? 42);
+    const colormap = config.colormap ?? 'duotone';
+    const ctx = await GpuContext.get();
+    const device = ctx.device;
+    const state = await PingPong.create({ st: 'vec2f' }, size * size);
+    const sideA = state.current.st;
+    const sideB = state.other.st;
+    // 初始化:A=1,B 在随机小方块里 =1
+    {
+        const rand = mulberry32(seedHash);
+        const init = new Float32Array(size * size * 2);
+        for (let i = 0; i < size * size; i++)
+            init[i * 2] = 1;
+        for (let s = 0; s < 10; s++) {
+            const cx = 40 + Math.floor(rand() * (size - 80));
+            const cy = 40 + Math.floor(rand() * (size - 80));
+            const r = 3 + Math.floor(rand() * 6);
+            for (let y = cy - r; y <= cy + r; y++) {
+                for (let x = cx - r; x <= cx + r; x++) {
+                    const idx = ((y + size) % size) * size + ((x + size) % size);
+                    init[idx * 2] = 0.5;
+                    init[idx * 2 + 1] = 0.25;
+                }
+            }
+        }
+        sideA.write(init);
+    }
+    const uniform = device.createBuffer({ size: USIZE, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+    const params = { f: p.f, k: p.k, dA: 1.0, dB: 0.5, dt: 1.0 };
+    const writeUniform = () => {
+        const buf = new ArrayBuffer(USIZE);
+        const v = new DataView(buf);
+        v.setUint32(0, size, true);
+        v.setUint32(4, size, true);
+        v.setFloat32(8, params.f, true);
+        v.setFloat32(12, params.k, true);
+        v.setFloat32(16, params.dA, true);
+        v.setFloat32(20, params.dB, true);
+        v.setFloat32(24, params.dt, true);
+        device.queue.writeBuffer(uniform, 0, buf);
+    };
+    writeUniform();
+    const module = device.createShaderModule({ code: updateWgsl(), label: 'turing-update' });
+    const info = await module.getCompilationInfo();
+    const errors = info.messages.filter((m) => m.type === 'error');
+    if (errors.length > 0)
+        throw new CompileError('turing-update', errors.map((m) => ({ line: m.lineNum, msg: m.message })), 0);
+    const pipeline = device.createComputePipeline({ layout: 'auto', compute: { module, entryPoint: 'main' } });
+    const bg = (read, write) => device.createBindGroup({
+        layout: pipeline.getBindGroupLayout(0),
+        entries: [
+            { binding: 0, resource: { buffer: uniform } },
+            { binding: 1, resource: { buffer: read.gpuBuffer } },
+            { binding: 2, resource: { buffer: write.gpuBuffer } },
+        ],
+    });
+    const bgAB = bg(sideA, sideB);
+    const bgBA = bg(sideB, sideA);
+    let renderer = null;
+    let frame = 0;
+    let lastFps = 0;
+    let fFrames = 0;
+    let fAcc = 0;
+    let fLast = performance.now();
+    return {
+        config: { size, preset, feed: params.f, kill: params.k, steps },
+        async attach(canvas) {
+            const dpr = Math.min(window.devicePixelRatio || 1, 2);
+            canvas.width = Math.max(1, Math.floor(canvas.clientWidth * dpr));
+            canvas.height = Math.max(1, Math.floor(canvas.clientHeight * dpr));
+            renderer = await MapRenderer.create(canvas, { width: size, height: size, maxV: 0.9, gamma: 0.85, colormap });
+        },
+        tick() {
+            const base = frame * steps; // 全局迭代序号决定数据在哪一侧(奇偶必须跨帧连续)
+            const enc = device.createCommandEncoder();
+            const pass = enc.beginComputePass();
+            pass.setPipeline(pipeline);
+            for (let s = 0; s < steps; s++) {
+                pass.setBindGroup(0, (base + s) % 2 === 0 ? bgAB : bgBA);
+                pass.dispatchWorkgroups(Math.ceil((size * size) / 64));
+            }
+            pass.end();
+            device.queue.submit([enc.finish()]);
+            // 渲染最后一步写入的一侧
+            renderer?.render((base + steps - 1) % 2 === 0 ? sideB : sideA);
+            for (let s = 0; s < steps; s++)
+                state.swap();
+            frame++;
+            fFrames++;
+            const now = performance.now();
+            fAcc += now - fLast;
+            fLast = now;
+            if (fAcc >= 500) {
+                lastFps = fFrames / (fAcc / 1000);
+                fFrames = 0;
+                fAcc = 0;
+            }
+        },
+        sprinkle(count = 6) {
+            const rand = mulberry32((seedHash + frame) >>> 0);
+            const patch = new Float32Array(size * size * 2);
+            for (let s = 0; s < count; s++) {
+                const cx = Math.floor(rand() * size);
+                const cy = Math.floor(rand() * size);
+                const r = 2 + Math.floor(rand() * 5);
+                for (let y = cy - r; y <= cy + r; y++) {
+                    for (let x = cx - r; x <= cx + r; x++) {
+                        const idx = ((y + size) % size) * size + ((x + size) % size);
+                        patch[idx * 2] = 0.5;
+                        patch[idx * 2 + 1] = 0.25;
+                    }
+                }
+            }
+            device.queue.writeBuffer(state.current.st.gpuBuffer, 0, patch);
+        },
+        stats() { return { fps: lastFps }; },
+        async sampleB() {
+            const data = (await state.current.st.read());
+            const out = new Float32Array(size * size);
+            for (let i = 0; i < out.length; i++)
+                out[i] = data[i * 2 + 1] ?? 0;
+            return out;
+        },
+        destroy() {
+            state.destroy();
+            uniform.destroy();
+        },
+    };
+}
+function updateWgsl() {
+    return /* wgsl */ `
+struct Params {
+  w: u32, h: u32,
+  f: f32, k: f32, dA: f32, dB: f32, dt: f32,
+};
+@group(0) @binding(0) var<uniform> params: Params;
+@group(0) @binding(1) var<storage, read> src: array<vec2f>;
+@group(0) @binding(2) var<storage, read_write> dst: array<vec2f>;
+
+fn at(x: i32, y: i32) -> vec2f {
+  let w = i32(params.w);
+  let h = i32(params.h);
+  let xi = (x + w) % w;
+  let yi = (y + h) % h;
+  return src[u32(yi) * u32(w) + u32(xi)];
+}
+
+@compute @workgroup_size(64)
+fn main(@builtin(global_invocation_id) gid: vec3u) {
+  let i = gid.x;
+  if (i >= params.w * params.h) { return; }
+  let x = i32(i % params.w);
+  let y = i32(i / params.w);
+
+  // 9 点 Laplacian:正交 0.2,对角 0.05
+  var lapA = -1.0 * at(x, y).x;
+  var lapB = -1.0 * at(x, y).y;
+  for (var dy = -1; dy <= 1; dy++) {
+    for (var dx = -1; dx <= 1; dx++) {
+      if (dx == 0 && dy == 0) { continue; }
+      let s = at(x + dx, y + dy);
+      let wgt = select(0.05, 0.2, dx == 0 || dy == 0);
+      lapA = lapA + wgt * s.x;
+      lapB = lapB + wgt * s.y;
+    }
+  }
+
+  let a = at(x, y).x;
+  let b = at(x, y).y;
+  var a2 = a + (params.dA * lapA - a * b * b + params.f * (1.0 - a)) * params.dt;
+  var b2 = b + (params.dB * lapB + a * b * b - (params.k + params.f) * b) * params.dt;
+  a2 = clamp(a2, 0.0, 1.0);
+  b2 = clamp(b2, 0.0, 1.0);
+  dst[i] = vec2f(a2, b2);
+}
+`;
+}
+function hashStr(s) {
+    let h = 2166136261;
+    for (let i = 0; i < s.length; i++) {
+        h ^= s.charCodeAt(i);
+        h = Math.imul(h, 16777619);
+    }
+    return h >>> 0;
+}

package/dist/packs/particles/config.d.ts

@@ -38,6 +38,7 @@ export interface ResolvedConfig {
     beta: number;
     forceFactor: number;
     friction: number;
+    frictionHalfLife: number;
     dt: number;
     pointSize: number;
     maxNeighbors: number;