Calling

MaksJS edited this page Apr 23, 2013 · 3 revisions
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.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.