https://github.com/rohan-deshpande/fps-locker

Manages time based updates to ensure a solid FPS is always maintained where possible
https://github.com/rohan-deshpande/fps-locker

Last synced: 2 days ago
JSON representation

Manages time based updates to ensure a solid FPS is always maintained where possible

• Host: GitHub
• URL: https://github.com/rohan-deshpande/fps-locker
• Owner: rohan-deshpande
• Created: 2020-01-12T20:54:03.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-05-07T17:56:15.000Z (over 1 year ago)
• Last Synced: 2024-12-05T19:07:44.448Z (19 days ago)
• Language: JavaScript
• Homepage:
• Size: 543 KB
• Stars: 1
• Watchers: 4
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# FPS Locker

- [Why?](#why)

- [Usage](#usage)

  * [Installation](#installation)

  * [Module](#module)

  * [Script Tag](#script-tag)

- [Usage with Three.js](#usage-with-threejs)

## Why?

Maintaining a steady frame rate in on a wide variety of devices and screens that refresh at different rates is challenging. The browser's own `requestAnimationFrame` API does not really provide a way to do this natively, and many popular solutions posted on StackOverflow and other forums are either bug prone or do not accommodate for edge cases such as a user navigating away from a window/tab that is running `requestAnimationFrame` and then coming back later.

`fps-locker` attempts to solve these issues through a dead simple API that is agnostic of how your animation workflow works. As a default, it will ensure that if animation frames _can_ update at 60FPS on the device they are rendering on, then they will. This is of course not possible if your application is slow or the machine it is running on does not have enough resources to maintain a high frame rate. It is also possible to update at a different FPS.

## Usage

### Installation

```

npm i -S fps-locker

```

### Module

```javascript

import FpsLocker from 'fps-locker';

const updater = new FPSLocker(() => {

  allMyAnimations();

});

const render = () => {

  const animate = now => {

    requestAnimationFrame(animate);

    updater.update();

  };

};

render();

```

### Script Tag

In your HTML ``:

```html

```

In your app:

```javascript

const updater = new window.FPSLocker(() => {

  allMyAnimations();

});

const render = () => {

  const animate = now => {

    requestAnimationFrame(animate);

    updater.update();

  };

};

render();

```

## Usage with Three.js

It's advised that you call your Three app's `renderer.render` method **after** your updates have performed and not within the supplied update function itself.

```javascript

import FpsLocker from 'fps-locker';

const updater = new FPSLocker(() => {

  allMyAnimations();

});

const render = () => {

  const animate = now => {

    requestAnimationFrame(animate);

    updater.update();

    myThreeWebGlRenderer.render(myScene, myCamera);

  };

};

render();

```