1 /*{# Copyright (c) 2010-2012 Turbulenz Limited #}*/
  2 /*
  3 * @title: Basic loop
  4 * @description:
  5 * This sample is an introduction to the Turbulenz API.
  6 * It shows the Turbulenz Engine entry and exit points and how to set up a simple render loop that clears the background.
  7 * You can enable or disable the animation of the background clear color.
  8 */
  9 /*{# Import additional JS files here #}*/
 10 /*{{ javascript("scripts/htmlcontrols.js") }}*/
 11 /*global window: false */
 12 /*global TurbulenzEngine: true */
 13 /*global HTMLControls: false */
 14 TurbulenzEngine.onload = function onloadFn() {
 15     var errorCallback = function errorCallback(msg) {
 16         window.alert(msg);
 17     };
 18     TurbulenzEngine.onerror = errorCallback;
 19 
 20     // Create each of the native engine API devices to be used
 21     var mathDeviceParameters = {};
 22     var mathDevice = TurbulenzEngine.createMathDevice(mathDeviceParameters);
 23 
 24     var graphicsDeviceParameters = {};
 25     var graphicsDevice = TurbulenzEngine.createGraphicsDevice(graphicsDeviceParameters);
 26 
 27     // Setup the default graphics color
 28     var clearColor = [0.0, 0.0, 0.0, 1.0];
 29 
 30     //
 31     // This basic loop is used to simply change the graphics default color
 32     //
 33     // The rate at which the color should be changed
 34     var blendRate = 0.5;
 35 
 36     // The colors to blend between
 37     var blendColor1 = [0.2, 0.2, 0.4, 1.0];
 38     var blendColor2 = [0.6, 0.8, 0.8, 1.0];
 39 
 40     // The amount of blendColor2 to use compared to blendColor1 (0.0 - 1.0)
 41     var blendRatio = 0.0;
 42 
 43     // Increment or decrement the blendRatio (-1 or 1)
 44     var blendDir = 1;
 45 
 46     // Default control value
 47     var doBlend = true;
 48 
 49     //
 50     // updateColor: The function to update the graphicsDevice clearColor
 51     //
 52     var updateColor = function updateColorFn(delta) {
 53         // Declare the variables to be used in this function
 54         var blendDelta = (blendRate * delta);
 55         var channels = clearColor.length;
 56         var blendRatioInv;
 57 
 58         blendRatio += blendDelta * blendDir;
 59         if (blendRatio > 1.0) {
 60             blendRatio = 1.0;
 61             blendDir = -1;
 62         }
 63         if (blendRatio < 0.0) {
 64             blendRatio = 0.0;
 65             blendDir = 1;
 66         }
 67         blendRatioInv = 1.0 - blendRatio;
 68 
 69         for (var i = 0; i < channels; i += 1) {
 70             clearColor[i] = (blendColor1[i] * blendRatioInv) + (blendColor2[i] * blendRatio);
 71         }
 72     };
 73 
 74     // Controls
 75     var htmlControls = HTMLControls.create();
 76     htmlControls.addCheckboxControl({
 77         id: "checkbox01",
 78         value: "doBlend",
 79         isSelected: doBlend,
 80         fn: function () {
 81             doBlend = !doBlend;
 82             return doBlend;
 83         }
 84     });
 85     htmlControls.register();
 86 
 87     // Set the initial previous frametime for the first loop
 88     var previousFrameTime = TurbulenzEngine.time;
 89 
 90     //
 91     // Update: Should update the input, physics, sound and other js libraries used.
 92     //         The function should then trigger the rendering using the graphicsDevice
 93     //
 94     var update = function updateFn() {
 95         // Gets the currentTime to be used in calculations for this frame
 96         var currentTime = TurbulenzEngine.time;
 97 
 98         // Delta is calculated to be used by update functions that require the elapsed time since they were last called
 99         var deltaTime = (currentTime - previousFrameTime);
100         if (deltaTime > 0.1) {
101             deltaTime = 0.1;
102         }
103 
104         if (doBlend) {
105             updateColor(deltaTime);
106         }
107 
108         if (graphicsDevice.beginFrame()) {
109             graphicsDevice.clear(clearColor, 1.0, 0);
110 
111             graphicsDevice.endFrame();
112         }
113 
114         previousFrameTime = currentTime;
115     };
116 
117     // Once all initialization is complete and functions are declared,
118     // use setInterval to set the 'update' function to be called
119     // This method of creating a loop allows the Turbulenz Engine to
120     // hand control back to the browser and maintain the execution
121     // It is recommended to use a single setInterval to trigger
122     // updates at the rate required e.g. 60hz Updating that need to be
123     // triggered less frequently should use either currentTime or
124     // deltaTime to calculate when to update
125     var intervalID = TurbulenzEngine.setInterval(update, 1000 / 60);
126 
127     TurbulenzEngine.onunload = function destroyScene() {
128         // Clear the interval to stop update from being called
129         TurbulenzEngine.clearInterval(intervalID);
130 
131         // Clear any references to memory
132         clearColor = [];
133         blendColor1 = [];
134         blendColor2 = [];
135 
136         // Tell the Turbulenz Engine to force the js virtual machine
137         // to free as much memory as possible
138         TurbulenzEngine.flush();
139 
140         // Clear each native engine reference
141         graphicsDevice = null;
142         mathDevice = null;
143 
144         TurbulenzEngine.onunload = null;
145     };
146 };