I'm trying to project a picture frame on a wall using using the css property matrix3D. The idea is: we draw the four corners of the wall on any room photo and the picture frame is projected on the wall with its proper dimensions.
I started from the fantastic info from this question, which allows to calculate the projection matrix for an image on the full area drawn by the four points. The next step would be to scale the picture frame back to its actual dimensions.
For the y axis, it's relatively easy, interior roof height is relatively standardized, so I can assume a value for the wall height and just use the ratio (frame height) / (wall height). For the x axis, we could potentially have any length, and I would rather avoid input from the user. So I am looking for a way to estimate the proper scale to apply.
What would be the best way to tackle the x axis scaling? I tried a lot of things, mostly based on trigonoguesswork with no success. I don't need the projection to be exact, only to display a frame that looks credible (and which does not vary too much with the wall length).
