Lighthouse has a new layout. Prefer the old one? Return to the old layout, and switch back any time from the link at the top of each page.

Encapsulate scene rendering loop in Scene start and stop funcs

#138

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;
         }
     }
});

Reported by lindsay.kay (at xeolabs) · August 6th, 2010 @ 04:47 AM

State: resolved
Milestone: V0.7.7

Activity

  1. lindsay.kay (at xeolabs)
    lindsay.kay (at xeolabs)
    • State changed from open to resolved

    August 7th, 2010 @ 02:29 AM

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.