Anime2.5DRig is a browser-based tool that automatically rigs 2.5D avatars from layered PSD files, producing idle animation, blinking, lip-sync, and hair physics with no installation required.

Stars

124

7-day growth

No data

Forks

26

Open issues

0

License

MIT

Last updated

2026-07-06

AI repository intelligence
FR-AI / ANALYSIS

Why it is worth attention

It automates the entire rigging process—mesh splitting, deformation, physics setup—that traditionally requires manual work, and runs entirely client-side for instant feedback.

Who it is for

  • Illustrators who create layered PSD character art
  • VTubers or streamers wanting customizable avatars
  • Web developers building interactive avatar experiences
  • Hobbyists interested in 2.5D animation without complex software

Use cases

  • Convert a layered character illustration into a live 2.5D avatar for streaming or presentations
  • Create interactive web avatars with webcam and microphone lip-sync
  • Rapidly prototype character rigging for indie games or animations
  • Educational tool for learning about automatic rigging and physics simulation

Strengths

  • Zero-installation: all processing in browser, drag-and-drop PSD
  • Automatically detects and separates left/right eyes, eyebrows, eyelashes, and hair strands
  • Includes physics for hair, chest, breathing, and camera tracking via MediaPipe
  • Supports closed-eye/closed-mouth auto-generation and cross-fade for smooth blinking

Considerations

  • Requires pre-segmented PSD (does not perform decomposition of single images)
  • Mouth opening uses simple switch+deformation (smoother with intermediate meshes)
  • Depth ordering based on fixed name table, not layer order in PSD
  • No support for layer groups (must be flattened)

README quick start

Anime2.5DRig

デモ: https://852wa.github.io/Anime2.5DRig/

パーツ分けPSDをブラウザにドロップするだけで、自動リギングされて動き出す 2.5D アバターツールです。 従来は手作業だったセットアップ(メッシュ分割・変形・物理設定)を自動化します。インストール不要・全処理クライアントサイド。

デモ / 使い方

  1. このリポジトリを GitHub Pages で公開(Settings → Pages → Branch: main / root)するか、ローカルで:
    python -m http.server 8000
    # → http://localhost:8000
    
  2. ページを開き、パーツ分けPSDをドロップ(または「sample.psd を読み込む」)。
  3. 自動リグが走り、その場でアイドルモーション・まばたき・口パク・髪物理付きで動きます。

カメラ追従(MediaPipe FaceMesh)とマイク口パクは https または localhost でのみ動作します(ブラウザの権限仕様)。file:// 直開きでもドロップ再生は可能です。

自動で行われること

  • see-through の出力PSDをそのまま受け入れ(mouthmouth_open 自動リネーム)
  • 閉じ目・閉じ口差分が無い場合、汎用差分を自動生成(アンカーに合わせてスケール・配置し、まつ毛/口の色に自動調整。専用バーで位置・角度を微調整可能)
    • 差分の元絵はリポジトリ直下の eye_close.psd(左右両目を1枚・間を空けて)/ mouth_close.psd を優先使用。無ければ内蔵データを使用
  • 低アルファノイズ除去(連結成分フィルタ)
  • 目・眉・まつ毛・閉じ目の左右自動分離(連結成分の重心で判定)
  • まぶた位置・虹彩中心・口・首ピボットなどアンカーの自動検出
  • 髪の房(ストランド)自動検出(毛先輪郭のピーク検出、1レイヤーにつき最大6房)
  • レイヤーごとの深度割当てによる擬似3D首振り(パララックス+シアー)
  • 房ごとの2重バネ物理(根元は固く・毛先はふわふわ)、胸の揺れ、呼吸
  • 閉じ目/閉じ口差分のクロスフェード、瞳のステンシルクリップ(白目内に制限)

レイヤー命名規約

レイヤー名(日本語の「のコピー」や全角文字は自動正規化されます):

レイヤー名内容必須備考
face顔ベースアンカーの基準。これだけは必ず
eyewhite白目(左右両方)左右は自動分離
irides虹彩(左右両方)視線移動・瞳スケール対象
eyelashまつ毛(開き目)
eye_close閉じ目まばたきでクロスフェード
eyebrow眉(左右両方)角度・上下操作対象
mouth_open開き口開度で顎が下がる
mouth_close閉じ口
nose
ears
earwear耳飾り
neck上端は頭に追従
topwear上半身の服呼吸・胸の揺れ対象
bottomwear下半身の服
handwear腕・手腕の高さ操作対象
headwear帽子・カチューシャ等
front hair前髪房物理+3ブロック操作
back hair後髪房物理
  • 髪を複数レイヤーに分ける場合: front hair_1, front hair_2, back hair_1 … のように _連番 を付けると、各レイヤーが独立した房グループとして物理演算されます(房数はレイヤー幅から自動決定)。
  • 規約にない名前のレイヤーも読み込まれます(位置から頭部/胴体を推定して追従のみ)。
  • レイヤーグループ(フォルダ)は未対応です。フラットな構成にしてください。
  • 首(neck)と胴体(topwear)について: see-through の出力をそのまま使うと首と胴体の前後関係の解決が難しく、動かした際に境目が破綻することがあります。うまくいかない場合は、首を胴体レイヤーに統合した一体型(neckレイヤーなし、topwearに首まで含める)にした方が成功しやすいです。
  • キャンバスは正方形推奨(768×768〜2048×2048で動作確認)。

機能

表情プリセット(笑顔/驚き/ジト目/ウインク左右)、左右独立の目の開き、眉角度(左右独立+対称)、視線、瞳スケール、目/口の「閉じやすさ」しきい値、前髪3ブロック操作と前髪専用の揺れ・柔らかさ、腕の高さ/位置、胸の揺れ(強さ・位置調整可)、体の傾き、アイドル/ランダムモーション、ランダム口パク、マイク口パク、マウス追従、ウェブカメラ追従(頭XYZ・まばたき左右・口・視線)、

Related repositories

Similar projects matched by category, topics, and programming language.

ddosi
Featured
ddosi GitHub avatar

PacketLens

PacketLens is a pure front-end, offline pcap analysis tool that runs entirely in the browser, supporting deep protocol decoding, HTTPS decryption, and million-packet instant loading without any backend.

HTML
19
ViffyGwaanl
Featured
ViffyGwaanl GitHub avatar

kimi-k3-learn

An interactive learning system that turns the 47-page Kimi K3 technical report into a single offline HTML file with running algorithms, 3D visualizations, spaced repetition quizzes, and a smart highlighting QA tool.

AI & Machine Learning
15
iamtechartist
Featured
iamtechartist GitHub avatar

human-cell-visualizer

An interactive 3D visualization of three human cell types using Three.js, WebGL particles, and custom GLSL shaders, allowing users to rotate, zoom, morph, and explore annotated structures.

Design & Creative
13