https://github.com/munrocket/parallax-effect

💫 Parallax effect in javascript using face tracking. An immersive view in 3d with webcam.
https://github.com/munrocket/parallax-effect

camera deepview parallax tfjs

Last synced: about 1 month ago
JSON representation

💫 Parallax effect in javascript using face tracking. An immersive view in 3d with webcam.

• Host: GitHub
• URL: https://github.com/munrocket/parallax-effect
• Owner: munrocket
• License: mit
• Created: 2020-04-26T18:28:56.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-09-28T10:00:03.000Z (about 2 years ago)
• Last Synced: 2024-10-30T20:07:45.525Z (about 1 month ago)
• Topics: camera, deepview, parallax, tfjs
• Language: JavaScript
• Homepage:
• Size: 15.1 MB
• Stars: 351
• Watchers: 3
• Forks: 16
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# parallax-effect [![bundlephobia](https://badgen.net/bundlephobia/minzip/parallax-effect)](https://bundlephobia.com/result?p=parallax-effect)

Parallax effect in javascript using face tracking, can be a good improvement for 3d scenes. This library uses TFJS with WASM backend on CPU, so your GPU will be free. Supports lazy loading.

Inspired by [@lucknknock](https://twitter.com/lucknknock) C# demo

### Live examples

* [deepview](https://munrocket.github.io/parallax-effect/examples/deepview.html)

* [pixi.js](https://munrocket.github.io/parallax-effect/examples/pixi.html)

* [three.js](https://munrocket.github.io/parallax-effect/examples/threejs.html)

![](https://habrastorage.org/webt/rj/65/g9/rj65g9_jtm2rgljgmk6yu5sjf6k.jpeg)

### Installation

Run `npm install parallax-effect` and import it as ES module

```js

  import * as Parallax from '../dist/parallax-effect.mjs';

  Parallax.init( view => {

    console.log( view );

  } );

```

or add it in script tag

```js

  

  

    Parallax.init( view => {

      console.log( view );

    } );

  

```

### Usage

*View* in code below is a 3d vector with components similar to spherical coordinates: x/y in range [-1, 1] and proportional to angle, z is proportional to distance from camera to head. Also you can check for successfull init or change default settings: smoothing, default distance between eyes to change z, threshold in blazeface model or change tfjs source links from jsdelivr to unpkg / own server.

```js

Parallax.init(

  view => {

    console.log( view.x, view.y, view.z );

  }, {

    smoothEye: 0.8, // smoothing eye (x, y)

    smoothDist: 0.25, // smoothing distance (z)

    defautDist: 0.12, // parameter for distance estimation

    threshold = 0.85 // blazeface detection probability

  }

).then( rafId => {

  console.log( 'cancelAnimationFrame(' + rafId + ')' );

}).catch( errorMessage => {

  console.log( errorMessage );

} );

```

### Roadmap

- [x] smoothing head detection with EMA

- [x] support for iOS/Macs

- [x] lazy load for tfjs

- [x] three.js/pixi.js examples

- [x] mouse fallback

- [x] fix head rotation but not commit it in main branch yet

- [ ] gyroscope fallback

### Contribution

Feel free to make issues or/and contribute.