4 точечного преобразование изображения

Question

Я пытаюсь реализовать что-то вроде этого: https://math.stackexchange.com/questions/296794/finding-the-transform-matrix-from-4-projected-points-with-javascript

Я в принципе хочу, чтобы преобразовать изображение в перспективно правильном пути, когда дается 4 очка. Мои знания о 3D-преобразованиях довольно ограничены, поэтому я уже пытаюсь правильно позиционировать изображение, используя PerspectiveCamera.

Мне не нужно перетаскивать конечные точки, я просто хочу легко определить это преобразование.

Причина, по которой я не буду делать это с помощью трёх.js и не использовать преобразование css, заключается в том, что мне нужна более высокая поддержка браузера и возможность сохранения изображения после этого, поэтому я подумал об использовании CanvasRenderer.

Answer 1

Хорошо, после многих испытаний я нашел способ, который в основном работает.

Я использовал этот код из этой реализации для преобразований css http://jsfiddle.net/dFrHS/1/ и изменил его, чтобы он возвращал 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; 
     } 

Тогда я могу создать образ, который я хочу, чтобы преобразовать так:

 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 
     )); 

Это работает perfektly. Трюк был image.applyMatrix(new THREE.Matrix4().makeTranslation(imageWidth/2, imageHeight/2, 0));, чтобы переместить начало трансформации таким образом, чтобы ожидаемый алгоритм. Пример: transform-origin: 0 0;, и этого не было в моих первых попытках.

Камера - это просто THREE.OrthographicCamera, поэтому проблем нет.

Итак, теперь единственная проблема с этим решением: кажется, что использование Projection of Three.js приведет к неправильному подбору изображения. Поэтому использование CanvasRenderer, как я и планировал, не работает должным образом.

Я мог бы попытаться настроить изображение так, чтобы оно могло поместиться снова, но средство отображения webgl в порядке со мной на данный момент. Но так как теперь у меня есть холст, я могу использовать метод toBlob и позволить пользователю сохранять изображение без серверного обратного перехода, которое все, что я хотел.