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

• background
• three.js
• deepview
• deepview2

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 ]