Interactive Tank

WebGPU 기반 탱크 씬 렌더링과 간단한 인터랙션을 포함하는 프로젝트

• 주요 기능

  • 탱크 메시에 대한 GLTF/OBJ 로딩
  • PBR 셰이더와 노멀맵, 러프니스/메탈릭/AO 텍스처 적용
  • 마우스/키보드 이벤트로 카메라 조작 (회전/이동/줌)
  • 배럴(포신) 각도 조절 및 포탄 발사
  • 포탄 일시정지(P 키) 기능

• 구조

  • main.js: WebGPU 초기화, 메시/텍스처 로딩, 이벤트 등록, 렌더 루프
  • ui.js: 마우스/키보드 이벤트 처리 및 카메라 매트릭스 업데이트
  • pipelines.js: 파이프라인/BindGroup/버퍼 생성 등 WebGPU 설정
  • utils.js: 프로젝트, 언프로젝트, 탄젠트 계산, 배럴 피벗 계산
  • loader.js: GLTF/OBJ 파일 및 텍스처 로딩

• 사용 방법

  • 브라우저에서 /index.html 열기
  • 마우스 드래그로 카메라 회전/이동, 키보드로 탱크 제어(WASD와 방향키 등), 스페이스로 포탄 발사
  • P 키로 포탄 낙하 일시정지/재시작

• 주요 원리

  • WebGPU API를 통해 GPU 버퍼 및 파이프라인 구성
  • PBR 셰이더(WGSL)로 노멀맵/메탈릭/러프니스 등 물리 기반 렌더링
  • 마우스 이벤트를 벡터 변환하여 카메라 회전행렬에 반영
  • 포탄은 물리연산(중력)으로 위치 갱신, P 키로 상태 변경