WebGPU 计算着色器驱动网格变形与弹簧质点布料模拟（Cloth Simulation）

在三维数字交互与高端服装展示中**布料模拟Cloth Simulation**以其独特的柔顺飘逸感和极富表现力的褶皱光影成为衡量图形引擎物理真实度的试金石。当一面迎风招展的丝绸旗帜在虚空中翻卷或者用户用鼠标轻轻拉扯一张悬挂的幕布并松手回弹柔性体在重力、风力与纤维张力相互交织下的形变能带给人极强的触觉代入感。然而在过去很长一段时间里由于 JavaScript 单线程算力的匮乏以及 WebGL 缺乏通用的并行写回机制在浏览器中运行上万个顶点的布料模拟几乎是不可想象的如果在 CPU 中逐帧迭代弹簧受力一个 $60 \times 60$3600 个质点、14000 根弹簧的网格就能让主线程耗时飙升至 40ms 以上帧率瞬间跌破 20fps如果采用显式欧拉积分Explicit Euler稍有扰动数值就会疯狂发散导致整块布料瞬间“撕裂爆炸飞出视口”。随着WebGPU计算管线的成熟我们终于能够将复杂的**基于位置的动力学PBDPosition Based Dynamics与质点-弹簧系统Mass-Spring System**全量搬上 GPU 的并行计算着色器Compute Shader。本文将深入拆解布料拓扑结构、Verlet 积分方程与 WGSL 并行约束求解器手手写一套高精度、高稳定性的 WebGPU 实时布料模拟引擎。物理拓扑三重弹簧质点网络真实的织物由横向经线与纵向纬线编织而成具有抗拉伸但极易弯曲的非对称物理特性。为了在离散网格上模拟这种各向异性质点网格内部必须布设三重拓扑弹簧(i-1, j) ───[结构弹簧]─── (i, j) ───[结构弹簧]─── (i1, j) │ \ / │ \ / │ │ \ [剪切弹簧] / │ \ [剪切弹簧] / │ │ \ / │ \ / │ (i, j-1) ───[结构弹簧]─── (i, j) ───[结构弹簧]─── (i, j1)结构弹簧Structural Springs连接网格水平与垂直方向的直接相邻质点 $(i \pm 1, j)$ 与 $(i, j \pm 1)$。提供基础抗拉伸与抗压缩刚度维持布料基本尺寸剪切弹簧Shear Springs连接对角线上的质点 $(i \pm 1, j \pm 1)$。抵抗四边形发生菱形剪切形变弯曲弹簧Bending Springs跨越一个质点连接 $(i \pm 2, j)$ 与 $(i, j \pm 2)$。抵抗布料发生尖锐的死褶折痕赋予丝绸般温润柔和的垂坠感。数值积分稳定性摒弃欧拉拥抱 Verlet 积分传统的欧拉法 $x_{t1} x_t v_t \Delta t$ 属于一阶条件稳定算法面对大刚度弹簧极易出现能量暴增。在现代布料物理引擎中标准实践是采用Verlet 积分。它完全消除了显式的速度变量直接基于当前位置与上一帧旧位置的差分来隐式表达动量$$\mathbf{x}_{t \Delta t} \mathbf{x}t (1 - \text{damping}) \cdot (\mathbf{x}t - \mathbf{x}{t - \Delta t}) \mathbf{a}{\text{ext}} \cdot \Delta t^2$$其中 $\mathbf{a}{\text{ext}} \mathbf{g} \mathbf{f}{\text{wind}} / m$ 为重力与风力加速度合力。距离约束投影Distance Constraint Relaxation在 Verlet 步进之后网格上的弹簧长度可能会被拉长或压短。我们需要对每对质点 $(A, B)$ 施加硬几何约束将其强行拉回初始原长 $L_0$$$\Delta \mathbf{x}_A -\frac{w_A}{w_A w_B} \cdot (|\mathbf{x}_A - \mathbf{x}_B| - L_0) \cdot \frac{\mathbf{x}_A - \mathbf{x}_B}{|\mathbf{x}_A - \mathbf{x}_B|}$$其中 $w 1/m$ 为逆质量被图钉固定的悬挂角点逆质量设为 0永不移动。GPU 并行写冲突破解棋盘格交错调度Checkerboard Coloring在 GPU 上并行求解弹簧约束时存在一个致命问题相邻两个弹簧共享了同一个质点 $A$。如果两组计算线程同时尝试更新质点 $A$ 的坐标会引发显存竞争写入Race Condition。我们采用经典图论中的棋盘格四色划分Checkerboard Partitioning第一批只计算偶数行的横向弹簧第二批只计算奇数行的横向弹簧第三批计算偶数列的纵向弹簧第四批计算奇数列的纵向弹簧。每一批内部的所有弹簧完全互不相交完美契合 GPU 的大规模无锁并行并发核心着色器手写实战WGSL 布料动力学管线下面展示负责执行 Verlet 积分与风力驱动的核心 WGSL 计算着色器// cloth_simulate.wgsl struct Particle { pos: vec3f32, invMass: f32, // 0.0 表示固定锚点1.0 表示自由质点 oldPos: vec3f32, normal: vec3f32, }; struct SimParams { gridSize: vec2u32, // 如 64x64 restDistance: f32, // 初始网格间距 dt: f32, // 步长 damping: f32, // 阻尼空气阻力 (如 0.015) gravity: vec3f32, // 重力向量 (0, -9.8, 0) wind: vec3f32, // 动态正弦风力向量 }; group(0) binding(0) varuniform params: SimParams; group(0) binding(1) varstorage, read_write particles: arrayParticle; compute workgroup_size(8, 8) fn cs_verlet(builtin(global_invocation_id) id: vec3u32) { if (id.x params.gridSize.x || id.y params.gridSize.y) { return; } let index id.y * params.gridSize.x id.x; var p particles[index]; // 固定点不执行积分 if (p.invMass 0.0) { return; } // 1. 估算外力加速度 (重力 正弦空气乱流风力) let noise sin(p.pos.x * 2.0 p.pos.y * 3.0) * 0.5 0.5; let windAcc params.wind * noise; let totalAcc params.gravity windAcc; // 2. Verlet 积分位置步进 let tempPos p.pos; let velocity (p.pos - p.oldPos) * (1.0 - params.damping); p.pos p.pos velocity totalAcc * (params.dt * params.dt); p.oldPos tempPos; // 写回显存 particles[index] p; }紧接着执行弹簧距离约束松弛的着色器 Pass// cloth_constraints.wgsl compute workgroup_size(8, 8) fn cs_solve_constraints(builtin(global_invocation_id) id: vec3u32) { // 求解偶数行横向结构弹簧约束 let x id.x * 2u; let y id.y; if (x 1u params.gridSize.x || y params.gridSize.y) { return; } let idxA y * params.gridSize.x x; let idxB idxA 1u; var pA particles[idxA]; var pB particles[idxB]; let delta pA.pos - pB.pos; let dist length(delta); if (dist 1e-5) { let diff (dist - params.restDistance) / dist; let wA pA.invMass; let wB pB.invMass; let totalW wA wB; if (totalW 0.0) { // 位置反向投影 pA.pos - delta * (wA / totalW) * diff * 0.5; pB.pos delta * (wB / totalW) * diff * 0.5; particles[idxA] pA; particles[idxB] pB; } } }渲染直通法线自适应重算与 PBR 丝绸高光在每一帧完成 5 次约束迭代后布料网格在 GPU 内通过相邻三角面向量叉积Cross Product并发重构顶点法线 $\vec{N} \vec{U} \times \vec{V}$。随后渲染管线直接将该 Storage Buffer 当作顶点位置直接传入配合具有**各向异性Anisotropic**高光的 PBR 材质着色器呈现出丝绸顺着经纬线折射出的流动光泽。交互实战鼠标抓取与风力扰动在前端我们只需将鼠标光标的归一化屏幕射线投射到三维网格上找到距离最近的质点将其invMass临时设为 0并将其坐标强行锁定在鼠标拖拽位置即可在浏览器中获得极为逼真的“拉扯布料、随后松手自然抖动垂落”的极致物理手感。结语算力跃迁赋予的前端物理新生从机械呆板的静态网格到充满柔顺质感、随风起舞的真实布料WebGPU 的并行计算着色器彻底改写了 Web 物理模拟的规则。在万千流处理器核心的精确协作下成千上万根虚拟弹簧在微秒级时间内化解应力、传递动量。代码不再只是指挥像素涂抹颜色的画笔而是化作了重构虚拟世界物理法则的无形上帝之手。