Projecting an image on a perspective wall in another image

Questions
,
1

Pasted File at March 1, 2022 3_39 PM
Pasted File at March 1, 2022 3_39 PM1247×423 49.8 KB

I have a world image (perspective) and a object that is meant to be projected on the wall of the world image, for defining the wall plane , I have 4 2d points and also there is an scaling factor.

world: {
        image: Blob,
        plane: {
            a: {
                x: number, // unit: px
                y: number // unit: px
            },
            b: {
                x: number, // unit: px
                y: number // unit: px
            },
            c: {
                x: number, // unit: px
                y: number // unit: px
            },
            d: {
                x: number, // unit: px
                y: number // unit: px
            },
        },
        scale: {
            a: {
                x: number, // unit: px
                y: number, // unit: px
            },
            b: {
                x: number, // unit: px
                y: number // unit: px
            },
            distance: number // unit: mm (distance in real world)
        }
    },

    object: {
        image: Blob,
        dpi: number, // calculate size in real world
        position: {  // where to position the image
            x: number, // unit: px
            y: number // unit: px
        }
    }
2

If you have the 4 points a,b,c,d on the world plane, you can find a homography H to transforms any point from the object onto that world plane. This can be done with Direct Linear Transform, either you implement it yourself, or use a library: GitHub - charlee/dltjs: A package for computing Direct Linear Transformation matrix.

If you are interested about the whole process, this answer does a good job explaining what happens:

Once you have found your H, reshape it from 1x9 into 3x3, and then you can simply map any point (x,y,1) from your object into the world space by multiplying H with point x.

1 Like