Home > Animations > Tours and 3D animation

Tours and 3D animation

February 19th, 2009

Looking around the various tech reviews of the new Google Earth 5, one new feature seems to have slipped under the radar - the KML tags describing the new touring function include a seriously powerful method for defining smooth motion 3d animation.

I’ve been messing around with this a little, and hacked together a few basic (not much KML code), slightly weird ;) , but dramatic examples. These are tours - view them by loading them into GE and double clicking on play me! in the side panel.

Fly wingman with a 3d model plane (also see the vid above)

Polygon morph France into Spain!

Dot-to-dot tour of European cities

How do these work ?

With the new <gx:AnimatedUpdate>. A container for the <Update> element. Which allows you to temporarily modify KML, and specify a length of time for that action to take place over.

Switching features on and off during a tour is the obvious example. Not so apparent, because it’s not directly available through tour recording inside Google Earth, is that for many other changes GE will smoothly interpolate (tween) the difference.

The example Google provide gradually increases the size of a placemark. But this effect can be applied to any KML attribute taking a range of values - orientation, colour, scale and coordinates. Significantly, these transitions will work in parallel, sequentially, across multiple features and alongside scripted camera movements.

This is powerful stuff! A much more convenient and concise method of animation than time slider hacks, where every intermediate step needs coding in KML. Only real downside in all this - and I guess it could be a biggie depending on your needs - you can’t fly around at will during tour playback.

About the examples

  • The first uses a single <gx:AnimatedUpdate> to gradually change location of a 3d model over a 60 second duration. Code for this below the fold if anyone wants to check it out.
  • Second does the same to transform all 38 coordinates in a polygon.
  • Last example combines a series of linestring coordinate transformations with color and scale changes for placemark icons.

KML for the flight hack


<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" 
 xmlns:gx="http://www.google.com/kml/ext/2.2" 
 xmlns:kml="http://www.opengis.net/kml/2.2" 
 xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
  <Placemark>
    <Model>
      <altitudeMode>absolute</altitudeMode> 
      <Location id="planeLocation">
        <longitude>0.024799</longitude>
        <latitude>51.569452</latitude>
        <altitude>100</altitude>
      </Location>
      <Orientation>
        <heading>235</heading>
        <tilt>0</tilt>
        <roll>0</roll>
        </Orientation>
      <Scale>
        <x>4</x>
        <y>4</y>
        <z>4</z>
      </Scale>
      <Link>
        <href>files/hawk.dae</href>
      </Link>
    </Model>
  </Placemark>

  <gx:Tour>
    <name>Play me!</name>
    <gx:Playlist>
    
      <!-- Fly to our start location -->
      <gx:FlyTo>
        <gx:duration>2.5</gx:duration>
        <Camera>
          <longitude>0.025643</longitude>
          <latitude>51.569857</latitude>
          <altitude>140</altitude>
          <heading>235</heading>
          <tilt>70</tilt>
          <roll>0</roll>
          <altitudeMode>absolute</altitudeMode>
        </Camera>
      </gx:FlyTo> 
      
      <!-- Change the model's coordinates over a duration of 60 seconds -->      
      <gx:AnimatedUpdate>
        <gx:duration>60</gx:duration>
        <Update>
          <targetHref></targetHref>
          <Change>
            <Location targetId="planeLocation">
              <longitude>-0.321658</longitude>
              <latitude>51.429115</latitude>
              <altitude>100</altitude>
            </Location>
          </Change> 
        </Update>
      </gx:AnimatedUpdate> 
      
      <!-- Move the camera in parallel with the model -->      
      <gx:FlyTo>
        <gx:duration>60</gx:duration>
        <gx:flyToMode>smooth</gx:flyToMode>
        <Camera>
          <longitude>-0.320779</longitude>
          <latitude>51.429527</latitude>
          <altitude>80</altitude>
          <heading>235</heading>
          <tilt>100</tilt>
          <roll>0</roll>
          <altitudeMode>absolute</altitudeMode>
        </Camera>
      </gx:FlyTo>   
    </gx:Playlist>
  </gx:Tour>
  
</Document>
</kml>

No related posts.

, , , , ,

  1. February 23rd, 2009 at 03:51 | #1

    Hi! James,

    Here I am again.
    I study your examples, also has made a work, please look at my blog.
    I try to make a placemark to move,but it doesn’t work.
    I have no idea whether the new does support element, or was I have made a mistake in code, could you help me to check it? You can download my kml file from “http://gemvg.com/ge/marathon/kaohsiung100k/pointMove.kml”.

  2. February 23rd, 2009 at 04:00 | #2

    Sorry! I revise part section of sentences, it should be :
    I have no idea whether the new “gx:AnimatedUpdate” does support “point” element,

  3. February 23rd, 2009 at 11:10 | #3

    Steve - you need to reference a targetId in your <Change> not an id:

    <Change>
    <Point targetId=”runnerPosition”>

    I keep making the same mistake :)

    Your Helicopter tour looks amazing btw! Ingenious.

  4. nazia guard
    March 17th, 2009 at 06:55 | #4

    hi james…i have just begun working on kml…and ur flight hack example has helped me a lot.

  5. M. Lam
    April 7th, 2009 at 05:02 | #5

    Hi I’m just wondering if it is possible to replace the plane with another object?

  6. Scott
    June 19th, 2009 at 21:48 | #6

    Is there a way to animate the heading, tilt, and roll of the airplane model itself, and have the model essentially fly a preprogrammed flight path with the airplane banking and pitching as it flies the path? It would be like combining the flight simulator function of Google Earth with the external camera view, and fixed paths in space.

  7. GILBERT COLOMBO
    July 23rd, 2009 at 18:07 | #7

    DO YOU HAVE A MAP SHOWING THE FLIGHT PATHS OF FLIGHTS FROM NEW YORK TO HEATHROW AIRPORT?
    THANK YOU
    GIL COLOMBO

  8. Olaf
    August 2nd, 2009 at 16:49 | #8

    Hi!
    I tried to make an animation with my own model, but after editing the kml file, the model was not visible in Google Earth (the tour worked).
    Then I tried to yous your model and I did nothing than unzip it and zip it again, and the model is suddenly unvisible. I use the standard zip function in Windows XP and I also tried 7zip.
    Did you use a special zip program or does Google Earth only accept a special algorithm?
    Many thanky in advance,
    Olaf

  9. Winton
    October 8th, 2012 at 17:55 | #9

    I can’t get it to load into Google Earth in the browser - I cut and pasted the example code into london_tour, replaced hawk.dae with a dumb little cylinder.dae, and had this in my index.html - any ideas/clues? Only think I can think of is Apache on my mac wont serve cylinder.dae - any other thoughs?

    google.load(’earth’, ‘1′);

    var ge = null;

    function init() {
    google.earth.createInstance(’map3d’, initCallback, failureCallback);
    }

    function initCallback(pluginInstance) {
    ge = pluginInstance;
    ge.getWindow().setVisibility(true);
    // Earth is ready, we can add features to it
    addKmlFromUrl(’http://localhost/~wdavies/london_tour.kml’);
    }

    function addKmlFromUrl(kmlUrl) {
    var link = ge.createLink(”);
    link.setHref(kmlUrl);

    var networkLink = ge.createNetworkLink(”);
    networkLink.setLink(link);

    networkLink.setFlyToView(true);
    ge.getFeatures().appendChild(networkLink);
    }

    function failureCallback() {
    // we can do something here if there’s an error
    alert(”Whoops, I am an alert box!”);
    }

  1. May 22nd, 2009 at 15:01 | #1