1만 대 항공기 실시간 렌더링, Rust와 raw WebGL로 구현한 초고성능 시각화

Context

Three.js와 같은 프레임워크의 추상화 레이어가 GPU 부하와 메모리 사용량을 증가시키는 병목 지점. 대규모 데이터셋 렌더링 시 프레임 드랍 및 성능 저하 발생. 모바일 GPU별 서로 다른 속성 할당 방식으로 인한 렌더링 오류 존재.

Technical Solution

• 프레임워크의 Scene Graph와 렌더링 파이프라인을 제거하고 raw WebGL 기반의 직접 제어 방식 채택
• Rust 언어로 작성 후 WebAssembly(WASM)로 컴파일하여 저수준 메모리 관리 및 런타임 오버헤드 최소화
• GLSL 셰이더 내 layout(location = 0) 명시적 정의를 통한 모바일 GPU 간 속성 바인딩 일관성 확보
• Rust의 소유권 모델을 활용한 커스텀 데이터 조정 레이어 설계로 이기종 데이터 스트림 간의 동기화 및 메모리 안전성 보장
• 브라우저 API 래퍼를 제거하고 navigator.geolocation 등 표준 API에 직접 접근하는 파이프라인 구축

Impact

• Three.js 대비 메모리 사용량 8배 감소
• 10,000대 이상의 항공기를 60 FPS로 부드럽게 렌더링
• 브라우저 API 직접 호출을 통해 지연시간 1.5s에서 0.8s로 단축
• API 호출 실행 시간 50ms 미만 달성
• 데이터 일관성 99.9% 확보

Key Takeaway

추상화 레이어가 제공하는 편의성보다 성능 최적화가 우선순위인 도메인에서는 하드웨어 및 GPU 파이프라인에 직접 접근하는 Low-level 설계가 최적의 선택지임.