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!