cursor-rig

Cursor rig

こちらを見つめるキャラクターは、ページに登場する最強のヒーローです。これを3Dで作るには、モデリングとリギングに加え、絵画のスタイルに合わせる必要があり、仕上がりが元の絵画に完全に似ることはありません。このスキルでは、絵画をそのまま使います。あらゆる方向を向いた頭部を、ポーズのグリッドとして一度レンダリングし、実行時にはカーソルを向いているポーズを表示します。ヨー方向に19段階、ピッチ方向に8行を用意することで、滑らかなターンに見えます。

ツール

ファイル	機能
scripts/build_rig.py	頭部ターンのクリップを row_N.webp のポーズストリップ、plate.webp、rig.json に変換します
assets/rig.js	リグを読み込み、頭部にキャンバスを重ね、バネのような動きでポインターを追従させ、まばたきを行い、アイドル時には視線を動かします

Python 3.9 以降、pip install numpy opencv-python-headless、ffmpeg、画像編集モデル、および開始フレームと終了フレームを指定できる画像から動画を生成するモデルが必要です（motion-assets を参照）。

パイプライン

1. プレート

プレートはキャラクターが正面を向いた画像で、すべてのポーズの元になります。元のイラストを高さ 1440 px 以上にアップスケールします。ページでキャラクターより広いヒーロー画像が必要な場合は、ページ用に左右をアウトペイントします。ただし、リグはキャラクターを中心とした正方形または縦長のクロップで作成します。アウトペイントモデルは画像全体を再レンダリングするため、その後で元のピクセルを中央部分に貼り戻してください。

2. キーフレーム

画像編集モデルを使い、プレートを元に、頭部を左右、上下、斜め4方向それぞれの極端な角度まで向けた画像を作成します。プロンプトでは、頭部以外のすべてを固定する必要があります。

同じキャラクター、同じ絵画、同じフレーミングとクロップ。頭部だけを画像の左端の方へ、約40度向けます。髪、顔、肌、シャツ、手、体のポーズ、背景、筆致はすべてまったく同じままにします。新しいオブジェクトは追加しません。

プレートと各キーフレームをフルサイズで交互に表示して確認します。変えてよいのは頭部だけです。フレーミングをほぼピクセル単位で正確に保つモデルには、ここで費用をかける価値があります。肩の位置がずれたキーフレームがあると、行全体を作り直すことになります。

3. 頭部ターンのクリップ

画像から動画を生成します。開始フレーム＝プレート、終了フレーム＝キーフレーム、5秒、カメラ固定：

カメラは固定します。キャラクターは頭と首だけをゆっくり動かし、正面から［終了ポーズ］へ向きます。体、シャツ、腕、背景は完全に静止させます。滑らかで均一な動きにし、まばたきや会話はさせません。

行と左右を示す名前を付けます。水平の行（必須）は L.mp4 と R.mp4、UL／UR（上向き）、HL／HR（やや下向き）、DL／DR（下向き）です。8本のクリップで完全なリグができます。2本で作るリグは、左右にだけ向きを変えます。

2つの行の違いが大きい場合（たとえば、下向きのキーフレームでモデルが髪を描き直した場合）、その間をモーフィングでつなぐのではなく、実際の中間行を生成してください。

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 を指定します。各フレームから丸くて暗い2つの目を検出し、位置を記録するので、まばたきをリアルタイムで描画できます。--eye-band y0,y1 と --dark で調整します。
• それ以外の顔には --track template --point x,y を指定します。指定した点の周囲のパッチをフレーム間で追跡します（鼻筋が適しています）。このモードではまばたきは描画されません。
• デフォルトの楕円形マスクで髪が切れたり、襟が含まれたりする場合は、--poly で頭部マスクのポリゴンを設定します。

スクリプトが行うことと、その理由：

• すべてのクリップを胴体に合わせます（ECC、--body-y より下の行）。動画モデルはフレーム全体を数ピクセルずらすことがあります。位置合わせをしないと、頭が回るときにシャツが揺れます。クリップごとのずれを出力します。6 px を超える場合、カメラが固定されていません。
• 時間ではなく、測定した頭部の位置で列を選びます。 モデルは動き始めと終わりに速度を緩めるため、等間隔のタイムスタンプでは動きが不均等になります。測定値を等間隔にすれば、回転も均等になります。
• 明るさをプレートに合わせたうえで、フェザー処理したマスクを通して、各頭部を1枚のプレートの胴体に合成します。 これにより、変化するのは頭部だけです。
• 欠けているピッチの行を、隣り合う行のオプティカルフローによる中間フレームで補います。

--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 を適用して向きを決めるため、端に近づいても頭部が限界位置へ急に跳びません。
• 少し減衰の弱いバネの動きで移動します（各ターンの終わりに少し揺れが収まる動きで、生き生きと見えます）。
• クロスフェードではなく、隣り合うポーズを切り替えます（クロスフェードでは目が2組見えてしまいます）。
• rig.json 内の目の位置と肌の色を使って、目の上にまばたき、連続したまばたき、ウインクを描画します（点目の追跡時のみ）。
• ポインターが3.5秒間動かないと、自動で視線を動かします。タッチデバイスでも同様です。
• 画面外に出ると一時停止します。

予算

クリップ8本分が全コストです。一般的な画像から動画を生成する料金であれば、数ドル程度です。完成したリグ（152ポーズ、0.6倍スケール）は WebP で約2 MBです。

アクセシビリティ

• プレートの <img> に代替テキストを設定し、キャンバスは装飾として扱います。
• prefers-reduced-motion が指定されている場合、頭部はポインターに反応します（訪問者自身が動かすためです）が、臨界減衰の動きになり、自動での視線移動やまばたきはありません。
• リグがなくても何も問題ありません。こちらを見ているように見えるだけの肖像画です。