피드로 돌아가기
Dev.toFrontend
원문 읽기
Three.js 배제와 Canvas 2D 전환을 통한 브라우저 기반 ML HUD 최적화
Building PROTO RECON — From Vague Idea to a Browser-Based Tactical HUD
AI 요약
Context
스마트폰 센서와 브라우저 내 ML을 결합한 실시간 전술 HUD 구현 시도. 초기 설계 단계에서 Three.js 기반의 고사양 그래픽스 도입을 고려했으나, 모바일 디바이스의 리소스 제약과 런타임 성능 저하 가능성이 병목 지점으로 파악됨.
Technical Solution
- Three.js를 배제하고 Canvas 2D 및 CSS를 통한 CRT 스타일 이펙트 구현으로 라이브러리 오버헤드 제거
- TF.js 백엔드를 WebGPU에서 WebGL, CPU 순으로 Fallback 구조를 설계하여 디바이스 호환성 확보
- Inference Throttling 기법을 적용하여 ML 추론 주기와 렌더링 프레임을 분리함으로써 메인 스레드 부하 감소
- rAF(requestAnimationFrame)와 추론 인터벌의 정밀 제어로 Face Mosaic 처리 시 발생하는 발열 및 프리징 현상 방지
- Vite 기반의 Vanilla JS 스택 채택을 통한 번들 크기 최소화 및 런타임 실행 속도 향상
Key Takeaway
웹 환경의 실시간 ML 서비스 구축 시, 시각적 화려함보다 런타임 경량화가 우선이며, 하드웨어 가속 API의 단계적 Fallback 설계가 사용자 경험의 안정성을 결정함.
실천 포인트
- 모바일 브라우저 ML 구현 시 Three.js 등 무거운 라이브러리 대신 Canvas 2D 활용 검토 - TF.js 도입 시 WebGPU -> WebGL -> CPU 순의 Backend Fallback 전략 수립 - ML 추론 주기와 UI 렌더링 주기를 분리하는 Throttling 메커니즘 적용 - 메모리 누수 방지를 위해 앱 재시작 시 기존 ML 모델의 명시적 Disposal 처리 확인