Parallax Window
웹캠 얼굴·손 추적으로 오프축 3D 시점과 발사 제스처를 제어하는 브라우저 게임
개요
웹캠 앞의 사용자가 머리를 움직이면 화면 속 3D 공간도 함께 바뀌는 “창문 같은 화면”을 목표로 만든 브라우저 슈팅 게임입니다. 얼굴 추적은 카메라 시점에, 손 추적은 조준과 발사 입력에 연결했습니다.
주요 작업
- MediaPipe Face Landmarker로 얼굴 위치를 추적해 off-axis parallax camera 구현
- MediaPipe Hand Landmarker로 검지 조준, pinch/손동작 기반 발사 판정 구성
- React Three Fiber와 Three.js로 6면 grid room, target, bullet trail, particle 효과 제작
- custom projection matrix로 사용자의 시점 변화에 맞는 3D 원근감 계산
구현 메모
얼굴/손 추적 데이터는 렌더 루프와 분리해 ref 중심으로 전달했고, BulletSystem은 카메라 위치와 화면 좌표를 기반으로 발사 방향을 계산합니다. 타깃 충돌은 sphere collision으로 처리하고, 명중 시 파편 효과와 respawn을 이어 붙였습니다.