Skip to content

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

License

Notifications You must be signed in to change notification settings

munrocket/parallax-effect

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

parallax-effect bundlephobia

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

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
  • fix head rotation but not commit it in main branch yet
  • gyroscope fallback

Contribution

Feel free to make issues or/and contribute.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published