CesiumGS · mramato · Jan 16, 2019 · Dec 3, 2018 · Dec 4, 2018 · Dec 6, 2018
diff --git a/Apps/Sandcastle/gallery/Animation Speed.html b/Apps/Sandcastle/gallery/Animation Speed.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+    <meta name="description" content="Control glTF animation speed based on the entity's velocity.">
+    <meta name="cesium-sandcastle-labels" content="Showcases">
+    <title>Cesium Demo</title>
+    <script type="text/javascript" src="../Sandcastle-header.js"></script>
+    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
+    <script type="text/javascript">
+    require.config({
+        baseUrl : '../../../Source',
+        waitSeconds : 60
+    });
+    </script>
+</head>
+<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
+<style>
+    @import url(../templates/bucket.css);
+</style>
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="loadingOverlay"><h1>Loading...</h1></div>
+<div id="toolbar"></div>
+<script id="cesium_sandcastle_script">
+function startup(Cesium) {
+    'use strict';
+//Sandcastle_Begin
+var viewer = new Cesium.Viewer('cesiumContainer', {
+    shouldAnimate: true
+});
+
+//Make sure viewer is at the desired time.
+var start = Cesium.JulianDate.fromDate(new Date(2018, 11, 12));
+var totalSeconds = 30;
+var stop = Cesium.JulianDate.addSeconds(start, totalSeconds, new Cesium.JulianDate());
+viewer.clock.startTime = start.clone();
+viewer.clock.stopTime = stop.clone();
+viewer.clock.currentTime = start.clone();
+viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
+viewer.timeline.zoomTo(start, stop);
+
+// Create a path from a set of positions for our vehicle.
+var position = new Cesium.SampledPositionProperty();
+// These numbers were obtained by starting with 3 Cartesian3 locations, and then using
+// Cesium.Cartesian3.lerp to create more positions between them. They were constructed
+// so that the first few are close together and the last two are far apart to show
+// how the animation picks up as the vehicle's speed changes.
+var locations = [
+    new Cesium.Cartesian3(-2379510.08905552,-4665419.64840452,3628182.20006795),
+    new Cesium.Cartesian3(-2379521.766634856, -4665446.787560957, 3628139.926700882),
+    new Cesium.Cartesian3(-2379533.4442141918, -4665473.926717391, 3628097.653333814),
+    new Cesium.Cartesian3(-2379545.121793528, -4665501.065873828, 3628055.379966746),
+    new Cesium.Cartesian3(-2379556.799372864, -4665528.205030263, 3628013.106599678),
+    new Cesium.Cartesian3(-2379568.4769522,-4665555.3441867,3627970.83323261),
+    new Cesium.Cartesian3(-2379603.7074103747, -4665623.48990283, 3627860.82704567)
+];
+
+var stepSize = totalSeconds / (locations.length - 1);
+
+for (var i = 0; i < locations.length; ++i) {
+    var location = locations[i];
+    var time = Cesium.JulianDate.addSeconds(start, i * stepSize, new Cesium.JulianDate());
+    position.addSample(time, location);
+}
+
+// A velocity vector property will give us the entity's speed and direction at any given time.
+var velocityVectorProperty = new Cesium.VelocityVectorProperty(position, false);
+var velocityVector = new Cesium.Cartesian3();
+
+// Add our vehicle model.
+var vehicleEntity = viewer.entities.add({
+    position : position,
+    orientation : new Cesium.VelocityOrientationProperty(position), // Automatically set the vehicle's orientation to the direction it's facing
+    model : {
+        uri : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb',
+        minimumPixelSize : 128,
+        maximumScale : 20000
+    }
+});
+viewer.trackedEntity = vehicleEntity;
+
+// Set the animation speed to a callback property that gets evaluated only when it's used.
+vehicleEntity.model.animationsMultiplier = new Cesium.CallbackProperty(function(time, result) {
+    velocityVectorProperty.getValue(time, velocityVector);
+
+    var rotationsPerSecond = rotationSpeedFromVelocity(Cesium.Cartesian3.magnitude(velocityVector), 0.52);
+    // Make the animation play at that speed, given that this glTF wheel animation makes almost 2 rotations per second.
+    var multiplier = (rotationsPerSecond * 1.1) / 2;
+    // animationMultiplier can't be 0.
+    multiplier = Math.max(Math.abs(multiplier), 0.001);
+    // If it gets too fast it doesn't look great so we create a maximum here.
+    multiplier = Math.min(multiplier, 15);
+
+    return multiplier;
+}, false);
+
+function rotationSpeedFromVelocity(velocity, wheelRadius) {
+    // velocity is how fast the vehicle is moving in meters per second.
+    // wheelRadius in meters.
+    var circumference = Math.PI * wheelRadius * 2;
+    return velocity / circumference;
+}
+//Sandcastle_End
+    Sandcastle.finishedLoading();
+}
+if (typeof Cesium !== 'undefined') {
+    startup(Cesium);
+} else if (typeof require === 'function') {
+    require(['Cesium'], startup);
+}
+</script>
+</body>
+</html>
diff --git a/Apps/Sandcastle/gallery/Animation Speed.jpg b/Apps/Sandcastle/gallery/Animation Speed.jpg
diff --git a/CHANGES.md b/CHANGES.md
@@ -10,6 +10,7 @@ Change Log
     * The `specularEnvironmentMaps` and `sphericalHarmonicCoefficients` properties of `Model` and `Cesium3DTileset` can be used to override the values from the scene for specific models and tilesets.
     * The `luminanceAtZenith` property of `Model` and `Cesium3DTileset` adjusts the luminance of the procedural image-based lighting.
 * Double click away from an entity to un-track it [#7285](https://github.com/AnalyticalGraphicsInc/cesium/pull/7285)
+* Added a new `animationsMultiplier` property on `ModelGraphics` to control the playback speed of glTF animations. [#7361](https://github.com/AnalyticalGraphicsInc/cesium/pull/7361).
 
 ##### Fixes :wrench:
 * Fixed 3D Tiles visibility checking when running multiple passes within the same frame. [#7289](https://github.com/AnalyticalGraphicsInc/cesium/pull/7289)

diff --git a/Source/DataSources/ModelGraphics.js b/Source/DataSources/ModelGraphics.js
@@ -79,6 +79,7 @@ define([
         this._uriSubscription = undefined;
         this._runAnimations = undefined;
         this._clampAnimations = undefined;
+        this._animationsMultiplier = undefined;
         this._runAnimationsSubscription = undefined;
         this._nodeTransformations = undefined;
         this._nodeTransformationsSubscription = undefined;
@@ -190,6 +191,14 @@ define([
          */
         runAnimations : createPropertyDescriptor('runAnimations'),
 
+        /**
+         * Gets or sets the numeric Property specifying the relative speed to play the glTF animations.
+         * @memberof ModelGraphics.prototype
+         * @type {Property}
+         * @default 1.0
+         */
+        animationsMultiplier : createPropertyDescriptor('animationsMultiplier'),
+
         /**
          * Gets or sets the boolean Property specifying if glTF animations should hold the last pose for time durations with no keyframes.
          * @memberof ModelGraphics.prototype

diff --git a/Source/DataSources/ModelVisualizer.js b/Source/DataSources/ModelVisualizer.js
@@ -46,6 +46,7 @@ define([
     var defaultColorBlendMode = ColorBlendMode.HIGHLIGHT;
     var defaultColorBlendAmount = 0.5;
     var defaultImageBasedLightingFactor = new Cartesian2(1.0, 1.0);
+    var defaultAnimationMultiplier = 1.0;
 
     var modelMatrixScratch = new Matrix4();
     var nodeMatrixScratch = new Matrix4();
@@ -138,7 +139,8 @@ define([
                     animationsRunning : false,
                     nodeTransformationsScratch : {},
                     originalNodeMatrixHash : {},
-                    loadFail : false
+                    loadFail : false,
+                    multiplier : defaultAnimationMultiplier
                 };
                 modelHash[entity.id] = modelData;
 
@@ -165,6 +167,7 @@ define([
 
             if (model.ready) {
                 var runAnimations = Property.getValueOrDefault(modelGraphics._runAnimations, time, true);
+                var multiplier = Property.getValueOrDefault(modelGraphics._animationsMultiplier, time, defaultAnimationMultiplier);
                 if (modelData.animationsRunning !== runAnimations) {
                     if (runAnimations) {
                         model.activeAnimations.addAll({
@@ -176,6 +179,16 @@ define([
                     modelData.animationsRunning = runAnimations;
                 }
 
+                // Update the multiplier property
+                if (modelData.animationsRunning && modelData.multiplier !== multiplier) {
+                    var animationLength = model.activeAnimations.length;
+                    for (var j = 0; j < animationLength; ++j) {
+                        var animation = model.activeAnimations.get(j);
+                        animation.multiplier = multiplier;
+                    }
+                    modelData.multiplier = multiplier;
+                }
+
                 // Apply node transformations
                 var nodeTransformations = Property.getValueOrUndefined(modelGraphics._nodeTransformations, time, modelData.nodeTransformationsScratch);
                 if (defined(nodeTransformations)) {

diff --git a/Source/Scene/ModelAnimation.js b/Source/Scene/ModelAnimation.js
@@ -1,4 +1,5 @@
 define([
+        '../Core/Check',
         '../Core/defaultValue',
         '../Core/defineProperties',
         '../Core/defined',
@@ -8,6 +9,7 @@ define([
         './ModelAnimationLoop',
         './ModelAnimationState'
     ], function(
+        Check,
         defaultValue,
         defineProperties,
         defined,
@@ -118,6 +120,7 @@ define([
         // Set during animation update
         this._computedStartTime = undefined;
         this._duration = undefined;
+        this._speedupChanged = false;
 
         // To avoid allocations in ModelAnimationCollection.update
         var that = this;
@@ -208,13 +211,18 @@ define([
          * @memberof ModelAnimation.prototype
          *
          * @type {Number}
-         * @readonly
          *
          * @default 1.0
          */
         multiplier : {
             get : function() {
                 return this._multiplier;
+            },
+            set : function(multiplier) {
+                Check.typeOf.number.greaterThan('multiplier', multiplier, 0);
+
+                this._multiplier = multiplier;
+                this._multiplierChanged = true;
             }
         },
 

diff --git a/Source/Scene/ModelAnimationCollection.js b/Source/Scene/ModelAnimationCollection.js
@@ -64,6 +64,7 @@ define([
 
         this._model = model;
         this._scheduledAnimations = [];
+        this._multiplierChanged = false;
         this._previousTime = undefined;
     }
 
@@ -397,8 +398,9 @@ define([
                 scheduledAnimation._computedStartTime = JulianDate.addSeconds(defaultValue(scheduledAnimation.startTime, sceneTime), scheduledAnimation.delay, new JulianDate());
             }
 
-            if (!defined(scheduledAnimation._duration)) {
+            if (!defined(scheduledAnimation._duration) || scheduledAnimation._multiplierChanged) {
                 scheduledAnimation._duration = runtimeAnimation.stopTime * (1.0 / scheduledAnimation.multiplier);
+                scheduledAnimation._multiplierChanged = false;
             }
 
             var startTime = scheduledAnimation._computedStartTime;