브라우저에서 바로 실행되는 바이브 코딩 3D FPS
A vibe-coded 3D FPS that runs entirely in your browser
핵심 요약
LLM을 활용해 3일 만에 개발한 브라우저 기반 3D FPS 게임 'VibeFPS' 소개.
- 기술 스택 — Three.js, Cannon.js, Web Audio API를 사용해 완전 오프라인으로 구동됨.
- 게임 특징 — 절차적으로 생성된 맵과 적, 웨이브 기반 전투, 전술 HUD 제공.
- 개발 배경 — 게임 디자인 경험이 없는 개발자가 3일간 LLM을 활용해 프로토타입으로 제작함.
- 커뮤니티 반응 — 플래시 게임에 대한 향수와 함께, 최근 범람하는 바이브 코딩 결과물의 품질에 대한 비판적 시각이 공존함.
VibeFPS (가제)는 브라우저 기반의 사이버펑크 1인칭 슈팅 게임 기술 데모입니다. 설치도, 다운로드도, CDN도 필요 없습니다. GitHub Pages에서 바로 실행되며 모든 것이 런타임에 절차적으로 생성됩니다.
▶️ 라이브 체험: https://rudesssolo.github.io/vibeFPS/
스택: Three.js (WebGPU 렌더러) + Cannon.js 물리 엔진 + Web Audio API (모두 로컬에 포함되어 완전 오프라인 구동).
포함된 기능:
절차적으로 생성된 건물, 애니메이션 효과가 들어간 네온 사인, 비, 반사, 블룸, 앰비언트 오클루전, 필름 그레인 및 영화 같은 색감 보정이 적용된 야간 네온 아레나.
순찰하고, 교전하며, 공격을 예고하고, 사격을 회피하는 센티넬 드론과의 웨이브 기반 전투.
에이펙스 유닛 - 매 웨이브 끝에 등장하는 고유한 엘리트 보스, 주기가 지날수록 점점 강해지는 로스터.
100% 절차적 오디오 (Web Audio API): 음악, 주변음, 공간화된 드론 소리, 웨이브 효과음, 체력 부족 시 심장 박동 소리 (MP3/WAV 에셋 없음).
미션 진행 상황, 레이더, 체력/실드/스태미나, 탄약, 텔레메트리 및 타겟 마커, 전용 보스 체력 바가 포함된 전술 HUD.
자동 / 울트라 그래픽 프로필 및 설정 저장 기능.
참고 사항:
> 게임 디자인 경험이 전혀 없습니다. 3D 게임은 말할 것도 없고요.
3일 동안 여러 LLM(Codex 기반 GPT 5.6, Kimi K3, Cline 기반 DeepSeek v4)을 활용해 비연속적으로 작업한 기술 데모/프로토타입이며, 당연히 완성된 게임은 아닙니다. 시작 화면, 하나의 아레나, 여러 적 웨이브와 보스가 포함되어 있습니다.
휴대폰에서도 작동해야 합니다. 위험을 감수하고 시도해 보세요 :)
리포지토리는 GitHub에서 소스 확인이 가능합니다 (현재 라이선스는 없으나, 관심이 있다면 추가하겠습니다).
게임의 느낌, 난이도 곡선, 그리고 WebGPU 전용이라는 점이 여러분에게 걸림돌이 되는지에 대해 피드백을 주시면 감사하겠습니다. 확인해 주셔서 감사합니다!




