Parallax effect in browser using web-camera

parallax-effect

Parallax effect in javascript using face tracking, can be a good improvement for 3d scenes. If the user prohibits using the camera, nothing loads. This library uses TFJS with WASM backend on CPU, so your GPU will be free.

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="../dist/parallax-effect.js"></script>
  <script>
    Parallax.init( view => {
      console.log( view );
    })
  </script>

Usage

View is 3d vector where x/y in range [-0.5, 0.5] and z is positive, 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.

Parallax.init(
  view => {
    console.log( view.x, view.y, view.z );
  }, {
    smoothEye: 0.8,
    smoothDist: 0.25,
    defautDist: 0.12,
    threshold = 0.85
  }
).then( errorCode => {
  console.log( errorCode );
});

Roadmap

References

1. Eric Lengyel. Oblique View Frustum Depth Projection and Clipping [url]

from Hacker News https://ift.tt/2NBBqEV