Calling

var meter = new FPSMeter( [ anchor ] [, options ] );

Accepts 2 arguments:

[ anchor ]

Type: Element

Element to which FPSMeter will be appended to. If omitted, document.body is used.

[ options ]

Type: Object

Object with FPSMeter options. You can see all available options here.

Examples

Using optional arguments:

// Meter will be attached to `document.body` with all default options.
var meter = new FPSMeter();

// Meter will use `light` theme.
var meter = new FPSMeter({ theme: 'light' });

// Meter will be attached to #target element, and will display graph.
var meter = new FPSMeter(document.getElementById('target'), { graph: 1 });

Measuring

FPSMeter has two measuring methods: .tickStart() that should be called at the beginning of each frame, and .tick() that should be called at the end of each frame.

Only .tick() method is required, with .tickStart() being optional.

Examples

Basic FPS measuring by using only .tick() method at the end of each frame rendering. In this case, FPSMeter in show: 'ms' mode displays the duration between frames, which is basically just a representation of FPS in milliseconds. That's so it would display at least something if you don't want to use .tickStart() method.

// Function that renders one frame
function render() {
	// ... rendering happens here ...
	meter.tick();
}

By calling .tickStart() at the beginning of rendering, FPSMeter can measure the duration it takes to render one frame, which is than displayed in show: 'ms' mode.

// Function that renders one frame
function render() {
	meter.tickStart();
	// ... rendering happens here ...
	meter.tick();
}

To see what else you can do with FPSMeter, read the list of all available methods here.