Improve requestAnimationFrame.

The selection of the implementation should only happen once. Add smarts to the non-native setTimeout fallback to make it better target 60fps by accounting for the time taken by the callback. Add es5-shim library when running specs to allow them to actually be runnable on old IE. Update LICENSE.md to reflect current state of third party libraries by removing old ACE and JS Beautifier entries, and add CodeMirror, JSHint, and now es5-shim.
ChristinaKochan · Oct 29, 2012 · ceb91ed · ceb91ed
1 parent 382c4e8
commit ceb91ed
Show file tree

Hide file tree

Showing 7 changed files with 1,271 additions and 207 deletions.
diff --git a/LICENSE.md b/LICENSE.md
diff --git a/Source/Core/requestAnimationFrame.js b/Source/Core/requestAnimationFrame.js
@@ -2,13 +2,43 @@
 define(function() {
     "use strict";
 
+    var requestAnimationFrameImplementation = window.requestAnimationFrame;
+
+    // look for vendor prefixed function
+    if (typeof requestAnimationFrameImplementation === 'undefined') {
+        var vendors = ['webkit', 'moz', 'ms', 'o'];
+        var i = 0;
+        var len = vendors.length;
+        while (i < len && typeof requestAnimationFrameImplementation === 'undefined') {
+            requestAnimationFrameImplementation = window[vendors[i] + 'RequestAnimationFrame'];
+            ++i;
+        }
+    }
+
+    // build an implementation based on setTimeout
+    if (typeof requestAnimationFrameImplementation === 'undefined') {
+        var lastFrameTime = 0;
+        requestAnimationFrameImplementation = function(callback) {
+            var currentTime = Date.now();
+
+            // schedule the callback to target 60fps, 16.7ms per frame,
+            // accounting for the time taken by the callback
+            var delay = Math.max(16 - (currentTime - lastFrameTime), 0);
+            lastFrameTime = currentTime + delay;
+
+            return setTimeout(function() {
+                callback(lastFrameTime);
+            }, delay);
+        };
+    }
+
     /**
      * A browser-independent function to request a new animation frame.  This is used to create
      * an application's draw loop as shown in the example below.
      *
      * @exports requestAnimationFrame
      *
-     * @param {Object} callback The function to call when animation is ready.
+     * @param {Function} callback The function to call when animation is ready.
      *
      * @example
      * // Create a draw loop using requestAnimationFrame. The
@@ -18,20 +48,14 @@ define(function() {
      *   requestAnimationFrame(tick);
      * }
      * tick();
+     *
+     * @see <a href='http://www.w3.org/TR/animation-timing/#the-WindowAnimationTiming-interface'>The WindowAnimationTiming interface</a>
      */
     var requestAnimationFrame = function(callback) {
-        //delay the selection of the appropriate function until the first invocation
-        requestAnimationFrame =
-            window.requestAnimationFrame ||
-            window.webkitRequestAnimationFrame ||
-            window.mozRequestAnimationFrame ||
-            window.oRequestAnimationFrame ||
-            window.msRequestAnimationFrame ||
-            function(callback) {
-                window.setTimeout(callback, 1000.0 / 60.0);
-            };
-        requestAnimationFrame(callback);
+        // we need this extra wrapper function because the native requestAnimationFrame
+        // functions must be invoked on the global scope (window), which is not the case
+        // if invoked as Cesium.requestAnimationFrame(callback)
+        requestAnimationFrameImplementation(callback);
     };
-
     return requestAnimationFrame;
-});
+});
diff --git a/Specs/Core/requestAnimationFrameSpec.js b/Specs/Core/requestAnimationFrameSpec.js
@@ -0,0 +1,46 @@
+/*global defineSuite*/
+defineSuite([
+             'Core/requestAnimationFrame'
+         ], function(
+             requestAnimationFrame) {
+    "use strict";
+    /*global jasmine,describe,xdescribe,it,xit,expect,beforeEach,afterEach,beforeAll,afterAll,spyOn,runs,waits,waitsFor*/
+
+    it('calls the callback', function() {
+        var callbackRan = false;
+
+        runs(function() {
+            requestAnimationFrame(function() {
+                callbackRan = true;
+            });
+        });
+
+        waitsFor(function() {
+            return callbackRan;
+        });
+    });
+
+    it('provides a timestamp that increases each frame', function() {
+        var callbackTimestamps = [];
+
+        runs(function() {
+            function callback(timestamp) {
+                callbackTimestamps.push(timestamp);
+
+                if (callbackTimestamps.length < 3) {
+                    requestAnimationFrame(callback);
+                }
+            }
+            requestAnimationFrame(callback);
+        });
+
+        waitsFor(function() {
+            return callbackTimestamps.length === 3;
+        });
+
+        runs(function() {
+            expect(callbackTimestamps[0]).toBeLessThanOrEqualTo(callbackTimestamps[1]);
+            expect(callbackTimestamps[1]).toBeLessThanOrEqualTo(callbackTimestamps[2]);
+        });
+    });
+});
diff --git a/Specs/SpecRunner.html b/Specs/SpecRunner.html
@@ -1,20 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="utf-8">
-	<title>Jasmine Test Runner</title>
+    <meta charset="utf-8">
+    <title>Jasmine Test Runner</title>
 
-	<!-- Use Chrome Frame in IE -->
-	<meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <!-- Use Chrome Frame in IE -->
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
 
-	<link rel="shortcut icon" type="image/png" href="../ThirdParty/jasmine-1.1.0/jasmine_favicon.png">
-	<link rel="stylesheet" type="text/css" href="../ThirdParty/jasmine-1.1.0/jasmine.css">
-	<script type="text/javascript" src="../ThirdParty/jasmine-1.1.0/jasmine.js"></script>
-	<script type="text/javascript" src="../ThirdParty/jasmine-1.1.0/jasmine-html.js"></script>
-	<script type="text/javascript" src="../ThirdParty/requirejs-1.0.8/require.js"></script>
-	<script type="text/javascript" src="SpecList.js"></script>
+    <link rel="shortcut icon" type="image/png" href="../ThirdParty/jasmine-1.1.0/jasmine_favicon.png">
+    <link rel="stylesheet" type="text/css" href="../ThirdParty/jasmine-1.1.0/jasmine.css">
+    <script type="text/javascript" src="../ThirdParty/jasmine-1.1.0/jasmine.js"></script>
+    <script type="text/javascript" src="../ThirdParty/jasmine-1.1.0/jasmine-html.js"></script>
+    <script type="text/javascript" src="../ThirdParty/es5-shim/es5-shim.js"></script>
+
+    <script type="text/javascript" src="../ThirdParty/requirejs-1.0.8/require.js"></script>
+    <script type="text/javascript" src="SpecList.js"></script>
 </head>
 <body>
-	<script type="text/javascript" src="SpecRunner.js"></script>
+    <script type="text/javascript" src="SpecRunner.js"></script>
 </body>
 </html>
diff --git a/Specs/equals.js b/Specs/equals.js
@@ -3,14 +3,19 @@ define(function() {
     "use strict";
     /*global Uint8ClampedArray,CanvasPixelArray*/
 
-    var typedArrayTypes = [Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array];
+    var typedArrayTypes = [];
 
-    if (typeof Uint8ClampedArray !== 'undefined') {
-        typedArrayTypes.push(Uint8ClampedArray);
-    }
+    // Earlier versions of IE do not support typed arrays
+    if (typeof Int8Array !== 'undefined') {
+        typedArrayTypes.push(Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array);
+
+        if (typeof Uint8ClampedArray !== 'undefined') {
+            typedArrayTypes.push(Uint8ClampedArray);
+        }
 
-    if (typeof CanvasPixelArray !== 'undefined') {
-        typedArrayTypes.push(CanvasPixelArray);
+        if (typeof CanvasPixelArray !== 'undefined') {
+            typedArrayTypes.push(CanvasPixelArray);
+        }
     }
 
     function isTypedArray(o) {

diff --git a/ThirdParty/es5-shim/LICENSE b/ThirdParty/es5-shim/LICENSE
@@ -0,0 +1,19 @@
+
+Copyright 2009, 2010 Kristopher Michael Kowal. All rights reserved.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to
+deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.