Display graphics in a scene

Displaying graphics in a Scene is not much different from displaying graphics in your 2D Map. Whether you are working with graphics in two or three dimensions, the same basic objects are always involved: GraphicsOverlay, Graphic, Symbol, Renderer, and so on. These classes work consistently for displaying graphics in either context, so you can work with graphics in your scene just as you would with graphics in your map. Of course, for 3D graphics, you have the option of using specialized symbols and for defining how graphics are rendered relative to the scene surface.

For general information on working with graphics, symbols, and renderers see Add graphics and text and Symbols and renderers. The information in those topics is relevant to both 2D and 3D graphics. The information in this topic is specific to working with graphics in a scene.

Graphics overlays

Graphics overlays are containers for your graphics and will display above all layers in the scene. The GraphicsOverlay class provides methods for adding or removing graphics from the collection, as well as controlling how graphics are rendered. Graphics to display in a scene should be created with geometries in {x, y, z} coordinates of longitude (degrees), latitude (degrees), and elevation (meters). In addition, an appropriate ElevationMode should be set on the graphics overlay.

Elevation modes

The elevation mode controls how each graphic's z-value is applied when displayed in a scene.

  • Draped—The elevation set on any point, line, or polygon graphic is ignored. Graphics appear draped on the surface of the globe, like a sheet.
  • Absolute—This is the default mode. The elevation values (z-values) of each graphic or feature are calculated from sea level, regardless of the terrain elevation at the x,y locations of the graphics.
  • Relative—The elevation values (z-values) of each graphic or feature are calculated relative to the terrain elevation at the x,y locations of the graphics.

Elevation modes applied to point graphics

Add graphics to a scene

Graphics can be added to a GraphicsLayer in a Scene control or to a GraphicsOverlay in the SceneView control. A Graphic has geometry, a collection of attributes, and a symbol that is used to render it. The following example creates a new point graphic, sets its geometry and symbol, then adds it to a GraphicsOverlay in the SceneView.

// create a new point (MapPoint); pass x, y, and z coordinates in the constructor
var newPoint = new MapPoint(-117.334, 34.55, 6000);

// create a red "X" marker symbol
var xMarkerSym = new SimpleMarkerSymbol();
xMarkerSym.Color = Colors.Red;
xMarkerSym.Size = 34;
xMarkerSym.Style = SimpleMarkerStyle.X;

// create a new graphic; assign the point and the symbol in the constructor
var graphic = new Graphic(newPoint, xMarkerSym);

// get a graphics overlay in the scene view and add the graphic
var overlay = MySceneView.GraphicsOverlays["MyGraphicsOverlay"];

Rather than creating a symbol for each graphic individually, you can define a renderer for the containing GraphicsOverlay or GraphicsLayer. All graphics added to the container (overlay or layer) can use the symbol defined by the renderer.


A renderer determines how features in a layer or graphics in an overlay are drawn. A renderer can use a single symbol to render all features, or it may contain logic to render features according to one or more attribute values. A UniqueValueRenderer, for example, uses a different symbol for each unique attribute value (or combination of values). A ClassBreaksRenderer symbolizes features according to defined ranges of numeric values, such as classes of population. All renderers are found in the Esri.ArcGISRuntime.Symbology namespace, and can be used for rendering in a map or scene. See the Symbols and renderers topic for more information about renderers.

The following example shows XAML to define a simple renderer for a graphics layer.

<esri:GraphicsLayer ID="GraphicsLayer" >
                <esri:SphereMarkerSymbol Color="#FFFF99" Radius="1000" AnchorPosition="Top" />

A graphic's Symbol property takes precedence over symbols in a renderer. Only graphics that do not have a symbol explicitly defined uses the symbol in the graphics overlay's renderer. This allows you to override the symbols in a renderer for a particular graphic if needed.

Renderer scene properties

The Renderer base class defines a SceneProperties property that controls aspects of rendering for scene features. It contains ExtrusionExpression and ExtrusionMode properties to define how heights for features should be calculated for display. In the following example, the renderer extrudes features by multiplying the value in the Floors attribute by three.

// extrude features to a height (meters) three times the value of the "Floors" attribute
renderer.SceneProperties.ExtrusionExpression = "[Floors] * 3";
renderer.SceneProperties.ExtrusionMode = Maximum;

Graphics in a scene rendered with an extrusion

A scene symbol's orientation can be rotated around any of its three axes: x (pitch), y (roll), or z (heading). Renderers give you the ability to apply these rotations for each graphic according to an attribute value. You can specify the HeadingExpression, PitchExpression, and RollExpression using the name of an attribute in square brackets. The following example uses an attribute to apply a rotation in the z axis (heading) for each graphic in the layer.

// rotate the symbol heading based on the numeric value of the "CurrentHeading" attribute
renderer.SceneProperties.HeadingExpression = "[CurrentHeading]";

// set the renderer for the graphics overlay
graphicsOverlay.Renderer = renderer;

The attribute names specified in ExtrusionExpression, HeadingExpression, PitchExpression, and RollExpression must contain numeric values only.


Graphics in a map or scene can be symbolized using standard (two-dimensional) symbols for the appropriate geometry type: Esri.ArcGISRuntime.Symbology.MarkerSymbol classes for point geometry, Esri.ArcGISRuntime.Symbology.LineSymbol for polyline geometry, and Esri.ArcGISRuntime.Symbology.FillSymbol for polygons. The height of features can be extruded using an attribute value assigned to a renderer for the graphics layer or overlay. Without extrusion, features drawn with 2D symbols display on the surface of the scene in two dimensions.

Graphics in a scene can also be symbolized using 3D-specific symbols found in the Esri.ArcGISRuntime.Symbology.SceneSymbology namespace. The following class diagram shows the 3D-specific symbol classes:

Scene symbols

The symbol options appropriate for each geometry type are described below.


To symbolize points in a scene, you can use 3D-specific marker symbols, such as BoxMarkerSymbol, SphereMarkerSymbol, ConeMarkerSymbol, and so on.

Marker symbols that display as three-dimensional shapes (box, cone, sphere, diamond, or tetrahedron) have a Color property and properties for defining marker size. The way a marker size is defined varies by type of shape: Radius for a sphere, RadiusTop and RadiusBottom for a cone, Width, Height, and Depth for a box, and so on.

The following example creates a red SphereMarkerSymbol with a two kilometer radius.

// creates a red sphere with a radius of 2000 meters
var sphereSym = new SphereMarkerSymbol();
sphereSym.Color = Colors.Red;
sphereSym.Radius = 2000;

// create a graphic and apply the sphere symbol
var pointGraphic = new Graphic(someGeoPoint, sphereSym);

// add the graphic to a graphics layer in the scene
var layer = MySceneView.Scene.Layers["GraphicsLayer"] as GraphicsLayer;

A model symbol is used to provide a realistic three-dimensional visualization to symbolize scene features. Create a ModelMarkerSymbol using a 3D model file, passing the path to the file and a scale factor to the model symbol constructor. The supported model file types include Collada (.dae), 3D Max (.3ds), Blender 3d (.blend), and the formats listed in the Open Asset Import Library (Assimp). Depending on the model file's default orientation, you may have to rotate the symbol to get your model in the desired orientation.

The following example adds a new graphic to a graphics overlay in a scene using a model marker symbol based on a *.3ds file.

// instantiate a new ModelMarkerSymbol
var modelMarkerSymbol = new ModelMarkerSymbol();

// set the source of the model to a *.3ds file delivered with the assembly
modelMarkerSymbol.SourceUri = Path.Combine(AssemblyDirectory, @"Models\Cars\WhiteCar.3ds");

// increase the scale to display the model 2.5 times larger
// (scale values less than 1 will draw the model smaller)
modelMarkerSymbol.Scale = 2.5;

// create a new Graphic to display the current position
var graphic = new Graphic(mapLocation);

// symbolize the graphic with the model symbol
graphic.Symbol = modelMarkerSymbol;

// add the graphic to a graphics overlay in the scene
var graphicsOverlay = MySceneView.GraphicsOverlays["Tracking"]; 
a graphic displayed with a ModelMarkerSymbol

Some common scene marker symbol types are pictured below in a scene. The symbols are, from left to right, sphere, box, diamond, cone, and model symbol.

3D marker symbols in a SceneView

To symbolize points in a scene, in addition to the 3D marker symbols, you can also use the same symbol classes as for point graphics in a 2D map: SimpleMarkerSymbol, PictureMarkerSymbol, and TextSymbol. These classes are not subclasses of SceneSymbol.


Although 2D point symbols display in a Scene, scene symbols are not supported in a Map.


To symbolize line graphics in a scene, you can either use the 3D-specific TubeLineSymbol or the standard 2D symbols, such as SimpleLineSymbol. To show the height of features, use a renderer with an extrusion expression defined.


Line styles other than Esri.ArcGISRuntime.Symbology.SimpleLineStyle.Solid are not supported for a SimpleLineSymbol in a scene. In 3D, a simple line symbol renders as a solid line regardless of the style defined.


To symbolize polygons in a scene, use SimpleFillSymbol, as you would in a map. To show the height of features, use a renderer with an extrusion expression defined.

Composite symbols

A composite symbol allows you to create a symbol that is composed of several symbols. For 2D and 3D rendering, you can use a CompositeSymbol to build a symbol from a collection of symbol objects. For example, you may want to overlay several SimpleMarkerSymbol objects to create a custom symbol (a triangle inside a circle, for example). A composite symbol is also useful for combining your marker, line, or fill symbol with a text symbol to display a label.

The DistanceCompositeSymbol is a composite symbol that is specific to rendering features in a scene. Like CompositeSymbol, it allows you to define a symbol from a collection of symbols. In addition, it gives you the ability to assign a visibility range for each symbol based on the distance of the feature to the current camera position in the scene. Using this symbol, you can show features that are far from the camera with a simple symbol and those that are nearer with a 3D-specific symbol (such as a model symbol). The 3D-specific symbols render according to their absolute size in meters and may not be easily visible at large distances. By contrast, a SimpleMarkerSymbol consistently renders according to screen units and is visible regardless of distance. Simple marker symbols are also less resource-intensive than 3D marker symbols (especially model symbols), so they should be used whenever appropriate to make your app more efficient.

The following example creates a 3D composite symbol that renders features with one of three symbols depending on the camera distance. It also defines a text label that always appears.

DistanceCompositeSymbol compositeSymbol = new DistanceCompositeSymbol();

// ... code here to create new ModelMarkerSymbol, ConeMarkerSymbol, SimpleMarkerSymbol, and TextSymbol ...

// use a model symbol when the camera is within 100,000 meters
var nearSymbolInfo = new DistanceCompositeInfo(modelSymbol, 0, 100000);

// use a cone marker symbol for intermediate distances (100,000 to 600,000 meters)
var midSymbolInfo = new DistanceCompositeInfo(coneSymbol, 100000, 600000);

// use a simple marker symbol for large distances
var farSymbolInfo = new DistanceCompositeInfo(markerSymbol, 600000, 10000000);

// add a text label to appear at all distances
var textSymbolInfo = new DistanceCompositeInfo(textSym, 0, 10000000);

Symbol alignment and orientation

You can change the z-alignment of a scene marker symbol relative to its point geometry by setting the AnchorPosition property. The default alignment is SceneSymbolAnchorPosition.Center, meaning the point is at the three-dimensional center of the symbol, for example, the center of the sphere for a SphereMarkerSymbol. You can change the alignment to SceneSymbolAnchorPosition.Top or SceneSymbolAnchorPosition.Bottom for each symbol. For example, a sphere set to top alignment will have its top aligned with its point geometry, meaning the sphere will be below the point. Conversely, a sphere set to bottom alignment will be above its point geometry, the bottom of the sphere being aligned with the point.

In addition to the alignment, you can change the orientation of a scene marker symbol. There are three properties you can use to orient a symbol, one for each axis in three dimensions:

  • Heading—Rotates the symbol around its z-axis. For example, change a directional symbol from pointing north, by default, to pointing east, by setting its heading to 90 (markerSym3D.Heading = 90).
  • Pitch—Rotates the symbol around its x-axis. For example, change a directional symbol from pointing up along the z-axis, to pointing parallel to the ground, by setting its pitch to -90 (markerSym3D.Pitch = -90).
  • Roll—Rotates the symbol around its y-axis. For example, change a symbol from being parallel to the ground to being perpendicular to the ground by setting its roll to 90 (markerSym3D.Roll = 90).

Related topics