86 votos

Encontrar la matriz de transformación de 4 puntos proyectados (con Javascript)

Estoy trabajando en un proyecto mediante el uso de Chrome - JS y Webkit 3D de CSS3 transformación de la matriz.

El objetivo final es crear una herramienta para proyectos artísticos, el uso de proyectores y animación - un poco lejos de el uso de las matemáticas...

Estoy usando un proyector para proyectos de varios metros a lo largo de varios formas - como se ve en la imagen.

Lo que me gustaría hacer es que el usuario dibuja 4 puntos en la pantalla (2D x y y) y a partir de ahí extraer una matriz de objetos que podrían aplicarse a un elemento DIV de una dimensión de 100 por 100 píxeles.

Mediante la búsqueda de scaleX, scaleY, rotación, rotationX, rotationZ y probablemente algo de perspectiva que se pudiera aplicar a la div relativamente partido de la superficie.

Yo no estoy muy familiarizado con la geometría más allá del pecado y de la cos, y en 3D, en general, y ni siquiera sé si eso es algo factible. Si alguien pudiera ayudarme a empezar o me apunte en la dirección correcta, les agradecería mucho.

Aquí está un enlace de un gif animado, con la esperanza de hacerlo más claro de entender.

http://www.michael-iriarte.com/code/duncan.gif

125voto

gagneet Puntos 4565

El cálculo de una transformación proyectiva

Una transformación proyectiva de la (proyectiva) plano es único, definido por cuatro proyecta puntos, menos que tres de ellos son colineales. Aquí es cómo usted puede obtener los $3\times 3$ la transformación de la matriz de la transformación proyectiva.

Paso 1: Comenzar con 4 posiciones en la imagen de origen, el nombre $(x_1,y_1)$ través $(x_4,y_4)$, resolver el siguiente sistema de ecuaciones lineales:

$$\begin{pmatrix} x_1 & x_2 & x_3 \\ y_1 & y_2 & y_3 \\ 1 & 1 & 1 \end{pmatrix}\cdot \begin{pmatrix}\lambda\\\mu\\\tau\end{pmatrix}= \begin{pmatrix}x_4\\y_4\\1\end{pmatrix}$$

Las columnas de forma homogénea coordenadas: una dimensión más, creado mediante la adición de un $1$ como la última entrada. En los pasos siguientes, los múltiplos de estos vectores se utiliza para referirse a los mismos puntos. Ver el último paso para obtener un ejemplo de cómo convertir estas de nuevo en las coordenadas bidimensionales.

Paso 2: Escala de las columnas de los coeficientes sólo calculada:

$$A=\left(\begin{array}{lll} \lambda\cdot x_1 & \mu\cdot x_2 & \tau\cdot x_3 \\ \lambda\cdot y_1 & \mu\cdot y_2 & \tau\cdot y_3 \\ \lambda & \mu & \tau \end{array}\right)$$

Esta matriz se asignan $(1,0,0)$ a un múltiplo de $(x_1,y_1,1)$, $(0,1,0)$ a un múltiplo de $(x_2,y_2,1)$, $(0,0,1)$ a un múltiplo de $(x_3,y_3,1)$ y $(1,1,1)$ $(x_4,y_4,1)$. Por lo que se asignan estos cuatro vectores (llamados vectores de la base en las explicaciones posteriores) de las posiciones específicas en la imagen.

Paso 3: Repita los pasos 1 y 2 para las posiciones correspondientes en la imagen de destino, con el fin de obtener una segunda matriz se llama $B$.

Este es un mapa de vectores de la base a posiciones de destino.

Paso 4: Invertir $$ obtener $A^{-1}$.

$A$ los mapas de vectores de la base a la fuente de las posiciones, por lo que la inversa de la matriz de mapas en la dirección inversa.

Paso 5: Calcular el combinado de la Matriz $C = B\cdot A^{-1}$.

$A^{-1}$ mapas de las posiciones de fuentes a los vectores de la base, mientras que $B$ mapas de allí a destino posiciones. Así pues, la combinación de los mapas de la fuente de las posiciones de destino de las posiciones. Esta es la matriz de la transformación que estaban solicitando.

Paso 6: Para asignar una ubicación $(x,y)$ de la imagen de origen a su lugar correspondiente en la imagen de destino, calcular el producto

$$\begin{pmatrix}x'\\n\\z'\end{pmatrix} = C\cdot\begin{pmatrix}x\\y\\1\end{pmatrix}$$

Estas son las coordenadas homogéneas de su transformada punto.

Paso 7: Calcular la posición en el destino de la imagen como esta:

\begin{align*} x" &= \frac{x}{z} \\ y" &= \frac{y'}{z'} \end{align*}

Esto se llama dehomogenization de las coordenadas del vector.

Cómo utilizar esta transformación proyectiva con CSS

En general, una transformación no ser una transformación afín, por lo que no puede expresar esto en términos de transformaciones afines como la escala, la rotación y el corte, ya que estos no pueden expresar perspectiva. Usted puede tratar simplemente de establecer las dos primeras entradas de la última fila a cero, por lo que obtener una transformación afín que podría estar lo suficientemente cerca como para su transformación deseada.

Por otro lado, si usted puede utilizar un matrix3d transformación, entonces usted puede tomar el 2D proyectiva de la transformación de la matriz $C$ calculada como se describe anteriormente, y en uso de sus entradas para construir un 3D proyectiva matriz de transformación como esta:

$$\begin{pmatrix} C_{1,1} & C_{1,2} & 0 & C_{1,3} \\ C_{2,1} & C_{2,2} & 0 & C_{2,3} \\ 0 & 0 & 1 & 0 \\ C_{3,1} & C_{3,2} & 0 & C_{3,3} \end{pmatrix}$$

Esta transformación va a transformar $x$ y $y$ de coordenadas como en el anterior, pero dejar el $z$ coordenadas homogéneas de coordenadas de vectores. Dehomogenization podrían cambiar el valor de los $z$ coordenadas en el espacio, pero como no se preocupan realmente de estos, este debe ser lo suficientemente bueno.

He escrito una prueba-de-concepto de la aplicación. La interfaz de usuario es bastante crudo, pero la matemática funciona bastante bien. La aplicación no utiliza la matriz adjunta en lugar de a la inversa, tanto en la solución de las ecuaciones lineales en el paso 1 y en el reverso de transformación en el paso 4. El resultado difiere sólo por un escalar factor, que es irrelevante para homogénea coordenadas. La ventaja es que esto evita la computación de un montón de factores determinantes y la realización de un montón de divisiones.

Si usted quisiera, usted puede jugar al mismo juego de cinco puntos en el espacio 3D, con el fin de calcular el total espacial proyectiva matriz de transformación. Pero eso sólo tiene sentido si usted realmente tiene profundidad, sice no cuatro de los cinco puntos que pueden ser coplanares.

10voto

Andrew Vit Puntos 10630

Estoy bastante seguro de que no hay forma cerrada de solución general para este problema, que te deja con aproximaciones numéricas. Una simplificación de la técnica, sería la eliminación de la perspectiva de su problema y se imaginan a los cuatro puntos de sus visitantes empate para ser la sombra de una luz, brillando en el infinito. Usted podría entonces, básicamente, adivinar y comprobar, mediante conjeturas de lo que la sofisticación que usted desea.

He escrito una brutal demostración de lo que estoy hablando acerca de que contiene algunos la falta de sofisticación de los supuestos. Debido a que elimina perspectiva, no precisamente a resolver tu pregunta, pero a ver si los resultados pueden ser satisfactorios.

El usuario introduce cuatro puntos en un HTML canvas con su mouse. La secuencia de comandos, a continuación, intenta de forma iterativa convergen en un CSS transformación de una plaza para que coincida con la forma.

Me he ligado a una muestra de la salida. A la izquierda, el amarillo cuadrilátero es el original de dibujo a mano, los grises son las aproximaciones sucesivas, y el rojo es la estimación final. A la derecha, verá un cuadrado div con el estilo con el CSS de transformación.

Script output screenshot

Obvio que la actualización sería una mejor convergencia de la función, tal vez usando el Método de Newton o algo de los de su calaña, pero no he tomado el tiempo para averiguar las ecuaciones diferenciales parciales que esto requeriría.

(El código se ejecuta en el navegador de forma sincronizada en Javascript, y se bloquea el navegador en mi equipo de entre 5 y 20 segundos en promedio, así que ten cuidado.)

7voto

LinusR Puntos 21

Esta no es mi solución, sólo un enlace a lo que, para mí, era la solución perfecta:

http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/

La forma en que se hizo, se puede pegar el JS en la página en la que estamos trabajando y la línea de los puntos exactamente cómo usted desea, a continuación, copie el código CSS desde el inspector.

Como lo que puedo decir (que es sólo superficialmente), este hace lo mismo que la MvG JS tocar el Violín, pero es empaquetado de una manera que era más útil para mí. HTH!

1voto

Hurkyl Puntos 57397

Puedo estar equivocado, pero creo que la transformación debe ser una transformación proyectiva del plano; es decir, una transformación de Möbius.

Cualquier transformación de Möbius es completamente determinado por tres puntos; el enlace de wikipedia debe dar suficiente información para obtener la transformación.

Desde que le pide al usuario que proporcione cuatro puntos, es posible que él podía ofrecer la imposibilidad de un conjunto de puntos. Idealmente, la distorsión es menor de edad, y una estrategia razonable podría ser para calcular todos los cuatro posibles transformaciones (hay cuatro maneras de seleccionar las esquinas) y un promedio de las mismas.

Otra posibilidad es intentar corregir las cuatro estaciones, la búsqueda de una pequeña perturbación que ha cruzado la relación de 2, que (si he calculado correctamente) es la cruz de la relación de las predeterminada cuadrado con vértices 0, 1, 1+i, i. (Todas las transformaciones de los cuadrados deben tener la misma relación cruz!) A continuación, utilice la transformación correspondiente a la corregidos los extremos.

O usted podría sólo les permiten seleccionar las 3 estaciones y de relleno en el cuarto punto final para ellos, y permiten al usuario ajustar las esquinas hasta que él sea feliz.

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X