Making the Leap to Web 3D
You might already have everything you need
By Julie Powell and Kristian Ekenes, Esri
This article as a PDF.
Although 3D web apps provide stunning visualizations and a unique way of interacting with spatial data, the thought of building a 3D app might be a little intimidating.
Perhaps you don’t know where to find or create 3D data or the technology seems sophisticated, and you aren’t sure you are ready to learn a new technology.
What you may not know is that you already have the data, styling tools, and technology you need to build fully functional 3D web apps. And the best part—you can essentially use the same skills you use to build 2D apps to build 3D apps.
Style Your 2D Data for a 3D Experience
You don’t actually need 3D data to build a 3D app. You can style your 2D data so it works well in a 3D environment.
Rather than visualize points with basic 2D symbols, you can use realistic 3D symbols. For example, represent trees with 3D tree symbols or street sign locations with 3D street sign symbols. You can represent points as simple volumetric point symbols such as spheres or cylinders or represent lines as tubes.
Polygon data in 2D can be extruded using a height value in the attribute data.
Polygon data in 2D can be extruded using a height value in the attribute data. This is often done with building footprints. In 2D, building footprints are drawn on the ground. If your data also includes building heights, you can add that data to a 3D scene and extrude the buildings by height value for each building so they look like 3D buildings.
You can create data-driven visualizations using Smart Mapping to style your 3D layers as you do when mapping in 2D. The same concepts used in 2D are applied in 3D, only now you have another dimension to work with.
Attribute data can be used to drive symbol properties such as the color or size of 3D symbols. For example, when symbolizing tree data in a 2D map, you might symbolize trees using a circle icon, set the color to thematically represent the amount of carbon dioxide each tree sequesters, and set the diameter of the circle to be driven by the value of the diameter of the tree canopy.
When representing the same data in 3D, you can represent each point with a realistic 3D tree symbol rather than a simple icon.
When representing the same data in 3D, you can represent each point with a realistic 3D tree symbol rather than a simple icon. The width of the realistic tree canopy can still be driven by the attribute values, but tree height and the trunk width can also be driven by attribute data to accurately represent the tree in 3D.
Using Elevation to Make a 3D Scene Look Realistic
To make a 3D scene look realistic, you can add ground elevation to the scene rather than display a uniformly flat surface. The easiest way to do this is to use Esri’s World Elevation layer, which is available from ArcGIS Online.
This elevation layer is a global collection of multiresolution and multisourced elevation data. It includes the best publicly available data and community-contributed data available at resolutions that range from 1,000 meters to 3 meters. This layer is added to web scenes by default in Scene Viewer, but you can choose to turn it off or use your own elevation layer.
If you have high-resolution elevation data for a specific area that you want to use in your application, you can use it for that area and use the World Elevation Service for the rest of the globe.
Styling Considerations When Displaying Elevation
When you are including elevation in your app, you don’t want your data to get buried. It should be draped over the landscape, and unless you configure it otherwise, this will happen by default for all geometry types.
Another consideration has to do with the visibility of points when interacting with a 3D scene. If point symbols are drawn flat on the ground, it might be hard to see them as you navigate around the 3D scene. To mitigate this, use billboard symbols that almost float on the ground and always seem to face the viewing angle. Another option is to use line callouts (or leader lines) from icons or labels that indicate the location of each feature. This is a great option for displaying points of interest in a scene that either has varying elevations or buildings or other 3D objects that range in height and obscure point data.
Build Your 3D Web App
Right from Scene Viewer in ArcGIS Online, you can create a web app that consumes your web scene by choosing Share > CREATE A WEB APP from the Share pane. You are then presented with a selection of web application templates that you can use to configure the app with styling and other preferences specific to each application. Choose a template and click CREATE A WEB APP. It will automatically be saved to your Content and shared with everyone. Go to your Content, open the item, and configure the options available for that template. Save your changes and launch the app.
Alternatively, from the Share > CREATE A WEB APP workflow, you can choose Web AppBuilder for ArcGIS to create your 3D web app. Web AppBuilder for ArcGIS lets you select a theme from several layout options and styles and add specific widgets to your app. When you’re done configuring the app, save and publish it.
Apply Your 2D Programming Knowledge
3D apps can be just as interactive as 2D apps. Your 3D web app can have pop-ups, you can filter and query features based on the user’s criteria, and you can access server-side capabilities such as geocoding and routing. The interaction you can build into a 3D app, combined with the rich experience that naturally comes with navigating data in 3D, can make a 3D app feel even more interactive than a 2D app.
What Are You Waiting For?
Play around with Scene Viewer using your data or any of the millions of datasets accessible in ArcGIS Online. A few of the many resources available to help you get started with your 3D web app are listed under 3D Resources. Let the fun begin!
About the Authors