Gráfico por computador

Definición

Las técnicas relacionadas con la generación de imágenes en un computado, su proceso consiste en un conjunto de operaciones sobre un modelo informático e datos(Modelado) para obtener una representación gráfica(Renderizado).

La imagen puede describirse como una representación de la variación de una magnitud o un parámetro sobre una superficie, casi siempre será la intensidad de la luz. Una imagen está compuesta de pixeles y se almacenan de forma digital con una precisión y número de bits.

La imagen que percibimos depende de geometría, características de la luz, características de los materiales.

Cause gráfico

  1. Aplicación: Selecciona las primitivas a pintar y configura el cause
  2. Transformaciones
    1. Se transforma de coordenadas del modelo a coordenadas del mundo, el orden en el que se aplican las coordenadas influye en el resultado final.
    2. Se transforma de coordenadas del mundo a coordenadas de la cámara.
  3. Proyección: Transformación las coordenadas sobre el plano de vista (2D), ademas hay que pasar de coordenadas normalizadas a coordenadas del frame buffer.
    1. Ortográfica
    2. Perspectiva
    3. Viewport: Definir en que parte de la imagen se va a pintar
  4. Iluminación: Calcular los colores
    • A nivel de vertice
    • A nivel de fragmento
  5. Ensamblado: Agrupa vertices en primitivas
  6. Visibilidad I
    1. Culling
    2. Clipping
  7. Rasterizado: Transforma las primitivas en fragmentos (píxel + datos asociados), el valor de los parámetros del fragmento se interpola
  8. Sombreado: Colorea los fragmentos
  9. Visibilidad II: Z-buffer para determinar pixel ocultado por otro
  10. Operaciones con la imagen: blending, motion blur, cartoon filter, gaussian blur, antialiasing

Técnica de modelado

Un modelo suele tener

Propiedades deseables en un modelo

Modelos de alambre

La información que se tiene sobre el objeto es un conjunto de líneas

Modelos de mallas

Es conocida como representación por fronteras, es necesario definir sus vértices, aristas y caras. Para distinguir fuera y dentro, se usa la dirección de la normal. Las caras planas son la forma de representación más extendida y aproxima superficies curvas con precisión dependiente de la resolución. La norma de un vértice a partir de las normales de las caras adyacentes.

  1. Listas no indexadas
  2. Listas indexadas: cada vértice se representa con un índice sobre una lista de coordenadas

Vertices List

Y además:

Representaciones de fronteras no poliédricas

Modelos multiresolución

Se basan en el concepto de LOD (Level of detail)

Otros

Visibilidad

Determinar qué elementos son visibles desde un punto de vista dado y cuales no. Debemos eliminar del cause aquellos elementos que no son visibles en eapas tempranas.

Etapa de aplicacion

La CPU indica a la GPU que objetos debe de mostrar. Si sabemos que algo no se va a ver, pues no se le pasa. p.j. basados en técnicas de subdivisión del espacio.

En el cause gráfico

A nivel de primitiva

Clipping

Clipping
Clipping

Divide los vértices en dos listas, parte visible y parte invisible

Clipping Group
Clipping Intersect

OpenGL proyecta todo antes de hacer clipping, culling, se hace despues y es más facil ver sus coordenadas están o no en -1 y 1. Puede originar apariciones/desapariciones repentinas (utilización de niebla para aminorarlo).

Visible Volume
Normalized Volume
Clipping Cut

Recorte en el plano normal al eje “Y”

Clipping Formula

Culling

Eliminación de caras ocultas que no sean visibles por la cámara dada su orientación. Se analiza el signo del producto escalar del vector de visualización con la normal a la superficie.

A nivel de primitiva o píxel

Algoritmo del pintor

Se dibujan todos los polígonos que aparecen en la escena empezando por los más alejados, de manera que los polígonos situados en primer plano se dibujan sobre los polígonos situados en el fondo.

Buffer de profundidad (z-buffer)

Determinar la profundidad (coordenada z) de cada fragmento. El Z-buffer está inicialmente vacío. Cada vez que un fragmento se dibuje, la coordenada z del fragmento es comparada con el valor actual de dicha posición en el buffer.

Z Buffer

Ray Tracing

Iluminación

Illumination

Entendemos por modelo de iluminación el cálculo de la intensidad de cada color (RGB por ejemplo) para cada punto de la escena, que puede intervenir

Se ilumina un punto teniendo en cuenta exclusivamente

Illumination

Luces

Light

Luces direccionales

Luces puntuales

Luz focal

Luces de área

Modelos de iluminación

Modelos locales

Sólo se considera la interacción fuentes de luz-objetos.

Modelo de iluminación de Phong

El modelo de iluminación define la ecuacion para calcular las intensidades dado los componentes necesarios

$$
\lambda = k_{(emissive, \lambda)} + I_{(A, \lambda)} k_{(a, \lambda)} + \sum_{I \in lights} f_{att}^I \Big( I_{(a, \lambda)} k_{(a, \lambda)} + I_{(d, \lambda)} k_{(d, \lambda)} \cos{\theta} + I_{(e, \lambda)} k_{(e, \lambda)} \cos^{n}{\alpha} \Big)
$$

$\lambda$ suele reducirse a 3 colores básicos (R, G, B).

Light Components

Componente ambiental

Proviene de todas las direcciones e ilumina todas las caras del objeto por igual.

Se modela con

$$
I_a k_a
$$

Componente difusa

Proviene de una dirección y se refleja en todas direcciones.

Se modela con

$$
I_d k_d \cos{\theta} = I_d k_d (L \cdot N)
$$

Componente especular

Proviene de una dirección y se refleja en una dirección. La mayor parte de los rayos de luz que proceden de una fuente se reflejan en su superficie en una dirección determinada. Si la cámara se sitúa en la trayectoria de dichos rayos, captará una mayor intensidad en dicho punto.

Se modela con

$$
I_e k_e \cos^{n}{\alpha} = I_e k_e (R \cdot V)^n\\\\
R = 2 (L \cdot N)N - L
$$

Specular
Specular N

Factor de atenuación

Se puede atenuar la luz en función de la distancia

$$
f_{att} = \frac{1}{c_1 + c_2 d + c_3 d^2}
$$

Iluminación emisiva

Se ocupa de simular objetos que emiten luz, se simula con un valor fijo independiente de la luz $k_{emissive}$

Modelo de sombreado

Define cuando cuando y donde aplica la ecuacion para obtener la intensidad de cada puntos.

Shading Model

Sombreado plano

Todos los puntos de un polígono se sombrean con el mismo color 

gl.glShadeModel(GL2.GL_FLAT);

Correcto si se verifica:
* Fuente de luz en el infinito.
* Observador en el infinito.
* El polígono representa una superficie plana real del objeto que se modela y no es una aproximación de un objeto curvo

Sombreado de Gouraud

A partir de la normal en cada vértice, se evalúa la ecuación de iluminación para cada vértice. Se realiza una interpolación bilineal para obtener la intensidad en cada punto interno.

Bilinear Interpolation 

gl.glShadeModel(GL2.GL_SMOOTH);
Sombreado de Phong

Aplazando el cálculo de la iluminación hasta el paso de sombreado del fragmento. Por lo tanto, se interpolan las normales de los vértices y las propiedades de color y se aplica la fórmula de Phong para calcular el color por píxel en lugar de por vértice

Modelos globales

Se consideran también las interacciones mutuas entre objetos. se tienen en cuenta el resto de elementos de la escena. Suelen estar basados en modelos físicos de la luz (óptica, radiación térmica, radiación electromagnética, etc…)

Ray trazing
Radiosity
Radiancia
Photon Mapping

Buffer de Stencil 

glEnable(GL_STENCIL_TEST);
glStencilFunc(parameters);

El buffer de estarcido es muy útil para limitar zonas espaciales donde poder dibujar

Buffer de Acumulación 

glAccum(parameters)

El buffer de acumulación sirve para capturar el buffer de color en un fotograma y aplicarle acumulaciones del color de otro fotograma/s. Una posible aplicación consiste en simular el efecto de estela de un objeto en movimiento.

Texturas

La utilización de texturas aumenta el realismo visual de la imagen sin aumentar número de polígonos.

Unidimensionales

Bandas que varían en una sola dirección, poco usadas

Bidimensionales

Suelen ser cuadradas y potencias de 2.

Texturas cúbicas

Extensión de las texturas bidimensionales, muy usadas en mapeos de entornos.

Tridimensionales

Datos volumétricos

Diffuse Map

Almacena coeficientes difusas que refleja la luz difusa

Specular Map

Almacena coeficientes especular que refleja la luz especular

Emissive Map

Simulan objetos que emiten luz.

Lighting Map

Las sombras y luces estáticas precalculada

Alpha Blending

La información de transparencia en escala de grises

Bump Map

Almacena la profundidad del fragmento, en escalas de grises.

Normal Map

Modificación de normales para dar sensación de relieve.

Height Map

Almacenan las alturas en escalas de grises.

Displacement Map

Se almacena el desplazamiento de fragmentos o vértices en escalas de grises.

Coordenadas de Textura

El rango de coordenadas en el espacio de la textura es entre 0 y 1. Las coordenadas de textura se proporcionan para cada vértice y son interpoladas en el pipeline del procesador gráfico.

Mapeado Plano

Flat Mapping

Mapeado Cilíndrico

El objeto se envuelve en un cilindro. Las coordenadas del objeto se transforman a coordenadas cilíndricas (r, θ, y). A la hora de proyectar la textura sólo se tiene en cuenta el ángulo y la altura.

Cube Mapping

Aliasing en Texturas

En gráficos, el término aliasing (espacial) se refiere al escalonado que se aprecia en la frontera de las primitivas debido a la limitada resolución de la pantalla.

Aliasing

Minificación

Un píxel se corresponde con muchos texels

Magnificación

Un téxel se corresponde con muchos pixels

Box filter

Se utiliza el texel mas cercano.

Box Filter

Bilinear filter

Utiliza cuatro texeles e interpola linealmente los valores.

Bilinear Filter

Mipmapping

Consiste en proporcionar además de la textura original un conjunto de versiones más pequeñas de la textura, cada una un cuarto más pequeña que la anterior.

Mipmapping

Supersampling

Se toman las 4 esquinas del píxel y se proyectan. Se ponderan los 4 valores segun las distancias.

Supersampling

Pre-filtering

Se trata el píxel como una región en la textura. Se pondera en función de la región ocupada.

Pre-filtering

Alpha Blending

La intensidad del nuevo pixel vendrá dada por

$$
rgb = \alpha \cdot rgb + (1 - \alpha) \cdot rgb
$$

  1. Activar el cálculo de la transparencia

    glEnable(GL_BLEND);

  2. Especificar la función de cálculo.

    glBlendFunc(GL_SRC_ALPHA , GL_ONE_MINUS_SRC_ALPHA);

  3. Desactivar la actualización del buffer de profundidad.

    glDepthMask(GL_FALSE);

  4. Dibujar los objetos transparentes

  5. Deshabilitar las transparencias y volver a habilitar el buffer de profundidad

    glDisable(GL_BLEND);
    glDepthMask(GL_TRUE);

Reflejos

Se utiliza la posición de la cámara y la normal del objeto para generar la coordenada de textura.

Sombras

  1. Dividir los objetos en sombreadores
  2. Crear un buffer de color en blanco y negro
  3. Deshabilitar texturas, luces …
  4. Renderizar los objetos sombreadores desde el foco lumínico
  5. Almacenar el buffer de color en una textura.
  6. Renderizar la escena proyectando la textura sobre los objetos sombreados, utilizando una matriz de proyección que se usó para generar la textura.

Puede generar “z-fighting” con el plano.

glEnable(GL_POLYGON_OFFSET_FILL)
glPolygonOffset

OpenGL

Open GL es un estándar multiplataforma que define un API para la creación de contenido 2D y 3D que permitan aprovechar las capacidades de computo de dispositivos gráficos. Los fabricantes deben cumplir las especificaciones.

Modelo de programación

OpenGL se ejecuta de acuerdo a un estado.

OpenGL Pipeline

Framebuffer

Está compuesto por la información de color de cada pixel que conforma la imagen. Es común que las aplicaciones gráficas utilicen más de un buffer de color, “DoubleBuffer”, un buffer se muestra en pantalla (front buffer) se dibuja sobre otro (back buffer). Cuando el back buffer está listo para ser mostrado, se hace un glutSwapBuffers entre las referencias a donde comienza el front y el back buffer.

GLUT

La gestión de ventanas, periféricos de entrada (ratón/teclado) y el pintado.

Etapas del cauce

OpenGL Pipeline

Etapa de vértices (programable)

Ensamblado

Cambio en el tipo de datos procesado. Agrupa vértices en puntos, líneas, triángulos…

Etapa geométrica (programable, opcional):

Clipping y culling 

glEnable(GL_CULL_FACE)

Rasterizado

Etapa de fragmentos (programable)

Operaciones por fragmento: Z-buffer, blending…

Operaciones con el frame buffer

Shaders

Un shader define un programa concurrente para un conjunto de entradas. Las instancias son independientes entre sí.

Variables

Shader de vértices

Vertex Shader

Shader de fragementos

Fragment Shader

Configuración

  1. Crear y compilar los shaders
  2. Asociar los shaders a un programa
  3. Dibujar con los shaders

GLSL

Acceso 

.x, .y, .z, .w posición o dirección
.r, .g, .b, .a color
.s, .t, .p, .q coordenadas de textura

Vertex Buffer Object

Un VBO es un buffer que se crea en el espacio de memoria del servidor. Puede ser dos tipo GL_ARRAY_BUFFER o GL_ELEMENT_ARRAY_BUFFER

  1. Se crea un identificador para el buffer: glGenBuffers
  2. Se enlaza el buffer para poder usarlo: glBindBuffer
  3. Se suben los datos: glBufferData
  4. Se asigna al atributo: glVertexAttribPointer
  5. Se activa el atributo: glEnableVertexAttribArray
  6. Se liberan recursos: glDeleteBuffers

Cuando se asigna un atributo location se puede sacar con glGetAttribLocation, o viendo layout (location = 1) in vec3 inColor

Index Vertex Buffer Object

Index Vertex Buffer Object

Vertex array object

Agrupa los vbos y cuando activa vao activa todos los vbo con sus configuraciones.

  1. Creación: glGenVertexArrays
  2. Activar: glBindVertexArrays
  3. Asocia con vao: glBindBuffer
  4. Configra vbo: glVertexAttribPointer
  5. Acitva vao y todos sus vbos: glEnableVertexAttribArray
  6. Pintar
    • Pintado con un modelo indexado
      1. Se activa: glBindBuffer
      2. Pintado: glDrawElements
    • Pintado con un modelo no indexado
      1. Pintado: glDrawArrays
  7. Destrucción: glDeleteVertexArrays

Textura

Cualquier etapa puede acceder a textura a través de un “sampler” con texture

Parámetros

Pasos

  1. Creación: glGenTextures
  2. Activación: glBindTexture
  3. Se define el tamaño, el formato interno y el contenido: glTexStorage2D, glTexImage2D, glTexSubImage2D
  4. Generar midmaps y utiliza automáticamente: glGenerateMipmap
  5. Configurar: glTexParameteri
  6. Enlazar con texture unit: glActiveTexture, glBindTexture
  7. Borrado: glDeleteTexture