4 point image transformation

Question

I'm trying to implement something like this: https://math.stackexchange.com/questions/296794/finding-the-transform-matrix-from-4-projected-points-with-javascript

I basically want to transform an image in a perspectively correct way when given 4 points. My knowledge of 3d transformations is fairly limited so I already struggle to get an image positioned correctly while using a PerspectiveCamera.

I dont't need to be able to drag the end points, I just want to easily define that kind of transformation.

The reason I wan't to do this with three.js and not use a css transformation is that I need higher browser support and the capability to save the image afterwards so I thought of using the CanvasRenderer.

Answer 1

Ok, after a lot of trial I found a way that mostly works.

I used this code from this implementation for css transformations http://jsfiddle.net/dFrHS/1/ and changed it so it returns a Matrix4.

        function adj(m) { // Compute the adjugate of m
            return [
                m[4]*m[8]-m[5]*m[7], m[2]*m[7]-m[1]*m[8], m[1]*m[5]-m[2]*m[4],
                m[5]*m[6]-m[3]*m[8], m[0]*m[8]-m[2]*m[6], m[2]*m[3]-m[0]*m[5],
                m[3]*m[7]-m[4]*m[6], m[1]*m[6]-m[0]*m[7], m[0]*m[4]-m[1]*m[3]
            ];
        }
        function multmm(a, b) { // multiply two matrices
            var c = Array(9);
            for (var i = 0; i != 3; ++i) {
                for (var j = 0; j != 3; ++j) {
                    var cij = 0;
                    for (var k = 0; k != 3; ++k) {
                        cij += a[3*i + k]*b[3*k + j];
                    }
                    c[3*i + j] = cij;
                }
            }
            return c;
        }
        function multmv(m, v) { // multiply matrix and vector
            return [
                m[0]*v[0] + m[1]*v[1] + m[2]*v[2],
                m[3]*v[0] + m[4]*v[1] + m[5]*v[2],
                m[6]*v[0] + m[7]*v[1] + m[8]*v[2]
            ];
        }
        function basisToPoints(x1, y1, x2, y2, x3, y3, x4, y4) {
            var m = [
                x1, x2, x3,
                y1, y2, y3,
                1,  1,  1
            ];
            var v = multmv(adj(m), [x4, y4, 1]);
            return multmm(m, [
                v[0], 0, 0,
                0, v[1], 0,
                0, 0, v[2]
            ]);
        }
        function general2DProjection(
                x1s, y1s, x1d, y1d,
                x2s, y2s, x2d, y2d,
                x3s, y3s, x3d, y3d,
                x4s, y4s, x4d, y4d
        ) {
            var s = basisToPoints(x1s, y1s, x2s, y2s, x3s, y3s, x4s, y4s);
            var d = basisToPoints(x1d, y1d, x2d, y2d, x3d, y3d, x4d, y4d);
            return multmm(d, adj(s));
        }
        function project(m, x, y) {
            var v = multmv(m, [x, y, 1]);
            return [v[0]/v[2], v[1]/v[2]];
        }
        function transform2d(w, h, x1, y1, x2, y2, x3, y3, x4, y4) {
            var t = general2DProjection
            (0, 0, x1, y1, w, 0, x2, y2, 0, h, x3, y3, w, h, x4, y4);
            for(i = 0; i != 9; ++i) t[i] = t[i]/t[8];
            var matrix = new THREE.Matrix4();
            matrix.fromArray([
                t[0], t[3], 0, t[6],
                t[1], t[4], 0, t[7],
                0   , 0   , 1, 0   ,
                t[2], t[5], 0, t[8]
            ]);
            return matrix;
        }

Then I can create the image I want to transform like this:

        var imageWidth = 650;
        var imageHeight = 925;
        var texture = new THREE.TextureLoader().load("2b. neue Anzeige für BP.jpg");
        var material = new THREE.MeshBasicMaterial({map: texture, overdraw: 0.5});
        var planeGeometry = new THREE.PlaneGeometry(imageWidth, imageHeight, 10, 10);
        var image = new THREE.Mesh(planeGeometry, material);

        image.matrixAutoUpdate = false;
        image.applyMatrix(new THREE.Matrix4().makeTranslation(imageWidth / 2, imageHeight / 2, 0));
        image.applyMatrix(transform2d(
                imageWidth, imageHeight,
                -180, -373,
                72, -242,
                -395, -63,
                -145, 35
        ));

This works perfektly. The trick was the image.applyMatrix(new THREE.Matrix4().makeTranslation(imageWidth / 2, imageHeight / 2, 0)); to move the transformation origin in a way that the algorythm expected. The example did include transform-origin: 0 0; and that was missing in my first attempts.

The camera is just a simple THREE.OrthographicCamera so no fov problems there.

So now the only problem with this solution: It seems that using the Projection of Three.js will lead to the image not fitting correctly. Therefor using the CanvasRenderer as I originally planned does not work properly.

I could try to adjust the the image so it may fit again but the webgl renderer is fine with me for now. But since I now have a canvas I can use the toBlob method and let the user save the image without a server roundtrip which is all I wanted.