Communitygithub.com

Handkit

為程式生成的影片(fframes、HyperFrames/three.js、Remotion)製作解剖學上精確的 3D 手部與前臂動畫。當影片需要手部進行手勢、比劃、計數、指向、牽手、握手、反應,或從參考片段重建手部編舞時使用,支援寫實皮膚、卡通、蜘蛛人宇宙、奧術或黏土風格,任意膚色與人數。

Handkit 是什麼?

Handkit 是一個以 JSON 為驅動的 3D 手部動畫工具,專為開發者與 AI 代理設計,用於在程式生成的影片中創建解剖學上精確的手部與前臂動畫。它支援 fframes、HyperFrames/three.js 與 Remotion 等多種平台。核心概念是將手部姿勢定義為一組關節角度與位置,並將一系列姿勢按時間序列組成「片段」,系統會自動轉換為自然運動(包含彈簧、手指連鎖、跟隨動作與閒置晃動),而且完全確定性(相同片段產生相同幀)。使用者可以從內建約 50 種命名手勢庫開始,然後撰寫最小化的 JSON 片段來定義關鍵幀,並指定時間與緩動函數。Handkit 提供檢查工具(check)來驗證碰撞、速度與構圖,並透過 CLI 進行快速預覽(strip)與最終渲染(render)。它還支援複雜功能如指尖接觸目標、手部追蹤輸出、多人互動(牽手、擊掌),以及從參考影片重建動作的比對工具。外觀選項包含寫實、卡通、蜘蛛人宇宙、奧術、黏土等風格,並可精確控制膚色、輪廓與運動模糊。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Ayushmaniar/3d-accurate-hands/tree/HEAD/plugin/skills/handkit

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

Handkit 是做什麼的?

手部是 JSON:姿勢是關節角度加上擺放位置;片段是姿勢隨時間的關鍵幀序列;核心引擎將它們轉化為自然動作(彈簧、手指連鎖、跟隨動作、閒置晃動),再由繪圖引擎繪製。一切皆具確定性:相同的片段產生相同的幀。

以下 HANDKIT 代表 Handkit 資料夾(儲存庫根目錄)。請在其中執行命令。

首次使用: 如果尚無 Handkit 資料夾,請先設定(需要 git、Rust 與 FFmpeg;首次建置需幾分鐘,建議背景執行):

HANDKIT=${HANDKIT:-$HOME/.handkit}
[ -d "$HANDKIT" ] || git clone --depth 1 https://github.com/Ayushmaniar/3d-accurate-hands "$HANDKIT"
cd "$HANDKIT" && cargo build --release -p handkit-cli
(cd starters/fframes-clip && cargo build --release)    # 僅在使用 fframes 渲染影片時需要
H=$HANDKIT/target/release/handkit          # CLI(執行 cargo build --release 一次)
P=$HANDKIT/starters/fframes-clip/target/release/fframes-clip   # 影片播放器
A=$HANDKIT/assets                          # hand_R.glb, hand_L.glb(手部網格寫入)

工作流程(請依序執行)

  1. 從手勢庫開始。 $H gestures 列出約 50 個命名姿勢與描述(拳頭、 指向、OK、豎拇指、和平手勢、張掌、捏合、愛心手勢、相機取景框、握手……)。 在手部使用 "from": "ok" 即可採用某個手勢的形狀;幾乎免費。只需撰寫不同的關節角度。
  2. 撰寫片段(最小化,30 fps):
    { "version": 1, "fps": 30,
      "camera": { "position": [0, 0.12, 0.6], "target": [0, 0.1, 0], "fov": 30 },
      "look": { "style": "realistic", "skin": "medium" },
      "keys": [
        { "t": 0,   "hands": { "right": { "from": "fist",
            "place": { "wrist": [0, 0, 0], "palm_facing": [0, 0, 1], "fingers_toward": [0, 1, 0] } } } },
        { "t": 0.8, "hands": { "right": { "from": "spread_palm" } } },
        { "t": 1.6, "ease": "snappy", "hands": { "right": { "from": "point" } } } ] }
    
    每個關鍵幀從前一個延續:只撰寫變化的部分。t 是姿勢到達的時間;move 是移動持續時間(0.12 = 快速一揮);"pass": true 讓關鍵幀不暫停直接流過。使用以下方式將手部放置在畫面中: "place": {"screen": [x, y], "depth": 0.5, "palm_facing": .., "fingers_toward": ..} (x, y 是畫面比例,0,0 為左上角),並用 "elbow_screen": [1.1, 0.9] 從畫面邊緣引入手臂。
  3. 渲染前檢查: $H check clip.json(檢查接觸碰撞、手指穿透、速度、跳動、構圖、手肘是否在視線內)。依提示修正;它會指出問題所在的關鍵幀。
  4. 快速低成本的預覽: $P --clip clip.json --assets $A strip -n 12 寫入 strip.png (觀看它)。frame 2.5s 寫入一幀完整畫面。
  5. 渲染: $P --clip clip.json --assets $A render -o out.mp4(1920x1080,單位秒)。 縱向 1080x1920:使用相同的命令,但換成 $HANDKIT/starters/fframes-clip/target-portrait/release/fframes-clip。 背景:--background "#1d1f24",--spotlight 0.5,0.45,0.35,#3a3f48。

其他可用功能

  • 接觸: "goals": [{"touch": ["right.thumb.tip", "right.index.tip"]}],然後 $H solve pose.json 會精確滿足接觸條件(若無法達成則退出碼 2)。瞄準:{"aim": "right.index", "at": [x,y,z]}。
  • 外觀: 頂層 "look":樣式 realistic | toon | spiderverse | arcane | clay,膚色 light | medium | tan | brown | dark | #rrggbb,outline,motion_blur(子幀)。 也可以在播放器上指定:--look spiderverse,skin=brown。
  • 前臂末端: 骨架止於手肘。當手肘會露出時,使用 "look": {"arm": "fade"} 或 {"arm": {"sleeve": "#1e2a4a", "length": 0.08}}(捲起的袖口)。
  • 將 UI 與手部同步: $H track clip.json --site right.index.tip 會輸出每一幀該位置在螢幕上的座標(畫面比例),例如用來讓按鈕對觸碰做出反應。
  • 多人: 手部 ana.right,ben.left(任意名稱);"people": {"ana": {"look": {"skin": "dark"}, "scale": 1}}(scale 0.75 為兒童的手)。 手部會互相推開而不穿透("collide": false 允許重疊)。
  • 牽手: 一個目標 {"grip": ["ana.right", "ben.right"], "style": "handshake"}; 樣式有 handshake、interlaced、cupped、high_five、fist_bump、pinky。連續關鍵幀使用相同的握持會讓兩人一起移動,跟隨者延遲數幀。
  • 同一人的雙手: 可使用 touch 目標來合掌、拍手或構成取景框。

重建參考影片

先仔細研究:ffmpeg -i ref.mp4 -vf fps=4,scale=480:-1 f%03d.png 並閱讀這些幀。每個明顯事件設定一個關鍵幀;使用 screen 放置手部,用 elbow_screen 對準前臂;根據幀數調整時間。比對:python $HANDKIT/tools/motion/compare.py ref.mp4 out.mp4 cmp(產生兩者相同時間點的對照圖,以及一個並排的 MP4)。

需要更多資訊時

$H explain(慣例),$H explain clips,$H explain looks,$H explain <param> (例如 thumb.cmc_rot),或 $HANDKIT/docs/POSE_SPEC.md。只需閱讀需要的部分。 原始關節範圍:手指 mcp_flex -30..95,pip_flex -5..110,dip_flex -10..85, mcp_abd 約 -15..25;手腕 wrist_flex -80..85,wrist_dev -35..35。

經驗法則:優先使用手勢庫;關鍵幀少、節奏精準(真實手部移動約 0.2-0.6 秒並保持);渲染前檢查;先看 strip,不要看整部影片;保持檔案小而精簡。

相關技能