parallax-effect

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 C# demo

Live examples

• deepview
• pixi.js
• three.js

Installation

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

  import * as Parallax from '../dist/parallax-effect.mjs';
  Parallax.init( view => {
    console.log( view );
  } );

or add it in script tag

  <script src="https://cdn.jsdelivr.net/npm/parallax-effect/dist/parallax-effect.min.js"></script>
  <script>
    Parallax.init( view => {
      console.log( view );
    } );
  </script>

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.

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

• smoothing head detection with EMA
• support for iOS/Macs
• lazy load for tfjs
• three.js/pixi.js examples
• mouse fallback
• gyroscope fallback

Contribution

Feel free to make issues or/and contribute.