스토리

Frontend

WebGL과 웹 지도

Jul. 6, 2021, 2:12 pm.

Jaekwon Han leads Front-end team at 29CM and has worked as a Front-end developer and an UI designer.

WebGL

WebGL은 실시간으로 3D 컴퓨터 그래픽을 만들 수 있는 크로스 플랫폼 솔루션입니다.

WebGL이 빠른 이유

컴퓨터 그래픽 렌더링 방법을 분류하면 다음과 같습니다.

Software-based vs Hardware-based. 전자는 CPU를 사용하고 후자는 GPU를 사용합니다. GPU는 3D 게임과 같은 복잡한 그래픽 연산을 하는 데에 특화되어 있습니다. WebGL 이외에도 css transform이나 <svg />, <canvas />를 사용하면 웹 브라우저에서 하드웨어 기반의 렌더링을 사용할 수 있습니다.
Retained vs Immediate. WebGL이 빠른 두 번째 이유는 WebGL이 하드웨어 기반 이면서 즉각적인 렌더링이 가능하기 때문입니다. 만 개의 포인트를 <svg />를 사용해서 렌더링하는 경우 똑같은 개수의 DOM 노드가 생성되어야 합니다. 이처럼 브라우저 혹은 라이브러리가 어플리케이션 대신 그래픽 모델들을 관리하고 GPU와 통신하는 것을 Retained rendering이라고 합니다. 반면 WebGL을 사용하면 프로그래머가 직접 그래픽 모델을 관리하며 GPU와 통신할 수 있습니다. 이를 immediate rendering이라고 부르며 그래픽 모델의 양이 많거나 변화가 잦은 상황에서 retained rendering 방식보다 성능이 뛰어납니다.

WebGL은 웹 브라우저가 동작하는 모든 기기에서 사용이 가능한 3D 렌더링 엔진입니다. WebGL로 렌더링한 지도는 모바일, 타블렛, AR, VR 기기에서 동작 합니다.

벡터 타일은 지리 데이터를 작은 단위로 분할하여 브라우저 또는 다른 어플리케이션에 전달하는 방법 중 하나입니다. 벡터 타일은 Raster(이미지) 타일과 유사하지만 데이터가 렌더링된 이미지가 아닌 GeoJSON과 같은 벡터로 되어 있습니다.

벡터 타일을 사용하면 데이터와 스타일이 분리되어 있기 때문에 클라이언트는 자유롭게 데이터를 표현을 할 수 있습니다. 지도의 색상과 글꼴을 사용자가 바꿀 수 있고 줌 레벨이 바뀔 때마다 건물과 도로의 모양을 보간 할 수 있습니다.

웹 지도 클라이언트가 벡터 타일을 자유롭고 부드럽게 표현하기 위해선 빠른 성능의 연산 작업이 필요합니다. 때문에 전통적인 웹 지도 서비스들은 브라우저와 자바스크립트의 한계 때문에 이미지 타일을 사용했습니다.

하지만 WebGL이 나오면서 브라우저에서 그래픽 렌더링의 한계가 없어졌고, Google Map이나 Uber 같은 서비스들은 WebGL을 사용해 이미지 타일 기반의 지도보다 훨씬 가볍고 빠르며 부드러운 지도 서비스를 제공하고 있습니다.