새로운 WebGL 기반 지도 기능 사용하기

새로운 WebGL 기반 지도 기능 사용하기

 

이번 Google I/O 2021에서 소개된 Google Maps Platform에 대한 이야기를 공유해 드리고자 합니다. Google은 Maps JavaScript API의 새로운 기능인 “기울기와 회전(Tilt and Rotation) 옵션”과 “WebGL Overlay View”의 베타 버전을 발표했습니다.

새로운 기능은 GCP 콘솔을 통해 벡터 지도의 Map ID를 생성해서 벡터 지도를 배경 지도로 호출하면 이용할 수 있습니다. 물론 베타 버전이기 때문에 스크립트 호출 시 “v” 파라미터를 아래와 같이 “beta”로 설정해야 합니다.

<script src=”https://maps.googleapis.com/maps/api/js?key=API_KEY&v=beta&callback=initMap”></script>

기울기와 회전 옵션은 배경 지도가 벡터 지도이기만 하면 사용이 가능합니다. 이를 통해 2D 지도의 한계를 넘어서 기울이기와 회전이 가능하게 되었습니다. 게다가 일정 줌 레벨 이상이 되면 세계 주요 도시에서 3D 건물 모델링을 확인할 수 있습니다.

또한 지금까지의 Overlay View는 구글 지도 위에 투명 레이어를 통해서 2D 그래픽만을 랜더링할 수 있었습니다. 하지만 이제 WebGL Overlay View를 통해 벡터 지도 위에 3D 그래픽을 직접 랜더링할 수 있습니다. 이를 통해 이전에는 불가능했던 새로운 지도 경험을 사용자에게 제공할 수 있게 되었습니다.

 

👩‍🎓 WebGL이란?

WebGL은 원래 Mozilla Foundation에서 개발한 low-level 브라우저 API입니다. 이는 웹 어플리케이션에서 휴대폰 및 컴퓨터와 같은 클라이언트 장치의 GPU (그래픽 처리 장치) 자원에 접근 할 수 있게 합니다. 덕분에 원래 브라우저는 자체적으로 3D 랜더링하는 데 필요한 무거운 계산을 처리 할 수 ​​없었지만, WebGL을 사용하면 이러한 계산을 클라이언트 장치의 GPU에서 처리할 수 있습니다.

👩‍🎓 요구사항

WebGL Overlay View를 사용하려면 벡터지도가 활성화 된 지도 ID가 필요합니다. 또한 지도 ID를 생성 할 때 기울기 및 회전을 활성화 옵션을 체크해야 합니다. 그렇지 않으면 지도가 2D 지도와 같이 기본 하향식 보기로 제한됩니다. 즉, 지도를 3차원으로 볼 수 없게 됩니다.

👩‍🎓 기울기 및 회전 설정

지도를 로드할 때 기울기와 회전 정도를 설정하려면, 지도 객체를 만들 때 “tilt” 및 “heading” 속성 값을 제공하면 됩니다.

const mapOptions = {
  mapId: "15431d2b469f209e",
  tilt: 0,
  heading: 0,
  zoom: 17,
  center: {
    lat: -33.86957547870852, 
    lng: 151.20832318199652
  }
}
const mapDiv = document.getElementById("map");
const map = new google.maps.Map(mapDiv, mapOptions);

기울기는 0과 67.5 사이의 값을 가지며, 0도는 기본 직선 보기이고 67.5는 최대 기울기입니다. 사용 가능한 최대 기울기는 zoom 레벨에 따라 달라집니다.

회전은 heading 속성에서 0도에서 360도 사이의 값을 가집니다. 여기서 0은 정북향을 의미합니다.

지도 객체에서 직접 “setTilt()” 및 “setHeading()” 함수를 호출하여 원할 때마다 기울기 및 회전을 변경할 수도 있습니다. 이벤트에 대한 응답으로 지도의 기울기나 방향을 변경하려는 경우 유용합니다.

map.setTilt(45);
map.setHeading(180);

또한 사용자는 <shift> 키를 누른 상태에서 마우스를 드래그하거나 키보드의 화살표 키를 사용하여 지도의 기울기 및 회전을 수동으로 제어 할 수 있습니다.

 

👩‍🎓 맵에 WebGL Overlay View 추가

WebGL Overlay View는 “google.maps.WebglOverlayView”의 객체를 생성하여 Maps JavaScript API에서 사용할 수 있습니다. 오버레이 인스턴스가 생성되면 인스턴스에서 “setMap”을 호출하여 지도에 적용하기만 하면됩니다.

const webglOverlayView = new google.maps.WebglOverlayView;
webglOverlayView.setMap(map);

지도에 랜더링되는 모든 객체를 처리하기 위해 WebGL Overlay View는 5가지 지점에서 WebGL 랜더링 컨텍스트의 라이프사이클에 접근할 수 있습니다.

➡️ 아래는 라이프사이클에 대한 간단한 요약입니다.

  • “onAdd”는 대부분의 전처리가 수행되는 곳입니다. 여기에서 모든 작업을 수행하는 이유는 지도 랜더링에 지장을주지 않도록 하기 위한 것입니다.
  • “onRemove”는 모든 중간 객체를 제거할 수 있습니다.
  • “onContextRestored”는 지도가 랜더링되기 전에 호출되며 WebGL 상태를 초기화합니다.
  • “onDraw”는 지도와 앞서 설정된 모든 것이 랜더링되는 곳입니다.
  • “onContextLost” 이 시점부터 WebGL 컨텍스트는 제거됩니다.

라이프사이클을 관리하려면 Maps JavaScript API가 WebGL 적절한 지점에서 실행할 함수를 구현하세요.

예시 :

webglOverlayView.onDraw = (gl,
coordinateTransformer) => { //do some
rendering }

 

👩‍🎓 카메라 애니메이션 만들기

WebGL Overlay View 베타 릴리즈의 일부로 카메라 위치, 기울기, 회전 및 확대/축소를 동시에 설정하는 데 사용할 수 있는 “moveCamera()”가 도입되었습니다. “setTilt()” 및 “setHeading()”과 마찬가지로”moveCamera()”는 지도 객체에서 직접 호출됩니다.

애니메이션 루프에서 “moveCamera()”를 연속적으로 호출하면 카메라 위치 변경을 따라 부드러운 애니메이션을 만들 수도 있습니다. 아래는 브라우저의 “requestAnimationFrame” API를 사용하여 각 프레임의 기울기 및 회전을 변경한 예제입니다.

const cameraOptions = {
  tilt: 0,
  heading: 0
}

function animateCamera () {
  cameraOptions.tilt += 1;
  cameraOptions.heading += 1;
  map.moveCamera(cameraOptions);
}

requestAnimationFrame(animateCamera);

 

👩‍🎓 한번 시도해 보세요! 

베타 버전에서 API를 호출하여 Maps JavaScript API의 새로운 WebGL 기반 기능을 지금 바로 사용해 볼 수 있습니다. 시작하는 데 도움이 되는 샘플 코드 및 예자와 모든 세부 정보가 포함된 새로운 코드랩공식 문서가 있습니다. 또한 기능 둘러보기 및 데모를 확인하여 이러한 기능의 실제 구현에 대해 자세히 알아보고 사용해보세요.

새로운 WebGL 기반 지도 기능을 테스트하고 개선하는 데 도움이 되는 버그 리포트, 기능 요청 및 피드백이 필요합니다! 3D 지도를 사용하여 재미있게 건물을 만들어보세요. 소중한 피드백 부탁드립니다. 🙏 ❤️

 


SPH는 Google Cloud Platform (Maps)의 Premier Partner로서 SuperMap, Maxar Technologies 등 다양한 사례와 자료를 보유하고 있으며, 고객의 사례에 맞는 무료 세미나 및 인적 컨설팅을 제공해드립니다. 더욱 자세한 이야기를 나누고 싶으시다면, 여기 에서 문의하시길 바랍니다. SPH에서 발행하는  GIS / 로케이션 인텔리전스 관련 최신 소식을 받아보고 싶으신 분들은 페이스북 페이지 또는 뉴스레터를 구독해 주시길 바랍니다. 감사합니다.