3D Spritesheet Studio

Convert 3D models and real-time webcam face captures into customizable 2D spritesheets, texture atlases, PNG sequences, and animated GIFs with MediaPipe 3D face mesh tracking, background removal, and live interactive cursor look-at simulation.

---

🌟 Key Features

🧊 3D Model Studio & Interactive Viewport

• Procedural Sample Models: Includes ready-to-use 3D sample assets (G-Man Head, Cyber Robot Head, Sci-Fi Helmet, Cute Alien Creature, Crystal Gem).
• Custom 3D File Upload: Supports importing 3D model formats including .glb, .gltf, .obj, .stl, and .ply.
• Real-Time Orbit Control: Smooth rotation, panning, and zoom controls powered by @react-three/fiber and @react-three/drei.
• PBR & Environment Reflection: Real-time HDR environment reflections (city, apartment, dawn, night, studio, park) with material overrides (Claymation, Chrome Metal, Stylized Toon, Wireframe, or Default).

📷 Webcam Face Studio & MediaPipe Tracking

• 468 3D Landmark FaceMesh Tracking: Real-time facial pitch, yaw, and roll orientation estimation powered by MediaPipe FaceMesh.
• Pose-Guided Capture HUD: Visual grid overlay with Amber Ghost Silhouette guide indicating exact head tilt angles (UP/DOWN/LEFT/RIGHT).
• In-Browser Background Removal: Real-time background removal powered by MediaPipe SelfieSegmentation and smart alpha feathering.
• Manual & Automatic Snap: [SPACEBAR] tap-to-snap capture workflow with shutter sound effects and automated target pose progression.

📐 Spritesheet & Atlas Baking Engine

• Flexible Grid Arrangements: Render as 2D Matrix Atlases, Horizontal Rows, or Vertical Columns.
• Custom Frame Resolutions: Choose cell sizes from 64x64px, 128x128px, 256x256px, up to 512x512px.
• Multi-Axis Capture Mode: Simultaneously capture Pitch (X-axis look up/down) and Yaw (Y-axis look left/right) for dynamic 2D cursor look-at avatars.
• Single-Axis 360° Spin Mode: Clean rotational captures around X, Y, or Z axes over custom angle spans.

🎯 Live Cursor Look-At Simulator & Code Exporter

• Interactive Test Canvas: Test mouse-cursor tracking live on generated 2D spritesheets before exporting.
• Tuning Controls: Adjustable tracking radius, sensitivity multiplier, and axis inversion toggles (Invert X/Y).
• Developer Code Embed Generator: Generates copy-paste code snippets for both React (JSX) and Vanilla HTML/JavaScript.

📦 Export & Package Options

• PNG Texture Atlas: Single consolidated high-resolution PNG spritesheet.
• Animated GIF: Export smooth loopable GIFs generated via gifshot.
• ZIP Frame Pack: Uncompressed archive of individual frame PNG files powered by jszip.
• JSON Metadata: Standard texture atlas JSON format containing frame coordinates and rotation angles.

---

🚀 Getting Started

Prerequisites

• Node.js: v18.x or higher
• npm or bun

Installation

1. Clone the repository:

git clone https://github.com/your-username/3d-spritesheet-studio.git
cd 3d-spritesheet-studio

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open http://localhost:3000 in your browser.

---

🛠️ Tech Stack

• Frontend: React 19, TypeScript
• 3D Graphics Engine: Three.js, @react-three/fiber, @react-three/drei
• Computer Vision & AI Tracking: @mediapipe/face_mesh, @mediapipe/selfie_segmentation, @mediapipe/camera_utils
• Styling & UI Components: Tailwind CSS v4, Lucide React Icons, Radix UI Primitives
• Export Processing: JSZip, Gifshot
• Build Tooling: Vite

---

📜 License

Distributed under the GPL-3.0-only License. See LICENSE for more information.