Taller OpenGL

Intro a OpenGL ES 2.0
para iOS
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz

¿Qué necesito saber?

• C / Objective C

• Concepto de Vista y
ViewController


¿Qué es OpenGL?

• API de C para producir gráﬁcos 3D
• Multiplataforma
• Antiguo: 1992
• Parte en la GPU, parte en la CPU


Conceptos
Fundamentales


Un poco de Historia

Developers, developers, • Creado por SGI en 1992
• MS intentó acabar con él
developers!

en 1997...
• ...pero los “developers,
developers, developers!”
ganaron la batalla.


...y la Historia sigue

• Mantenido por el Khronos Group
• Nuevas versiones: OpenGL 2.0 y ES
• Sigue siendo el estandar de facto para
gráﬁcos 3D.
• Lo seguirá siendo por bastante tiempo


Con el tiempo...

• Complejo
• Anticuado
• Había que
poner orden


OpenGL 2.0

• Elimina todo lo antiguo y sub-óptimo
• Adaptado a las nuevas GPUs
• Más “programable”: shaders


OpenGL ES

• Embedded Systems

• Subconjunto de OpenGL


OpenCL
• ¿Tiene algo que ver?

• Sólo para Mac

• Todavía no utilizable en
iOS

• La esperanza es lo último
que se pierde

• Hay chapuzas para ir
consolándose (shaders).


GLKit

Y dijo Jobs a sus discípulos:
“Que lo común sea trivial y lo difícil sea factible”


Renderizado

Crear una imagen a partir de una descripción
geométrica y de algunos datos más necesarios
para crear la ilusión de 3 dimensiones.


GPU vs CPU
• Procesa vectores de números de coma
ﬂotante en paralelo
• A toda ostia
• Es programable (OpenCL & Shaders)
• Nadie mejor que NVidia y los Myth Busters
para explicarlo. ;-)


Cuellos de Botella

• CPU: Mil millones de operaciones por
segundo.
• GPU: Decenas de miles de millones de
operaciones por segundo.
• Memoria: 200 millones de accesos por
segundo.


Buffers

• Forma Óptima de Proporcionar Datos
• Área continua de memoria bajo control de
la GPU, que se utiliza para la entrada y
salida de datos de la forma más eﬁciente
posible.


El Noble Octuple Sendero
hacia el Nirvana del Buffer
1 Crear
8 eliminar 2 Enlazar

7 Desactivar 3 Inicializar

6 Dibujar 4 Activar
5 Asignar Tipo

1 Crear
• Generate

• OpenGL crea un ID
único para identiﬁcar el
buffer.

• A este ID numérico a
menudo se le llama
"name".

• Si, ya lo sé... ;-)


2 Enlazar

• Bind

• Asignamos el buffer a
OpenGL para que pueda
usarlo.

• Sigue sin haber datos.


3 Inicializar

• Init buffer data

• El buffer no tiene
estructura

• Paso costoso


4 Activar

• Enable

• Indica a OpenGL que
pase a usar un buffer
para un renderizado.


5 Asignar Tipo

• Set Pointers

• Indica a OpenGL el tipo
de los datos en el buffer
y los offsets para
acceder a los datos.

• Fácil cagarla.


6 Dibujar

• Draw o Render

• Indica a OpenGL que
renderice todo o parte
de una escena usando
los buffers enlazados y
activos.


7 Desactivar

• Disable

• Indica a OpenGL que se
olvide de un buffer.


8 Eliminar

• Delete

• Eliminamos un buffer y
liberamos su memoria.

• Potencialmente
problemático por
sincronización entre
CPU y GPU


Recomendaciones

• Una vez creado un
buffer, reaprovéchalo.

• Inicializar es caro.

• Destruir también, pero
por otras razones.


Frame Buffers

• Son los buffers de salida.
• Reciben la imagen.
• Front Frame Buffer.
• Back Frame Buffer.


Contexto de OpenGL

• Contiene toda la conﬁguración necesaria
para renderizar.
• Frame buffer, buffers de entrada, texturas y
demás.
• Similar al contexto de Core Graphics


Sistema de Coordenadas &
Vectores
• Usamos el cartesiano

• Todo punto se
representa como un
vector.

• La principal entrada de
un programa OpenGL
será una serie de
vectores que deﬁnen los
vértices (puntos) de una
escena.


Vértices, puntos,
segmentos y triángulos
• OpenGL usa vértices para renderizar
puntos, segmentos y triángulos:
• Punto: 1 vértice
• Segmentos: 2 vértices
• Triángulo: 3 vértices


Tipos
• OpenGL es multiplataforma, así que define
sus propios tipos mediante enums.
• Todos empiezan con GL (se han partío el
coco)
• GLFloat, GLDouble, GLBoolean, etc...
• GLclampf: GLFloat entre 0.0 1.0
• Ojo, ¡especifica siempre float!

Funciones

Crea un color RGB


OpenGL ES
en iOS


Limitaciones en iOS

• No asignas los front y
back buffers. Lo hace
iOS por ti.

• El frame buffer está
conectado a una
CALayer y comparten el
bitmap.


GLKViewController &
GLKView
• GLKView: tiene su rootlayer conectada a
un frame buffer y cambia del front al back.
• El controlador es el delegado de la vista y
se encarga del dibuja y adaptar a la
orientación.

-(void) glkView:(GLKView *)view
drawInRect:(CGRect)rect


GLKBaseEffect
• Proporciona un entorno por defecto

• luces

• texturas

• “niebla”

• Shaders por defecto

• Abstrae las diferencias entre OpenGL 1.0 y 2.0


Llegados a este punto...

Suele pasar esto


Mejor será que
vayamos a Xcode
• Un proyecto de una sola
vista (GLKView,
GLKViewController).

• Un GLKBaseEffect

• 3 vértices (un triángulo)


Abstraer C

• ATGLKContext
• ATVertexArrayBuffer


Animaciones

• Periódicamente cambiaremos la posición de
los vértices y le pediremos a OpenGL ES
que dibuje de nuevo.
• GLKViewController nos facilita
enormemente la labor.


GLKViewController al
rescate

• preferedFramesPerSecond
• framesPerSecond
• -(void) update


Volvamos a Xcode

• Añadimos nuestras dos
clases.

• Asignamos un
preferedFramesPerSecond
de 60.

• Recalculamos los vértices
y los dibujamos en update


Texturas

• Forma sencilla de asignar un color a cada
pixel.
• Otro buffer de OpenGL con un mapa de
bits.
• Mapeamos puntos del buffer de vértices al
de textura.


Tamaño de la Textura

• Lo menor posible.
• En sistemas empotrados, suele estar
limitado.
• Si las dimensiones son potencias de 2, la
GPU lo agradece.


Texels
{0,1} {1,1}

T

{1,0}
{0,0}

S
Independientemente de las proporciones de la imagen, la textura tendra 1x1.


Tipos de texturas

• 1D: 1 pixel por n
• 2D: n x m pixels (las más comunes)
• 3D: una pila de 2D


Mapeados

• Transformar un espacio vectorial en otro
• Del espacio del frame buffer al de pantalla
(viewport)
• Del de vértices al de textura


Mapear Vértices a
Texels

• Cada vértice tendrá:
• Posición:Vector 3D
• Coordenadas de textura:Vector 2D


Mapear Vértices a
Texels
Vértice Textura
Posición
x,y,z T

Color
u
v S


Mapear Vértices a
Texels

• Cada vértice coloreado se llama Fragment


Mapear Vértices a
Texels
• Una vez hecha la transformación, la GPU
asigna color a cada pixel.
• A este proceso, de pasar de datos
geométricos a pixeles, se le llama rasterizar.
• A cada pixel coloreado, se le
llama fragment.


Calma que ya falta
poco...
• One more thing!

• Si vértices y texels
coinciden, el mapeado es
de uno a uno.

• Pero... ¿y si no
coinciden, qué coño
hacemos?

Funciones de Mapeado
“Sampling Modes”
• Dos funciones
• Nearest
• Interpolate
• glTexParameteri al rescate


Funciones de Mapeado
“Sampling Modes”

• Nearest: Aspecto pixelado
• Interpolated: Aspecto suave pero es
costoso.


MIP Mapping: La Trampa

“El Golpe” consiste en crear
varias versiones de la
textura en distintas
resoluciones.


Cargar un textura en
GLKBaseEffects
Usamos GLKTextureLoader para darnos un
GLKTextureInfo a partir de una CGImage.

// Setup texture
    UIImage *texture = [UIImage imageNamed:@"GrungePaint.jpg"];
    NSError *err = nil;
    GLKTextureInfo *textureInfo = [GLKTextureLoadertextureWithCGImage:[texture CGImage]
                                                              options:nil
                                                                error:&err];
    if (!textureInfo) {
        NSLog(@"Error while loading texture: %@", [err localizedDescription]);
    }

    self.baseEffect.texture2d0.name = textureInfo.name;
    self.baseEffect.texture2d0.target = textureInfo.target;


Volvamos a Xcode

• Aplicaremos una textura
al triángulo.


Aquí hay gato
encerrado...
• Lo normal no es tener 1
triángulo, sino miles o
millones...
• ¿Los escribo a mano?
• Blender, obj & Cia


Mucho por ver
Esto no es una foto...


Libros

• The OpenGL
SuperBible, 4th Edition

• Learning OpenGL ES


Contacto

• Fernando Rodríguez
• @frr149
• www.agbo.biz


Taller OpenGL

Recommended

Recommended

More Related Content

Similar to Taller OpenGL

Similar to Taller OpenGL (20)

Recently uploaded

Recently uploaded (19)

Taller OpenGL