爱心/星形蒙版创意用法：情侣视频、节日祝福的趣味遮罩

从 Alpha 通道到符号距离场——一条贯穿数学构造、渲染管线与情感化设计的完整技术主线

一、引言：当蒙版成为一种情感语法

在短视频与社交媒体的视觉语言里，爱心和星形大概是被使用频率最高的两种几何符号。它们出现在情侣合拍的转场里，出现在生日祝福的粒子爆炸中，也出现在直播间礼物的入场动画上。多数教程把它们当作“滤镜”来讲，给一串 clip-path 坐标就结束了。但如果只停留在复制粘贴，遇到需要动态变形、需要边缘柔和、需要在低端机上跑满 60fps 的场景，就会立刻卡住。

本文试图换一个视角：把爱心和星形看作可计算的边界函数，而不是一堆固定坐标点。一旦形状被写成函数，蒙版就获得了三个关键能力——可参数化（大小、胖瘦、旋转连续可调）、可微分（法线、距离、羽化都能求）、可组合（多个形状做并集、交集、平滑过渡）。这条“形状即函数”的主线，会贯穿后面所有章节。

本文评述：把蒙版抽象为函数，并不是学院派的自我陶醉。在真实项目里，一个可参数化的爱心函数意味着设计师改一个滑块就能调整“心尖的锐度”，而不需要重新导出一张 PNG。这种从“资产”到“参数”的转变，正是现代图形管线效率提升的核心逻辑。

需要先明确本文的边界。本文讨论的是二维矢量形状蒙版在视频与网页场景中的应用，不涉及三维建模中的体素蒙版，也不深入讨论视频编解码层面的 Alpha 通道压缩问题。涉及的代码以 Web 技术栈为主（CSS、Canvas 2D、WebGL），因为这是当前跨平台分发成本最低的方案。

二、形状的数学：爱心与星形的方程家族

2.1 爱心曲线的参数方程

最常见的爱心参数方程可以写成：

x(t) = 16 sin³t
y(t) = 13 cos t − 5 cos 2t − 2 cos 3t − cos 4t
t ∈ [0, 2π)

这条曲线在数学社区流传已久，常被归为“经典心形线”之一，其来源可追溯到 18 世纪对卡迪奥德（Cardioid）与相关代数曲线的研究。它的优点是形状饱满、对称性好，缺点是不是多项式隐式方程，无法直接用于需要快速内外判断的 SDF 构造。本文评述：参数方程适合描边和路径动画，隐式方程适合填充和距离场，二者用途不同，选错会让后续优化非常痛苦。

另一类爱心来自隐式代数曲线。一个被广泛引用的六次多项式形式为：

(x² + y² − 1)³ − x² y³ = 0

该方程在单位圆基础上做扰动，得到的形状心尖朝上、两侧圆润。它的好处是隐式表达天然支持内外判断：把点代入左边，符号为正即在外部，为负即在内部。这正是 SDF 需要的性质。相关代数曲线的系统整理可参考 Wolfram MathWorld 的 Heart Curve 条目（Weisstein, 2024）。

2.2 星形：从五角星到任意 n 角星

星形在数学上更规整。一个 n 角星可以用极坐标描述：外顶点半径 R、内顶点半径 r，交替出现在角度 2πk/n 与 2π(k+0.5)/n 上。当 r/R 取黄金比例相关值时，五角星会呈现接近正五角星的经典比例。工程上更常用的是“超椭圆星形”近似：

r(θ) = r_inner + (r_outer − r_inner) · |cos(nθ/2)|^p

指数 p 控制星角尖锐程度：p 越大角越尖，p 趋近 1 时接近花瓣形。本文评述：这个近似式在 GPU 里只需一次 cos 和一次 pow，比逐顶点构造路径快得多，非常适合做实时粒子蒙版。需要注意的是，它产生的是平滑过渡的“软星形”，若需要硬边五角星，仍应使用分段线性路径。

三、符号距离场：把“内外判断”变成连续函数

3.1 SDF 的基本定义

符号距离场（Signed Distance Field, SDF）对空间中任意点 p 返回它到形状边界的最短距离，内部为负、外部为正。这个概念在图形学中已有数十年历史，近年因实时渲染与字体渲染（如 Valve 的 SDF 字体方案）而重新受到重视。相关综述可参考 Jones 等人 2023 年发表于 ACM Computing Surveys 的距离场方法综述。

SDF 对蒙版的价值在于：它把布尔式的“在不在形状里”升级为连续的“离边界有多远”。有了距离，就能做平滑羽化、描边、发光、形变过渡，而这些用纯 clip-path 是做不出来的。本文评述：很多教程把 SDF 讲得过于神秘，其实对二维蒙版而言，只要能得到一个近似距离值，就能获得 90% 的收益，不必追求严格欧氏距离。

3.2 用 GLSL 构造爱心 SDF

下面是一段可直接用于片元着色器的爱心 SDF 近似实现。它基于隐式方程做梯度归一化，得到近似距离：

// 近似爱心 SDF，p 已归一化到 [-1,1]
float sdHeart(vec2 p) {
    p.x = abs(p.x);
    // 将坐标映射到经典心形区域
    vec2 q = vec2(p.x, p.y + 0.35);
    float d = length(q) - 0.55;
    // 心尖修正项
    d = min(d, length(p - vec2(0.0, -0.95)) - 0.28);
    return d;
}

这段代码用两个圆的并集近似心形，是工程上常用的“够用就好”策略。若需要更精确的边界，可改用 Inigo Quilez 在其距离函数专栏中给出的多项式近似版本（Quilez, 2023）。本文评述：近似 SDF 的误差在蒙版场景下通常不可见，因为蒙版边缘本身就要做 1–2 像素羽化，误差被羽化宽度吸收了。

3.3 星形 SDF 与角数参数化

// n 角星 SDF，r 为内外半径比
float sdStar(vec2 p, float n, float r) {
    float an = 3.1415926 / n;
    float a = atan(p.x, p.y);
    a = mod(a, 2.0 * an) - an;
    float d = length(p) * cos(a);
    return d - r;
}

这段实现利用角度取模把任意角数折叠到一个扇区，再在扇区内做距离计算，复杂度与角数无关。本文评述：这是 SDF 组合思想的典型体现——把对称性变成取模运算，用数学结构换性能，比生成 n 条边的路径再逐边求距离高效得多。

四、三条实现路径：CSS、Canvas 与 WebGL

4.1 CSS clip-path：最快上手，限制也最明显

CSS 的 clip-path 支持 polygon()、path()、circle() 等函数。爱心可以用 path() 直接写 SVG 路径，星形可以用 polygon() 列顶点。MDN 的 clip-path 文档（MDN Web Docs, 2024）给出了完整语法。

.heart-mask {
  clip-path: path("M 50 88 C 20 62, 0 40, 0 24 C 0 8, 14 0, 26 0 C 36 0, 44 6, 50 16 C 56 6, 64 0, 74 0 C 86 0, 100 8, 100 24 C 100 40, 80 62, 50 88 Z");
}
.star-mask {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

优点是零依赖、浏览器原生支持、可配合 transition 做简单动画。缺点是边缘永远是硬边，没有羽化；path 动画的插值在不同浏览器上行为不一致；无法做粒子级别的逐像素控制。本文评述：clip-path 适合静态图标和简单转场，一旦需求涉及“边缘发光”“粒子沿轮廓运动”，就必须换方案。

4.2 Canvas 2D：灵活但要注意合成模式

Canvas 2D 通过 globalCompositeOperation 实现蒙版。常见做法是先在离屏 canvas 画形状，再用 destination-in 把视频帧裁进去：

const off = document.createElement('canvas');
const octx = off.getContext('2d');
octx.fillStyle = '#fff';
drawHeartPath(octx, w, h);   // 画爱心路径
octx.fill();

ctx.drawImage(video, 0, 0, w, h);
ctx.globalCompositeOperation = 'destination-in';
ctx.drawImage(off, 0, 0);
ctx.globalCompositeOperation = 'source-over';

Canvas 2D 支持 shadowBlur 和 filter 做简单羽化，但性能开销随模糊半径增长明显。W3C 的 HTML Canvas 2D Context 规范（W3C, 2023）对合成模式有明确定义，工程上建议把离屏 canvas 复用而不是每帧新建。本文评述：Canvas 2D 的甜点区是 720p 以下的合成，超过这个分辨率，GPU 方案的优势会迅速拉开。

4.3 WebGL / GLSL：性能与表现力的上限

WebGL 方案把视频作为纹理上传，在片元着色器里用 SDF 计算蒙版值，再与纹理颜色相乘。核心片段：

vec2 uv = vUv * 2.0 - 1.0;
uv.x *= uAspect;
float d = sdHeart(uv * uScale);
float mask = 1.0 - smoothstep(-uFeather, uFeather, d);
vec4 tex = texture2D(uVideo, vUv);
gl_FragColor = vec4(tex.rgb * mask, mask);

其中 smoothstep 的宽度参数就是羽化半径，单位是归一化坐标。这套方案能做到 60fps 下同时渲染多个蒙版与粒子。本文评述：WebGL 的学习曲线主要在环境搭建和纹理上传，一旦跑通，后续所有形状都只是改一个 SDF 函数，边际成本极低，这是它相对 Canvas 2D 的最大优势。

* 数据为模拟测试数据，基于中端移动设备（骁龙 778G 级别）在 Chrome 移动版下的整合估算，非特定文献实测值，仅供量级参考。

五、边缘质量：抗锯齿、羽化与预乘 Alpha

5.1 为什么硬边蒙版会“锯齿”

当蒙版边界落在两个像素之间时，硬边方案只能二选一，导致阶梯状锯齿。SDF 方案天然解决这个问题：用 smoothstep 把距离映射到 0–1 的覆盖率，等价于对边界做了一次 1–2 像素的卷积。Porter 与 Duff 在 1984 年提出的 Alpha 合成框架（Porter & Duff, SIGGRAPH 1984）至今仍是这一处理的数学基础。

5.2 预乘 Alpha 的坑

在 WebGL 里输出 gl_FragColor 时，如果开启了 premultipliedAlpha，颜色分量必须已经乘以 Alpha，否则边缘会出现暗边或亮边。这是新手最常见的 bug 之一。本文评述：预乘 Alpha 不是可选项而是约定，理解它的最好方式是记住“颜色是已加权的结果，不是原始颜色”。

5.3 羽化宽度的经验取值

羽化宽度过小仍有锯齿，过大则形状“发虚”。工程经验是：在 1080p 输出下，羽化半径取 1.5–3 像素视觉最自然；在 720p 下取 1–2 像素。若蒙版会做缩放动画，建议羽化宽度随缩放系数同步放大，否则缩小时会重新出现锯齿。这一结论来自对多款主流短视频 App 特效的逆向观察与整合分析，属于经验性总结而非对照实验数据。

六、情侣视频：双人蒙版与转场设计

6.1 双人分屏爱心蒙版

情侣合拍最常见的需求是“两个人各占爱心的一半”。实现思路是：用同一个爱心 SDF，但在片元着色器里根据 uv.x 的正负，分别采样两路视频纹理。

float d = sdHeart(uv * uScale);
float mask = 1.0 - smoothstep(-uFeather, uFeather, d);
vec4 a = texture2D(uVideoA, vUv);
vec4 b = texture2D(uVideoB, vUv);
vec4 col = uv.x < 0.0 ? a : b;
gl_FragColor = vec4(col.rgb * mask, mask);

操作步骤：① 准备两路视频并统一分辨率；② 上传为两个纹理；③ 用上面的着色器合成；④ 在接缝处叠加一条 2–4 像素的柔光渐变，避免生硬分界。本文评述：接缝处理是这类效果成败的关键，直接硬切会让画面显得廉价，一条渐变就能显著提升质感。

6.2 爱心“心跳”节奏驱动

让爱心蒙版随音乐节拍轻微缩放，能显著增强情感表达。实现上把 SDF 的缩放系数绑定到音频能量：

float scale = 1.0 + 0.06 * audioEnergy; // audioEnergy ∈ [0,1]
float d = sdHeart(uv * uScale / scale);

音频能量可用 Web Audio API 的 AnalyserNode 获取，取低频段（60–250Hz）能量更贴近“心跳”感。本文评述：节奏驱动的关键是“少即是多”，缩放幅度控制在 5%–8% 最自然，超过 15% 会显得浮夸。

6.3 星形转场：从爱心到星形的形变

在 SDF 层面做形状插值非常自然：对两个 SDF 取加权最小或线性混合，即可得到中间形状。这比路径插值稳定得多，不会出现自交或翻转。相关形变方法可参考 2024 年 Computers & Graphics 上关于二维形状插值的综述。

七、节日祝福：动态粒子与节奏驱动

7.1 粒子沿爱心轮廓分布

节日祝福视频里，粒子沿爱心边缘流动是高频效果。做法是先用参数方程采样一圈点，再让粒子沿法线方向做小幅振荡。参数方程采样比 SDF 更适合这里，因为需要的是精确的边界点位置。

for (let i = 0; i < N; i++) {
  const t = (i / N) * Math.PI * 2;
  const x = 16 * Math.pow(Math.sin(t), 3);
  const y = 13*Math.cos(t) - 5*Math.cos(2*t) - 2*Math.cos(3*t) - Math.cos(4*t);
  particles.push({ x: x * s, y: -y * s, phase: Math.random() * Math.PI * 2 });
}

本文评述：注意 y 轴要取反，因为数学坐标系 y 向上而屏幕坐标系 y 向下，这是最常见的坐标翻转错误来源。

7.2 星形爆炸与节日配色

星形适合做“爆炸”效果：粒子从中心向外飞散，到达星形顶点位置时短暂停留再消散。配色上，春节常用红金、圣诞常用红绿白、生日常用多彩。配色本身不影响技术实现，但会影响粒子的叠加模式选择——浅色粒子用 screen 或 lighter 叠加更亮，深色粒子用普通叠加更稳。

7.3 可拓展的教程与视频资源

• MDN clip-path 官方文档：https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
• Inigo Quilez 距离函数专栏：https://iquilezles.org/articles/distfunctions2d/
• WebGL Fundamentals 纹理与合成教程：https://webglfundamentals.org/
• MDN Web Audio API 分析节点：https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode

八、性能工程：移动端预算与降级策略

移动端 GPU 的填充率是主要瓶颈。一个全屏 1080p 的片元着色器，每帧要处理约 200 万个像素，若 SDF 里包含多次三角函数调用，很容易掉帧。工程上的降级策略通常分三档：

1. 高档：全分辨率 + 完整 SDF + 粒子，目标 60fps。
2. 中档：0.75 倍分辨率渲染再上采样，SDF 简化，目标 45fps。
3. 低档：退回 Canvas 2D 或预渲染视频，目标 30fps。

降级判断可以基于 requestAnimationFrame 的滚动平均帧时间，连续 30 帧超过 22ms 就降一档。本文评述：动态降级比静态设备白名单更可靠，因为同一款机型在不同温度下的表现差异可能超过 30%。

九、前沿预判：从 SDF 到神经形状表示

近三年，神经隐式表示（Neural Implicit Representation）在三维领域快速成熟，其思想正在向二维渗透。用一个小型 MLP 拟合二维形状的 SDF，已经在部分学术工作中被验证可行（相关方向可参考 2023–2024 年 CVPR、SIGGRAPH 上关于神经距离场的多篇工作）。对蒙版场景而言，这意味着未来可能不再需要手写方程，而是“给几张示例图，模型自动学出一个可微的边界函数”。

笔者认为，短期内神经表示不会取代解析 SDF，因为解析式在移动端的性能优势太大；但在“个性化形状生成”这一细分场景，神经方法有独特价值——比如根据用户上传的合照自动生成一个贴合人物轮廓的爱心蒙版。这是一个值得关注的方向。

十、结语与工程清单

回到开头那条主线：把爱心和星形看作可计算的边界函数，而不是固定坐标。这条主线带来的实际收益是——参数化让调整变快，可微性让边缘变好，可组合性让转场变顺。下面是可直接落地的工程清单：

• 形状选型：静态图标用 clip-path，动态蒙版用 SDF。
• 边缘处理：始终保留 1.5–3 像素羽化，输出注意预乘 Alpha。
• 性能兜底：实现三档降级，基于帧时间动态切换。
• 情感设计：节奏驱动幅度控制在 5%–8%，接缝处加柔光渐变。
• 可维护性：把形状参数抽成配置对象，避免硬编码坐标散落各处。

主要参考文献