WebGL JavaScript API: New 3D-Features and Areas of Application in Google Maps
A new era is dawning for Google Maps: With the new WebGL JavaScript API, the creation of 3D maps will be possible in Google Maps. The new features of the API were first introduced at the Google I/O 2021 developer conference. Ubilabs had the honor to create two demo applications for the conference, one to showcase the new features and one for the travel industry. We have also tested the new API extensively. Soon, the features enabled by the WebGL API will usher in a new generation of three-dimensional map experiences for various industries such as tourism, mobility, media or science. This also opens up completely new storytelling possibilities.
The New Features - Camera Flights and 3D Route Guidance in Google Maps
- Tilt and Rotation
With the Tilt and Rotation feature of the new WebGL API, maps can be tilted and rotated in all directions, which allows viewing a map from any angle. - Integrated Camera Control
With the Integrated Camera Control all movements of the camera can be changed simultaneously for the first time. This makes it possible to create your own camera animations or camera flights in Google Maps. - WebGL Overlay-View
The WebGL Overlay View allows the use of 2D and 3D objects directly on the basemap. Rendering is done in the WebGL rendering context, which makes full integration with the basemap possible. - Depth and Occlusion
Any object added with the WebGL Overlay View is rendered directly on the basemap with support for Depth and Occlusion. As the map is tilted or rotated, this automatically enlarges or reduces the displayed objects in proportion to their distance from the camera and obscures them from other objects in the forefront. - Data Visualization
With access to the GPU, the Overlay View opens up completely new possibilities for visualizing large geographical data sets. By visualizing time and space, entirely new patterns and trends can be identified in the data.
Tourism, urban planning, retail: Who will benefit from the new 3D functions?
The new 3D features of the WebGL API are enormously diverse in their areas of application. To illustrate this, we will draw a first picture of possible application areas in different industries.
- Travel & Tourism
Highlighting individual buildings or landmarks provides much easier orientation for city trips. 3D buildings and the possibility to view a city district from different angles paints a much more realistic picture and simplifies orientation significantly compared to 2D maps. - Construction & Real Estate
Whether it's individual apartments, entire buildings, or complete neighborhoods - in the construction and real estate sector, there are numerous use cases that benefit from a three-dimensional representation. - Retail
Finding specific stores in a city becomes much easier as soon as the store they are looking for is not only visible in three dimensions, but also highlighted in color on the map. Customers benefit from significantly improved orientation within cities. - Logistics
Delivery trucks can now be displayed three-dimensionally on their routes. This provides the viewer with much more detailed information about their whereabouts and delivery locations, which significantly improves orientation. Tilting the map, meanwhile, helps to get a clear picture of the actual surroundings of individual vehicles and provides more context within the supply chain. - Storytelling
Scripted 3D camera flights over a specific area, recreating a flight path including a visible aircraft or a visually appealing car ride from a bird's eye view open up completely new storytelling possibilities.
With the variety of possible uses, there is only one thing to note: Currently, it is not yet possible to create or reposition individual objects. Objects, such as buildings, must therefore already exist in Google Maps in order to change them.
For more insights, check out the interview with our Creative Developer Martin Schuhfuss, who was instrumental in developing the first demos for the WebGL API.
