SuperAPI AI 工具集

cursor-rig

设计与创作

查看项目

更新于 11-03 16:16

技能介绍

Cursor rig 是一个让插画角色转头看向访客的网页技能。它的目标是在保持原画风格的前提下实现“角色注视光标”,避免 3D 建模、绑定和风格匹配带来的失真。

用途与思路:把角色头部朝各个方向渲染成一组姿态图,运行时根据光标位置显示对应姿态。横向 19 档、纵向 8 行,转头被读作连续动作。

主要能力:

  • scripts/build_rig.py:把转头视频片段转成 row_N.webp 行姿态条、plate.webp 和 rig.json。
  • assets/rig.js:加载 rig,在头部上方放置 canvas,用弹簧跟随指针,支持眨眼和闲置环顾。

使用条件:需要 Python 3.9+、pip install numpy opencv-python-headless、ffmpeg,以及一个图像编辑模型和一个接受首尾帧的图像转视频模型。

制作流程:

  1. 底板(plate):角色正面图,放大到至少 1440 px 高。若页面需要更宽画面,可对两侧外扩,但 rig 应在角色周围的方形或竖版裁剪上构建;外扩后把原始像素贴回中间。
  2. 关键帧:用图像编辑模型从底板生成头转向左、右、上、下及四个对角的关键帧,提示词需锁定除头部外的一切。逐张与底板全尺寸对比,只允许头部变化。
  3. 转头片段:图像转视频,起始帧为底板、结束帧为关键帧,5 秒,锁定相机。片段按行和方向命名:L/R(水平行,必需)、UL/UR(上)、HL/HR(半下)、DL/DR(下)。八个片段构成完整 rig,两个片段只能左右转。
  4. 构建:运行 python3 scripts/build_rig.py clips/ site/rig --box 300,40,840,800 --track dots --debug work/rig-cells。--box 指定头部可能覆盖的像素区域;--track dots 适用于卡通圆点眼,会找出每帧两个深色圆眼并记录位置以便实时绘制眨眼;--eye-band y0,y1 和 --dark 用于调参;--track template --point x,y 适用于其他面部,跟随指定点周围的小块,不绘制眨眼;--poly 用于自定义头部遮罩多边形。脚本会按身体对齐片段(ECC)、按测量到的头部位置选列、通过羽化遮罩把头部混合到同一底板上、用光流补齐缺失的俯仰行。构建后应检查 --debug 输出的联系表,确认头部大小、头发和衣领没有跳变。
  5. 页面:用 figure.hero-rig 包裹 plate.webp 和 canvas,以 module 脚本导入 loadRig、HeadRig、animate 并初始化。若页面展示比底板更宽的画面,可通过 new HeadRig(el, data, { art: { w, h, plateX, plateY } }) 指定底板位置。

播放器行为:先加载水平行,再加载上下行;用指针偏移的 tanh 瞄准;用略欠阻尼的弹簧移动;在相邻姿态间切换而非交叉淡化;用 rig.json 中的眼位和肤色绘制眨眼、双眨眼和眨眼(仅点跟踪模式);指针静止 3.5 秒或触屏设备上自动环顾;离开屏幕时暂停。

成本与体积:八个片段为完整成本,按典型图像转视频价格约几美元;成品 rig(152 个姿态、0.6 缩放)约 2 MB WebP。

无障碍:plate 的 img 承载 alt 文本,canvas 为装饰。prefers-reduced-motion 下头部仍响应指针但为临界阻尼,无闲置环顾和眨眼;不依赖 rig 也能正常显示肖像。

限制:需要自行准备图像编辑模型和接受首尾帧的图像转视频模型;片段若未锁定相机导致漂移超过 6 px 则不可用;点跟踪模式才能绘制眨眼。