introducción a los gráficos 3d

36
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán Computación Gráfica Semestre 201321 CRN Septiembre 2012 – Febrero 2013 Ciro Durán Ingeniero en Computación [email protected] http://www.ciroduran.com @chiguire Introducción a los gráficos 3D Usando OpenGL

Upload: herman

Post on 05-Jan-2016

40 views

Category:

Documents


5 download

DESCRIPTION

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 - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Introducción  a los  gráficos  3D

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Computación Gráfica

Semestre 201321CRN

Septiembre 2012 – Febrero 2013

Ciro DuránIngeniero en Computación

[email protected]://www.ciroduran.com

@chiguire

Introducción a los gráficos 3D

Usando OpenGL

Page 2: Introducción  a los  gráficos  3D

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 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

Page 3: Introducción  a los  gráficos  3D

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

¿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

Page 4: Introducción  a los  gráficos  3D

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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álidoglMaterialfv(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

Page 5: Introducción  a los  gráficos  3D

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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.

Page 6: Introducción  a los  gráficos  3D

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)

Page 7: Introducción  a los  gráficos  3D

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...

Page 8: Introducción  a los  gráficos  3D

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.

Page 9: Introducción  a los  gráficos  3D

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.

• 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!En medio: una

fracción de luz reflejada

cosdirII

De cara a la fuentede luz: máxima reflexión

Perpendicular a la fuente de luz: no hay reflexión

٣ to light source =No reflection

Page 10: Introducción  a los  gráficos  3D

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 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”.

cosdirII

Page 11: Introducción  a los  gráficos  3D

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)– 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

Page 12: Introducción  a los  gráficos  3D

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

Page 13: Introducción  a los  gráficos  3D

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

Page 14: Introducción  a los  gráficos  3D

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– 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.

Smooth

Faceted

Page 15: Introducción  a los  gráficos  3D

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 2D (normales de los vértices en verde)

Aproximación de una malla 3D

Normales de los vértices mostrados en color, normales de las caras en negro.

Page 16: Introducción  a los  gráficos  3D

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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)

SmoothFaceted

Page 17: Introducción  a los  gráficos  3D

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Resumen de interpolación vs.shading plano

Interpolando(shading Gouraud)

Copiando(shading plano)

Iluminacióncomputada por vértice

Líneas negras y vértices verdes demuestran la malla aproximada.

Línea amarilla muestra la superficie verdadera.

Page 18: Introducción  a los  gráficos  3D

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 ese espacio

• OpenGL soporta luces ambientales, direccionales, de punto y foco.

PuntoDireccional Foco

Page 19: Introducción  a los  gráficos  3D

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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 puntualglLightfv(GL_LIGHT0, GL_POSITION, position);

// Luz direccionalglLightfv(GL_LIGHT0, GL_POSITION, direction);

¡GL_POSITION no es un error! OpenGL usa un truco de álgebra lineal (homogenización) para

luces direccionales.

Page 20: Introducción  a los  gráficos  3D

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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

AMBIENTEEfecto de luz que no es direccional, afectando a todas las superficies por igual.

+ DIFUSIÓNEfecto 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 COMPOSITEThe three independent reflectivity types are accumulated to produce the result.

Page 21: Introducción  a los  gráficos  3D

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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

Page 22: Introducción  a los  gráficos  3D

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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 :

Page 23: Introducción  a los  gráficos  3D

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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

Page 24: Introducción  a los  gráficos  3D

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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 vistar = imagen reflejada de la fuente de luzℓ = vector de la fuente de luzn = normal de la superficieδ = ángulo entre e y rn = coeficiente especular

Nota: OpenGL usa un modelo de iluminación ligeramente diferente llamado Blinn-Phong.

Caída especular de cos n

Page 25: Introducción  a los  gráficos  3D

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

d

d

Page 26: Introducción  a los  gráficos  3D

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 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

Page 27: Introducción  a los  gráficos  3D

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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áficoglGenTextures(1, &textureID); // 1: generar una sola textura

// Cargar datos 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());

Documentación completa de glTexImage2D:http://www.opengl.org/sdk/docs/man/xhtml/glTexImage2D.xml

Page 28: Introducción  a los  gráficos  3D

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 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();

Page 29: Introducción  a los  gráficos  3D

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 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

Page 30: Introducción  a los  gráficos  3D

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

Page 31: Introducción  a los  gráficos  3D

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

• OpenGL te deja especificar los factores de tiling y estiramiento

Page 32: Introducción  a los  gráficos  3D

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)

Page 33: Introducción  a los  gráficos  3D

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Cámara (2/3)

• Proyección de perspectiva

Posición

Proyección de la dirección hacia arriba

Direcciónhacia arriba

Distanciaplano-

cercanoDistanciaplano-lejano

Dirección de visión

Ángulo de

altura

Page 34: Introducción  a los  gráficos  3D

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

Cámara (3/3)

• Proyección ortográfica

Alto

Ancho

Vector de visiónDistancia

cercana

Posición

Distancia lejana

Vector hacia arriba

Proyección del vector hacia arriba

Page 35: Introducción  a los  gráficos  3D

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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); // Distancias planos lejano/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 que mira la cámara 0, 1, 0); // Dirección hacia arriba (X, Y, Z)

Page 36: Introducción  a los  gráficos  3D

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán

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