개요
저는 최근 Cesium을 활용한 3D 데이터 시각화 프로젝트를 진행하면서, 막대그래프의 높이를 동적으로 조정하는 애니메이션을 구현했습니다. 초기에는 Box Entity를 사용했으나 성능 문제가 발생했고, 이를 glb 모델로 전환하며 효율성을 극대화할 수 있었습니다. 특히 glb의 애니메이션 데이터를 사용하는 대신, SampledPositionProperty를 이용해 직접 위치를 변경하는 방식으로 더 나은 성능을 확보했습니다.
프로젝트 목표: 3D 그래프의 높이 변경 애니메이션 구현
프로젝트의 주요 목표는 다음과 같았습니다:
- 데이터를 입력받아 3D 막대그래프를 생성
- 각 막대의 높이를 애니메이션으로 동적으로 조정
- 40 X 40 그리드와 같은 대규모 데이터에서도 성능을 유지
초기에는 Cesium의 Box Entity를 사용하여 그래프를 구현했습니다.
하지만 애니메이션을 추가하는 과정에서 심각한 프레임 드롭 문제가 발생했습니다.
문제점: Box Entity의 성능 한계
Box Entity는 다음과 같은 이유로 성능 문제가 발생했습니다.
- 동적 속성 관리 오버헤드
- Box Entity는 위치와 크기를 모두 업데이트해야 하며, 각 프레임마다 dimensions를 재계산하는 데 CPU 부하가 컸습니다.
- 대규모 데이터 처리
- 40 X 40 그리드 (1600개 Entity)를 다룰 때, 각 Entity가 개별적으로 렌더링 되면서 프레임 드롭과 렌더링 지연이 발생했습니다.
해결 방법: glb 모델로 전환 및 위치 변경 애니메이션 구현
Box Entity 대신 glb 모델을 활용하여 그래프를 재설계했습니다. 각 막대그래프의 크기가 동적으로 설정되어야 했으므로, glb애니메이션 데이터 대신 Cesium의 SampledPositionProperty를 사용해 높이를 변경하는 방식을 채택했습니다.
구현 방식
- glb 모델 설계
- 높이 100을 가진 박스 모양의 glb 파일을 디자인
- 기준점을 윗면의 중심으로 설정하며 Cesium에서의 초기 높이가 0으로 보이도록 설계.
- 위치 변경을 통한 애니메이션 구현
- glb 모델의 높이를 변경하는 대신, 위치를 높이 방향으로 이동하여 그래프가 성장하는 듯한 애니메이션 효과를 구현
- 단일 glb 파일로 1600개의 막대그래프를 생성하여 효율성 극대화.
glb 모델 전환 후 얻은 장점
- 성능 개선
- glb 모델은 고정된 지오메트리로 GPU에서 처리되므로, Box Entity보다 능이 뛰어났습니다.
- 더 나은 유연성
- 위치 변경만으로 애니메이션을 구현했으므로, glb의 애니메이션 데이터를 별도로 정의할 필요가 없었습니다.
- 대규모 데이터 처리 가능
- 40 X 40 그리드에서도 부드러운 애니메이션 동작을 유지했습니다.
결론
Cesium에서의 3D 그래프 구현은 단순한 시각화를 넘어 효율적인 성능 최적화가 중요합니다. 이 프로젝트를 통해 얻은 교훈은 다음과 같습니다
- glb 모델은 Box Entity보다 대규모 데이터와 애니메이션 처리에 적합하다.
- Cesium의 SampledPositionProperty를 활용하면 동적인 위치 변경 애니메이션을 쉽게 구현할 수 있다.
- 상황에 따라 적절한 도구를 선택하면, 성능과 유연성을 동시에 확보할 수 있다.
Cesium을 활용한 3D 시각화에서 성능 최적화는 필수적입니다.
제가 경험한 방식이 여러분의 프로젝트에도 도움이 되길 바랍니다.
728x90