在图像处理领域，线性变形（平移、旋转、缩放）早就被玩烂了，真正让用户感觉“活起来”的是非线性变形——拖一下图像的某个角，周围区域像果冻一样跟着晃动。要在 iOS 上实现这种效果，Core Image 提供了一个非常适合的切入点：CIClamp 与自定义 Kernel 配合位移场（displacement field）可以做逐像素重采样，而网格变形的物理模拟则可以在上层驱动这个位移场。更进一步，如果把这个变形过程做成可协作的——多个用户同时编辑同一组网格控制点，事情就变得有意思了。本文把整套方案拆开讲：物理模型、Core Image 渲染管线、协作同步、预览与历史记录。
一、基于弹簧质点模型的网格物理模拟
网格变形的核心思路是：把图像划分为 M×N 的网格，每个网格节点是一个质点，相邻质点之间用弹簧连接。当用户拖动某个质点时，弹簧会把力传导给邻居，邻居再传导给邻居的邻居，最终形成一种“牵一发而动全身”的柔体效果。这个模型在物理仿真里非常经典，叫弹簧质点系统（Mass-Spring System）。
每个质点的状态包含位置和速度，弹簧的受力遵循胡克定律：力的大小与形变量成正比，方向指向弹簧原长位置。再加上一个阻尼项，避免网格永远震荡停不下来。整个系统的更新可以拆成固定的步骤：
// 质点结构
typedef struct {
SIMD::Float2 position;
SIMD::Float2 velocity;
SIMD::Float2 restPosition;
float mass;
BOOL pinned;
} GridPoint;
// 单根弹簧的求解
static SIMD::Float2 springForce(GridPoint *a, GridPoint *b, float k, float damping) {
SIMD::Float2 delta = b->position - a->position;
SIMD::Float2 restDelta = b->restPosition - a->restPosition;
SIMD::Float2 displacement = delta - restDelta;
SIMD::Float2 relativeVel = b->velocity - a->velocity;
// 胡克定律 + 阻尼力
return displacement * k + relativeVel * damping;
}积分阶段建议用半隐式欧拉（先把速度更新，再用新速度更新位置），它比显式欧拉稳定得多，允许更大的时间步长。具体来说，每一帧先对每个质点累加所有相邻弹簧的力，加上外力场的贡献，然后按 velocity += force / mass * dt; position += velocity * dt 的顺序推进。 pinned 质点（比如被用户手指按住的那个）直接把位置钉在手指位置，速度清零。
参数调优是体验的关键。弹簧刚度 k 越大，网格越“硬”，回弹越快但越容易数值爆炸；阻尼越大，运动越“黏”。实测一组好用的起点参数：k 取 120 到 200，阻尼取 8 到 15，质点质量取 1，时间步长固定为 1/60 秒。如果需要更真实的布料感，还可以给水平弹簧和竖直弹簧设置不同的刚度，斜向加剪切弹簧约束。
二、外力场作用与 Core Image 渲染管线
除了手指拖拽这种直接交互，外力场能让变形更有生命感。常见的有三种：径向力场（以某点为中心向外推或向内吸）、方向性风力（全场施加统一方向的力，强度随噪声波动）、涡旋场（绕中心旋转的切向力）。实现上就是在每帧积分前，对每个质点根据其与场中心的距离计算一个力向量叠加进去。
// 径向外力场示例：半径 radius 内的质点受到推力
static SIMD::Float2 radialForceField(SIMD::Float2 center, GridPoint *p,
float strength, float radius) {
SIMD::Float2 dir = p->position - center;
float dist = simd_length(dir);
if (dist > radius || dist < 0.001f) return {0, 0};
// 距离越近受力越强，用平滑衰减避免边缘突变
float falloff = 1.0f - (dist / radius);
falloff *= falloff;
return simd_normalize(dir) * strength * falloff;
}物理层算出每个网格点的新位置后，如何让图像真正变形？Core Image 本身没有现成的“网格扭曲”滤镜，但可以用自定义 Kernel 实现。思路是：物理网格给出每个控制点从 restPosition 到 position 的位移，GPU 端根据像素坐标找到它落在哪个网格单元内，用双线性插值计算出该像素的位移量，然后反向采样源图像。注意这里必须是“逆向映射”——对目标图像的每个像素，反查它应该从源图像的哪里取色，这样保证输出没有空洞。
实现时把网格位移打包成一张浮点纹理（每个像素存两个通道的位移量），通过 CIImage 传给自定义 Kernel。Core Image 的自定义 Kernel 用 Core Image Kernel Language 编写，编译后包装成 CIColorKernel 或 CIWarpKernel。对于网格变形，CIWarpKernel 是最合适的——它只负责返回采样坐标，不用自己动手采样纹理。渲染链路上，物理模拟跑在 CPU（或用 Accelerate 框架并行加速），位移纹理每帧上传，Core Image 在 GPU 完成逐像素重采样，60fps 毫无压力。
三、多人实时协作编辑网格控制点
把网格变形做成多人协作，难点不在渲染而在状态同步。协作的核心对象是网格控制点的位置（或对控制点的操作意图），需要解决三个问题：消息模型怎么设计、并发编辑怎么合并、性能怎么保证。
消息模型上建议用“操作意图”而不是“绝对状态”。也就是说，客户端上报的不是“第 i 个点现在在 (x, y)”，而是“用户 A 按下了第 i 个点”以及后续的拖动增量。绝对状态同步在多人同时操作时几乎必然冲突，而操作意图配合物理模拟反而有天然优势——两个用户各拖一个点，物理弹簧会自动把两个力的效果融合成一个连贯的形变，冲突被物理层“消化”了。
// 协作操作消息定义
struct MeshOperation: Codable {
enum Kind: String, Codable {
case grab // 按下控制点
case drag // 拖动增量
case release // 松开
case forceField // 施加外力场
}
let kind: Kind
let pointIndex: Int?
let delta: SIMD2<Float>? // drag 时的位移增量
let fieldCenter: SIMD2<Float>? // 外力场中心
let authorID: String
let sequence: UInt64 // 单调递增序号，用于排序
}传输层的选择要看场景。局域网或低延迟需求可以用 WebSocket 长连接加消息广播；如果允许秒级延迟，也可以用轻量的轮询。收到远端操作后，本地把该操作同样注入物理系统：远端用户的 grab 相当于本地多了一个虚拟手指，drag 就更新那个虚拟手指的位置，物理引擎照常运转，两个用户的编辑结果自然融合。这里有一个细节必须处理：所有客户端的物理模拟必须是确定性的——相同的输入序列产生相同的结果。为此要把操作消息按 sequence 排序后统一回放，时间步长固定，浮点运算保持一致，避免不同设备上结果逐渐发散。
性能方面，网格操作消息很小（几十字节），但拖动操作频率高，直接逐条广播会给网络带来压力。常见做法是本地 60fps 模拟照常跑，对外发送时做 30Hz 节流，并且在网络层对连续 drag 消息做合并——只发最新的增量。接收端对丢帧不敏感，因为物理系统本身会平滑插值过渡。
四、变形预览与历史记录功能设计
协作编辑场景下，预览和历史记录不只是锦上添花，而是刚需。预览要解决的问题是：用户松手前想看看最终效果，以及查看其他用户的进行中操作。历史记录要解决的是：任意时刻回溯到某个中间状态，并支持撤销与重做。
预览的实现可以复用渲染管线：为预览状态维护一套独立的轻量网格（比如控制网格的十分之一分辨率），将当前操作实时套用在这套低分辨率网格上快速出图，Core Image 渲染一张缩小版预览叠加在界面上。因为网格点少、像素少，预览帧耗时可以控制在几毫秒内，不影响主编辑流畅度。
历史记录的关键是选择记录粒度。逐帧记录物理状态（所有质点位置）内存开销太大——一个 64×64 的网格每帧就要 16KB 浮点数据；逐操作记录（谁在何时做了什么操作）则足够紧凑。推荐的做法是：只记录操作消息序列，回放时从初始网格开始重放到指定位置。配合快照优化——每隔 N 条操作存一个完整网格快照，回放时从最近的快照开始，避免从头重放导致的延迟。撤销重做也随之简化：撤销就是忽略最后一条尚未“固化”的操作并回放，重做就是重新纳入。
// 历史记录结构：快照 + 操作增量
struct MeshHistory {
private var snapshots: [(sequence: UInt64, points: [SIMD2<Float>])] = []
private var operations: [MeshOperation] = []
private let snapshotInterval = 200 // 每200条操作存一次快照
mutating func append(_ op: MeshOperation) {
operations.append(op)
if operations.count % snapshotInterval == 0 {
snapshots.append((op.sequence, currentMeshPoints()))
}
}
// 回放到指定序号：找到最近的快照，从那里重放
func replay(upTo sequence: UInt64, mesh: inout MeshSimulator) {
let base = snapshots.last { $0.sequence <= sequence }
if let base = base { mesh.restore(base.points) }
for op in operations where op.sequence > (base?.sequence ?? 0) && op.sequence <= sequence {
mesh.apply(op)
mesh.step(count: 1) // 每条操作推进固定步数，保证确定性
}
}
}还有一个容易被忽略的点：协作场景下的撤销归属。如果用户 A 撤销了自己的操作，但这条操作之后已经有 B 的操作叠加在上面，直接删除 A 的操作会导致 B 的效果失去参照。稳妥的方案是采用“补偿式撤销”——不删除历史，而是往操作流里追加一条逆向补偿操作，把 A 那次操作造成的影响抵消回去。这样操作流只增不减，各客户端重放结果仍然一致。
整体架构总结一下：物理层（弹簧质点模拟 + 外力场）负责让变形逼真且天然融合多方编辑；渲染层（位移纹理 + CIWarpKernel）负责 GPU 高效重采样；协作层（操作意图消息 + 确定性回放）负责多端一致性；功能层（低分辨率预览 + 快照式历史）负责体验完整。四层各自独立，接口清晰，任何一层都可以单独替换和优化，这也是这套方案能支撑后续扩展（比如更多物理约束、更复杂的冲突策略）的基础。
Core Image网格变形弹簧质点模型修改时间：2026-09-11 01:12:55