3D GIS 지식 그래프

지리공간 기술과 프론트엔드 엔지니어링을 연결하는 인터랙티브 포트폴리오

  • 3D Tiles 스펙 — 클러스터: format, 난이도: advanced
  • 면적 계산 알고리즘 — Delaunay 삼각분할 + 벡터 외적 — 클러스터: geodesy, 난이도: expert
  • AWS Lambda → EC2 트리거 — 클러스터: infrastructure, 난이도: intermediate
  • Cesium.js 도입 결정 — 클러스터: decision, 난이도: intermediate
  • Cesium 마우스 이벤트 처리 — 클러스터: frontend, 난이도: advanced
  • Chrome DevTools 메모리 프로파일링 — 클러스터: problem, 난이도: intermediate
  • 좌표계 변환 EPSG→WGS84→ECEF — 클러스터: geodesy, 난이도: advanced
  • Docker 컨테이너 — 클러스터: infrastructure, 난이도: intermediate
  • Draco 지오메트리 압축 — 클러스터: optimization, 난이도: intermediate
  • FBXLoader 메모리 누수 — 클러스터: problem, 난이도: intermediate
  • 지오이드고 보정 — 클러스터: geodesy, 난이도: advanced
  • GPU 텍스처 BC7·ASTC·ETC2 — 클러스터: graphics, 난이도: advanced
  • IFC→3D Tiles 자동 변환 파이프라인 — 클러스터: implementation, 난이도: expert
  • KTX2 Basis Universal — 클러스터: optimization, 난이도: advanced
  • LOD 레벨 오브 디테일 — 클러스터: graphics, 난이도: advanced
  • Cesium 측정 도구 7종 — 클러스터: implementation, 난이도: advanced
  • 자오선 수차 보정 — 클러스터: geodesy, 난이도: expert
  • Mesh·BIM·Point Cloud — 클러스터: graphics, 난이도: beginner
  • modelMatrix 위치·회전·스케일 — 클러스터: implementation, 난이도: advanced
  • 낙관적 업데이트 — 클러스터: frontend, 난이도: advanced
  • 공간 분할 기법 — Quadtree와 AABB — 클러스터: graphics, 난이도: advanced
구현 사례

Cesium 측정 도구 7종

한 줄 요약

Cesium.js 위에서 거리, 면적, 각도, 수직거리, 수평거리, 원, Profile(단면도) 7종의 측정 도구를 직접 설계·구현한 경험. Cesium은 이러한 측정 기능을 유료 구독(연 약 100만 원)으로 제공하지만, 이를 직접 구현하여 대체했다. 가장 까다로웠던 것은 Profile — Clipping Plane, 직교 투영 대체를 위한 시야각 조절, 카메라 고정과 이동 제한, 두 뷰어 간 동기화까지 여러 기술적 도전이 있었다.

7종 측정 도구 개요

모든 측정 도구는 "Cesium 마우스 이벤트 처리" 노드에서 다룬 동일한 인터랙션 패턴(클릭→진행→완료→취소)을 따른다. 도구별로 다른 것은 무엇을 계산하고 어떻게 시각화하는가다.

도구입력출력
거리 (Distance)다수의 점 클릭구간별 거리 + 총 거리
면적 (Area)다수의 점 클릭 (폐합)둘레 길이 + 면적
각도 (Angle)3개의 점 클릭세 점이 이루는 각도
수직·수평 거리 (Orthogonal)2개의 점 클릭수직 성분 + 수평 성분 분리
원 (Circle)중심 + 반지름 점반지름 거리
Profile (단면도)2개의 점 클릭두 점 사이의 단면 시각화

거리, 각도, 원은 Cesium의 Cartesian3 벡터 연산으로 구현한다. 두 점 사이의 거리는 Cartesian3.distance()로 계산하고, 각도는 두 벡터의 내적(dot product)으로 구한다.

면적 계산은 3D 공간에서의 다각형 면적을 구해야 하므로 별도의 알고리즘적 고려가 필요하다. 이 내용은 "면적 계산 알고리즘" 노드에서 깊이 다룬다.

수직·수평 거리(Orthogonal)는 두 점 사이의 3D 거리를 수직 성분(높이 차이)과 수평 성분(평면 거리)으로 분해한다. 건설 현장에서 "이 경사면의 수평 거리는 얼마이고 높이 차이는 얼마인가"를 확인할 때 사용한다.

Profile — 가장 어려웠던 도구

Profile(단면도)은 7종 중 구현 난이도가 압도적으로 높았다. 다른 측정 도구들이 "3D 공간에서 점을 찍고 계산하는 것"이라면, Profile은 "3D 모델의 단면을 잘라서 별도의 뷰어에 보여주는 것"이다.

Clipping Plane 이해

Cesium의 Clipping Plane은 3D 공간에서 평면을 기준으로 모델의 한쪽을 잘라내는 기능이다. 사용자가 두 점을 찍으면, 그 두 점을 잇는 직선을 기준으로 수직 Clipping Plane을 생성하여 모델을 자른다.

Mesh·BIM·Point Cloud 노드에서 다뤘듯, Mesh를 자르면 실처럼 나오고 Point Cloud를 자르면 의미 있는 단면이 나타난다. Profile 도구는 이 Clipping Plane을 생성하고 제어하는 전체 과정을 구현해야 했다.

직교 투영의 한계와 FOV 축소 대안

단면도를 정면에서 볼 때, 일반적인 3D 카메라의 원근 투영(perspective projection)이 적용되면 단면이 왜곡되어 보인다. 가까운 부분이 크게, 먼 부분이 작게 보이기 때문이다.

이론적으로는 직교 투영(orthographic projection)을 사용하는 것이 정석이다. 직교 투영에서는 거리와 관계없이 모든 물체가 동일한 크기로 보이므로, 단면도를 왜곡 없이 표현할 수 있다.

그러나 Cesium에서 직교 투영 모드를 활성화하면 카메라 조작이 멈추는 자체 버그가 있었다. 줌, 패닝, 회전 등의 카메라 컨트롤이 동작하지 않아 사용자가 단면도를 탐색할 수 없게 된다. 이 버그를 우회할 방법을 찾지 못해 직교 투영 도입을 포기해야 했다.

대안으로 선택한 것이 카메라의 시야각(Field of View)을 극단적으로 좁히는 방법이다.

왜 시야각을 좁히면 직교 투영처럼 보이는가

원근감은 "카메라에서 가까운 물체는 크게, 먼 물체는 작게 보이는 현상"이다. 핵심은 카메라와 물체 사이의 거리 비율이다.

FOV가 넓을 때(예: 90도), 카메라는 넓은 범위를 한 번에 본다. 단면도 장면에서 카메라가 가까이 있으면, 단면의 앞부분은 카메라에서 5m, 뒷부분은 15m 떨어져 있을 수 있다. 이 경우 거리 비율은 15:5 = 3배다. 뒷부분이 앞부분보다 3배 멀리 있으므로 3배 작게 보인다 — 강한 원근감이 발생한다.

FOV를 극단적으로 좁히면(예: 1~2도), 같은 장면을 화면에 담기 위해 카메라를 훨씬 멀리 떨어뜨려야 한다. 마치 망원경으로 멀리서 들여다보는 것과 같다. 카메라가 500m 뒤로 물러나면, 단면의 앞부분은 500m, 뒷부분은 510m 떨어져 있게 된다. 이제 거리 비율은 510:500 = 1.02배다. 뒷부분이 앞부분보다 겨우 2% 작게 보일 뿐이다 — 사람 눈으로는 원근감을 느낄 수 없다.

즉, FOV를 좁히면 카메라가 멀어지고, 카메라가 멀어지면 장면 내 모든 물체의 카메라 거리 비율이 1에 수렴한다. 모든 물체가 "거의 같은 거리"에 있는 것처럼 보이므로, 크기 차이가 사라지고 직교 투영과 사실상 동일한 결과가 된다. 실무에서 이 방법은 직교 투영과 시각적으로 구분할 수 없는 수준의 결과를 제공했다.

카메라 고정과 이동 제한

단면도를 볼 때 카메라는 단면의 측면에 고정되어야 한다. 사용자가 자유롭게 3D 공간을 돌아다니면 단면도의 의미가 없어진다.

카메라를 단면 측면에 고정한 뒤, 사용자의 카메라 조작을 수평 방향(좌우 이동)과 수직 방향(상하 이동)으로만 제한했다. 회전이나 전후 이동은 차단하여, 단면도를 평면적으로 탐색할 수 있도록 했다. 확대/축소(줌)는 허용하여 세부 사항을 확인할 수 있게 했다.

단면도 뷰어와 메인 뷰어의 동기화

단면도는 메인 3D 뷰어 하단에 별도의 뷰어로 열린다. 이 두 뷰어 사이에 마우스 위치 동기화가 필요했다. 단면도 뷰어에서 마우스를 올린 위치가 메인 뷰어에서 어디에 해당하는지를 실시간으로 표시한다.

이 경험에서 추출한 원칙

  1. 이론적 정석이 적용 불가능할 때, 결과가 동등한 우회 방법을 찾아라. 직교 투영이 정석이지만 Cesium 버그로 불가능했을 때, FOV 축소라는 대안이 실용적으로 동등한 결과를 만들어냈다. "정답이 안 되면 포기"가 아니라 "같은 결과를 만드는 다른 길"을 찾는 것이 엔지니어링이다.

  2. 하나의 도구 안에 여러 기술 영역이 교차한다. Profile 하나를 구현하려면 Clipping Plane(3D 기하학), 카메라 제어(3D 렌더링), 투영 방식(컴퓨터 그래픽스), 뷰어 간 동기화(상태 관리)가 모두 필요했다. 복잡한 기능은 단일 기술이 아니라 기술의 교차점에서 만들어진다.