I.02 Cauce Gráfico

Informática Gráfica
El cauce gráfico
Módulo I: Introducción al cauce
gráfico
GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 1

Índice
 Introducción
 El etapas conceptuales*
 El etapas funcionales*
 Antialiasing
 Implementación del cauce gráfico (etapas del
cauce – pipeline stages*)
*Nomenclatura del libro de texto (Real-time

Rendering)
Conceptos previos
 Objetivo: generar una imagen a partir de una escena

virtual
 Renderizado: conjunto de transformaciones y procesos

de imagen que se realizan a los elementos que forman
la escena hasta llegar a la imagen final
Conceptos básicos
 Forward Rendering (o Fordward Shading):

 Proyectar los elementos de la escena sobre el
plano de proyección
 Simular el comportamiento de la luz (método
local)
 Algoritmos de visibilidad: decidir cuales de los
elementos proyectados son visibles en al imagen
final

Conceptos básicos
 Forward Rendering (o Fordward Shading):

 Ilumina y proyecta en una sola pasada
 Técnica básica

Conceptos básicos
 Transformaciones geométricas
 La geometría afín y la geometría proyectiva son las herramientas
básicas que nos permiten manipular los elementos de la escena
 En la asignatura de Modelado Geométrico en el bloque de

geometría afín y proyectiva se estudian dos tipos de
proyecciones: la proyección en perspectiva y la proyección
ortográfica.
 Generalmente utilizamos la proyección en perspectiva

(modelo de cámara pinhole).
 Al igual que sucede con nuestro ojo: en esta proyección el tamaño de
los objetos depende de su distancia a la cámara.
 Por el contrarío: este modelo simula una cámara sin óptica.
La cámara pinhole

Analogías: Cámara digital y ojo humano

Conceptos básicos
 El modelo de iluminación debe de tener en cuenta:

 Propiedades de los objetos de la escena
 La geometría de los objetos de la escena
 Cómo los objetos de la escena reflejan la luz (propiedades del material)
 Propiedades de las fuentes de luz
 Dependen del tipo de luz que queramos simular
 Puntual, focal, direccional, ambiental, luz de área…
 Intensidad, posición, dirección
 A la hora de iluminar solo se tienen en cuenta las fuentes de

luz directa (método local)

Conceptos básicos
 Los elementos que forman parte de la escena pueden

proyectarse e iluminarse de forma independiente. Estos dos
hechos, nos permiten paralelizar la resolución del problema
de forma sencilla
 Para proyectar un triangulo no necesitamos conocer cómo se
proyectan el resto de triángulos de la escena
 Podemos iluminar un punto de la escena sin saber cómo la luz
interactúa con el resto de objetos
 El problema de paralelizar el calculó de las oclusiones, es

decir, decidir qué elementos son visibles y cuáles no, no es
trivial. En nuestro caso se resuelve de forma bastante
eficiente utilizando el algoritmo del z-buffer
El cauce gráfico
 El cauce gráfico (o pipeline gráfico) se define como la secuencia de etapas en las

que se divide el proceso de renderizado
 ¿Qué es un pipeline?
 Se divide el proceso de generación en etapas. Las salidas de una etapa son las entradas de la
siguiente
 Dado que debemos configurar y programar dichas etapas, necesitamos conocer el cauce
 Permite paralelizar etapas
 No se mejora el tiempo de ejecución de una tarea pero sí la productividad general
 Las etapas deben de estar equilibradas: la etapa más lenta determina la velocidad del cauce
 Es importante tenerlo en cuenta a la hora de buscar cuellos de botella
 En nuestro caso, la información se multiplica a medida que avanzamos por el cauce

El cauce gráfico
 Paralelismo:
 Segmentación: las tarjetas implementan un proceso de renderizado
segmentado
 Paralelismo SIMD.
 Múltiples unidades de proceso realizando la misma operación con
distintos datos
 Gracias a que utilizamos un algoritmo de iluminación local, hay pocas
dependencias entre los datos y el problema es fácilmente paralelizable

El cauce gráfico

El cauce gráfico

El cauce gráfico
 El proceso de renderizado está bien establecido y la operaciones básicas a realizar

están bien definidas.
 Aún así, podemos encontrar distintos cauces dependiendo del autor que
consultemos, de la versión del API (OpenGl, DirectX…) o del nivel del abstracción al
que esté definido.
 Las etapas básicas son las mismas pero dependiendo:
 Pueden agruparse de forma distinta
 Pueden ordenarse de forma distinta
 Por ejemplo
 La iluminación se pude hacer a nivel de primitiva, vértice o fragmento (por ahora un fragmento
para nosotros es un pixel).
 Early Z-test: se determina que fragmentos son visibles antes de dar el color final.
 A medida que han evolucionado los gráficos por computador han aparecido nuevas etapas
opcionales: shader geométrico (no confundir con la etapa conceptual geométrica), etapas de
teselación, etapa de cómputo…

El cauce gráfico
 ¿Por qué debemos conocer el cauce?

 Un cauce es tan rápido como su etapa más lenta. Hay que
detectar que etapas están limitando el rendimiento (FPS-
Hz)
 Los pipelines actuales permiten al usuario

programar la funcionalidad de ciertas etapas
 Es importante entender cómo se transforma la
información a lo largo del cauce: cuáles son las
entradas y salidas de cada etapa, especialmente de las
etapas programables
 Las etapas no programables son configurables

Índice
 Introducción
 Antialiasing

Rendering)
Etapas conceptuales
 Aplicación: principalmente, se seleccionan las primitivas a pintar y configura

el cauce
 Primitiva: son los objetos geométricos más simples de los que se compone la
escena virtual: puntos, líneas, triángulos, strips, quads…
 Es importante descartar la información no visible en etapas tempranas,
controlando los recursos invertidos en el proceso
 Geometría: proyecta la geometría sobre el plano de proyección
 No confundir con los “shaders” geométricos
 Rasterizador: calcula los fragmentos asociados a cada primitiva, sombrea
dichos fragmentos y añade el valor correspondiente al frame buffer final
 Sombreado: proceso de iluminado, cálculo del color final
 Fragmento: posición de un píxel e información adicional (generalmente
información que se utilizará para su sombreado) asociados a una primitiva
 Framebuffer: conjunto de bufferes (posiciones adyacentes de memoria) que
contienen información de los píxeles de una imagen, por ejemplo su color y
profundidad

El cauce simplificado

Índice
 Introducción
 Antialiasing

Rendering)
Etapas funcionales
 Se van a desarrollar las operaciones descritas a nivel

conceptual
 Se describen nuevas operaciones como las etapas de
descarte
 Etapas de descarte:
 Al fluir los datos por el cauce, el volumen de datos se
multiplica
 Algunas etapas generan datos que no van a contribuir a la
imagen final.
 Se introducen etapas que realizan comprobaciones
tempranas para eliminar datos del cauce que no van a ser
utilizados

Etapa de aplicación
 Se configura el cauce gráfico

 Se seleccionan las primitivas a pintar
 El triángulo que se renderiza más rápido es el que nunca llega a la tarjeta
gráfica (algoritmos de aceleración global)
 Objetivos:
 Descartar la información no visible en etapas tempranas
 Controlar los recursos invertidos en el proceso
 Se utilizan estructuras que aceleran la búsqueda de los elementos que tienen
cierta probabilidad de verse en la escena final (por ejemplo, BSP)
 Importante: podemos incluir geometría que no aparezca en la escena final, pero no
podemos descartar geometría que pueda aparecer en dicha escena
 Salida:
 Primitivas compuestas de vértices
 Propiedades de los vértices: posición, color, coordenadas de textura
 Variables uniformes (comunes para todo el objeto)
 Texturas
 Posición del objeto (matriz MODEL)
 Configuración de la cámara (matriz VIEW + PROJECTION)
 Matriz de normales (matriz NORMAL)
 …



https://www.opengl.org/wiki/Primitive

 Otras tareas:
 Animación cinemática
 Simulación física
 Información de los dispositivos de entrada:
 Teclados, HMD, Hápticos, Joysticks
 Alguna de las etapas anteriores pueden hacerse total o

parcialmente en la GPU. Aunque la CPU controlará el proceso
 Skinning
 PhysX
 …
 El programador tiene control total sobre esta etapa

 Suele ejecutarse en computadores paralelos
 Vulkan diseñado para mejorar el rendimiento multithread de OpenGL

Etapas funcionales (GPU)
1. Transformaciones
2. Proyección
3. Iluminación Geometría
4. Ensamblado
5. Visibilidad (I)
6. Rasterizado (Escaneado)
7. Sombreado Rasterizado
8. Visibilidad (II)
9. Fusionado (Merge)
10. (Post-proceso)

1. Transformación
 Entrada
 Vértices de las primitivas y sus propiedades: posición, color,
normal, coordenadas de textura…
 No las primitivas en sí
 Se procesa cada vértice de forma independiente
 Etapa programable
 Función incluida en una etapa programable
GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS

1. Transformación
¿Cómo se representa el objeto en el mundo 3D?
Cámara
Obj. en sistema de ref. del

mundo
Obj. en sistema de referencia

local

1. Transformación
 Operaciones
 Se transforman los vértices de la malla de coordenadas del
objeto (coordenadas en las que fueron modelados) a
coordenadas del mundo virtual. Matriz MODEL
 Se transforma de coordenadas del mundo virtual a coordenadas
de la cámara (la cámara en el origen, mirando hacia las Z
negativas y su vector UP alineado con el eje Y). Matriz VIEW
 Las operaciones anteriores se pueden realizar en un solo paso.
Matriz MODELVIEW
 Se transforman las normales asociadas a los vértices de
coordenadas del modelo a coordenadas de la cámara. Matriz
NORMAL
 NORMAL = (MODELVIEW-1) T
 Se transforman otros vectores y posiciones asociados al vértice a
coordenadas de la cámara, en caso de que los haya. Por ejemplo,
las tangentes. ¿Qué matriz aplicarías?
 Se procesan y se crean otras propiedades asociadas a los
vértices. Por ejemplo, las coordenadas de textura

1. Transformación
 Matriz MODEL: se transforma de coordenadas del objeto a coordenadas

del mundo. Se posiciona el objeto en la escena. Se suelen combinar
transformaciones básicas
 Recordatorio!!! El orden en el que se aplican las coordenadas influye en el
resultado final

1. Transformación
 La matriz VIEW es una matriz de cambio de base

afín
 Posición: (0, 0, 0)
 Vector Up: Y
 Vector Look At: -Z
Up
vector
Look
vector
Position

2. Proyección
 Entrada:
 Las posiciones de los vértices de la etapa anterior en coordenadas de
la cámara
 ¿Cómo proyectamos los vértices?
Píxel
p(x,y,z)
Cámara
P(X,Y)

2. Proyección
 Matriz PROJECTION: tipos de proyecciones básicas

 Principalmente se usan 2: perspectiva y ortográfica
 Cada proyección necesita ser configurada con sus propios parámetros
 Salida:
 Vértices proyectados en coordenadas normalizadas

2. Proyección
 Definir el Viewport
 Pasar de coordenadas normalizadas a coordenadas del
frame buffer (píxeles).

Transformación y proyección
 Estas etapas suelen hacerse de forma

simultánea

3. Iluminación
¿Cómo se calcula el color de un punto de un

objeto?
Vector de luz
Vector normal
Vector de vista

3. Iluminación

 La iluminación se puede realizar en distintas etapas del cauce
y la entrada dependerá del punto donde la ejecutemos
 A nivel de primitiva
 A nivel de vértice
 A nivel de fragmento
Plano Gouraud Phong

3. Iluminación
 La iluminación depende de:

 Las propiedades de la luz (depende del tipo de
fuente de luz)
 Las propiedades del objeto (geométricas y
materiales)
 La posición del observador

3. Iluminación
 Distintos tipos de luces

 Luz ambiental
 Luz direccional
 Luz puntual
 Luz focal
 Distintos parámetros de
configuración
 Componente ambiental,
especular, difusa
 Posición, orientación
 Ángulo de apertura
 Atenuación
 …

4. Ensamblado
 Los vértices y sus propiedades se agrupan

dependiendo de la primitiva seleccionada en la
etapa de aplicación

5. Visibilidad (I)
Clipping (Frustum Culling) & Culling (Backface Culling)

 Objetivo: eliminar primitivas que no se van a ver en la imagen
final
Vértices no visibles
Cámara
GRADO EN DISEÑO Y DESARROLLO

44
DE VIDEOJUEGOS
5. Visibilidad (I)
 Eliminación de caras ocultas (Culling o backface culling)

 El orden de los vértices que forman la primitiva nos sirve para
indicar qué caras son visibles y qué caras no
 Hay que definir si la cara visible se define en sentido horario o
anti-horario

5. Visibilidad (I)
 Eliminar partes fuera del volumen de vista o

frustum (Clipping o frustum culling)

6. Rasterizado
Rasterizado, scan conversion

(Triangle Setup + Triangle transversal)*
¿Qué píxeles de la pantalla pertenecen a la primitiva que se está pintando?
*”Real-time rendering”
GRADO EN DISEÑO Y DESARROLLO

47
DE VIDEOJUEGOS
6. Rasterizado
 Entrada:
 Primitivas: vértices de la primitiva, más la información asociada a
dichos vértices
 Se calculan los fragmentos de los que se compone la
primitiva. El rasterizado depende de la primitiva
 Fragmentos: posición de un píxel de pantalla asociada una primitiva +
información asociada
 Por lo tanto:
 Hay que calcular las posiciones de pantalla que ocupa la primitiva (podríamos
hablar de píxeles, pero un fragmento es mucho más - además varios fragmentos
pueden estar asociados al mismo píxel)
 Información específica del fragmento, por ejemplo, sus coordenadas de textura, su
normal, su color…
 La información asociada a un fragmento viene determinada por las salidas de la etapa de
transformación
 Se calculan interpolando a partir de la información asociada a los vértices de la primitiva
6. Rasterizado
 Se determinan los fragmentos interiores y sus propiedades.

7. Sombreado
 Entrada: fragmentos
 Salidas:
 Color o colores de fragmento
 Distancia a la cámara (opcional)
 Se calcula el color del fragmento con los datos interpolados por el rasterizador
 Se accede a las texturas
 Una de las etapas más complejas debido al gran número de píxeles que hay por
pantalla. Recuerda un píxel puede tener asociado varios fragmentos

8. Visibilidad (II)
Un píxel puede tener asociados varios

fragmentos. ¿Cómo saber cual debemos
pintar? z 2
z1
z1 < z2
z

8. Visibilidad (II)
 Puede realizarse antes de la etapa de

fragmentos pero en tal caso no se podría
modificar la profundidad del píxel en la etapa
de fragmentos (sombreado)
 Objetivo: mantener el procesado de
fragmentos independiente
 La técnica más utilizada es el z-buffer o buffer
de profundidad

9. Merge
 Etapa no programable pero altamente configurable

 Operaciones a nivel de fragmento (raster operations):
 Blending: cómo mezclar el color del fragmento con la información del buffer
de color del frame buffer (FB) (implementar transparencia…)
 Stencil: se utiliza como máscara
 Nota: en el libro de texto se considera el Z-Buffer parte de esta etapa
 Dithering…
 Operaciones sobre el FB
 Copiar/mover bloques de píxeles
 Ejemplo: copiar el buffer de color a una textura, poner un sprite (mapas de bits en
general) en el buffer de color
 Buffers típicos de FB: De 1 o 4 buffers de color, z-buffer, stencil buffer,
accumulation buffer…

10. Post-proceso
 No se suele considerar una etapa del cauce. De hecho, suele

requerir varias pasadas por el cauce anterior
 Es importante puesto que la arquitectura anterior es incapaz
de simular muchos comportamientos de la luz
 Las operaciones de filtrado pueden realizarse en la GPU de
forma sencilla
 Motion blur
 Cartoon filter
 Gaussian blur
 Antialiasing
 …

10. Post-proceso
 Motion blur
 Puede generarse con múltiples pasadas

10. Post-proceso
 Gaussian blur
 Utiliza el buffer
de color y el de
profundidad

10. Post-proceso
 Cartoon render

Índice
 Introducción
 Antialiasing

Rendering)
Antialiasing
 Aliasing
 Trabajamos con imágenes discretas
 Frecuencia de muestreo insuficiente. No
podemos recuperar la señal original
 Teorema del muestreo perfecto de Nyquist
 Efectos: las fronteras de las primitivas aparecen
escalonadas, falta de continuidad en objetos
lejanos
 Son típicos los problemas con sombras y texturas
pero los trataremos en un tema a parte
Dificultades: aliasing





Antialiasing
 Soluciones (Antialiasing)
 Supersampling
 Partimos de una imagen con mayor resolución y reducimos su
tamaño combinando la información de la imagen de mayor
resolución

Antialiasing
 Multisampling
 Repetir el rasterizado desplazando la rejilla (x2, x4…)
 Fusionar los distintos resultados

Antialiasing
 Filtros morfológicos (GoW III) (Post-proceso)
 Detectar y corregir estos bordes en sierra
http://www.iryoku.com/mlaa/

Antialiasing

Antialiasing

Antialiasing

Antialiasing

Antialiasing

Antialiasing

Índice
 Introducción
 Antialiasing

Rendering)
OpenGL 1.0

OpenGL 2.0

OpenGL 2.1!!!
a b b1 c d e g
f
a. Etapa 1, 2, 3 d. Etapa 6 (Rasterizado)

b. Ensamblado de la primitiva e. Etapa 7, texturas, niebla
b1. Etapa de geometría (programable) f. Visibilidad, stencil, blending…
No forma parte de CORE! g. Copia y lectura del FB
c. Etapa 5, se pasa a coordenadas del
viewport
OpenGL 3.0

OpenGL 4.3

OpenGL 4.3

OpenGL 4.3
https://www.opengl.org/wiki/Rendering_Pipeline_Overview

I.02 Cauce Gráfico

Cargado por

Copyright:

Formatos disponibles

I.02 Cauce Gráfico

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

I.02 Cauce Gráfico

Cargado por

Copyright:

Formatos disponibles

Informática Gráfica

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 1

*Nomenclatura del libro de texto (Real-time

 Objetivo: generar una imagen a partir de una escena

 Renderizado: conjunto de transformaciones y procesos

 Forward Rendering (o Fordward Shading):

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 5

 Forward Rendering (o Fordward Shading):

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 6

 En la asignatura de Modelado Geométrico en el bloque de

 Generalmente utilizamos la proyección en perspectiva

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 8

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 9

 El modelo de iluminación debe de tener en cuenta:

 A la hora de iluminar solo se tienen en cuenta las fuentes de

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 10

 Los elementos que forman parte de la escena pueden

 El problema de paralelizar el calculó de las oclusiones, es

 El cauce gráfico (o pipeline gráfico) se define como la secuencia de etapas en las

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 12

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 13

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 14

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 15

 El proceso de renderizado está bien establecido y la operaciones básicas a realizar

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 16

 ¿Por qué debemos conocer el cauce?

 Los pipelines actuales permiten al usuario

 Las etapas no programables son configurables

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 17

*Nomenclatura del libro de texto (Real-time

 Aplicación: principalmente, se seleccionan las primitivas a pintar y configura

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 19

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 20

*Nomenclatura del libro de texto (Real-time

 Se van a desarrollar las operaciones descritas a nivel

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 22

 Se configura el cauce gráfico

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 23

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 24

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 25

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 26

 Alguna de las etapas anteriores pueden hacerse total o

 El programador tiene control total sobre esta etapa

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 27

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 29

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS

¿Cómo se representa el objeto en el mundo 3D?

Obj. en sistema de ref. del

Obj. en sistema de referencia

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS

 Matriz MODEL: se transforma de coordenadas del objeto a coordenadas

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS

 La matriz VIEW es una matriz de cambio de base

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 34

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS

 Matriz PROJECTION: tipos de proyecciones básicas

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 36

GRADO EN DISEÑO Y DESARROLLO DE VIDEOJUEGOS 37

 Estas etapas suelen hacerse de forma