Skip to content

Clase 1 — Presentación de la Asignatura e Introducción a OpenGL y Transformaciones 2D

Resumen Ejecutivo

Sesión inaugural de Informática Gráfica y Visualización. Se presentó la estructura de la asignatura (dos bloques: síntesis de imágenes con OpenGL y análisis de imágenes con OpenCV), se introdujo la API OpenGL y sus librerías complementarias (FreeGLUT, GLU), y se comenzó el Tema 1 sobre transformaciones geométricas 2D básicas (traslación, rotación, escalado) expresadas en forma matricial, incluyendo el concepto de coordenadas homogéneas.

Conceptos Clave

  • OpenGL: API estándar de la industria para generación de gráficos, desarrollada por Silicon Graphics y gestionada por Kronos Group ⚠️ EXAMEN
  • Pipeline fijo vs. Pipeline programable: Dos etapas de OpenGL; se estudia el pipeline fijo (versiones 1.x-2.1) por ser más accesible y compartir los mismos conceptos base ⚠️ EXAMEN
  • Vulkan: Sucesor de OpenGL, orientado a videojuegos y rendimiento con GPUs modernas; no se estudia en esta asignatura
  • FreeGLUT: Librería complementaria a OpenGL para gestión de ventanas y eventos de interfaz (teclado/ratón) ⚠️ EXAMEN
  • GLU: Librería para definir cámaras y proyecciones (ortogonal, paralela, perspectiva) ⚠️ EXAMEN
  • Transformaciones afines: Operaciones geométricas (traslación, rotación, escalado) que permiten mover, girar y cambiar el tamaño de objetos ⚠️ EXAMEN
  • Coordenadas homogéneas: Sistema que permite expresar todas las transformaciones como multiplicaciones de matrices, añadiendo una coordenada extra ⚠️ EXAMEN
  • Máquina de estados (OpenGL): OpenGL mantiene un estado interno (color actual, grosor de línea, etc.) que afecta a todas las instrucciones de dibujo posteriores ⚠️ EXAMEN

Desarrollo del Temario

1. Estructura de la asignatura

La asignatura se divide en dos partes de ~7 semanas cada una:

  • Parte 1 — Síntesis de imágenes: Generación de gráficos 2D y 3D con Python + OpenGL. Incluye actividad individual (gráficos 2D tipo Excel) y actividad grupal (escena 3D estilo Minecraft).
  • Parte 2 — Análisis de imágenes (Visión Artificial): Procesamiento y análisis de imágenes con Python + OpenCV. Enfoque clásico (algoritmos matemáticos y geometría), no deep learning. Incluye laboratorio.

El lenguaje de programación es Python en paradigma procedural (no orientado a objetos).

2. Introducción a OpenGL

OpenGL es una API desarrollada en los años 90 por Silicon Graphics y actualmente gestionada por Kronos Group (Nvidia, AMD, Intel, etc.).

Versiones de OpenGL:

Característica Pipeline fijo (1.x-2.1) Pipeline programable (3.x+) / Vulkan
Complejidad Menor Mayor
Uso actual Educación, imágenes estáticas Videojuegos, animaciones
Compatibilidad Muy amplia (Windows, Mac, Linux) Vulkan no funciona en Mac (usa Metal)

Ejemplo: Los motores de videojuegos como Unity o Unreal utilizan Vulkan o DirectX por debajo. Lo que se estudia en esta asignatura (pipeline fijo) comparte el mismo core conceptual.

Librerías complementarias:

  • FreeGLUT: Gestión de ventanas y eventos (teclado/ratón). No usar GLFW ni SDL como alternativas; la asignatura usa exclusivamente FreeGLUT ⚠️ EXAMEN
  • GLU (OpenGL Utility): Definición de cámaras y tipos de proyección

3. Cómo se construyen imágenes en OpenGL

Los objetos se construyen a partir de polígonos definidos por vértices referenciados a un sistema de coordenadas implícito.

  • Las formas curvas se aproximan concatenando muchos triángulos (a más triángulos, más suave la curva) ⚠️ EXAMEN
  • Los colores se definen en RGB normalizado a [0,1] (dividiendo cada componente entre 255) ⚠️ EXAMEN

Funciones clave de OpenGL:

Función Propósito
glColor3fv(color) Establece el color actual (máquina de estados)
glVertex2fv(punto) Dibuja un vértice en 2D
glBegin(modo) / glEnd() Define un contexto de dibujo
glLineWidth(grosor) Establece grosor de línea

Modos de contexto (glBegin):

Modo Efecto
GL_POLYGON Une los vértices formando un polígono cerrado
GL_LINES Une los vértices de dos en dos formando líneas
GL_POINTS Dibuja los vértices como puntos sueltos

Ejemplo: Para dibujar una casa, se definen los vértices del tejado (triángulo) y la fachada (rectángulo) en coordenadas 2D. Se usa glBegin(GL_POLYGON) para cada polígono, estableciendo previamente el color con glColor3fv().

4. Transformaciones 2D básicas (Tema 1)

Las transformaciones permiten mover, rotar y escalar objetos. Se expresan en forma matricial porque OpenGL trabaja internamente con matrices.

Traslación

Desplaza un punto \(P(x, y)\) a una nueva posición \(P'(x', y')\):

\[P' = P + T\]
\[\begin{pmatrix} x' \\ y' \end{pmatrix} = \begin{pmatrix} x \\ y \end{pmatrix} + \begin{pmatrix} t_x \\ t_y \end{pmatrix}\]

Es decir: \(x' = x + t_x\) y \(y' = y + t_y\) ⚠️ EXAMEN

Rotación (respecto al origen)

Rota un punto \(P\) un ángulo \(\theta\) alrededor del origen (como un compás pinchado en el origen): ⚠️ EXAMEN

\[P' = R \cdot P\]
\[\begin{pmatrix} x' \\ y' \end{pmatrix} = \begin{pmatrix} \cos\theta & -\sin\theta \\ \sin\theta & \cos\theta \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix}\]

Convenio de signos: ángulo positivo = sentido antihorario; ángulo negativo = sentido horario (igual que en trigonometría) ⚠️ EXAMEN

Ejemplo: Imagina un compás: pinchas la aguja en el origen, colocas el lápiz en el punto P, y giras un ángulo \(\theta\). El punto donde llega el lápiz es \(P'\).

Escalado

Cambia el tamaño de un objeto multiplicando sus coordenadas por factores de escala:

\[P' = S \cdot P\]
\[\begin{pmatrix} x' \\ y' \end{pmatrix} = \begin{pmatrix} s_x & 0 \\ 0 & s_y \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix}\]

Propiedades del escalado: ⚠️ EXAMEN

Condición Efecto
\(s = 1\) Sin cambio
\(s > 1\) Aumenta tamaño
\(s < 1\) Disminuye tamaño
\(s_x = s_y\) Escalado uniforme (proporcional)
\(s_x \neq s_y\) Escalado no uniforme (deforma el objeto)

5. Coordenadas homogéneas

Problema: la traslación es una suma (\(P' = P + T\)) mientras que rotación y escalado son productos (\(P' = R \cdot P\), \(P' = S \cdot P\)). Para encadenar muchas transformaciones eficientemente, se necesita que todas sean multiplicaciones. ⚠️ EXAMEN

Solución: se añade una tercera coordenada (la coordenada homogénea, siempre = 1) al vector de posición:

\[\begin{pmatrix} x \\ y \end{pmatrix} \rightarrow \begin{pmatrix} x \\ y \\ 1 \end{pmatrix}\]

Con coordenadas homogéneas, la traslación se convierte en multiplicación:

\[\begin{pmatrix} x' \\ y' \\ 1 \end{pmatrix} = \begin{pmatrix} 1 & 0 & t_x \\ 0 & 1 & t_y \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x \\ y \\ 1 \end{pmatrix}\]

La rotación en coordenadas homogéneas:

\[\begin{pmatrix} x' \\ y' \\ 1 \end{pmatrix} = \begin{pmatrix} \cos\theta & -\sin\theta & 0 \\ \sin\theta & \cos\theta & 0 \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x \\ y \\ 1 \end{pmatrix}\]

El escalado en coordenadas homogéneas:

\[\begin{pmatrix} x' \\ y' \\ 1 \end{pmatrix} = \begin{pmatrix} s_x & 0 & 0 \\ 0 & s_y & 0 \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x \\ y \\ 1 \end{pmatrix}\]

Ventaja fundamental: al ser todo multiplicaciones, se pueden componer (encadenar) varias transformaciones en una única matriz resultado, lo que es computacionalmente eficiente. ⚠️ EXAMEN

Preguntas de Autoevaluación

  1. ¿Por qué se estudia el pipeline fijo de OpenGL en lugar de Vulkan o el pipeline programable?
  2. ¿Qué función cumple FreeGLUT y por qué es necesaria como complemento a OpenGL?
  3. ¿Cómo se representan los colores en OpenGL y en qué se diferencia del formato RGB habitual (0-255)?
  4. ¿Qué significa que OpenGL es una "máquina de estados"? Pon un ejemplo con el color.
  5. Dado un punto \(P(3, 2)\), calcula su posición tras una traslación con \(t_x = 4\) y \(t_y = -1\).
  6. Escribe la matriz de rotación para un ángulo de 90°. ¿En qué sentido gira?
  7. ¿Qué diferencia hay entre escalado uniforme y no uniforme? ¿Qué efecto visual produce cada uno?
  8. ¿Por qué se introducen las coordenadas homogéneas? ¿Qué problema resuelven?
  9. Expresa la traslación \(t_x = 5\), \(t_y = 3\) como una multiplicación de matrices usando coordenadas homogéneas.
  10. ¿Cómo se aproximan las formas curvas (como un círculo) en OpenGL si solo se dispone de polígonos?

Guía generada automáticamente a partir de transcripción con faster-whisper + Claude Sonnet.