Introducción a los gráficos 3D Usando OpenGL

Pipeline gráfico clásico Objetos de malla (mesh) con polígonos 3D (usualmente triángulos o quads) Aplicar propiedades materiales a cada objeto Texturar polígonos a la medida de las necesidades Iluminar escena Colocar cámara Disfrutar la vista

¿Por qué OpenGL para 3D? Ampliamente utilizado en la industria y la academia para gráficos 3D interactivos en tiempo real API de función fija ("fixed-function") (OpenGL 1.x) asiste en el prototipado rápido de escenas simples en 3D con efectos de iluminación "clásicos" Experimentar con ideas simples rápidamente

Polígonos 3D (1/2) Especificación de materiales Describe las propiedades de la luz reflejada en el polígono Color, brillo, reflexión, etc. float color[] = { 1.0, 1.0, 0.3, 1.0 }; // Amarillo pálido glMaterialfv(GL_FRONT, // Color de caras frontales (visibles) GL_DIFFUSE, // Color "base" (más sobre esto más adelante) color); // Pasar los valores de color R/V/A/Alfa

Polígonos 3D (2/2) OpenGL por defecto aplica un sistema de coordenadas de la mano derecha Los polígonos 3D se definen como polígonos 2D: glBegin(GL_TRIANGLES); glVertex3f(0, 75, 0); glVertex3f(-50, 0, 50); glVertex3f(50, 0, 50); glEnd(); Esto define un triángulo Los valores de coordenadas son arbitrarios - se puede establecer la cámara virtual para capturar una escena de cualquier tamaño, así que usa valores convenientes Recuerda mantener el orden contrario a las agujas del reloj.

Complejidades de la reflexión de la luz sobre superficies Es necesario saber la intensidad y dirección de toda la luz que golpea un punto sobre la superficie del objeto, ya sea directamente desde la fuente de luz o después de muchos rebotes (ej., iluminación global) Cómo vemos una superficie de un objeto a medida que refleja, absorbe y difracta luz (propiedades materiales) Ubicación del ojo relativo a la fuente de luz Distribución de la intensidad por longitud de onda por luz incidente Sistema de visión humano (SVH) y su respuesta diferencial a estímulos lumínicos Las luces pueden tener geometría ellas mismas Los modelos de iluminación manejan estas complejidades (excepto para el SVH)

Un mundo imperfecto Los modelos de iluminación clásicos (también llamados modelos de iluminación o de reflejo, no confundir con los modelos de shading que discutiremos luego) se desarrollaron al inicio de los graficos raster a inicios de los años 70. El centro de este desarrollo fue en la Universidad de utah donde Ivan Sutherland trabajó con David Evans. Surgió el negocio de los simuladores de vuelo (con gráficos) de Evans & Sutherland. Otros pioneros: Gouraud (modelo de shading - llenar los pixeles interiores de los colores de los vértices de un triángulo) Phong (modelo de shading e iluminación) Newell (la tetera Utah (ícono de SIGGRAPH), algoritmos de generación de mallas) Clark (motor de geometria, Silicon Graphics, Netscape) Warnock (Eliminación de superficies ocultas, Adobe) Catmull (splines, Pixar), etc...

Un mundo imperfecto Para entonces: CPUs > 4 órdenes de magnitud menos poderosos; no había GPU como tal: plotear píxeles Limitaciones de memoria (¡medidos en KB!) Incluso en las máquinas de hoy, una simulación físicamente correcta de la luz requiere un poder computacional más allá de las capacidades de las supercomputadoras.

Modelos de iluminación (1/2) El color de un punto sobre la superficie depende de la iluminación de la escena y el material de la superficie. Primera aproximación: modelar la reflexión difusa de una superficie mate (luz reflejada igualmente en todas direcciones, independiente del observador) basada solamente en el ángulo de la normal de la superficie con respecto a la fuente de la luz. Modelando la “caída” de la luz con respecto al ángulo Ley de Lambert del coseno de difusión-reflexión Para una luz reflejada de intensidad I Idir = medida de la intensidad de la luz en el punto de contacto con la superficie 𝜃 = ángulo entre normal de la superficie (n) y vector de la fuente de luz (l) nota: Idir y todos los números del modelo de iluminación con fracciones entre 0 y 1. ¡Estas unidades son también completamente arbitrarias y no estan basadas en la física! De cara a la fuente de luz: máxima reflexión Perpendicular a la fuente de luz: no hay reflexión En medio: una fracción de luz reflejada

Modelos de iluminación (2/2) Atenuación de la luz de Lambert basada en el ángulo entre superficie y fuente de luz Visualización de la ley de Lambert en 2D Nota: no hemos tomado en cuenta las “propiedades materiales”, ej., las fracciones de la energía de la luz incidente absorbida vs. reflejada en cada longitud de onda. Piensa esto como el “coeficiente de eficiencia de reflexión”.

Reglas de shading (1/6) Meta: encontrar un color en cada pixel, preferiblemente sin tener que evaluar un modelo de iluminación completo en cada pixel Primera aproximación: ley del coseno de Lambert (shading plano o constante para toda la cara) Aspecto plano, perfecto para esta pirámide rectangular ¿Y qué si queremos hacer una aproximación a un objeto redondo? Con shading de Lambert, en facetas; la apariencia ya no es ideal

Reglas de shading (2/6) Primera solución: incrementar el número de polígonos Mejor aproximación a la forma, más caro de renderizar Aún así, todavía se ven las caras al renderizar (conteo de polígonos más alto = caras menos notorias) Mallas adaptativas es una mejor - más polígonos en areas de gran curvatura Tetera Utah por Martin Newell

Reglas de shading (3/6) Pasemos de esto: shading de caras A esto: shading suavizado

Reglas de shading (4/6) Shading suavizado de Gouraud computar la ecuación de iluminación en cada vértice de la malla interpolar linealmente los valores de color de los vértices para obtener los colores en todos los puntos promedio ponderado: mientras un punto este más cerca de un vértice, más será influenciado por ese vértice ¿cómo determinamos los colores de los vértices? Necesitamos una normal... el artífice de las normales de los vértices; matemáticamente indefinido pues el vértice es una discontinuidad hacemos el hack de promediar Faceted: La normal en un vértice es la misma que la normal del plano. Por lo tanto, cada vértice tiene tantas normales como el número de planos que ayuda a definir. Smooth: Sólo un vértice normal por vértice; promedio de las normales de las caras de que el vértice sea parte. Faceted Smooth

Reglas de shading (5/6) Normales de los vértices Las normales no son especificadas explícitamente si el vértice es usado por una sola cara, la normal se establece como la normal de la cara si no, la normal se coloca como el promedio de todas las caras que comparten el vértice si la malla no es muy áspera, la normal del vértice es una aproximación decente a la normal de la superficie modelada más cercana a ese vértice las mallas adaptativas agregan más triángulos en las áreas con cambios rápidos en la curvatura Aproximación de una curva en 2D (normales de los vértices en verde) Normales de los vértices mostrados en color, normales de las caras en negro. Aproximación de una malla 3D

Reglas de shading (6/6) OpenGL provee shading plano o Gouraud. Para obtener un shading plano, usa las mismas normales para diferentes vértices Desafortunadamente: la escogencia del modelaje influencia el efecto de rendering (contrario al paradigma MVC de PARC) Modelo de vértices no compartidos es más ineficiente, difícil de cambiar y facilita los errores (ej, mover un vértice crearía un hueco en la malla) Faceted Smooth

Resumen de interpolación vs. shading plano Línea amarilla muestra la superficie verdadera. Líneas negras y vértices verdes demuestran la malla aproximada. Iluminación computada por vértice Copiando (shading plano) Interpolando (shading Gouraud)

Modelo de iluminación (1/8) Luces no geométricas: Ambientales: aproximación cruda a la reflexión entre objetos, todas las superficies reciben la misma intensidad de luz Direccional: ilumina todos los objetos igualmente desde una dirección dada; rayos de luz paralelos (modela al sol) Luces geométricas: Punto: se origina de un solo punto, se difunde igualmente en todas las direcciones Spotlight/foco: se original de un solo punto, se difunde hacia afuera en forma de cono con dirección Área: se origina de un solo plano y se difunde hacia afuera dada una dirección del plano Volumen: espacio encerrado ilumina objetos dentro de ese espacio OpenGL soporta luces ambientales, direccionales, de punto y foco. Punto Foco Direccional

Modelo de iluminación (2/8) float ambient[] = { 0.2, 0.2, 0.2, 1.0 }; float position[] = { 10.0, 5.0, 8.0, 1.0 }; float direction[] = { 1.0, 2.0, 3.0, 0.0 }; // Especificar color(es) glLightfv(GL_LIGHT0, // o GL_LIGHT1, GL_LIGHT2, etc GL_AMBIENT, // o GL_DIFFUSE, o GL_SPECULAR ambient); // o color difuso/especular respectivamente // Luz puntual glLightfv(GL_LIGHT0, GL_POSITION, position); // Luz direccional glLightfv(GL_LIGHT0, GL_POSITION, direction); ¡GL_POSITION no es un error! OpenGL usa un truco de álgebra lineal (homogenización) para luces direccionales.

Modelo de iluminación (3/8) Muchos modelos existen para aproximar fisica de la luz - mientras más preciso, más computación va a requerir OpenGL: modelo de reflexión Phong, sobrevive al día de hoy (aunque muy crudo) Aproxima la iluminación separándola en tres componentes: ambiental, difusión y especular Puedes pensarlos como capas coincidenciales, cada una con sus propias caracteristicas, que sumamos para obtener el resultado final modelo de iluminación no-global - el modelo no maneja reflexiones entre objetos AMBIENTE Efecto de luz que no es direccional, afectando a todas las superficies por igual. + DIFUSIÓN Efecto de la luz direccional en una superficie con un acabado tosco + ESPECULAR Effect of directional light on a shiny surface when the eye-point is close to the light’s reflected rays. = THE COMPOSITE The three independent reflectivity types are accumulated to produce the result.

Modelo de iluminación (4/8) 𝐼 λ = 𝑖 𝑎,λ 𝑘 𝑎,λ 𝑂 𝑑,λ + Σ 𝑙𝑢𝑐𝑒𝑠 𝑑𝑖𝑟𝑒𝑐𝑐𝑖𝑜𝑛𝑎𝑙𝑒𝑠 𝑖 𝑑𝑖𝑟,λ 𝑘 𝑑,λ 𝑂 𝑑,λ 𝑐𝑜𝑠𝜃 + Σ 𝑙𝑢𝑐𝑒𝑠 𝑔𝑒𝑜𝑚𝑒𝑡𝑟𝑖𝑐𝑎𝑠 𝐹 𝑎𝑡𝑡 𝑖 𝑔𝑒𝑜𝑚,λ 𝑘 𝑑,λ 𝑂 𝑑,λ 𝑐𝑜𝑠𝜃 + Σ 𝑙𝑢𝑐𝑒𝑠 𝑑𝑖𝑟𝑒𝑐𝑐𝑖𝑜𝑛𝑎𝑙𝑒𝑠 𝑖 𝑑𝑖𝑟,λ 𝑘 𝑠,λ 𝑂 𝑠,λ 𝑐𝑜𝑠𝛿 𝑛 + Σ 𝑙𝑢𝑐𝑒𝑠 𝑔𝑒𝑜𝑚é𝑡𝑟𝑖𝑐𝑎𝑠 𝐹 𝑎𝑡𝑡 𝑖 𝑔𝑒𝑜𝑚,λ 𝑘 𝑠,λ 𝑂 𝑠,λ 𝑐𝑜𝑠𝛿 𝑛 La ecuación es dependiente de la longitud de onda; aproximado con ecuaciones separadas para λ∈ 𝑅, 𝐺, 𝐵 ; Todos los valores sin unidad, números reales entre 0 y 1 Se evalúa luz reflejada I en un solo punto Componente ambiental Componente difuso Componente especular

Modelo de iluminación (5/8) Variables λ = longitud de onda / componente de color (ej. R, G y B) 𝑖 = intensidad de luz medida en la superficie 𝑖 𝑎 = intensidad de la luz ambiental usada en la escena 𝑘 = eficiencia del material para reflejar la luz 𝑘 𝑎 = coeficiente de atenuación ambiental para el material de este objeto (esperamos 𝑘 𝑎 ~ 𝑘 𝑑 ) 𝑂 = color innato del material del objeto en un punto específico de la superficie Componente ambiental efecto constante en la superficie sin importar la orientación, sin información geométrica hack total (aproximación más cruda posible para iluminación global basada en la reflexión entre objetos), pero hacer que los objetos sean un poco visibles - la escena se ve demasiado oscura sin ello No hay color de material ambiental innato, asi que se usa el difuso ( 𝑂 𝑑 ) Término ambiental para el rojo : 𝑖 𝑎,𝑅 𝑘 𝑎,𝑅 𝑂 𝑑,𝑅

Modelo de iluminación (6/8) Componente difuso (componente rojo mostrado a continuación) - ¡dependiente del observador! Usa la ley de coseno de reflexión-difusión de Lambert 𝑖 𝑑𝑖𝑟 (intensidad de la luz) 𝑘 𝑑 * es el coeficiente de atenuación difuso 𝑂 𝑑 * = color innato de la propiedad material difusa del objeto en un punto específico en la superficie cosθ = Factor de atenuación de Lambert done theta es el ángulo entre la normal y el vector de luz Σ 𝑖 𝑑𝑖𝑟,𝑅 𝑘 𝑑,𝑅 𝑂 𝑑,𝑅 𝑐𝑜𝑠𝜃 𝑙𝑢𝑐𝑒𝑠 𝑑𝑖𝑟𝑒𝑐𝑐𝑖𝑜𝑛𝑒𝑠 * nota: 𝑘 𝑑 y 𝑂 𝑑 modelan dos aspectos diferentes del material, pero al final son solo fracciones que son multiplicadas juntas

Modelo de iluminación (7/8) Componente especular (para el rojo) - dependiente del observador reflejos vistos en objetos brillantes (metal, espejos, etc.) factor de atenuación basado en coseno asegura que el reflejo sólo es visible si la luz reflejada y el observador estan alineados de cerca n = potencia especular, que tan “agudo” es el reflejo - mientras más agudo, más intenso el reflejo especular de la mayoría de los metales son del color del metal pero aquellos del plástico, manzana brillante, perla etc. son mayormente del color de la luz Σ 𝑙𝑢𝑐𝑒𝑠 𝑑𝑖𝑟𝑒𝑐𝑐𝑖𝑜𝑛𝑎𝑙𝑒𝑠 𝑖 𝑑𝑖𝑟,𝑅 𝑘 𝑠,𝑅 𝑂 𝑠,𝑅 𝑐𝑜𝑠𝛿 𝑛 e = punto de vista r = imagen reflejada de la fuente de luz ℓ = vector de la fuente de luz n = normal de la superficie δ = ángulo entre e y r n = coeficiente especular Nota: OpenGL usa un modelo de iluminación ligeramente diferente llamado Blinn-Phong. Caída especular de cos n

Modelo de iluminación (8/8) Atenuación 𝐹 𝑎𝑡𝑡 Luces direccionales no tienen atenuación (infinitamente lejanas) Luces geométricas (puntos de luz, spotlights) amainan con la distancia Ley del inverso cuadrado Área cubierta aumenta el cuadrado de la distancia de la luz Por lo tanto, la intensidad de la luz es inversamente proporcional al cuadrado de la distancia de la luz Una luz el doble de lejos tendrá un cuarto de su intensidad Aunque la física dice ley del inverso cuadrado, no siempre se ve bien en la práctica por lo que OpenGL te deja escoger la función de atenuación (cuadrática, lineal o constante) d

Mapeo de texturas/Texturación Meta: agrega más detalle a la geometria de la escena sin agregar complejidad Solución: texturación (texture mapping) usado extensamente en videojuegos, ej. para fondos o billboards también usado para muchas otras técnicas tales como manejo de nivel de detalle cubre la superficie de la malla con un papel contact (estirable) con un patrón o imagen sobre él en general, difícil de especificar el mapeo del papel contact a cada punto e una superficie 3D arbitraria mapear a polígonos planos es fácil: especifica mapeo para cada vértice e interpola para encontrar el mapeo de los puntos internos Especificando el “punto de la textura” mapeado a un vértice en particular requiere el sistema de coordenadas para referirse a las posiciones dentro del pixmap de la textura convención: puntos en el pixmap descritos en un “sistema de coordenadas de textura” abstracto de punto flotante ejes llamados u y v, van de 0 a 1. origen ubicado en la esquina superior derecha del pixmap eje U (1,0) (0,0) (0,1) eje V

Ejemplo de mapeo de textura QImage img; Gluint textureID; // cargar una imagen en disco (usando Processing) img.load(“sand.gif”); img = img.convertToGLFormat(img); // Crear una textura en el dispositivo gráfico glGenTextures(1, &textureID); // 1: generar una sola textura // Cargar datos de la imagen en textura glBindTexture(GL_TEXTURE_2D, textureID); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, img.width(), img.height(), 0, GL_RGBA, GL_UNSIGNED_BYTE, img.bits()); Documentación completa de glTexImage2D: http://www.opengl.org/sdk/docs/man/xhtml/glTexImage2D.xml

Ejemplo de mapeo de textura // Dibujar el piso del desierto usando la textura glBegin(GL_QUADS); glTexCoord2f(0, 0); glVertex3f(-9999, 0, 9999); glTexCoord2f(1, 0); glVertex3f(9999, 0, 9999); glTexCoord2f(1, 1); glVertex3f(9999, 0, -9999); glTexCoord2f(0, 1); glVertex3f(-9999, 0, -9999); glEnd();

Coordenadas de texturación UV Haremos el mapeo desde los dos triángulos coplanares en el modelo 3D al mapa de texturas El mapa de texturas usa coordenadas de texturas UV Mapear texturas en sólidos arbitrarios es mucho más difícil

Texturación (Tiling) Crear una pared de ladrillos aplicando una textura de ladrillo a un plano Produce una imagen realística, pero muy pocos ladrillos en la pared El tiling aumenta el número de ladrillos aparentes

Texturación (Estirado) Crear un fondo de cielo aplicando la imagen de un cielo a un plano Se vería poco natural si se usa como tiles Estirar para cubrir todo el plano OpenGL te deja especificar los factores de tiling y estiramiento

Cámara (1/3) Propiedades de la cámara: Perspectiva u Ortográfica Posición: colocación de la cámara Dirección de visión (look direction): dirección hacia la que la cámara apunta (vector que determina el eje del lente) Dirección hacia arriba: rota la cámara alrededor del vector de visión, especificando dónde es “arriba” - debe evitar ser colinear al vector de visión Distancia del plano lejano: objetos detrás de este plano no aparecen Distancia del plano cercano: objetos frente a este plano no aparece Campo de visión: (ángulo de altura) Relación de aspecto (aspect ratio): (ancho y alto relativos)

Cámara (2/3) Proyección de perspectiva Posición Proyección de la dirección hacia arriba Dirección hacia arriba Distancia plano-cercano Distancia plano-lejano Dirección de visión Ángulo de altura

Cámara (3/3) Proyección ortográfica Ancho Distancia lejana Alto Vector de visión Distancia cercana Posición Distancia lejana Vector hacia arriba Proyección del vector hacia arriba

Cámara de OpenGL Soporte para cámaras de perspectiva y ortográficas Ejemplo de cámara de perspectiva: // Matriz de proyección captura conversión 3D a 2D glMatrixMode(GL_PROJECTION); gluPerspective(45, // Campo de visión window->width() / window->height(), // Relación de aspecto 0.02, 1000); // Distancias planos lejano/cercano // Matriz modelview captura posición y orientación glMatrixMode(GL_MODELVIEW); gluLookAt(54, 51, 247, // Posición de la cámara (X, Y, Z) 2, 0, 9, // El punto (X, Y, Z) hacia el que mira la cámara 0, 1, 0); // Dirección hacia arriba (X, Y, Z)

OpenGL Tutors Excelente guía para comprender las llamadas de función fija de OpenGL. Realizado por Nate Robins, disponible para Windows, OS X, y UNIX en http://user.xmission.com/~nate/tutors.html