Introduction to Web Scenes

A web scene is a 3D map that you can create, style, and share between different applications. Web scenes, unlike two-dimensional web maps, are scenes that typically contain 3D geo-spatial data representing urban and natural environments, buildings, and transit systems. Web scenes are JSON objects defined by the Web Scene Specification that contain all of the configuration settings required to set up the scene such as the map extent, camera height and angle, basemap, layers, layer styles and more.

An example web scene on ArcGIS Online is a 3D Landscape of the City of Portland, Oregon.

Web scenes can be created in ArcGIS Online and ArcGIS Pro, and displayed in other products such as ArcGIS StoryMaps and apps built with ArcGIS APIs. When an application loads a web scene, it automatically loads previously saved configuration settings, making it easy to develop applications and share 3D scenes across the ArcGIS Platform. Web scenes are saved as content items in the ArcGIS Platform portal.

For example, you could make a copy of the web scene of the City of Portland and then add a separate feature layer with demographic data in ArcGIS Online, and then consume this new web scene in your app with the ArcGIS API for JavaScript.

The Web Scene Specification

The Web Scene Specification is a JSON specification which provides a light-weight standard for sharing, creating, editing, visualizing, and consuming web scenes across the entire ArcGIS Platform.

As JSON files, web scenes can be hosted on ArcGIS Online or ArcGIS Enterprise and consumed with the REST API. Technically, web scenes are content items stored in ArcGIS Online or ArcGIS Enterprise.

Every web scene has a unique item ID, and may be shared with the public or restricted to certain groups and users.

For example, the 3D Landscape of Portland is public and has the unique item ID: 2b721b9e7bef45e2b7ff78a398a33acc.

You can view this web map in JSON format by making a REST API content item operation request with the following URL:

Use dark colors for code blocksCopy
 
1
https://www.arcgis.com/sharing/rest/content/items/2b721b9e7bef45e2b7ff78a398a33acc/data

The JSON response for this REST call, with long field values omitted, is below:

Use dark colors for code blocksCopy
                                                                                                                                                   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
{
    "operationalLayers": [
        {
            "id": "14a3b7e8769-layer5",
            "opacity": 1,
            "title": "Topographic Map 3D",
            "url": "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Portland_v1/MapServer",
            "visibility": true,
            "layerType": "ArcGISTiledMapServiceLayer",
            "itemId": "77618c5b716a4417a2e72d75ccc62f30"
        },
        {
            "id": "159085c4486-layer-4",
            "showLegend": true,
            "opacity": 1,
            "disablePopup": false,
            "title": "Buildings",
            "url": "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Buildings_Portland/SceneServer/layers/0",
            "visibility": true,
            "layerType": "ArcGISSceneServiceLayer",
            "itemId": "d96440302be847f6aa6e6ac0012c53b0",
            "layerDefinition": {
                "elevationInfo": {
                    "mode": "absoluteHeight"
                },
                "drawingInfo": {
                    "renderer": {
                        "authoringInfo": {},
                        "type": "simple",
                        "label": "",
                        "symbol": {
                            "type": "MeshSymbol3D",
                            "symbolLayers": [
                                {
                                    "material": {
                                        "color": [
                                            255,
                                            255,
                                            255
                                        ]
                                    },
                                    "type": "Fill",
                                    "edges": {
                                        "type": "solid",
                                        "color": [
                                            0,
                                            0,
                                            0
                                        ],
                                        "transparency": 60,
                                        "size": 1
                                    }
                                }
                            ]
                        }
                    }
                }
            },
            "showLabels": false
        }
    ],
    "baseMap": {
        "baseMapLayers": [
            {
                "id": "159085c1a03-layer-0",
                "opacity": 1,
                "title": "World Topo Map",
                "url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
                "visibility": true,
                "layerType": "ArcGISTiledMapServiceLayer"
            }
        ],
        "id": "basemap",
        "title": "Topographic",
        "elevationLayers": [
            {
                "id": "globalElevation",
                "listMode": "hide",
                "title": "Terrain3D",
                "url": "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
                "visibility": true,
                "layerType": "ArcGISTiledElevationServiceLayer"
            }
        ]
    },
    "ground": {
        "layers": [
            {
                "id": "globalElevation",
                "listMode": "hide",
                "title": "Terrain3D",
                "url": "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
                "visibility": true,
                "layerType": "ArcGISTiledElevationServiceLayer"
            }
        ]
    },
    "heightModelInfo": {
        "heightModel": "gravity_related_height",
        "heightUnit": "meter"
    },
    "version": "1.10",
    "authoringApp": "WebSceneViewer",
    "authoringAppVersion": "6.1.0.0",
    "presentation": {
        /* omitted */
    },
    "initialState": {
        "environment": {
            "lighting": {
                "datetime": 1458072640000,
                "displayUTCOffset": -8
            }
        },
        "viewpoint": {
            "rotation": 12.457625182769334,
            "scale": 6263.2876185532195,
            "targetGeometry": {
                "spatialReference": {
                    "latestWkid": 3857,
                    "wkid": 102100
                },
                "x": -1.365579170165746E7,
                "y": 5704194.302859826,
                "z": 27.754899251274765
            },
            "camera": {
                "position": {
                    "spatialReference": {
                        "latestWkid": 3857,
                        "wkid": 102100
                    },
                    "x": -1.3655391201614857E7,
                    "y": 5702381.612632008,
                    "z": 754.9944650307298
                },
                "heading": 347.54237481723067,
                "tilt": 60.786972566225145
            }
        }
    },
    "spatialReference": {
        "latestWkid": 3857,
        "wkid": 102100
    },
    "viewingMode": "global"
}

Creating a web scene

While you can create web scenes by editing JSON with your favorite text editor, Esri provides many tools to quickly create web scenes.

ArcGIS Online

The easiest way to author a web scene is to use ArcGIS Online. You can refer to the ArcGIS Online documentation or the create a web scene tutorial to get started.

ArcGIS Pro

ArcGIS Pro supports authoring and sharing web scenes. Refer to the author a web scene topic in the ArcGIS Pro help.

ArcGIS API for JavaScript

The ArcGIS API for JavaScript is capable of saving web scenes back to ArcGIS Online. Refer to the save a web scene sample for details.

Displaying a web scene

Most ArcGIS APIs that support 3D rendering will support displaying a web scene by referencing the portal item ID.

ArcGIS API for JavaScript

Refer to the load a web scene sample for a short walk-through on how to display a web scene with the ArcGIS API for JavaScript.

ArcGIS Runtime APIs

Refer to the display a web scene tutorial or the open a web scene sample for Android, iOS, Java, .NET, or Qt.

ArcGIS Configurable apps

You can also display web scenes via configurable apps in ArcGIS Online. To create an application, refer to the ArcGIS Online create a scene quick exercise or browse a list of all available configurable apps.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.