Comparing WebVR Mapping Projects
Robert Koch, Melvin He (2023), Brian Kim (2023)
Overview: This is a comparison of two existing projects that use A-Frame to create virtual environments based off of real-world map data. The two projects are described and linked below.
VR Map
This project uses publicly-available data from OpenStreetMap to generate flat ground tiles with map information (roads, water, etc), trees, and 3D renderings of buildings
Areas are flat and only a certain radius around the starting point is loaded, so this is not ideal for large-scale mapping activities (eg. topographical analysis)
The OpenStreetMap data (roads/ground tiles, building models, and trees) used in this project has been compared to the data in Google Earth VR on this page.
A limitation of the VRMap is that current version of Aframe that the VR Map uses is not compatible with the current application. May need to tinker with old imports.
A-Terrain
This project uses topographical map data from Cesium, which includes 3D renders of satellite data
However, 3D building data is only available for the Bay Area (unlike OpenStreetMap, which provides global building data)
This project lends itself more to large-scale analysis and activities where 3D renderings of topography are needed
The example pictured above can be found here. Use the URL to adjust the latitude, longitude, and elevation as needed. You can see that some areas (eg. Providence) are not rendered in much detail when you get to lower elevations.
AFrame City
This project uses user-uploaded .json maps that describe the layout and features of a city. These maps can then be saved onto Firebase
This app lets you create a virtual city in 8-bit "pixel" style using the HTC Vive or Oculus Rift VR headset and tracked hand controllers. You'll also need a WebVR compatible browser.
This project lends itself to more small-scale creation of city maps that could be rendered in a simple cartoonish interface. Generated map is generally small compared to overall terrain scene.
This project also has limited support for non-desktop browsers, and in particular, moving around in the scenario is extremely difficult. Creating a new city should be done in desktop.
Aframe Globe Component
A-Frame Globe Component is a JavaScript library that provides an A-Frame entity for rendering a 3D interactive globe in the web browser.
The library is built on top of A-Frame, which is a web framework for building virtual and augmented reality experiences. A neat tutorial workshop link is included here.
The A-Frame Globe Component allows for interactive exploration of the Earth's surface, including panning and zooming, and can be used for educational demonstrations, scientific visualizations, or geospatial data analysis.