hey, I am new to threejs, I try to combine an image with webCam video in threejs. And the video is inconsistent with the image due to perspective. What i want to do is to apply perspective adjustment to image just like this.
i guess it can do with shader? hope someone can tell me the right way to do this. thanks a lot.
1 Like
The left image has perspective distortion, because the surface of the building is not frontal to the viewing position. One way to recover the image is to make the opposite transformation.
Here I present you another alternative – tilt the image forward and scale it vertically so that the new perspective distortion cancels the original perspective distortion. As a demo I use this image:
Here is the result:
https://codepen.io/boytchev/full/rNQMPpQ
2 Likes
Thank you for your reply. I will try it out.
1 Like
How did you calculate the distortion? Trial and error? Or is it connected to the red square?
In this specific case - trial and error, as the code does not analyze the image to check orientation of the subject in respect to the screen.