AI 요약
이 기사는 Cesium 3D 지구 엔진을 활용해 산불 모니터링 대시보드를 구현한 방법을 상세히 설명한다. 화재 지점과 주변 자원(취수점, 소방서, 감시 카메라, 공항) 간의 관계를 3D 지구 위에 시각화하며, 포물선 아크, 발광 효과, Canvas 2D 입자 흐름 애니메이션을 구현했다. 단일 HTML 파일로 구성되어 CDN에서 Cesium을 불러와 바로 실행 가능하며, Webpack이나 Vue 같은 복잡한 도구 없이도 작동한다. 특히 아크 높이를 거리에 비례해 동적으로 계산하는 방식과, 프리미티브(Primitive)를 활용한 배치 렌더링으로 성능을 최적화한 점이 핵심이다.
핵심 포인트
- Cesium 1.114 버전을 CDN으로 불러와 단일 HTML 파일로 전체 대시보드 구현
- 아크는
ArcType.NONE으로 설정하고 사인 함수로 높이를 계산해 포물선 형태로 구현, 48개 포인트로 충분히 부드러운 곡선 생성 - 아크 높이는 두 지점 간 거리의 12%로 동적 계산하며 최대 4.5km로 제한해 과도한 곡률 방지
- 프리미티브(GeometryInstance)를 사용해 여러 아크를 하나의 draw call로 병합, entities.add 방식보다 성능 우수
향후 전망
- Cesium 기반 3D 시각화는 재난 모니터링, 물류, 도시 계획 등 다양한 분야로 확장 가능
- 단일 HTML 파일 방식은 프로토타이핑과 클라이언트 시연에 매우 효율적이며, 추후 Vue/React 프로젝트로 쉽게 이전 가능
출처:juejin