Introducción a los gráficos 3D

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 carasfrontales (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 graficosraster 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, SiliconGraphics, 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: Idiry 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íneas negras y vértices verdes demuestran la malla aproximada. Iluminación computada por vértice Copiando (shadingplano) Interpolando (shadingGouraud) Línea amarilla muestra la superficie verdadera.

Modelo de iluminación (1/8) Foco Direccional • 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

Modelo de iluminación (2/8) ¡GL_POSITION no es un error! OpenGL usa un truco de álgebra lineal (homogenización) para luces direccionales. 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/especularrespectivamente// Luz puntual glLightfv(GL_LIGHT0, GL_POSITION, position); // Luz direccional glLightfv(GL_LIGHT0, GL_POSITION, direction);

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

Modelo de iluminación (4/8) Componenteambiental Componentedifuso Componenteespecular • 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

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) * nota: y modelan dos aspectos diferentes del material, pero al final son solo fracciones que son multiplicadas juntas • 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

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 cosn

Modelo de iluminación (8/8) d d d • 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)

Mapeo de texturas/Texturación • Meta: agrega más detalle a la geometria de la escena sin agregar complejidad • Solución:texturación (texturemapping) • 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 (0,0) eje U (1,0) eje V (0,1)

Ejemplo de mapeo de textura Documentacióncompleta de glTexImage2D: http://www.opengl.org/sdk/docs/man/xhtml/glTexImage2D.xml QImageimg;GluinttextureID; // cargar una imagen en disco (usando Processing)img.load(“sand.gif”);img = img.convertToGLFormat(img); // Crearunatextura en el dispositivográficoglGenTextures(1, &textureID); // 1: generaruna sola textura// Cargardatos de la imagen en texturaglBindTexture(GL_TEXTURE_2D, textureID);glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, img.width(), img.height(), 0, GL_RGBA, GL_UNSIGNED_BYTE, img.bits());

Ejemplo de mapeo de textura // Dibujar el piso del desiertousando la texturaglBegin(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ónUV • 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 aplicandola 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 la dirección hacia arriba Dirección de visión Direcciónhaciaarriba Posición Distanciaplano-cercano Distanciaplano-lejano Ángulo de altura Proyección de perspectiva

Ancho Distancialejana Alto Vector de visión Distanciacercana Proyección del vector haciaarriba Vector haciaarriba Posición Cámara (3/3) Proyección ortográfica

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 2DglMatrixMode(GL_PROJECTION);gluPerspective(45, // Campo de visión window->width() / window->height(), // Relación de aspecto 0.02, 1000); // Distanciasplanoslejano/cercano// Matriz modelview captura posición y orientaciónglMatrixMode(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 quemira la cámara 0, 1, 0); // Direcciónhaciaarriba(X, Y, Z)

OpenGL Tutors • Excelenteguíaparacomprenderlasllamadas de funciónfija de OpenGL. • Realizadopor Nate Robins, disponiblepara Windows, OS X, y UNIX en http://user.xmission.com/~nate/tutors.html

Introducción a los gráficos 3D