Skip To Content ArcGIS for Developers Sign In Dashboard

ArcGIS Runtime SDK for .NET

Animate 3D graphic

This code sample is available for these platforms:
View Sample on GitHub

An OrbitGeoElementCameraController follows a graphic while the graphic's position and rotation are animated.

screenshot

Use case

Visualize movement through a 3D landscape.

How to use the sample

Animation Controls (Top Left Corner):

  • Select a mission -- select a flight path
  • Play/Pause -- toggles playing and stopping the animation
  • Follow/Don't follow -- toggles the camera's free cam mode and follow
  • Mission progress -- shows how far along the route the plane is. Slide to change keyframe in animation
  • Flight speed -- controls speed of animation

How it works

  1. Create a GraphicsOverlay and add it to the SceneView.
  2. Create a ModelSceneSymbol object.
  3. Create a Graphic object and set its geometry to a Point.
  4. Set the ModelSceneSymbol object to the graphic.
  5. Add heading, pitch, and roll attributes to the graphic. Get the attributes from the graphic with graphic.Attributes.
  6. Create a SimpleRenderer object and set its expression properties.
  7. Add graphic and a renderer to the graphics overlay.
  8. Create a OrbitGeoElementCameraController which is set to target the graphic.
  9. Assign the camera controller to the SceneView.
  10. Update the graphic's location, heading, pitch, and roll.

Relevant API

  • Scene
  • Camera
  • GlobeCameraController
  • Graphic
  • GraphicsOverlay
  • ModelSceneSymbol
  • OrbitGeoElementCameraController
  • Renderer
  • SceneProperties
  • SceneView
  • SurfacePlacement

Offline data

This sample downloads the following items from ArcGIS Online automatically:

  • Bristol.zip - A 3D model for use within an ArcGIS Runtime Model Scene Symbol.
  • GrandCanyon.csv - CSV data for a route through the Grand Canyon
  • Hawaii.csv - CSV data for a route in Hawaii
  • Pyrenees.csv - CSV data for a route through the Pyrenees
  • Snowdon.csv - CSV data for a route near Mount Snowdon

Tags

Camera, ModelSceneSymbol, OrbitGeoElementCameraController, RendererSceneProperties, SceneView

Sample Code

<UserControl
    x:Class="ArcGISRuntime.UWP.Samples.Animate3DGraphic.Animate3DGraphic"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:esriUI="using:Esri.ArcGISRuntime.UI.Controls">
    <UserControl.Resources>
        <Style x:Key="LabelStyle" TargetType="TextBlock">
            <Setter Property="FontWeight" Value="SemiBold" />
        </Style>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="170" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="170" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="175" />
        </Grid.ColumnDefinitions>
        <esriUI:SceneView x:Name="MySceneView"
                          Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Grid.RowSpan="3"
                          AtmosphereEffect="Realistic" />
        <StackPanel Orientation="Horizontal"
                    Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
                    Margin="5">
            <ComboBox x:Name="MissionSelectionBox"
                      VerticalAlignment="Top"
                      MinWidth="150" />
            <Button x:Name="MissionPlayPause" Content="Pause"
                    VerticalAlignment="Top"
                    Margin="5,0,0,0"
                    MinWidth="75"
                    Click="MissionPlayPause_Click" />
            <TextBlock Text="Progress:"
                       Style="{StaticResource LabelStyle}"
                       VerticalAlignment="Top"
                       Margin="5" />
            <Slider x:Name="MissionProgressBar"
                    Width="100" Margin="5,-2,5,0"
                    VerticalAlignment="Top"
                    Minimum="0" Maximum="1" StepFrequency=".01"
                    ValueChanged="MissionProgressOnSeek" />
            <Button Content="Don't follow"
                    VerticalAlignment="Top"
                    MinWidth="100"
                    Margin="5,0,0,0"
                    Click="ToggleFollowPlane" />
        </StackPanel>
        <Border CornerRadius="5"
                Grid.Row="0" Grid.Column="2"
                Margin="5" Padding="5">
            <Border.Background>
                <SolidColorBrush Color="White" Opacity="0.7" />
            </Border.Background>
            <StackPanel Margin="5"
                        Opacity=".9">
                <TextBlock Text="Play speed"
                           Style="{StaticResource LabelStyle}" />
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Slider x:Name="MissionPlaySpeedSlider"
                            Grid.Column="0"
                            Minimum="0.5" Maximum="8" Value="1"
                            ValueChanged="MissionPlaySpeedChanged" />
                    <TextBlock Text="{Binding ElementName=MissionPlaySpeedSlider,Path=Value}"
                               Grid.Column="1" Margin="8" />
                </Grid>
                <TextBlock Text="Stats"
                           FontSize="16" FontWeight="Bold"
                           Margin="0,0,0,10" />
                <TextBlock Text="Altitude:"
                           Style="{StaticResource LabelStyle}" />
                <TextBlock x:Name="AltitudeTextBlock"
                           Margin="5" />
                <TextBlock Text="Heading:"
                           Style="{StaticResource LabelStyle}" />
                <TextBlock x:Name="HeadingTextBlock"
                           Margin="5" />
                <TextBlock Text="Pitch:"
                           Style="{StaticResource LabelStyle}" />
                <TextBlock x:Name="PitchTextBlock"
                           Margin="5" />
                <TextBlock Text="Roll:"
                           Style="{StaticResource LabelStyle}" />
                <TextBlock x:Name="RollTextBlock"
                           Margin="5"
                           FontWeight="Normal" />
            </StackPanel>
        </Border>
        <esriUI:MapView x:Name="InsetMapView"
                        BorderBrush="Black" BorderThickness="1"
                        Grid.Row="2" Grid.Column="0"
                        Margin="10,0,0,30"
                        IsAttributionTextVisible="False" />
    </Grid>
</UserControl>
// Copyright 2018 Esri.
//
// Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.
// You may obtain a copy of the License at: http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific
// language governing permissions and limitations under the License.

using ArcGISRuntime.Samples.Managers;
using Esri.ArcGISRuntime.Geometry;
using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.Symbology;
using Esri.ArcGISRuntime.UI;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace ArcGISRuntime.UWP.Samples.Animate3DGraphic
{
    [ArcGISRuntime.Samples.Shared.Attributes.Sample(
        "Animate 3D graphic",
        "GraphicsOverlay",
        "This sample demonstrates how to animate a graphic's position and follow it using a camera controller.",
        "Click-and-drag to pan the SceneView, orbiting the moving plane. Click \"Don't Follow\" to switch to the default camera controller, which does not orbit the plane.\nThe plane's route is shown on the inset map in the bottom left corner of the window. The progress through the plane's mission is shown in a slider at the top of the window. Drag the slider to seek through the mission (like you might seek through a song). The play speed can be adjusted to either be slower or faster using the slider in the panel on the right.\nThere is a drop-down box on the top left part of the window for selecting a mission (route) for the plane. Changing the settings for: choosing a different mission, adjusting the play speed, or modifying mission progress will automatically re-start the animation if it is currently paused.\n\nNote that this is a graphics-intensive sample; performance may be degraded in certain situations (such as viewing over Remote Desktop).")]
	[ArcGISRuntime.Samples.Shared.Attributes.OfflineData("290f0c571c394461a8b58b6775d0bd63","e87c154fb9c2487f999143df5b08e9b1","5a9b60cee9ba41e79640a06bcdf8084d","12509ffdc684437f8f2656b0129d2c13","681d6f7694644709a7c830ec57a2d72b")]
    public partial class Animate3DGraphic
    {
        // URL to the elevation service - provides terrain elevation
        private readonly Uri _elevationServiceUrl = new Uri("https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer");

        // Graphic for highlighting the route in the inset map
        private Graphic _routeGraphic;

        // Graphic for highlighting the airplane in the inset map
        private Graphic _plane2D;

        // Graphic for showing the 3D plane model in the scene
        private Graphic _plane3D;

        // Camera controller for centering the camera on the airplane
        private OrbitGeoElementCameraController _orbitCameraController;

        // Timer enables frame-by-frame animation
        private DispatcherTimer _animationTimer;

        // Number of frames in the mission animation
        private int _frameCount;

        // Index of current frame in the animation
        private int _keyframe;

        // Dictionary of mission file names and the corresponding portal item IDs
        private readonly Dictionary<string, string> _missionToItemId = new Dictionary<string, string>
        {
            {"GrandCanyon","290f0c571c394461a8b58b6775d0bd63"},
            {"Hawaii", "e87c154fb9c2487f999143df5b08e9b1"},
            {"Pyrenees", "5a9b60cee9ba41e79640a06bcdf8084d"},
            {"Snowdon", "12509ffdc684437f8f2656b0129d2c13"}
        };

        // Array of animation frames for the current mission
        //    A MissionFrame describes the position of the plane for a single moment in the animation
        private MissionFrame[] _missionData;

        public Animate3DGraphic()
        {
            InitializeComponent();

            // Create the UI, setup the control references and execute initialization
            Initialize();
        }

        private async void Initialize()
        {
            // Apply appropriate maps to the scene and the inset map view
            InsetMapView.Map = new Map(Basemap.CreateImagery());
            MySceneView.Scene = new Scene(Basemap.CreateImagery());

            // Update the mission selection UI
            MissionSelectionBox.ItemsSource = _missionToItemId.Keys;
            MissionSelectionBox.SelectedIndex = 0;

            // Wire up the selection change event to call the ChangeMission method; this method resets the animation and starts a new mission
            MissionSelectionBox.SelectionChanged += async (sender, args) => { await ChangeMission(args.AddedItems[0].ToString()); };

            // Apply the elevation source
            Surface surface = new Surface();
            ElevationSource elevationSource = new ArcGISTiledElevationSource(_elevationServiceUrl);
            surface.ElevationSources.Add(elevationSource);
            MySceneView.Scene.BaseSurface = surface;

            // Create and add the graphics overlay
            GraphicsOverlay sceneOverlay = new GraphicsOverlay
            {
                SceneProperties = { SurfacePlacement = SurfacePlacement.Absolute }
            };
            MySceneView.GraphicsOverlays.Add(sceneOverlay);

            // Create a renderer to handle updating plane's orientation
            SimpleRenderer renderer3D = new SimpleRenderer();
            RendererSceneProperties renderProperties = renderer3D.SceneProperties;
            // Use expressions to keep the renderer properties updated as parameters of the rendered object
            renderProperties.HeadingExpression = "[HEADING]";
            renderProperties.PitchExpression = "[PITCH]";
            renderProperties.RollExpression = "[ROLL]";
            // Apply the renderer to the scene view's overlay
            sceneOverlay.Renderer = renderer3D;

            // Create renderer to symbolize plane and update plane orientation in the inset map
            SimpleRenderer renderer2D = new SimpleRenderer();
            // Create the symbol that will be used for the plane
            SimpleMarkerSymbol plane2DSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle.Triangle, System.Drawing.Color.Blue, 10);
            // Apply the symbol to the renderer
            renderer2D.Symbol = plane2DSymbol;
            // Apply a rotation expression to the renderer
            renderer2D.RotationExpression = "[ANGLE]";
            // Update the inset map with a new GraphicsOverlay based on the renderer
            GraphicsOverlay insetMapOverlay = new GraphicsOverlay
            {
                Renderer = renderer2D
            };
            InsetMapView.GraphicsOverlays.Add(insetMapOverlay);

            // Create placeholder graphic for showing the mission route in the inset map
            SimpleLineSymbol routeSymbol = new SimpleLineSymbol(SimpleLineSymbolStyle.Solid, System.Drawing.Color.Red, 2);
            _routeGraphic = new Graphic { Symbol = routeSymbol };
            insetMapOverlay.Graphics.Add(_routeGraphic);

            // Create the plane graphic; this is symbolized as a blue triangle because of renderer implemented above
            // Create the attribute dictionary
            Dictionary<string, object> plane2DAttributes = new Dictionary<string, object>();
            // Set the angle for the plane graphic
            plane2DAttributes["ANGLE"] = 0f;
            // Create the graphic from the attributes and the initial point
            _plane2D = new Graphic(new MapPoint(0, 0, SpatialReferences.Wgs84), plane2DAttributes);
            // Add the plane graphic to the inset map via the overlay
            insetMapOverlay.Graphics.Add(_plane2D);

            try
            {
                // Create the model graphic for the plane
                // Get the path to the 3D model
                string modelPath = GetModelPath();
                // Create the scene symbol from the path to the model
                ModelSceneSymbol plane3DSymbol = await ModelSceneSymbol.CreateAsync(new Uri(modelPath), 1.0);
                // Create the graphic with an initial location and the plane symbol
                _plane3D = new Graphic(new MapPoint(0, 0, 0, SpatialReferences.Wgs84), plane3DSymbol);
                // Add the plane to the overlay
                sceneOverlay.Graphics.Add(_plane3D);

                // Create the orbit camera controller to follow the plane
                _orbitCameraController = new OrbitGeoElementCameraController(_plane3D, 20.0)
                {
                    CameraPitchOffset = 75.0
                };
                MySceneView.CameraController = _orbitCameraController;

                // Create a timer; this will enable animating the plane
                _animationTimer = new DispatcherTimer()
                {
                    // This is the duration of the timer in milliseconds. This controls the animation speed (fps)
                    Interval = new TimeSpan(0, 0, 0, 0, 60)
                };

                _animationTimer.Tick += AnimatePlane;

                // Set the initial mission for when the sample loads
                await ChangeMission(_missionToItemId.Keys.First());
            }
            catch (Exception e)
            {
                await new MessageDialog(e.ToString(), "Error").ShowAsync();
            }
        }

        private async Task ChangeMission(string mission)
        {
            // Stop animating the current mission
            _animationTimer.Stop();

            // Get mission data
            _missionData = GetMissionData(mission);

            // Draw mission route on the inset
            // Create a collection of points to hold the mission
            PointCollection points = new PointCollection(SpatialReferences.Wgs84);
            // Add all of the points from the mission to the point collection
            points.AddPoints(_missionData.Select(m => m.ToMapPoint()));
            // Create a polyline to symbolize the route from the point collection
            Polyline route = new Polyline(points);
            // Update the route graphic's geometry with the newly created route polyline
            _routeGraphic.Geometry = route;
            // Update the inset map's scale
            await InsetMapView.SetViewpointScaleAsync(100000);

            // Update animation parameters
            _frameCount = _missionData.Length;
            _keyframe = 0;

            // Set the MissionPlayPause button back to the currently 'playing' state
            MissionPlayPause.Content = "Pause";

            // Restart the animation
            _animationTimer.Start();
        }

        private MissionFrame[] GetMissionData(string mission)
        {
            // Get the path to the file
            string filePath = GetMissionFilePath(mission);

            // Read the file text
            string fileContents = File.ReadAllText(filePath);

            // Split the file contents into a list of lines
            return fileContents.Split('\n')
                // Then for each line, create a MissionFrame object
                .Select(MissionFrame.Create)
                // Then remove any null MissionFrames
                .Where(missionPart => missionPart != null)
                // Finally return that list of MissionFrames as an array
                .ToArray();
        }

        private string GetMissionFilePath(string mission)
        {
            string itemId = _missionToItemId[mission];
            string filename = mission + ".csv";

            return DataManager.GetDataFolder(itemId, filename);
        }

        private async void AnimatePlane(object sender, object elapsedEventArgs)
        {
            // Get the next position; % prevents going out of bounds even if the keyframe value is
            //     changed unexpectedly (e.g. due to user interaction with the progress slider).
            MissionFrame currentFrame = _missionData[_keyframe % _frameCount];

            // Update the UI
            double missionProgress = _keyframe / (double)_frameCount;

            // This is needed because the event could be running on a non-UI thread
            await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
            {
                // Update the progress slider
                MissionProgressBar.Value = missionProgress;

                // Update stats display
                AltitudeTextBlock.Text = $"{currentFrame.Elevation:F}m";
                HeadingTextBlock.Text = $"{currentFrame.Heading:F}�";
                PitchTextBlock.Text = $"{currentFrame.Pitch:F}�";
                RollTextBlock.Text = $"{currentFrame.Roll:F}�";
            });

            // Update plane's position
            _plane3D.Geometry = currentFrame.ToMapPoint();
            _plane3D.Attributes["HEADING"] = currentFrame.Heading;
            _plane3D.Attributes["PITCH"] = currentFrame.Pitch;
            _plane3D.Attributes["ROLL"] = currentFrame.Roll;

            // Update the inset map; plane symbol position
            _plane2D.Geometry = currentFrame.ToMapPoint();
            // Update inset's viewpoint and heading
            Viewpoint vp = new Viewpoint(currentFrame.ToMapPoint(), InsetMapView.MapScale,
                360 + (float)currentFrame.Heading);
            InsetMapView.SetViewpoint(vp);

            // Update the keyframe. This advances the animation
            _keyframe++;

            // Restart the animation if it has finished
            if (_keyframe >= _frameCount)
            {
                _keyframe = 0;
            }
        }

        private static string GetModelPath()
        {
            return DataManager.GetDataFolder("681d6f7694644709a7c830ec57a2d72b", "Bristol.dae");
        }

        private void MissionPlayPause_Click(object sender, RoutedEventArgs e)
        {
            // Get a reference to the button that sent the event
            Button playButton = (Button)sender;

            // Get the text of the button
            string playtext = playButton.Content?.ToString();

            switch (playtext)
            {
                // Resume the animation
                case "Play":
                    playButton.Content = "Pause";
                    _animationTimer.Start();
                    break;
                // Stop the animation
                case "Pause":
                    playButton.Content = "Play";
                    _animationTimer.Stop();
                    break;
            }
        }

        private void MissionProgressOnSeek(object sender, Windows.UI.Xaml.Controls.Primitives.RangeBaseValueChangedEventArgs e)
        {
            // Get a reference to the slider that sent the event
            Slider sliderControl = (Slider)sender;

            // Return if the user didn't change the progress
            //    (this event is also fired when the value is changed programmatically)
            if (sliderControl.FocusState == FocusState.Unfocused)
            {
                return;
            }

            // Stop the animation
            _animationTimer.Stop();

            // Get the new mission progress
            double missionProgress = sliderControl.Value;

            // Update the keyframe based on the progress
            _keyframe = (int)(missionProgress * _frameCount);

            // Set the MissionPlayPause button back to the currently 'playing' state
            MissionPlayPause.Content = "Pause";

            // Restart the animation
            _animationTimer.Start();
        }

        private void ToggleFollowPlane(object sender, RoutedEventArgs e)
        {
            // Get a reference to the button
            Button cameraControlButton = (Button)sender;

            // Get the current text of the button
            string cameraControlText = cameraControlButton.Content?.ToString();

            switch (cameraControlText)
            {
                // Resume following
                case "Follow":
                    cameraControlButton.Content = "Don't follow";
                    MySceneView.CameraController = _orbitCameraController;
                    break;
                // Stop following
                case "Don't follow":
                    cameraControlButton.Content = "Follow";
                    // Setting the scene view's camera controller to null has the effect of resetting the value to the default
                    MySceneView.CameraController = null;
                    break;
            }
        }

        private void MissionPlaySpeedChanged(object sender, Windows.UI.Xaml.Controls.Primitives.RangeBaseValueChangedEventArgs e)
        {
            Slider sliderControl = (Slider)sender;

            // Return if timer not initialized yet
            if (_animationTimer == null)
            {
                return;
            }

            // Get the speed multiplier from the slider value
            double speedMultiplier = sliderControl.Value;

            // Stop the animation
            _animationTimer.Stop();

            // Update the animation speed
            _animationTimer.Interval = new TimeSpan(0, 0, 0, 0, (int)(60 / speedMultiplier));

            // Set the MissionPlayPause button back to the currently 'playing' state
            MissionPlayPause.Content = "Pause";

            // Restart the animation
            _animationTimer.Start();
        }

        /// <summary>
        /// Private helper class represents a single frame in the animation
        /// </summary>
        private class MissionFrame
        {
            private double Longitude { get; }
            private double Latitude { get; }
            public double Elevation { get; }
            public double Heading { get; }
            public double Pitch { get; }
            public double Roll { get; }

            /// <summary>
            /// Private constructor ensures that only the factory method (Create) can be called.
            /// </summary>
            /// <param name="missionLine">A string describing a single frame in the mission animation.</param>
            private MissionFrame(string missionLine)
            {
                // Split the string into a list of entries (columns)
                // Example line: -156.3666517,20.6255059,999.999908,83.77659,0.0000105,-47.766567
                string[] missionFrameParameters = missionLine.Split(',');

                // Throw if the line isn't valid
                if (missionFrameParameters.Length != 6)
                {
                    throw new Exception("Invalid mission part definition");
                }

                // Populate the object's properties from the array of parameters
                Longitude = Convert.ToDouble(missionFrameParameters[0]);
                Latitude = Convert.ToDouble(missionFrameParameters[1]);
                Elevation = Convert.ToDouble(missionFrameParameters[2]);
                Heading = Convert.ToDouble(missionFrameParameters[3]);
                Pitch = Convert.ToDouble(missionFrameParameters[4]);
                Roll = Convert.ToDouble(missionFrameParameters[5]);
            }

            /// <summary>
            /// Creates a new MissionFrame.
            /// The private constructor + static construction method allows
            ///     for keeping the exception-handling logic for the constructor
            ///     internal to the class.
            /// </summary>
            /// <param name="missionLine">A string describing a single frame in the mission animation</param>
            /// <returns>Constructed MissionFrame or null if the line is invalid</returns>
            public static MissionFrame Create(string missionLine)
            {
                try
                {
                    return new MissionFrame(missionLine);
                }
                catch (Exception ex)
                {
                    Debug.WriteLine(ex.Message);
                    return null;
                }
            }

            public MapPoint ToMapPoint()
            {
                return new MapPoint(Longitude, Latitude, Elevation, SpatialReferences.Wgs84);
            }
        }
    }
}