Matemáticas para Gráficos 3D con OpenGL

Introducción.

Las matemáticas son el lenguaje oculto de los gráficos por computadora: nos permiten describir y manipular situaciones complejas que, de otra forma, serían difíciles de abordar. Sin embargo, los símbolos cobran sentido solo cuando comprendemos lo que representan y cómo se aplican en la práctica.

En programación gráfica, la mayoría de los efectos que percibimos como naturales en una escena 3D —movimiento de objetos, escala, perspectiva, iluminación o sombras— son transformaciones matemáticas cuidadosamente aplicadas. No es necesario ser un matemático profesional; lo esencial es aprender las nociones suficientes para usar las matemáticas de forma efectiva dentro de OpenGL.

English version of this article. Click here

En este articulo se presentan los fundamentos que sostienen el pipeline gráfico: sistemas de coordenadas, notación homogénea de puntos, matrices y sus transformaciones, y operaciones vectoriales clave. Lejos de ser conceptos abstractos, estas herramientas serán indispensables al diseñar y animar escenas tridimensionales.

1. Sistemas de Coordenadas en 3D: La Base de Todo Mundo Virtual

Al ingresar al universo de los gráficos 3D, lo primero que debemos comprender es el espacio en el que se desarrolla todo. Así como un cartógrafo necesita de latitud y longitud para situar un punto en un mapa, un programador gráfico requiere un sistema de coordenadas para definir la posición, orientación y escala de cada objeto dentro de una escena. Este sistema constituye el marco de referencia invisible sobre el que se levanta cualquier mundo virtual.

1.1 Definición de los Ejes X, Y y Z

Un sistema de coordenadas tridimensional está formado por tres ejes ortogonales (perpendiculares entre sí) que se cruzan en un punto común, el origen (0, 0, 0):

• Eje X: Representa la dirección horizontal (izquierda-derecha). Por convención, los valores positivos se extienden hacia la derecha y los negativos hacia la izquierda.

• Eje Y: Representa la dirección vertical (arriba-abajo). Los valores positivos crecen hacia arriba y los negativos hacia abajo.

• Eje Z: Representa la profundidad (adelante-atrás). Es el eje que otorga tridimensionalidad, diferenciando un plano bidimensional de un espacio 3D real.

Cualquier punto dentro de este espacio puede describirse de manera única mediante un trío de valores (X, Y, Z), conocidos como coordenadas o vector de posición.

1.2 La Diferencia Crucial: Sistemas Diestros (Right-Handed) vs. Zurdos (Left-Handed)

A primera vista, definir tres ejes parece trivial. Sin embargo, la forma en que se orientan en la práctica determina toda la coherencia espacial de la escena. Aquí es donde aparece una distinción fundamental: los sistemas de coordenadas diestros y zurdos.

• Sistema Diestro (Right-Handed):
  Imagina tu mano derecha abierta. Apunta los dedos (excepto el pulgar) en la dirección positiva del eje X. Luego dóblalos hacia la dirección positiva del eje Y. Tu pulgar extendido señalará automáticamente la dirección positiva del eje Z.

  • Visualización: el eje Z positivo “sale” de la pantalla hacia el observador. Este sistema es el estándar en matemáticas y física, y también el que usa OpenGL de forma predominante.

• Sistema Zurdo (Left-Handed):
  Ahora haz el mismo gesto con tu mano izquierda. Los dedos siguen apuntando hacia X positivo y al doblarlos hacia Y positivo, el pulgar indicará la dirección positiva del eje Z.

  • Visualización: en este caso, el eje Z positivo se interna “hacia adentro” de la pantalla, alejándose del observador. Este sistema es empleado en Direct3D y puede resultar más intuitivo en entornos bidimensionales, ya que un mayor valor de Z equivale a “más lejos”.

1.3 Consecuencia Práctica: Rotaciones Positivas

La elección entre un sistema diestro o zurdo no es un mero tecnicismo. Una de sus implicaciones más directas es la definición de las rotaciones positivas.

• En un sistema diestro, la dirección del giro se determina aplicando la regla de la mano derecha: si apuntas el pulgar en la dirección positiva de un eje, la curva de los demás dedos indica el sentido positivo de rotación.

• En un sistema zurdo, se aplica la misma regla, pero con la mano izquierda.

Si se mezclan ambos sistemas en un mismo proyecto, los objetos girarán en sentido contrario al esperado, lo que puede generar inconsistencias difíciles de detectar. Por ello, es esencial tener claro desde el inicio cuál sistema de coordenadas se está utilizando.

2. Representación de Puntos: Precisión y Potencia en Notación Homogénea

Definir la posición de un vértice es quizá la acción más fundamental en los gráficos por computadora. Sin embargo, la manera en que representamos matemáticamente estos puntos tiene un impacto directo en la eficiencia y en las posibilidades de transformación que ofrece un motor gráfico. La evolución desde la notación cartesiana clásica hacia la notación homogénea no fue un simple cambio de convención, sino un paso crucial que cimentó gran parte del rendering moderno.

2.1 Notación Cartesiana Clásica: (x, y, z)

Es la forma más intuitiva y familiar de describir un punto en el espacio tridimensional.

• Definición: Un trío de números reales que indican la distancia a lo largo de cada eje respecto al origen.

• Ejemplo: El punto (2, 8, -3) se ubica 2 unidades a la derecha, 8 unidades hacia arriba y 3 unidades hacia atrás, si asumimos un sistema de coordenadas diestro donde el eje Z positivo “sale” hacia el observador.

• Limitación: Aunque es útil para representar posiciones absolutas, esta notación se queda corta al intentar unificar transformaciones más complejas, como proyecciones en perspectiva, dentro de un mismo marco algebraico.

2.2 Notación Homogénea: (x, y, z, w)

Para superar esas limitaciones, se recurre a la notación homogénea, una herramienta matemática que se ha convertido en estándar en gráficos 3D.

• Definición: Un punto en notación homogénea se representa con cuatro componentes: (x, y, z, w), donde w es el componente homogéneo.

• Punto ordinario: Cuando w = 1, las coordenadas (x, y, z, 1) equivalen al punto cartesiano (x, y, z).

• Vector de dirección: Cuando w = 0, la tupla (x, y, z, 0) ya no describe un punto, sino un vector. Este vector no tiene posición fija: indica solo dirección y magnitud, lo que lo hace inmune a las traslaciones (exactamente el comportamiento que se busca al aplicar transformaciones a normales, velocidades o rayos de luz).

2.3 Ventajas de la Notación Homogénea

El verdadero poder de la notación homogénea se revela en el manejo de las transformaciones geométricas:

1. Unificación de operaciones: Traslaciones, rotaciones, escalados y proyecciones se pueden expresar bajo un mismo mecanismo: la multiplicación por matrices 4x4. En notación cartesiana, cada operación requeriría un tratamiento distinto; en homogénea, todas se reducen a un producto matricial.

2. Proyección en perspectiva: La proyección en perspectiva, que hace que los objetos lejanos se vean más pequeños, requiere dividir por una escala dependiente de la profundidad. En coordenadas homogéneas, esta operación se integra naturalmente: la matriz de proyección ajusta el valor de w, y la GPU realiza automáticamente la división de perspectiva (x/w, y/w, z/w) antes del rasterizado.

3. Distinción clara entre punto y vector: (x, y, z, 1) es un punto (posee posición), mientras que (x, y, z, 0) es un vector (posee dirección). Gracias a esta diferencia, las traslaciones afectan a los puntos pero no a los vectores, lo que permite modelar de manera precisa el comportamiento geométrico del mundo 3D.

3. Vectores en Gráficos 3D: Representación y Operaciones

En gráficos 3D, los vectores son herramientas esenciales para describir posiciones, direcciones y magnitudes. Comprender su representación y propiedades es clave para manipular objetos, calcular normales y determinar relaciones geométricas entre elementos de una escena.

3.1 Representación y Propiedades

Un vector se define por su magnitud y dirección. A diferencia de un punto, que indica una posición específica en el espacio, un vector representa únicamente desplazamiento o dirección, sin un origen fijo. Esta distinción conceptual es fundamental: mientras que los puntos se usan para situar objetos, los vectores se utilizan para describir movimientos, fuerzas, velocidades y normales de superficies.

En OpenGL y GLM, los vectores se representan principalmente mediante las estructuras vec3 y vec4:

// Vector 3D clásico: solo dirección
glm::vec3 direccion(1.0f, 2.0f, 3.0f);

// Vector homogéneo: usado para multiplicaciones con matrices 4x4
glm::vec4 punto(1.0f, 2.0f, 3.0f, 1.0f);   // w = 1 indica un punto
glm::vec4 vectorDir(1.0f, 2.0f, 3.0f, 0.0f); // w = 0 indica un vector de dirección

La componente w en vec4 permite distinguir entre puntos y vectores cuando se aplican transformaciones homogéneas mediante matrices 4x4: los puntos (w=1) se trasladan y rotan, mientras que los vectores (w=0) solo se rotan, preservando su magnitud y dirección relativa.

En el shader (GLSL):

• vec3 y vec4 son los análogos directos.

• Los atributos de vértice suelen ser vec3 o vec4, mientras que las matrices de transformación (mat4) actúan sobre estos datos.

// Definiciones dentro del vertex shader
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aNormal;

// Convertimos a homogéneas para multiplicar por mat4
vec4 posicion = vec4(aPos, 1.0);
vec4 normal   = vec4(aNormal, 0.0);

3.2 Operaciones con Vectores

Los vectores admiten una serie de operaciones algebraicas que resultan fundamentales para gráficos 3D:

1. Suma y resta:
   La suma o resta de vectores se realiza componente a componente. Por ejemplo, dado A = (x₁, y₁, z₁) y B = (x₂, y₂, z₂), se tiene:

   $$\begin{aligned} A + B &= (x_1 + x_2, \; y_1 + y_2, \; z_1 + z_2) \[6pt] A - B &= (x_1 - x_2, \; y_1 - y_2, \; z_1 - z_2) \end{aligned}$$

2. Normalización:
   Convertir un vector a longitud unitaria (magnitud 1) es crucial para calcular direcciones, iluminación y reflejos. La normalización se realiza dividiendo cada componente por la magnitud del vector:

   $$\hat{V} = \frac{V}{|V|} = \frac{(x, y, z)}{\sqrt{x^2 + y^2 + z^2}}$$

3. Producto punto (dot product):
   El producto punto entre dos vectores A y B se define como:

   $$A \cdot B = x_A x_B + y_A y_B + z_A z_B$$

   Sus aplicaciones incluyen:

   • Determinar el ángulo entre vectores:

     $$\cos\theta = \frac{A \cdot B}{|A||B|}$$

   • Verificar perpendicularidad: A·B = 0 indica vectores ortogonales.

   • Calcular la distancia a un plano a partir de la normal del mismo.

4. Producto cruz (cross product):
   Produce un vector perpendicular a dos vectores dados. Dado A y B:

$$A \times B = \begin{bmatrix} y_A z_B - z_A y_B \\ z_A x_B - x_A z_B \\ x_A y_B - y_A x_B \end{bmatrix}$$

Esta operación es esencial para: - Calcular normales de superficies, necesarias para iluminación y sombreado. - Determinar dirección de ejes ortogonales en sistemas de coordenadas locales de objetos.

---

4. Uso de Matrices en Gráficos 3D

Las matrices son el andamiaje algebraico sobre el que se construyen los mundos virtuales. Funcionan como máquinas que, con una elegancia matemática, transforman puntos y vectores en el espacio. Gracias a ellas, un objeto puede moverse, girar, cambiar de tamaño o proyectarse en perspectiva, y todo ocurre mediante reglas precisas que la GPU ejecuta millones de veces por segundo.

4.1 Definición y Tipos de Matrices

Estructura de una matriz 4x4

Una matriz es un arreglo rectangular de números organizados en filas y columnas. En gráficos 3D, la más relevante es la matriz 4x4, con 16 elementos dispuestos en 4 filas y 4 columnas:

$$\begin{bmatrix} m_{00} & m_{01} & m_{02} & m_{03} \\ m_{10} & m_{11} & m_{12} & m_{13} \\ m_{20} & m_{21} & m_{22} & m_{23} \\ m_{30} & m_{31} & m_{32} & m_{33} \end{bmatrix}$$

Los subíndices siguen la convención [fila][columna].
Esta estructura no es arbitraria: está diseñada para operar de forma directa con puntos en coordenadas homogéneas (x, y, z, w), mediante la multiplicación de matrices.

---

4.2 Matriz Identidad

La matriz identidad (I) es el equivalente algebraico a “no hacer nada”. Es una matriz cuadrada con unos en la diagonal principal y ceros en las demás posiciones:

$$\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}$$

Su propiedad fundamental es mantener inalterado cualquier objeto sobre el que actúe:

• M * I = M

• I * M = M

• I * P = P

En gráficos, representa la transformación neutra o de “reposo”. En GLM se construye con glm::mat4(1.0f).

4.3 Transpuesta de una Matriz

La transpuesta (Mᵀ) se obtiene intercambiando filas por columnas.

Ejemplo:

$$M = \begin{bmatrix} a & b \\ c & d \end{bmatrix}, \quad M^{\mathrm{T}} = \begin{bmatrix} a & c \\ b & d \end{bmatrix}$$

En gráficos, se utiliza en operaciones como el cálculo de matrices normales, fundamentales para el sombreado e iluminación. Tanto GLM como GLSL incluyen la función transpose().

4.4 Operaciones Básicas

• Suma de matrices: Se realiza sumando cada elemento con su correspondiente. Solo es válida entre matrices del mismo tamaño.

• Multiplicación de matrices (concatenación): Es la operación clave en 3D.

  • No es conmutativa → A * B ≠ B * A en general.

  • Es asociativa → A * (B * C) = (A * B) * C.

La no conmutatividad refleja que el orden importa: rotar un objeto y luego trasladarlo no produce el mismo resultado que trasladarlo primero y después rotarlo.

---

4.5 Multiplicación Matriz-Punto

Un punto en coordenadas homogéneas puede representarse como una columna:

$$P = \begin{bmatrix} x \\ y \\ z \\ w \end{bmatrix}$$

Al multiplicarlo por una matriz M (4x4) obtenemos un nuevo punto P':

$$P' = M * P$$

En código (GLM o GLSL), esta operación se expresa naturalmente como vec4 nuevoPunto = M * P;.

4.6 Multiplicación Matriz-Matriz (Concatenación)

Multiplicar dos matrices A y B produce una nueva matriz C = A * B que combina ambas transformaciones. La GPU aprovecha la propiedad asociativa para optimizar cálculos:

En lugar de aplicar tres matrices diferentes a cada vértice:

$$\text{NuevoPunto} = M_1 \cdot \big( M_2 \cdot \big( M_3 \cdot P \big) \big)$$

se calcula primero la matriz compuesta:

$$\text{Modelo} = M_1 \cdot M_2 \cdot M_3$$

y luego:

$$\text{NuevoPunto} = \text{Modelo} \cdot P$$

Esto evita millones de operaciones redundantes en escenas con gran cantidad de vértices.

4.7 Matriz Inversa

La inversa de M (denotada M⁻¹) es la única matriz que cumple:

$$M \cdot M^{-1} = I$$

No todas las matrices son invertibles, y calcular la inversa es costoso. Aun así, es esencial en situaciones como:

• Transformar vectores normales (usando la transpuesta de la inversa).

• Convertir coordenadas de un objeto al espacio de la cámara.

GLM y GLSL proporcionan inverse(), pero debe usarse con cautela en tiempo real.

---

5. Matrices de Transformación

Las matrices de transformación constituyen una herramienta fundamental en gráficos por computadora, pues permiten modificar la posición, orientación y tamaño de los objetos dentro de un espacio tridimensional. El uso de matrices 4x4 junto con coordenadas homogéneas ofrece una representación unificada de traslaciones, escalados y rotaciones. Gracias a ello, estas transformaciones pueden combinarse de manera consistente, lo que constituye la base del pipeline de renderizado moderno.

5.1 Traslación

La traslación es la operación que desplaza un objeto de una posición a otra en el espacio.

• Matriz de traslación:
  Se obtiene a partir de la matriz identidad, insertando los valores de desplazamiento (Tx, Ty, Tz) en la última columna:

$$- \begin{bmatrix} 1.0 & 0.0 & 0.0 & T_x \\ 0.0 & 1.0 & 0.0 & T_y \\ 0.0 & 0.0 & 1.0 & T_z \\ 0.0 & 0.0 & 0.0 & 1.0 \end{bmatrix}$$

• Efecto:
  Al multiplicar un punto homogéneo P = (x, y, z, 1) por esta matriz, se obtiene

  $$P' = (x + Tx, y + Ty, z + Tz, 1)$$

  La traslación es una transformación afín, lo que significa que conserva distancias relativas y ángulos.

Ejemplo:

Para desplazar un objeto 5 unidades en el eje X, se utiliza (Tx=0, Ty=5, Tz=0). En GLM, esto se implementa con:

glm::translate(glm::mat4(1.0f), glm::vec3(5.0f, 0.0f, 0.0f));

5.2 Escalado

El escalado modifica el tamaño de un objeto o lo refleja respecto a un plano.

• Matriz de escalado:

$$\begin{bmatrix} S_x & 0.0 & 0.0 & 0.0 \\ 0.0 & S_y & 0.0 & 0.0 \\ 0.0 & 0.0 & S_z & 0.0 \\ 0.0 & 0.0 & 0.0 & 1.0 \end{bmatrix}$$

• Efecto sobre un punto:
  Al aplicar esta matriz a P = (x, y, z, 1) se obtiene

• $$P' = (Sx * x, Sy * y, Sz * z, 1).$$

• Los factores de escala producen los siguientes efectos:

  • > 1: el objeto se amplía.

  • 0 < valor < 1: el objeto se reduce.

  • < 0: el objeto se refleja (efecto espejo).

Aplicación práctica:
Una de sus utilidades es la conversión entre sistemas de coordenadas diestro y zurdo. Como se explicó en la sección 1, la diferencia principal radica en la dirección del eje Z. Para invertirla, basta usar un escalado con (Sx=1, Sy=1, Sz=-1), lo que invierte el eje Z y cambia la handedness del sistema.

 mv_matrix = glm::scale(mv_matrix, glm::vec3(0.0, 0.0, 0.0));

5.3 Rotación

La rotación es la transformación más compleja, ya que implica girar un objeto alrededor de un eje.

• Rotaciones alrededor de ejes principales:
  Las formas más sencillas corresponden a giros alrededor de los ejes cartesianos. Siendo θ el ángulo (en radianes), las matrices son:

  • En X:

$$\begin{bmatrix} 1.0 & 0.0 & 0.0 & 0.0 \\ 0.0 & \cos\theta & -\sin\theta & 0.0 \\ 0.0 & \sin\theta & \cos\theta & 0.0 \\ 0.0 & 0.0 & 0.0 & 1.0 \end{bmatrix}$$

- En Y:

$$R_y = \begin{bmatrix} \cos\theta & 0.0 & \sin\theta & 0.0 \\ 0.0 & 1.0 & 0.0 & 0.0 \\ -\sin\theta & 0.0 & \cos\theta & 0.0 \\ 0.0 & 0.0 & 0.0 & 1.0 \end{bmatrix}$$

- En Z:

$$R_z = \begin{bmatrix} \cos\theta & -\sin\theta & 0.0 & 0.0 \\ \sin\theta & \cos\theta & 0.0 & 0.0 \\ 0.0 & 0.0 & 1.0 & 0.0 \\ 0.0 & 0.0 & 0.0 & 1.0 \end{bmatrix}$$

• Ángulos de Euler:
  El teorema de Euler establece que cualquier rotación 3D puede expresarse como una secuencia de tres rotaciones elementales sobre los ejes X, Y y Z, conocidas como ángulos de Euler (e.g., pitch-yaw-roll). Para rotar alrededor de un eje arbitrario que no pase por el origen, la estrategia típica es:

  1. Trasladar el objeto para que el eje coincida con el origen.

  2. Aplicar la rotación deseada.

  3. Revertir la traslación inicial.

• Limitación: Gimbal Lock:
  Los ángulos de Euler presentan un problema conocido como Gimbal Lock, que ocurre cuando dos ejes se alinean, reduciendo los grados de libertad de la rotación. Esto afecta a la animación fluida y a la interpolación de orientaciones.

  

    mv_matrix = glm::rotate(mv_matrix, angle, glm::vec3(0.0f, 0.0f, 1.0f));
  

• Alternativa: Cuaterniones:
  Para evitar el Gimbal Lock y manejar rotaciones de forma más robusta, se emplean cuaterniones. Estas estructuras de cuatro componentes permiten:

  • Representar rotaciones sin pérdida de grados de libertad.

  • Concatenar e interpolar rotaciones de forma eficiente (slerp).

  • Convertirse fácilmente en matrices de rotación mediante librerías como GLM (glm::mat4_cast(myQuat)).

---

Conclusión

En gráficos 3D, la combinación de matrices de transformación y vectores constituye el fundamento matemático que permite ubicar, orientar y escalar objetos en un espacio tridimensional. Las matrices 4x4 homogéneas ofrecen un marco unificado para realizar traslaciones, escalados y rotaciones, mientras que los vectores permiten representar posiciones, direcciones y magnitudes, así como realizar operaciones clave como suma, resta, normalización, producto punto y producto cruz.

Comprender la distinción conceptual entre puntos y vectores, así como el uso correcto de vec3 y vec4 en OpenGL/GLM, es esencial para garantizar que las transformaciones se apliquen de forma coherente y eficiente en el pipeline de renderizado. Asimismo, dominar estas herramientas permite calcular normales, definir sistemas de coordenadas locales, realizar interpolaciones y evitar problemas comunes, como el Gimbal Lock en rotaciones.

En conjunto, matrices y vectores no solo representan conceptos matemáticos abstractos, sino que constituyen el lenguaje central para manipular geometría y controlar la dinámica de cualquier escena 3D, sentando las bases para técnicas más avanzadas de modelado, animación e iluminación