Computacin Grfica Introduccin a los grficos 3 D

Computación Gráfica Introducción a los gráficos 3 D Usando Open. GL Semestre 201321 CRN Septiembre 2012 – Febrero 2013 Ciro Durán Ingeniero en Computación ciro. duran@gmail. com http: //www. ciroduran. com @chiguire Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Pipeline gráfico clásico • Objetos de malla (mesh) con polígonos 3 D (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 Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

¿Por qué Open. GL para 3 D? • Ampliamente utilizado en la industria y la academia para gráficos 3 D interactivos en tiempo real • API de función fija ("fixed-function") (Open. GL 1. x) asiste en el prototipado rápido de escenas simples en 3 D con efectos de iluminación "clásicos" – Experimentar con ideas simples rápidamente Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Polígonos 3 D (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, gl. Materialfv(GL_FRONT, // GL_DIFFUSE, // color); // 0. 3, 1. 0 }; // Amarillo pálido Color de caras frontales (visibles) Color "base" (más sobre esto más adelante) Pasar los valores de color R/V/A/Alfa Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Polígonos 3 D (2/2) • Open. GL por defecto aplica un sistema de coordenadas de la mano derecha • Los polígonos 3 D se definen como polígonos 2 D: gl. Begin(GL_TRIANGLES); gl. Vertex 3 f(0, 75, 0); gl. Vertex 3 f(-50, 0, 50); gl. Vertex 3 f(50, 0, 50); gl. End(); – 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. Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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) Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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. . . Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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. Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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. 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 Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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 2 D 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”. Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durá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) • ¿Y qué si queremos hacer una aproximación a un objeto redondo? – Con shading de Lambert, en facetas; la apariencia ya no es ideal – Aspecto plano, perfecto para esta pirámide rectangular Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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 Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Reglas de shading (3/6) • Pasemos de esto: shading de caras • A esto: shading suavizado Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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 • 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. – 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 • Smooth: Sólo un vértice normal por vértice; promedio de las normales de las caras de que el vértice sea parte. Smooth Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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 2 D (normales de los vértices en verde) Normales de los vértices mostrados en color, normales de las caras en negro. Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán Aproximación de una malla 3 D

Reglas de shading (6/6) • Open. GL provee shading plano o Gouraud. – Para obtener un shading plano, usa las mismas normales para diferentes vértices Faceted Smooth • 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) Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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) Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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 espacio Direccional • Punto Foco Open. GL soporta luces ambientales, direccionales, de punto y foco. Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Modelo de iluminación (2/8) float ambient[] = { 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) gl. Lightfv(GL_LIGHT 0, // o GL_LIGHT 1, GL_LIGHT 2, etc GL_AMBIENT, // o GL_DIFFUSE, o GL_SPECULAR ambient); // o color difuso/especular respectivamente // Luz puntual gl. Lightfv(GL_LIGHT 0, GL_POSITION, position); // Luz direccional gl. Lightfv(GL_LIGHT 0, GL_POSITION, direction); Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán ¡GL_POSITION no es un error! Open. GL 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 Open. GL: 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. Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán = THE COMPOSITE The three independent reflectivity types are accumulated to produce the result.

Modelo de iluminación (4/8) • Componente ambiental Componente difuso Componente especular Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Modelo de iluminación (5/8) • Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Modelo de iluminación (6/8) • Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Modelo de iluminación (7/8) • Caída especular de cos n Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Modelo de iluminación (8/8) • d d d Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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 3 D 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 eje V – requiere el sistema de coordenadas para referirse a las posiciones dentro del (0, 0) eje U (1, 0) 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 Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán (0, 1)

Ejemplo de mapeo de textura QImage img; Gluint texture. ID; // cargar una imagen en disco (usando Processing) img. load(“sand. gif”); img = img. convert. To. GLFormat(img); // Crear una textura en el dispositivo gráfico gl. Gen. Textures(1, &texture. ID); // 1: generar una sola textura // Cargar datos de la imagen en textura gl. Bind. Texture(GL_TEXTURE_2 D, texture. ID); gl. Tex. Image 2 D(GL_TEXTURE_2 D, 0, GL_RGBA, img. width(), img. height(), 0, GL_RGBA, GL_UNSIGNED_BYTE, img. bits()); Documentación completa de gl. Tex. Image 2 D: http: //www. opengl. org/sdk/docs/man/xhtml/gl. Tex. Image 2 D. xml Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Ejemplo de mapeo de textura // Dibujar el piso del desierto usando la textura gl. Begin(GL_QUADS); gl. Tex. Coord 2 f(0, 0); gl. Vertex 3 f(-9999, 0, 9999); gl. Tex. Coord 2 f(1, 0); gl. Vertex 3 f(9999, 0, 9999); gl. Tex. Coord 2 f(1, 1); gl. Vertex 3 f(9999, 0, -9999); gl. Tex. Coord 2 f(0, 1); gl. Vertex 3 f(-9999, 0, -9999); gl. End(); Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Coordenadas de texturación UV • Haremos el mapeo desde los dos triángulos coplanares en el modelo 3 D 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 Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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 Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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 • Open. GL te deja especificar los factores de tiling y estiramiento Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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) Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Cámara (2/3) • Proyección de perspectiva Proyección de la Dirección de dirección hacia visión arriba Dirección hacia arriba Posición Distancia planocercano Distancia plano-lejano Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán Ángulo de altura

Cámara (3/3) • Proyección ortográfica Ancho Distancia lejana Alto Vector de visión Distancia cercana Proyección del vector hacia arriba Vector hacia arriba Posición Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Cámara de Open. GL • Soporte para cámaras de perspectiva y ortográficas • Ejemplo de cámara de perspectiva: // Matriz de proyección captura conversión 3 D a 2 D gl. Matrix. Mode(GL_PROJECTION); glu. Perspective(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 gl. Matrix. Mode(GL_MODELVIEW); glu. Look. At(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) Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Open. GL Tutors • Excelente guía para comprender las llamadas de función fija de Open. GL. • Realizado por Nate Robins, disponible para Windows, OS X, y UNIX en http: //user. xmission. c om/~nate/tutors. html Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán