1

Transformaciones geométricas

C ONTENTS II. T RANSFORMACIONES Y COORDENADAS HOMOGÉNEAS

En informática gráfica, realizar la transformación de un
I Introducción 1 punto o vector v̄ en otro nuevo punto v̄ 0 se resuelve multipli-
cando el punto v̄ por una matriz. Dado un vector v̄ = (x, y, z),
II Transformaciones y coordenadas homogéneas 1 si multiplicamos el vector por una matriz A, transformamos
el vector en otro nuevo vector v̄ 0 = (x0 , y 0 , z 0 ). Si el vector
III Transformadas básicas 1 representa un punto, el resultado es un cambio de posición
III-A Traslación . . . . . . . . . . . . . . . . 2 de dicho punto. El vector v̄ se transforma en v̄ 0 al realizar la
III-B Rotación . . . . . . . . . . . . . . . . . 2 operación de multiplicación v̄ 0 = A · v̄. En dos dimensiones:
III-B1 Rotación en el eje OZ . . . . 2  0      
x a11 a12 x a11 x + a12 y
III-B2 Rotación en el eje OX . . . . 3 = = (1)
y0 a21 a22 y a21 x + a22 y
III-B3 Rotación en el eje OY . . . . 3
III-C Escala . . . . . . . . . . . . . . . . . . 3 Las transformaciones que se pueden expresar de la forma
v̄ 0 = A · v̄ se llaman transformaciones lineales.
IV Otras transformaciones 3 Pero no todas las transformaciones con las que nos vamos
IV-A Corte . . . . . . . . . . . . . . . . . . . 3 a encontrar pueden ser expresadas mediante transformaciones
lineales. En particular, y como veremos, las transformaciones
IV-B Reflexión . . . . . . . . . . . . . . . . . 3
de traslación necesitan ser expresadas mediante una transfor-
mación afín, que se expresa como v̄ 0 = A · v̄ + b̄. En dos
V Composición de Transformaciones 4
dimensiones tendríamos la expresión:
V-A Rotación desde un punto pivote general 4
V-B Escala de punto fijo general . . . . . . 4
x0
        
a11 a12 x b1 a11 x + a12 y + b1
= + =
y0 a21 a22 y b2 a21 x + a22 y + b2
VI Primitivas de transformaciones 5 (2)
Para poder expresar transformaciones afines empleando una
VII El grafo de escena 5 única matriz, se introducen las coordenadas homogéneas.
Un punto de R3 (x, y, z) se representa en coordenadas ho-
VIII Más información 5 mogéneas como (x, y, z, w) o como (x, y, z, 1). En R2 , el
punto (x, y) se representa en coordenadas homogéneas como
References 6 (x, y, w) o como (x, y, 1). Sólo es un artificio que empleamos
para poder representar las transformaciones geométricas como
I. I NTRODUCCIÓN operaciones con matrices. En el caso anterior, la misma
transformación quedaría descrita como:
Dada una malla de puntos 2D o 3D o dado un modelo
3D, podemos modificarlo aplicando sobre él una serie de x0
      
a11 a12 b1 x a11 x + a12 y + b1
transformaciones geométricas. En este tema veremos como, las 0
 y  =  a21 a22 b2   y  =  a21 x + a22 y + b2 
distintas transformaciones geométricas que podamos aplicar 1 0 0 1 1 1
sobre un objeto 3D, se traduce en la creación de una matriz (3)
que se utiliza para multiplicar los puntos del objeto 3D a Trabajar en coordenadas homogéneas implica añadir una
transformar. Las transformaciones básicas son la traslación, fila y columna adicional a las matrices de transformación. Si
la rotación y el escalado. Existen otras más sofisticadas, trabajamos en dos dimensiones, las matrices de transformación
pero finalmente cada transformación se traduce en una matriz serán de 3 × 3, mientras que si trabajos en tres dimensiones
numérica diferente que multiplica a los puntos del objeto 3D. las matrices de transformación serán de 4 × 4.
En este tema primero describimos el concepto de coor-
denadas homogéneas, necesarios para poder aplicar multi- III. T RANSFORMADAS BÁSICAS
plicaciones de matrices para realizar transformaciones que Dada un objeto 3D o 2D podemos modificarlo aplicando
impliquen traslaciones de objetos. Después describimos las sobre él una serie de transformaciones. Las transformaciones
transformaciones básicas y las transformaciones compuestas. básicas son la traslación, la rotación y el escalado. A contin-
Finalizamos el tema presentando las primitivas para la creación uación describiremos en detalle cada una de ellas. Describir
y aplicación de matrices de transformación. Finalizamos pre- la transformación consiste en encontrar la matriz que, al mul-
sentando el concepto de grafo de escena y su relación con la tiplicarla por los puntos del objeto, realice la transformación
aplicación de matrices de transformación. esperada.
 2

y
y

t
y
(-1,1,4)

(x2,y2)
t
x

(x1,y1) x z

Fig. 1: Traslación de un objeto bidimensional (izquierda) y

tridimensional (derecha)
(x’,y’,1)=R( θ) (x,y,1)
θ
A. Traslación
(x,y,1) x
Realizamos una traslación sobre un objeto cuando queremos
que cambie su posición a lo largo de una línea recta. La figura φ
1 muestra como los objetos 2D (la muñeca y el triángulo)
se desplazan a su derecha cambiando siguiendo la dirección
Fig. 2: Rotación de un objeto bidimensional
indicada por el vector t̄. El objeto 3D de la parte izquierda de
la figura 1 se desplaza siguiendo la dirección (−1, 1, 4).
En 2D, si un punto está en la posición (x, y) y la posición
final a la que queremos trasladarlo es la (x0 , y 0 ), entonces el Como se aprecia en la figura 2 para un punto (x, y) que
vector de traslación o de cambio t̄ = (tx , ty ) será tal que: queremos rotar hasta el punto (x0 , y 0 ) desde el centro de
coordenadas, tenemos que:
x0 = x + t x y 0 = y + ty (4)
x0 = r cos(φ + θ) = r cos(φ) cos(θ) − r sin(φ)sin(θ)
Empleando coordenadas homogéneas la matriz de traslación y0 = r sin(φ + θ) = r cos(φ) sin(θ) − r sin(φ)cos(θ)
sería: (8)
 0      
x 1 0 tx x x Las coordenadas originales son :
 y 0  =  0 1 ty   y  = T (tx , ty )  y 
1 0 0 1 1 1 x = r cos(φ) y = r sin(φ) (9)
(5)
t̄ es el vector de desplazamiento y T (tx , ty ) es la matriz de Con lo que al sustituir tenemos
traslación. En 3D, si un punto está en la posición (x, y, z) y
la posición final a la que queremos trasladarlo es la (x0 , y 0 , z 0 ) x0 = x cos(θ) − y sin(θ)
(10)
entonces el vector de traslación o de cambio (tx , ty , tz ) será: y0 = x sin(θ) + y cos(θ)
x0 = x + tx y 0 = y + ty z 0 = z + tz (6)
En coordenadas homogéneas la matriz de transformación sería:
Empleando coordenadas homogéneas la matriz de traslación
x0
     
sería: cos(θ) − sin(θ) 0 x x
 0        y 0  =  sin(θ) cos(θ) 0   y  = R(θ)  y 
x 1 0 0 tx x x 1 0 0 1 1 1
 y0   0 1 0 ty 
 y
 = T (tx , ty , tz )  y  (11)
  
 0 =
 z   0 0 1 tz   z
  z  Para representar la rotación desde un punto pivote distinto
1 0 0 0 1 1 1 al centro del sistema de coordenadas, lo haremos por composi-
(7) ción de transformaciones y lo veremos en la próxima sección.
Para trasladar un objeto aplicaremos la trasformada a cada
Para especificar una rotación en 3D es necesario especificar
uno de los puntos que lo componen.
el ángulo de rotación θ, y el eje de rotación. Las rotaciones
elementales se realizan con respecto a los ejes OX, OY y OX.
B. Rotación En la figura 3 se muestra cómo la posición final de la figura
Realizamos una rotación sobre un objeto cuando queremos es diferente en función del eje con respecto al cual se hace la
que cambie su posición a lo largo de un arco de circunferencia. rotación.
Para especificar una rotación es necesario especificar el án- 1) Rotación en el eje OZ: En coordenadas homogéneas la
gulo de rotación θ, y el punto de pivote (xr ,yr ). De momento matriz de transformación sería:
las rotaciones que vamos a especificar en esta sección utilizan  0      
en centro de coordenadas (0, 0) como punto pivote. La figura  x0   cos(θ) − sin(θ) 0 0   x  x
y   sin(θ) cos(θ) 0 0   y   y 
2 (parte superior) muestra una rotación de un ángulo θ en   z0  =  = RoZ(θ)  
0 0 1 0  z   z 
sentido antihorario de un segmento y de una figura 2D (el 1 0 0 0 1 1 1
teléfono). (12)
 3

y y

-45 grados
-20 grados
45 grados

x
x
z x z z

Fig. 3: Rotación de un objeto tridimensional con respecto al

eje OZ (izquierda), OY (centro) y OX (derecha).
Fig. 5: Ejemplo de operación de corte extraído de [1]

2) Rotación en el eje OX: En coordenadas homogéneas la

matriz de transformación sería: En forma de transformadas homogéneas, aparece la matriz de
transformación.
x0
      
1 0 0 0 x x
 y0   x0
      
 0 = 0 cos(θ) − sin(θ) 0 
  y  = RoX(θ) 
   y 
 sx 0 0 0 x x
 z   0 sin(θ) cos(θ) 0   z  z   y0   0 sy 0 0   y
 = E(sx , sy , sz )  y 
   
 0 = 
1 0 0 0 1 1 1  z   0 0 sz 0  z   z 
(13) 1 0 0 0 1 1 1
3) Rotación en el eje OY: En coordenadas homogéneas la (18)
matriz de transformación sería: Los objetos que se transforman aplicando las ecuaciones

x0
 
cos(θ) 0 sin(θ) 0

x

x
  anteriores se escalan y cambian de posición. Los factores
 y0   0 1 0 0  de escala menores que 1 acercan el objeto al centro de
 y  = RoY (θ)  y 
   
 0 =
 z   − sin(θ) 0 cos(θ) 0  z   z  coordenadas y los mayores que 1 lo alejan (ver figura 4). Para
1 0 0 0 1 1 1 evitar este efecto, muchas veces indeseable, debe aplicarse una
(14) transformación con respecto al punto pivote que veremos en
las secciones siguientes.
C. Escala
IV. OTRAS TRANSFORMACIONES
Una transformación de escala altera el tamaño de un objeto.
Para hacer la escala de un objeto multiplicamos los puntos que A. Corte
lo componen por los factores de escala sx y sy . Una transformación de corte (del inglés shear) sirve para
desplazar cada punto en una dirección dada en una cantidad
x0 = sx · x, y 0 = sy · y (15) que es proporcional a su distancia al origen. Se consigue
un efecto de inclinación muy útil para dar la sensación de
En forma de transformadas homogéneas, aparece la matriz de
perspectiva. Las matrices de transformación en la dirección X
transformación:
 0       e Y en el caso 2D son:
x sx 0 0 x x
 y 0  =  0 sy 0   y  = E(sx , sy )  y     
1 s 0 1 0 0
1 0 0 1 1 1 CorteX(s) =  0 1 0 , CorteY (s) =  s 1 0 
(16) 0 0 1 0 0 1
(19)
El factor s determina la cantidad de desplazamiento en la
y dirección dada. La figura muestra un ejemplo de operación de
corte 5.
y S=(0.5, 2, 0.5)

B. Reflexión
y’=2y
escala 2 Una transformación de reflexión realiza la imagen especular
y
x
escala 1/2 de la figura geométrica sobre la que se aplica. Para ello hay
x
x’=2x
x
x
que establecer un eje o plano de reflexión dependiendo de si
trabajamos en 2D o 3D. Las matrices de reflexión en el eje X
y en el eje Y en 2D son respectivamente:
Fig. 4: Escalado de objetos y puntos en 2D (izquiera) y en 3D
(derecha).    
−1 0 0 1 0 0
Ref lexX(s) =  0 1 0  , Ref lexY (s) =  0 −1 0 
Para hacer la escala de un objeto en 3D multiplicamos los 0 0 1 0 0 1
puntos que lo componen por los factores de escala sx , sy y (20)
sz . La figura 6 muestra una operación de reflejo con respecto
x0 = sx · x, y 0 = sy · y, z 0 = sz · z (17) al eje y.
 4

y y

Paso1

(Tx, Ty)
Paso2
Paso1
(Tx, Ty)
θ
Paso2
θ
x x

a) b)

Fig. 6: Ejemplo de operación de reflejo extraído de [1] Fig. 8: Invertir el orden de las transformaciones altera sig-
nificativamente el resultado final: en la parte (a) primero se
traslada y luego se gira. En la parte (b) primero se gira y
luego se traslada.

traslación (R(θ)T (tx , ty )).

Nos centramos en detallar con transformaciones compuestas
cuyo uso es más frecuente: la rotación desde un punto pivote
y la escala con respecto a un punto fijo.

A. Rotación desde un punto pivote general

Con la transformación de rotación que vimos en el apartado
III-B sólo podemos hacer giros respecto al origen de coor-
denadas. Para poder girar un objeto desde un punto pivote
(xp , yp ) proponemos la siguiente combinación de transforma-
ciones.
1) Hacemos un transformación de manera que el punto fijo
Fig. 7: Ejemplo de operación composición de matrices extraído pase a estar en el centro de coordenadas.
de [1] 2) Giramos el objeto el ángulo indicado con respecto al
centro de coordenadas.
3) Trasladamos el objeto de manera que el punto pivote
V. C OMPOSICIÓN DE T RANSFORMACIONES regrese a su posición original.
Dadas las matrices de transformación elementales T (tx , ty ), Podemos expresar estos puntos como:
R(θ), E(sx , sy ) podemos combinarlas para crear transforma-
R(xp , yp , θ) = T (xp , yp )R(θ)T (−xp , −yp ) (21)
ciones más complejas. Para ello empleamos la multiplicación
de matrices. De hecho, la composición de transformaciones En la figura 9 vemos como para rotar la imagen empleando
puede aplicarse a cualquier matriz de transformación y no sólo el punto pivote, primero hemos de trasladar la escena hasta
a traslaciones, rotaciones o escalas. hacer coincidir dicho punto con el origen, después realizamos
De forma general A y B son matrices de transformación la rotación, y por último deshacemos la traslación.
entonces C = A· B es una nueva matriz de transformación. El
resultado de aplicar C es el mismo que el de aplicar B y luego B. Escala de punto fijo general
A al resultante. Dicho de otro modo, si partimos de v¯1 y quer-
emos aplicar C para obtener v¯3 , aplicamos v¯3 = C v¯1 , o lo que La transformada de escala descrita en el apartado III-C
es lo mismo v¯3 = A·B v¯1 . Si llamamos v2 = v1 ·B, v3 = Av2 . tiene el inconveniente de que los objetos cambian de posición.
Lo que significa que las operaciones compuestas se pueden Para evitarlo podemos plantear una nueva transformación
realizar paso a paso (multiplicando los vectores resultantes por llamada transformación de punto fijo (xp , yp ) de manera que
cada matriz) o de una vez (multiplicando primero las matrices) especificamos un punto y garantizamos que dicho punto no se
obteniendo el mismo resultado: v¯3 = A(B v¯1 ) = (AB)v¯1 . La traslada. Para realizar esta transformación:
figura 7 ilustra el proceso aplicando primero una escala y luego 1) Hacemos un transformación de manera que el punto fijo
una rotación. La transformación compuesta puede hacerse paso pase a estar en el centro de coordenadas.
a paso o de una vez multiplicando las matrices. 2) Realizamos el escalado.
La multiplicación de matrices cumple la propiedad asocia- 3) Deshacemos la primera transformación.
tiva pero no la conmutativa. Quiere esto decir que alterar el Podemos expresar esta composición de transformaciones
orden en el que se hacen las transformaciones elementales como:
puede alterar considerablemente el resultado final. En la figura
E(xp , yp , sx , sy ) = T (xp , yp )E(sx , sy )T (−xp , −yp ) (22)
8 se observa un ejemplo que ilustra este hecho: el resultado es
diferente si primero realizamos la traslación y luego la rotación En la figura 9 se observa como para escalar la figura
(T (tx , ty )R(θ)) o si primero realizamos la rotación y luego la representada desde el punto fijo, primero es necesario trasladar
 5

y
Punto
Fijo (Xp, Yp)
Punto de
Pivote
(Xr,Yr) θ

Paso 3 Paso 2 Paso 3

Traslacion del
punto de pivote Paso 1

Paso 1
Paso 2
θ x

Fig. 9: Rotación desde punto pivote (izquierda) y escalado

sobre punto fijo (derecha)

dicho punto al origen, después realizar la escala y por último

deshacer la traslación.
Aunque estos ejemplos son en 2D, la extensión a 3D es
inmediata.

VI. P RIMITIVAS DE TRANSFORMACIONES

En un programa de diseño gráfico no vemos las matrices
de transformación, pero internamente se crean y se utilizan
constantemente. Por ejemplo cuando en Inkscape trasladamos
un objeto, al mover el ratón estamos indicando cual el vector
de desplazamiento que el programa debe utilizar para crear la
matriz correspondiente y aplicarla a cada punto del objeto. Fig. 10: Los objetos que componen una escena, suelen estar
En el caso de SVG, todos los objetos tienen un atributo organizados jerárquicamente. En este ejemplo, sobre el ferry
que se llama transform que se utiliza para especificar las op- hay un vehículo con cuatro ruedas. Se espera que al mover el
eraciones de transformación geométrica que se deben aplicar
sobre un objeto dado. Así por ejemplo: ferry se mueva también el vehículo. Al mover el vehículo se
han de mover sus ruedas.
<text x="60" y="105"
transform="translate(30) rotate(45 50 50)">
Hola Mundo </text>

Transform {
hace que el texto se desplace 30 unidades en x y se rote 45 scale 2 1 2
grados empleando el punto (50, 50) como pivote. Las transfor- rotation 0 1 0 0.78
translation 1 1 1
maciones se aplican en orden inverso a como son declaradas, children [
en este caso primero se rota y luego se traslada. Entre las ...
]
transformaciones que incluye el lenguaje están translate, }
scale, rotate, skewX, skewY y matrix. Esta última permite
especificar literalmente la matriz de transformación completa. Todos los objetos que se declaran dentro del apartado
children se ven afectados por las transformaciones de escala,
VII. E L GRAFO DE ESCENA rotación y traslación que se declaran justo antes. Cuando se
La mayoría de escenas admite una organización jerárquica. computan las transformaciones todas ellas afectan a todos los
La figura 10 extraída de [1] muestra las relaciones jerárquicas elementos vinculados como hijos en niveles inferiores de la
de un grupo de objetos sencillos. jerarquía.
En el estándar de especificación de gráficos 3D VRML
(Virtual Reality Moldeling Language, se utiliza el concepto de VIII. M ÁS INFORMACIÓN
nodo para agrupar objetos. Un nodo puede agrupar diferentes Los libros básicos de referencia sobre informática gráfica,
formas (shapes) que contienen a su vez los elementos gráficos. todos suelen incluir un capítulo o varios sobre transforma-
En la figura 10 podría haber un nodo que contenga la ciones geométricas. Por ejemplo, el capítulo 5 de [2] está
carrocería del coche y las ruedas. Otro nodo diferente podría dedicado a este asunto con una interesante extensión dedicada
incluir el barco y el coche. La relación jerárquica entre nodos al cómputo eficiente de estas matrices. En [3] se profundiza
configura el grafo de escena. Utilizar un grafo de escena tiene dedicando dos capítulos, uno para las transformaciones en
la ventaja de que diferentes elementos de la escena pueden ser 2D (capítulo 10) y otro para las transformaciones en 3D
tratados como un todo. (capítulo 11). Además, el capítulo 12 se dedica a cuestiones de
VRML tiene un tipo de nodo especial que se llama Trans-
form Nodes. A la hora de aplicar una transformación ge- implementación que tienen que ver con la sección VI dedicada
ométrica, las transformaciones se asocian a un nodo que está a primitivas gráficas. El capítulo 6 de [1] es el que más se
en un determinado nivel de la jerarquía. Con este tipo de nodos
se declaran una serie de transformaciones que afectan a todos ajusta al nivel presentado en este tema, habiendo reutilizado
los nodos hijos. En el siguiente ejemplo: incluso varias ilustraciones.
 6

R EFERENCES
[1] S. Marschner and P. Shirley, Fundamentals of computer graphics. CRC
Press, 2015.
[2] D. Hearn, M. P. Baker et al., Computer graphics with OpenGL. Upper
Saddle River, NJ: Pearson Prentice Hall„ 2004.
[3] J. D. Foley, F. D. Van, A. Van Dam, S. K. Feiner, J. F. Hughes, E. Angel,
and J. Hughes, Computer graphics: principles and practice. Addison-
Wesley Professional, 2014.