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

1. 引言：为什么“蒙版”值得被认真对待

在短视频平台的内容生态里，爱心蒙版、星形蒙版几乎是“低成本高回报”的典型代表：一个形状切换，就能把普通素材变成节日祝福或情侣纪念视频。但如果只把它当作“套个模板”，就会错过背后一整套成熟的图形学与视频工程体系。本文的主线是：遮罩本质上是一个二维隐式函数，渲染过程就是对该函数做符号判定与覆盖率估计。沿着这条主线，爱心、星形、圆形、多边形都只是函数形式不同，工程管线完全一致。

这条主线的好处在于，它把“创意玩法”和“底层实现”打通了。你不需要为每种形状写一套代码，而是把形状参数化，用同一套渲染管线处理。本文评述：这种“函数化遮罩”的思路，与近年图形学中符号距离场（SDF）在字体渲染、UI 抗锯齿中的复兴是同源的，值得在移动端内容生产工具中推广。

1.1 本文的独创性分析主线

笔者将全文组织为“函数定义 → 采样与抗锯齿 → 合成语义 → 多端实现 → 场景落地 → 前沿预判”六段式结构。每一段都围绕同一条主线展开，避免章节之间各自为政。读者可以按顺序阅读，也可以直接跳到关心的实现章节。

1.2 适用读者与前置知识

本文面向有一定前端或视频处理基础的技术读者。阅读 WebGL 章节需要了解基本的着色器语法；阅读 FFmpeg 章节需要了解滤镜链概念。若你只是想做效果，可以直接看第 5、7、9 章。

2. 数学基础：把爱心和星形写成函数

要把形状变成遮罩，第一步是找到一个能判定“点在不在形状内”的数学表达式。最直接的方式是隐式函数 f(x,y)，当 f(x,y) ≤ 0 时认为点在形状内部。爱心和星形都有经典的隐式表达。

2.1 爱心曲线的隐式方程

常见的爱心隐式方程之一为 (x² + y² − 1)³ − x²y³ = 0，其中 y 轴向上。该方程在单位圆附近变形，形成心形轮廓。工程上更常用的是参数方程形式，便于控制宽高比。本文评述：隐式方程的优势是判定简单，缺点是难以直接控制“胖瘦”，实际项目中通常引入缩放因子 a、b 做各向异性变换。

// 爱心隐式函数（y 轴向上，中心在原点）
// 返回 <0 表示在内部
float heart(vec2 p) {
    p.y -= 0.25;
    p *= 1.3;
    float a = atan(p.x, p.y) / 3.14159265;
    float r = length(p);
    float h = abs(a);
    float d = (13.0 * h - 22.0 * h * h + 10.0 * h * h * h) /
              (6.0 - 5.0 * h);
    return r - d;
}

上面这段是 Inigo Quilez 在 Shadertoy 上广泛流传的心形 SDF 变体，本文做了变量命名调整。它的好处是返回的是近似距离，可以直接用于抗锯齿的 smoothstep 过渡。

2.2 星形（五角星）的极坐标表达

五角星在极坐标下有非常简洁的表达：r(θ) 随角度周期性变化，内顶点与外顶点交替。设外半径 R、内半径 r，则每 36° 出现一次极值。工程上常用“折叠角度”技巧，把 72° 周期折叠到 [0, 36°]，再线性插值。

// 五角星 SDF（近似）
float star(vec2 p, float R, float r, int n) {
    float an = 3.14159265 / float(n);
    float a = atan(p.x, p.y) + an;
    float m = mod(a, 2.0 * an) - an;
    float len = length(p);
    // 折叠到单扇区后做线性插值
    float t = abs(m) / an;
    float d = mix(R, r, t);
    return len - d;
}

需要说明的是，上面的 mix 写法在顶点附近会有轻微误差，严格 SDF 需要处理边界的法线方向。但在视频遮罩这种“视觉容差较高”的场景里，误差通常不可见。笔者认为，工程上应优先选择“足够好且快”的近似，而不是追求解析精确。

2.3 从隐式函数到遮罩值

有了 f(x,y)，遮罩值 α 可以定义为 α = clamp(0.5 − f/ε, 0, 1)，其中 ε 控制边缘过渡宽度。这就是经典的“SDF 抗锯齿”做法，等价于对边缘做一次盒式滤波近似。本文评述：该公式把“形状判定”和“抗锯齿”统一在一个表达式里，是本文主线最直接的体现。

3. Alpha 合成与遮罩的三种语义

“蒙版”这个词在不同语境下含义不同。为了避免混淆，本节先把三种常见语义区分清楚，后续章节都基于这套定义。

本文讨论的爱心/星形蒙版，绝大多数属于第一种（Alpha 遮罩），但边缘需要抗锯齿，所以实际上介于第一种和第三种之间。本文评述：把“抗锯齿”理解为“几何裁剪的软边界版本”，能帮助工程师在性能与质量之间做取舍。

3.1 Porter-Duff 合成模型

Porter 与 Duff 在 1984 年提出的合成代数至今仍是图形管线的基础。source-over 是最常用的模式：C = Cs·αs + Cd·(1−αs)。爱心蒙版通常作为 source 的 α 通道参与运算。本文评述：理解这行公式，就能明白为什么“遮罩边缘发灰”往往是 α 计算精度问题，而不是颜色问题。

3.2 预乘 Alpha 的坑

很多移动端管线使用预乘 Alpha（premultiplied alpha），即 RGB 已经乘过 α。此时再做一次 source-over 会导致边缘变暗。工程上必须在“预乘”和“非预乘”之间明确约定，并在导入导出时统一。笔者在多个项目里见过因预乘不一致导致的“黑边”问题，排查成本很高。

4. 抗锯齿：从超采样到解析覆盖率

爱心和星形都有尖锐的凹角，抗锯齿处理不好会明显“锯齿化”。本节梳理三种主流方案，并给出选择建议。

4.1 超采样（SSAA）

最直接的做法是每个像素采样 N×N 次，取平均。N=4 时边缘质量已经不错，但计算量是 16 倍。对于 1080p 视频逐帧处理，CPU 方案基本不可接受，GPU 方案可以接受。

4.2 覆盖率抗锯齿（AA via coverage）

利用 SDF 的距离值直接估计覆盖率：α = clamp(0.5 − f/ε, 0, 1)。ε 一般取 1 到 2 个像素宽度。这是 GPU 上最常用的方案，成本几乎为零。本文评述：SDF 抗锯齿的“甜点”在于它把几何信息保留到了着色阶段，这也是近年 SDF 字体、SDF UI 流行的根本原因。

4.3 解析覆盖率

对直线边界可以解析计算像素被覆盖的面积，得到精确 α。但爱心和星形边界是曲线，解析积分复杂。工程上通常用 SDF 近似替代。本文评述：解析覆盖率在字体渲染领域有成熟应用，但在视频遮罩里性价比不高。

5. Web 端实现：CSS、Canvas 与 SVG

Web 端是最容易做原型的环境。本节给出三种可行方案，并对比它们的适用场景。

5.1 CSS clip-path 方案

CSS 的 clip-path 支持 polygon()、path() 等函数，可以直接裁剪元素。爱心可以用 path() 写贝塞尔曲线，星形用 polygon() 写十个顶点。优点是零依赖、性能好；缺点是边缘抗锯齿由浏览器决定，且 path() 的兼容性需要检查。

.heart-mask {
  clip-path: path("M 50 90 C 20 60, 0 40, 0 25 C 0 5, 25 0, 50 20 C 75 0, 100 5, 100 25 C 100 40, 80 60, 50 90 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%);
}

MDN 上有 clip-path 的完整参考，建议配合 MDN clip-path 文档 阅读。本文评述：clip-path 适合“静态贴纸”类需求，但要做动态变形或逐帧视频处理，还是得上 Canvas 或 WebGL。

5.2 Canvas 2D 方案

Canvas 2D 提供 globalCompositeOperation = 'destination-in'，可以把绘制的形状当作遮罩。流程是：先画视频帧，再画爱心路径，合成模式设为 destination-in。优点是 API 简单，缺点是每帧都要重绘，1080p 下 CPU 占用不低。

const ctx = canvas.getContext('2d');
function drawHeartMask(ctx, w, h) {
  ctx.save();
  ctx.globalCompositeOperation = 'destination-in';
  ctx.beginPath();
  // 用贝塞尔曲线构造爱心
  ctx.moveTo(w/2, h*0.85);
  ctx.bezierCurveTo(w*0.1, h*0.5, w*0.1, h*0.1, w/2, h*0.3);
  ctx.bezierCurveTo(w*0.9, h*0.1, w*0.9, h*0.5, w/2, h*0.85);
  ctx.fill();
  ctx.restore();
}

5.3 SVG mask 方案

SVG 的 <mask> 元素支持亮度遮罩和 Alpha 遮罩，配合 <path> 可以做出高质量边缘。适合做“静态海报 + 视频嵌入”的混合场景。本文评述：SVG 遮罩的优势是矢量无损，适合需要缩放到 4K 的场景。

6. GPU 实现：WebGL/GLSL 着色器方案

要做实时、高清、可交互的爱心/星形蒙版，WebGL 是最优解。本节给出完整着色器思路。

6.1 顶点着色器与坐标归一化

顶点着色器只做一件事：把全屏四边形映射到 [-1,1]²。片元着色器里再把坐标转成以中心为原点、按短边归一化的坐标系，保证爱心不变形。

// 片元着色器核心
precision highp float;
uniform sampler2D uTex;
uniform vec2 uRes;
uniform float uScale;
varying vec2 vUv;

float heartSDF(vec2 p) { /* 见 2.1 节 */ }

void main() {
  vec2 p = (vUv - 0.5) * vec2(uRes.x / uRes.y, 1.0) * uScale;
  float d = heartSDF(p);
  float aa = 2.0 / uRes.y;          // 约 1 像素
  float alpha = smoothstep(aa, -aa, d);
  vec4 col = texture2D(uTex, vUv);
  gl_FragColor = vec4(col.rgb, col.a * alpha);
}

这段代码的关键是 aa 的取值。aa 太小会锯齿，太大会糊。经验值是 1 到 1.5 个像素。本文评述：把 aa 做成 uniform 暴露给上层，可以在不同分辨率下动态调整，这是工程上很实用的技巧。

6.2 星形着色器的角度折叠

星形着色器的核心是 mod 折叠。注意 GLSL 的 mod 对负数行为与数学定义一致，但 atan 的取值范围是 [-π, π]，需要先加偏移再折叠。本文评述：这类“角度折叠”技巧在花瓣、齿轮等形状上通用，值得封装成工具函数。

6.3 性能实测（模拟数据）

下表为模拟数据，基于常见中端移动 GPU 的公开规格推算，仅用于说明数量级差异，不代表具体机型实测。

7. 视频后期：FFmpeg 滤镜链与批量处理

如果素材是已有视频，用 FFmpeg 做批量遮罩是最省事的路径。核心思路是生成一张黑白遮罩图，再用 alphamerge 合成。

7.1 生成遮罩图

可以用 Python + Pillow 或 ImageMagick 生成爱心/星形 PNG，白色为保留区域，黑色为透明区域。注意边缘要做羽化，避免硬边。

# 用 ImageMagick 生成爱心遮罩
convert -size 1080x1920 xc:black \
  -fill white -draw "path 'M 540 1600 C 200 1100, 100 700, 540 500 \
  C 980 700, 880 1100, 540 1600 Z'" \
  -blur 0x2 heart_mask.png

7.2 alphamerge 合成

FFmpeg 的 alphamerge 滤镜把第二路输入的亮度当作第一路的 Alpha。命令如下：

ffmpeg -i input.mp4 -loop 1 -i heart_mask.png \
  -filter_complex "[0:v][1:v]alphamerge,format=yuva420p" \
  -c:v libx264 -pix_fmt yuva420p -crf 18 output.mp4

注意输出需要支持 Alpha 的编码格式。如果最终要叠到背景上，可以在同一条滤镜链里继续做 overlay。本文评述：alphamerge 的坑在于色彩空间，遮罩图最好是灰度、无色彩管理，否则边缘会出现色偏。

7.3 批量脚本

节日祝福往往要处理几十条素材，建议写成 shell 循环或 Python 脚本，把遮罩、尺寸、时长参数化。FFmpeg 官方文档 ffmpeg-filters 是最权威的参考。

8. 移动端实时管线与性能优化

移动端是情侣视频、节日祝福的主要生产与消费场景。本节讨论实时预览管线的关键约束。

8.1 纹理上传与零拷贝

相机帧通常是 YUV 格式，直接上传为 RGB 纹理需要转换，成本高。推荐用 GL_TEXTURE_EXTERNAL_OES 或平台提供的零拷贝纹理。本文评述：这一步往往是移动端性能瓶颈，优化收益远大于着色器本身。

8.2 分辨率与帧率权衡

预览阶段可以用 720p，导出阶段再切 1080p 或 4K。爱心/星形遮罩的计算量与像素数成正比，降分辨率是最直接的优化。笔者建议把“预览分辨率”和“导出分辨率”做成两个独立参数。

8.3 功耗与发热

持续 60fps 的 GPU 渲染会明显发热。可以在无操作时降帧到 30fps，或暂停渲染。本文评述：这类“体验优化”在技术文档里常被忽略，但对实际产品口碑影响很大。

9. 场景落地：情侣视频与节日祝福

9.1 情侣视频：双人分屏 + 爱心遮罩

典型做法是把两张人像分别裁成左右半心，再拼成完整爱心。实现上可以用两个遮罩，一个取左半，一个取右半，中间用渐变过渡。本文评述：这种“分屏合成”比单纯套爱心更有叙事感，值得做成模板。

9.2 节日祝福：星形 + 粒子

星形遮罩常与粒子、光晕叠加。建议把星形作为“容器”，粒子在容器内运动，边缘用 SDF 做柔化。本文评述：粒子与遮罩的叠加顺序会影响观感，通常先粒子后遮罩更自然。

9.3 可复用参数表

10. 前沿预判与工程建议

从近年的图形学与视频工程趋势看，遮罩技术正在往三个方向走：一是可微分渲染，把遮罩参数纳入优化；二是神经渲染，用网络直接生成带 Alpha 的前景；三是端侧大模型辅助的自动构图。本文评述：对绝大多数内容工具而言，短期内最务实的仍是 SDF + GPU 管线，神经网络方案在端侧的成本还偏高。

工程建议方面，笔者总结三条：第一，把形状参数化，不要为每种形状写死代码；第二，把抗锯齿参数暴露成可调项；第三，预览与导出分离，避免为了预览牺牲导出质量。这三点在多个项目里都被验证有效。

11. 参考文献与声明