Parallax Camera Effect

For quite some time, I’ve wanted to see how parallax camera works.
Basically, it allows to deform perspective just like your screen becomes a window.
Then, you move your point of view and perspective changes accordingly.

A famous video showing the effect:

Now the PG:

The important function is projViewFromRectangle.
From a world eye position, a projection and view destination matrix, a view ratio (rendering width / rendering height) and a fov, it computes the projection and view so the border of the screen corresponds to a world size quad of 1 at Z = 0;

This is also usable for eye position for VR. One picture is better than a thousand words:


from https://www.researchgate.net/figure/Camera-parallax-and-orientation-methods-toe-in-on-the-left-and-off-axis-on-the_fig5_323459560

The most important part of the code is to compute the distance from the eye to the plane at Z = 0 depending on a fixed fov.

const factor = Math.cos(halfFov) / Math.sin(halfFov);

Then, the eye Z, knowing the plan is easy to compute.
The main trick is to add a translation to the projection matrix. This is the main effect that deforms the projection.

Hope this helps doing nice effects with Babylon.js!

14 Likes

This is awesome !!!

1 Like

Nice! Would be fun to try wired to tensorflow.js (face landmark?)!

@Cedric you just need to find a tiny spot in the doc to reference it :slight_smile:

1 Like