단일 HTML 파일 내 Three.js 기반 3D 엔진 및 런타임 오디오 합성 구현

Context

번들러와 외부 에셋 없이 브라우저에서 즉시 실행 가능한 고성능 3D 게임 구현이라는 극단적 제약 상황 직면. 기존의 정적 에셋 로딩 방식은 초기 로딩 속도를 저하시키고 배포 복잡도를 증가시키는 한계 존재.

Technical Solution

• native importmap을 활용한 Three.js r160 동적 로딩으로 빌드 단계 제거 및 런타임 의존성 해결
• Web Audio API 기반의 실시간 사운드 합성 시스템을 구축하여 오디오 파일 없이 모든 효과음 생성
• Procedural canvas texture 생성 방식을 통한 이미지 에셋 의존성 제거 및 메모리 효율 최적화
• Dawn meter(0.0 ~ 1.0) 값을 기반으로 Sky color, Fog, Sun angle 등 환경 변수를 선형 보간(lerp)하는 통합 상태 제어 구조 설계
• try/catch 블록 내 Postprocessing 동적 로드 구조를 통해 GPU 호환성 문제 발생 시 기본 렌더링으로 폴백(fallback) 처리
• Sprite particle pool 재사용 및 Device Pixel Ratio 캡핑을 통한 저사양 노트북 환경의 프레임 드랍 방지