img2threejs: 단일 이미지에서 객체를 절차적 Three.js 코드로 재구성하는 단계별 조각 파이프라인

What it solves

단일 참조 이미지를 고품질이고 애니메이션 준비가 된 3D 모델로 변환하는 어려움을 해결합니다. 무거운 메쉬 파일이나 포토그램메트리를 사용하는 대신, 웹 브라우저에서 직접 렌더링할 수 있는 가벼운 절차적 코드를 생성합니다.

How it works

이 프로젝트는 AI 에이전트(예: Claude Code)가 조각가 역할을 하는 단계별 조각 파이프라인을 사용합니다. 프로세스는 다음과 같은 엄격한 순서를 따릅니다: 블록아웃, 구조 패스, 형태 정제, 재질 패스, 표면 패스, 조명 패스, 상호작용 패스, 최적화 패스. 각 단계는 참조 이미지와 작업을 검증하는 Python 스크립트에 의해 게이트됩니다. 에이전트는 다음 단계로 이동하기 전에 시각적 검토(원본과 나란히 렌더링된 이미지 비교)를 통과해야 합니다.これにより 최종 출력은 프리미티브, 절차적 셰이더, 생성된 기하학을 사용하여 객체를 구축하는 TypeScript 팩토리가 됩니다.

Who it’s for

• 게임 개발자 가벼운 코드 기반 3D 에셋을 찾는 분들
• 웹 개발자 대용량 파일 다운로드 없이 애니메이션 준비가 된 Three.js 모델이 필요한 분들
• AI 엔지니어 3D 에셋 생성을 위한 에이전트 기반 워크플로우를 구축하는 분들

Highlights

• 토큰 효율적인 디자인: 검증과 기록을 위해 결정론적 Python 스크립트를 사용하고, 시각적 판단을 위해서만 비용이 많이 드는 LLM 토큰을 예약합니다.
• 애니메이션 준비 완료: 피벗, 소켓, 콜라이더를 포함하는 런타임 계층 구조를 생성합니다.
• 절차적 재구성: 메시를 추출하는 대신 코드(프리미티브 및 셰이더)로부터 객체를 재구축합니다.
• Agent-agnostic: 기술 기반 아키텍처를 통해 다양한 AI 코딩 도구 및 비전 모델과 작동하도록 설계되었습니다.