Xeolabs SceneJS → V0.7.7

99% of the time a scene graph will be animated, and therefore rendered in a loop.

We need to encapsulate the render loop within SceneJS.Scene start and stop methods so that we can later introduce optimisations like FPS-on-demand. We'll keep the SceneJS.Scene#render method for single-frame renders.

Starts the rendering loop on the scene. You can specify an idleFunc that will be called within each iteration before
the scene graph is traversed for the next frame. You can also specify the desired number of frames per second to
render, which SceneJS will attempt to achieve.

Usage Example: Basic Loop

Here we are rendering a scene in a loop, at each frame feeding some data into it
(see main {@link SceneJS.Scene} comment for more info on that), then stopping the loop after ten frames are rendered:

var n = 0;
myScene.start({
    idleFunc: function(scene) {
        scene.setData({ someData: 5, moreData: 10 };
        n++;
        if (n == 100) {
            scene.stop();
        }
    },
    fps: 20
});

Usage Example: Picking

The snippet below shows how to do picking via the idle function, where we
retain the mouse click event in some variables which are collected when the idleFunc is next called. The idleFunc
then puts the scene into picking mode for the next traversal. Then any {@link SceneJS.Geometry} intersecting the
canvas-space coordinates during that traversal will fire a "picked" event to be observed by "picked" listeners at
higher nodes (see examples, wiki etc. for the finer details of picking). After the traversal, the scene will be back
"rendering" mode again.

 var clicked = false;
 var clickX, clickY;

 canvas.addEventListener('mousedown',
     function (event) {
         clicked = true;
         clickX = event.clientX;
         clickY = event.clientY;
 }, false);

 myScene.start({
     idleFunc: function(scene) {
         if (clicked) {
             scene.pick(clickX, clickY);
             clicked = false;
         }
     }
});