Computer Graphics

대용량 Point Cloud Data 처리, WebGL, GPU, Web Computer Graphics 기법

남희정 2024. 11. 10. 09:45

게임이나 VR, AR등 3D 환경도 모두 포인트 클라우드로 이루어져 있다는 것. 구체적으로 나는 알지 못했다. 최근 대용량 Point Cloud Data를 다루는 프로젝트를 하게 되면서 이전엔 기본 지식이 전무했던 터라 관련하여 공부를 해보고 싶었다. 어떻게 대용량의 웹에 최적화되어 표시될 수 있는지? 관련 서비스들이 고려한 점은 무엇인지 생각해보고 싶었다. 그리고 그 중 웹에서 이를 표시하게 해주는 Potree 라이브러리와 Octree 기법, LoD, Culling 기법 등에 대해 알아보려 한다. 


What is the Point Cloud Data?

https://resources.inertiallabs.com/resources/tag/lidar

 

Point Cloud는 3D 형상이나 객체를 나타내는 점(point)들의 집합(set cloud)이다. 각 점의 위치는 (X, Y, Z)로 표현되는 데카르트 좌표(3차원 데카르트 좌표계, 좌표공간)를 갖고 있다. 점은 위치 외에도 RGB 색상, *노멀(nomals, 3D 그래픽에서 표면의 방향을 나타냄), 타임스탬프 등의 데이터를 포함할 수 있다.

 

데이터 수집 방식

https://23min.tistory.com/8

 

포인트 클라우드는 일반적으로 3D Scanner Photogrammetry Software에 의해 생성되며 이는 주변 물체의 외부 표현의 많은 점을 측정하여 데이터를 생성한다. 주요 방법은 LiDAR가 있는데, 장치에서 빛을 내보내 물체에서 반사된다는 점에서 레이더와 유사한 방식이다. 빛이 장치로 돌아오는 시간을 빛의 속도와 함께 사용하여 거리를 계산한다. LiDAR 장치에는 수직 각도는 고정, 수평면은 회전하는 레이저가 포함되어있다. 장치는 내부적으로 레이저가 수직으로 향하고 있는 각도와 방위각을 알고 있기에 물체에서 점의 위치를 3D 구형 좌표로 제공한다. 내부의 레이저는 초당 수천 개의 포인트를 생성한다.

대체 어떤 곳에서 활용되는 걸까 🤔

https://blog-ko.superb-ai.com/new-release-point-cloud-labeling-tool/

 

3차원 미디어를 표현하는 데 주로 사용되며, VR (Virtual Reality, 가상현실), AR (Augmented Reality, 증강현실), MR (Mixed Reality, 혼합현실) 및 자율주행 서비스 등 다양한 산업에 적용될 수 있다.

 

  • 건축 및 토목 공학
    건물, 다리, 터널 등 구조물을 스캔하여 설계, 유지보수를 위한 데이터로 활용된다.

    서비스 : Autodesk Recap, Bentley ContextCapture
  • 지리 정보 시스템(GIS) 및 도시 계획
    도시의 건물, 도로, 지형을 정확하게 모델링하여 도시 모델을 만드는 데에 활용된다.

    서비스 : Esri ArcGIS, Cesium
  • 자율주행 및 로봇 공학
    포인트 클라우드를 통해 자동차, 도로 표지판, 차선 표시와 같은 표현과 물체를 인식하고 도로 환경을 실시간으로 분석하는 데 사용된다. 장애물 회피와 같은 의사 결정을 할 수 있다.

    서비스 : Waymo, Tesla Autopilot, SLAM(Simultaneous Localization and Mapping) Solution
  • 문화 유산 보존 및 고고학
    유적지나 문화재를 고해상도 포인트 클라우드로 기록하여 정밀 복원에 활용한다.

    서비스 : CyArk, Reality Capture
  • 가상현실(VR) 및 증강현실(AR)
    서비스 : Matterport, Micro
  • 산업 제조 공정에서 부품 스캔, 정밀 측정 및 품질 검사
  • 의료 영상 및 생체 모델링 등…

 

Point Cloud Data Timeline

다양한 분야에 쓰이기까지 어떤 일이 있었을까? 

시대 주요 발전 및 특징 기술/응용 예시
60 ~ 70년대 3D 스캐닝 기술의 시작, 항공 사진 측량 및 레이더 기반의 저밀도 3D 데이터 획득 항공 측량, 간단한 지형 데이터 수집
80 ~ 90년대 3D 레이저 스캐닝 및 LiDAR 기술 발전, 고밀도 포인트 클라우드 데이터 수집 시작 지형 측량, 고고학, 건축, 인프라 프로젝트
00 ~ 10년대 하드웨어/소프트웨어 발전, 고정밀 포인트 클라우드 데이터 수집, 자율주행, AR/VR 기술에 활용 자율주행, 환경 분석, Potree, PCL(Point Cloud Library)
최근 대규모 포인트 클라우드 데이터의 효율적 처리와 관리 필요성 대두 LiDAR, 드론 촬영 데이터

 

 

Format & Point Cloud Library(PCL)

3D 모델링을 위한 파일 형식은 수백 개가 존재한다. (진짜로 수백 개)

. asc, .obj, .stl, .fbx, .gltf/.glb, .ply, .3ds/.max, .las … etc ⇒ 각 파일 형식이 특정 용도와 소프트웨어 환경에 맞게 최적화되어 있기 때문이다.

Point Cloud를 다루는 어느 회사나 조직들도 100% 자체 기술력으로 사용하지 않는다. Point Cloud를 처리하는 Open Source로 공개된 라이브러리를 활용한다.

⇒ 엄청나게 복잡한 연산이 필요하고 자체 개발은 시간이랑 비용 문제가 크기 때문인듯

PCL(Point Cloud Library), Potree, PDAL(Point Data Abstraction Library) 등이 있다.

웹에는 어떻게 표시하는 걸까?

대용량 포인트 클라우드 Viewing을 웹에서 제공하는 라이브러리들의 유일한 선택지는 WebGL이다.

여담이지만 웹에서 대용량 포인트 클라우드를 표시하기 위해 정말 다양한 라이브러리를 사용해본 터키 개발자 글을 발견했다. 이래저래 많은 시도를 한 게 최근의 나에게 너무 공감되어서 공유해본다 😂

Visualizing Point Cloud & 3D Data On Web

 

Visualizing Point Cloud & 3D Data On Web

For a while I’m dealing with drone mapping individually. And also working on storing and querying large location data sets on relational …

ibrahimsaricicek.medium.com

 

WebGL

WebGL(Web Graphics Library)은 플러그인 없이도 호환 가능한 모든 웹 브라우저에서 인터랙티브한 2D 및 3D 그래픽을 렌더링할 수 있는 JavaScript API이다. 웹 표준과 통합되어 있어서 HTML canvas에서 물리 연산, 이미지 처리, 효과를 GPU 가속으로 사용할 수 있다. WebGL element는 다른 HTML element와 함께 사용할 수 있고 페이지의 다른 부분이나 배경과도 합성될 수 있다.

WebGL 프로그램은 JS로 작성된 제어 코드와 OpenGL ES 셰이딩 언어로 작성된 Shader 코드로 구성된다. 해당 코드를 JS로 WebGL API에 전달해 GPU에서 실행한다.

 

*Shader 셰이더란? 3D Graphics에서 빛, 색상, 그림자 등 그래픽 요소를 계산하고 표현하는 작은 프로그램. GPU에서 실행되며 게임, 애니메이션, 시뮬레이션 등에서 물체가 어떻게 보이는지를 결정하는 중요한 역할을 한다.

GPU와 CPU

 

이하 설명 생략한다.. 아니 그치만 좀더 확실한 이해를 위해 아래에 AWS에서 비유한 내용을 추가한다.

CPU는 대형 레스토랑에서 수백 개의 햄버거를 뒤집어야 하는 주방장과 같습니다. 주방장이 직접 할 수 있지만 그러면 시간상 효율적이지 못합니다. 주방장이 간단하지만 시간이 오래 걸리는 이 작업을 완료하는 동안 모든 주방 운영이 중단되거나 느려질 수 있습니다. 이를 방지하기 위해 주방장은 여러 개의 햄버거를 동시에 뒤집는 주방 보조에게 이 일을 맡길 수 있습니다. GPU는 10초 안에 100개의 햄버거를 뒤집을 수 있는 열 개의 손을 가진 주방 보조와 같습니다.

 

Computer Graphics에서 사용되는 알고리즘적 기법

나는 여러 기법을 Potree library에서 알게 되었다.

LoD Level of Detail

물체의 디테일 수준을 조절하는 기법

https://osmbuildings.org/blog/2018-02-28_level_of_detail/

 

 

LoD는 Computer Graphics에서 3D model의 복잡성을 나타내며, 일반적으로 물체가 멀어지거나 중요도가 낮아질 때 모델의 세부 사항을 줄이는 기술을 의미한다. 그래픽 파이프라인, 특히 정점 변환의 부담을 줄여서 렌더링 효율을 높일 수 있다. 거리가 먼 물체나 빠르게 움직이는 물체의 경우 디테일 감소를 시키는 것이다.

이 알고리즘의 기원은 1976년 James H. Clark가 발표한 논문에서 시작된다. 논문에서는 렌더링 환경을 구조화하여 더 빠른 변환과 클리핑 작업을 가능하게 하는 접근 방식을 제안했다. 이 아이디어는 현재 LoD 관리에서 물체가 차지하는 시야 비율에 따라 디테일을 조절하는 방식으로 발전했다.

Octree

https://en.wikipedia.org/wiki/Octree

 

팔진트리. 3차원 공간을 효율적으로 분할하는 자료구조. 공간을 8개의 하위 공간으로 나누고, 필요한 경우 재귀적으로 더 세부적으로 분할한다. 2차원에서 사용하는 quadtree와 유사한 개념의 3차원 버전이다. 3D graphics 및 3D game engine에서 자주 사용된다.

대규모 3D 데이터를 효율적으로 저장하고 빠르게 검색할 수 있게 해준다. Point Cloud나 충돌 감지, 거리 기반 검색 등에 사용된다.

Culling

화면에 보이지 않는 물체나 필요 없는 데이터를 렌더링하지 않고 제거하는 최적화 기법

Frustum Culling, Occlusion Culling 등이 있다.

 

  • Frustum Culling : Frunstum이라는 공간 View 내에서 걸러지는 컬링 기법
  • Occulsion Culling : 카메라 기준으로 가려지는 건 표시하지 않는 기법

 

이 외에도 Culling의 종류는 굉장히 많았는데 좀더 궁금하면 아래 Unity의 영상을 참고하면 좋다.

 

 

개인적으론 자율주행, 로봇 공학 분야에서 앞으로 더욱 활용될 것 같아 큰 관심을 갖고 있다. 프로젝트로 접했지만 추후에도 계속 컴퓨터 그래픽스 관련하여 전문적으로 배우고 싶은 욕심이 커졌다.

코드 단에서의 공부도 좋지만 도메인 자체의 지식을 공부해서 블로그에 올린 것은 처음이라 생경하다. 앞으로도 병행하며 성장하고 싶다.

 

https://en.wikipedia.org/wiki/Point_cloud

https://blog.testworks.co.kr/3d-ai-data-point-cloud/

https://www.oxts.com/ko/what-is-a-pointcloud/

https://23min.tistory.com/8

https://daddynkidsmakers.blogspot.com/2019/09/potree.html

https://en.wikipedia.org/wiki/WebGL

https://aws.amazon.com/ko/compare/the-difference-between-gpus-cpus/

https://en.wikipedia.org/wiki/Level_of_detail_(computer_graphics)

https://en.wikipedia.org/wiki/Culling