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 ]