The Frame Detection Loop

There are two types of frame detection loops. In general, in the browser, the animation loop will be the most useful. This will tick at 60fps and grab whatever the latest frame is at that point.

The other type of loop is a device loop, where the device will ping you with every new frame as soon as it is available. Those working in Node will likely want this type of loop. Whichever frame event name the controller is declared for will be the default given by the event type frame, but you also have the flexibility to write functions for each type of frame specifically. Some apps may even want to use both types of frames; this is allowed.

Demo:

This can be seen in-action by using the chrome developer tools.

Flame-chart

Here, we debug the LeapJS Rigged Hand running on skeletal tracking beta. By looking at the flame chart, we can see whether our app is bottlenecked by either the CPU or the GPU. Because there is whitespace between each onAnimationFrame callback, we know we're doing OK.

Learn more about V8 performance Javascript

Usage:

To illustrate, this will use the animation loop since we're in a browser and didn't specify otherwise in the controller options:

  var controller = new Leap.Controller();

  controller.on('frame', function() {
  // your code here
  });

  controller.connect();

A more verbose version of above:

  var controller = new Leap.Controller();

  controller.on('animationFrame', function() {
  // your code here
  });

  controller.connect();

To use the deviceFrame instead you can do:

  var controller = new Leap.Controller({frameEventName: "deviceFrame"});

  controller.on('frame', function() {
  // your code here
  });

  controller.connect();

Or:

  var controller = new Leap.Controller();

  controller.on('deviceFrame', function() {
  // your code here
  });

  controller.connect();


Leapjs-logo-270