cursor-rig

Cursor rig

一个会注视你的角色，是网页最有魅力的主角。用 3D 制作这样的角色，意味着要建模、绑定骨骼，还要匹配绘画风格，而最终效果总是和原画不太一样。这项技能保留原画。它会预先渲染头部各个方向的画面，组成姿势网格，并在运行时显示面朝光标的姿势。通过 19 个水平转头角度和 8 行俯仰角度，转头看起来连贯自然。

工具

文件	功能
scripts/build_rig.py	将转头视频片段转换为 row_N.webp 姿势条、plate.webp 和 rig.json
assets/rig.js	加载 rig，在头部上方放置画布，用弹簧效果跟随指针，眨眼，并在空闲时四处张望

需要 Python 3.9+、pip install numpy opencv-python-headless、ffmpeg、图像编辑模型，以及一个接受起始帧和结束帧的图生视频模型（参见 motion-assets）。

工作流

1. 底图

底图是角色正面朝向的图像，也是构建所有姿势的基础。将源插画放大到至少 1440 px 高。如果主视觉需要比角色更宽，可以为网页向两侧扩图，但应基于角色周围的方形或纵向裁剪图构建 rig。扩图模型会重新渲染整张图，因此之后要把原始像素粘贴回中间部分。

2. 关键帧

使用图像编辑模型，以底图为基础，分别制作头部转向各个极限方向的图像：左、右、上、下以及四个对角方向。提示词必须明确，除头部外，其他部分都保持不变：

同一个角色、同一幅画、相同的取景和裁剪范围。只有头部转动，朝向图像左边缘，约 40 度。头发、脸、皮肤、衬衫、双手、身体姿势、背景和笔触风格都完全保持不变。不要添加新物体。

以原始尺寸在底图和每张关键帧之间来回切换查看。只能改变头部。能将取景保持到几乎像素级一致的模型值得为此付费；关键帧中只要肩膀位置偏移，就会毁掉整行。

3. 转头视频片段

使用图生视频，将底图设为起始帧、关键帧设为结束帧，时长 5 秒，摄像机固定：

摄像机固定。角色缓慢转动头部和颈部，从正面朝向转到[结束姿势]。身体、衬衫、手臂和背景完全静止。动作平滑、匀速，不眨眼，不说话。

按行和方向为片段命名：水平行用 L.mp4 和 R.mp4（必需），UL/UR（向上）、HL/HR（略微向下）、DL/DR（向下）。8 个片段可以组成完整 rig。2 个片段可以组成只能左右转头的 rig。

如果两行差异很大（例如模型在向下看的关键帧中重绘了头发），不要依赖两行之间的变形：应实际生成一行中间姿势。

4. 构建

python3 scripts/build_rig.py clips/ site/rig --box 300,40,840,800 --track dots --debug work/rig-cells

• --box x,y,w,h（底图像素）：头部可能覆盖的所有区域，包括头发，并留出一点脖子。
• 对卡通圆点眼睛使用 --track dots：在每一帧中找到两只深色圆眼睛，并记录其位置，以便实时绘制眨眼。可用 --eye-band y0,y1 和 --dark 调整。
• 对其他类型的脸使用 --track template --point x,y：跟踪你指定点周围的一块区域，使其逐帧移动。此模式不会绘制眨眼。
• 如果默认椭圆会裁掉头发或包含衣领，可用 --poly 设置头部遮罩多边形。

脚本的作用及原因：

• 根据身体对齐每段视频（使用 ECC，对齐 --body-y 以下的行）。视频模型会让整个画面漂移几个像素；如果不对齐，转头时衬衫就会抖动。脚本会输出每段视频的漂移量；超过 6 px，说明拍摄时相机没有固定。
• 根据测得的头部位置选取列，而不是按时间选取。 模型的动作会逐渐加速和减速，因此按时间均匀取样会导致动作步幅不均。按测量结果均匀取样，转头效果才会均匀。
• 通过羽化遮罩将每个头部合成到底图上， 并先匹配底图的亮度，这样只有头部会变化。
• 用相邻行之间的光流补间填充缺失的俯仰角行。

将 --debug 输出的单元格作为联系表打开，逐列、逐行检查：头部尺寸没有跳变，头发不会突然出现，衣领处也没有接缝。

5. 页面

<figure class="hero-rig" style="position: relative; margin: 0">
  <img src="rig/plate.webp" alt="A painted shopkeeper in a loud shirt, looking at you">
  <canvas></canvas>
</figure>
<script type="module">
  import { loadRig, HeadRig, animate } from "./rig.js";
  const head = new HeadRig(document.querySelector(".hero-rig"), await loadRig("rig/"));
  animate([head]);
</script>

如果页面展示的图稿比底图更宽，请以图稿像素为单位，传入底图在图稿中的位置：new HeadRig(el, data, { art: { w: 3898, h: 1440, plateX: 1229, plateY: 0 } })。

播放器会：

• 先加载水平角度行（头部可以同时向左右转动），然后再加载上方和下方的行；
• 使用指针相对于眼睛的偏移量经 tanh 处理后的结果来控制朝向，避免指针位于远处角落时头部突然转到极限；
• 通过阻尼略低于临界值的弹簧移动（每次转头结束时略微回弹，会显得更生动）；
• 在相邻姿势之间直接切换，而不交叉淡入淡出（交叉淡入淡出会显示两对眼睛）；
• 使用 rig.json 中的眼睛位置和肤色，在眼睛上绘制眨眼、连续眨眼和单眼眨眼（仅适用于圆点追踪）；
• 当指针静止 3.5 s 后，以及在触摸设备上，自行环顾四周；
• 在离开屏幕时暂停。

预算

八段视频就是全部成本；按常见的图生视频价格计算，只需几美元。完成后的 rig（152 个姿势，缩放至 0.6）约为 2 MB 的 WebP。

无障碍性

• 底图 <img> 带有替代文本；canvas 仅作装饰。
• 启用 prefers-reduced-motion 时，头部仍会响应指针（这是访客触发的动作），但采用临界阻尼，并关闭闲置时的环顾和眨眼。
• 整个页面不依赖 rig：这只是一幅会看着你的肖像。