Skip to content

[feat] 3D 캐릭터 웹 카메라 촬영 기능 구현 - #9

Merged
june6-6 merged 3 commits into
developfrom
feat/#8-character-camera-web
Sep 15, 2026
Merged

june6-6 merged 3 commits into
developfrom
feat/#8-character-camera-web

Conversation

@june6-6

@june6-6 june6-6 commented Sep 15, 2026

Copy link
Copy Markdown
Collaborator

문제와 결과

포카전 돗자리 파일럿 페이지에는 방문자가 캐릭터와 함께 사진을 남길 수 있는 기능이 없었습니다. 이제 메인·이야기 화면에서 촬영 페이지로 이동해 포닉스 3D 캐릭터의 위치, 크기와 방향을 조절하고 사진을 촬영·저장·공유할 수 있습니다.

주요 변경 사항

  • 전면·후면 카메라와 캐릭터 드래그·핀치 확대·회전 조작
  • POSTECH·KAIST 선택 및 두 캐릭터 동시 배치
  • MediaPipe 인물 분할을 통한 선택적 사람 뒤 합성
  • 촬영 미리보기, 재촬영, JPEG 다운로드와 기기 공유
  • 사용자 제공 포닉스 USDZ를 약 9만 면의 Draco 압축 GLB로 변환
  • 카메라 권한 거부·모델 및 인물 분할 실패 시 안내와 대체 동작
  • 페이지 이탈·촬영 시 카메라와 렌더링 자원 해제

사진 처리는 브라우저 안에서 이루어지며 서버에 업로드하지 않습니다. 현재 KAIST 캐릭터는 공식 모델이 제공되지 않아 임시 3D 모델로 표시됩니다.

검증

  • npm run lint
  • npm run typecheck
  • npm test — 9개 통과
  • npm run build
  • Chrome 가상 카메라 Playwright 테스트 — 2개 통과
    • 카메라·실제 포닉스 GLB·인물 분할·촬영·다운로드·재촬영
    • 카메라 권한 거부 안내

iPhone Safari와 Android Chrome 실기기 확인은 병합 전에 별도로 진행해야 합니다.

Closes #8

Refs #8. 카메라 합성·인물 가림·사진 저장과 검증 추가. 공식 캐릭터 GLB는 별도 준비 필요.
사용자 제공 USDZ를 모바일 웹용 GLB로 변환하고 Draco 압축을 적용함.
@june6-6
june6-6 merged commit 5c8a3f5 into develop Sep 15, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[feat] 3D 캐릭터 웹 카메라 촬영 기능 구현

1 participant