How to build such a perspective?

Question

JavaScript

Please help me understand how this might work.

https://edco.renoworks.com/pages/project/new

Here, on the uploaded picture, you can draw surfaces, give them perspective and load materials into them.
My problem is that I don't understand how perspective works here. How did they do it? that by specifying 4 points, they create an infinite plane in this perspective, load an image into it and then crop it along the borders of the drawn area. By exposing the perspective once, I can then enlarge the area.



There are ways to calculate perspective like this - https://bl.ocks.org/mbostock/10571478 . But here I work only with the area between 4 points. And if the cropping area is larger than the perspective area, then the material will not fill it completely.
I hope I was able to explain what I mean)

Answer 1

Adobe Photoshop has a similar tool called Vanishing Point .
4 points define a grid that can be extended beyond the borders of the quadrilateral. Those. the points only define the distortion characteristics for the whole plane. The picture placed on the resulting perspective grid can be enlarged and moved.
A quadrilateral is considered initially a rectangle with a fixed proportion of width to height. For example, a square. When its corners are moved, the opposite faces are no longer parallel and a vanishing point appears - sort of like a point at infinity.
More about perspective and its mathematics (in English), for example , here and here .
In total, 4 points define formulas that allow you to project onto the screen from the inside of the plane. And an image is placed in this plane, which is moved and scaled, and it is displayed on the screen plane.
The mask removes excess in screen coordinates.