Download - Taller OpenGL

Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz

Intro a OpenGL ES 2.0para iOS

http://www.agbo.biz

http://www.agbo.biz


¿Qué necesito saber?

• C / Objective C

• Concepto de Vista y ViewController

http://www.agbo.biz

http://www.agbo.biz


¿Qué es OpenGL?

• API de C para producir gráficos 3D

• Multiplataforma

• Antiguo: 1992

• Parte en la GPU, parte en la CPU

http://www.agbo.biz

http://www.agbo.biz


Conceptos Fundamentales

http://www.agbo.biz

http://www.agbo.biz


Un poco de Historia

• Creado por SGI en 1992

• MS intentó acabar con él en 1997...

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

Developers, developers, developers!

http://www.agbo.biz

http://www.agbo.biz


...y la Historia sigue

• Mantenido por el Khronos Group

• Nuevas versiones: OpenGL 2.0 y ES

• Sigue siendo el estandar de facto para gráficos 3D.

• Lo seguirá siendo por bastante tiempo

http://www.agbo.biz

http://www.agbo.biz


Con el tiempo...

• Complejo

• Anticuado

• Había que poner orden

http://www.agbo.biz

http://www.agbo.biz


OpenGL 2.0

• Elimina todo lo antiguo y sub-óptimo

• Adaptado a las nuevas GPUs

• Más “programable”: shaders

http://www.agbo.biz

http://www.agbo.biz


OpenGL ES

• Embedded Systems

• Subconjunto de OpenGL

http://www.agbo.biz

http://www.agbo.biz


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

http://www.agbo.biz

http://www.agbo.biz


GLKit

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

http://www.agbo.biz

http://www.agbo.biz


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.

http://www.agbo.biz

http://www.agbo.biz


GPU vs CPU

• Procesa vectores de números de coma flotante en paralelo

• A toda ostia

• Es programable (OpenCL & Shaders)

• Nadie mejor que NVidia y los Myth Busters para explicarlo. ;-)

http://www.agbo.biz

http://www.agbo.biz


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.

http://www.agbo.biz

http://www.agbo.biz


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

http://www.agbo.biz

http://www.agbo.biz


El Noble Octuple Sendero hacia el Nirvana del Buffer

1 Crear

2 Enlazar

3 Inicializar

4 Activar

5 Asignar Tipo

5 Asignar tipo

6 Dibujar

7 Desactivar

8 eliminar

http://www.agbo.biz

http://www.agbo.biz


1 Crear

• Generate

• OpenGL crea un ID único para identificar el buffer.

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

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

http://www.agbo.biz

http://www.agbo.biz


2 Enlazar

• Bind

• Asignamos el buffer a OpenGL para que pueda usarlo.

• Sigue sin haber datos.

http://www.agbo.biz

http://www.agbo.biz


3 Inicializar

• Init buffer data

• El buffer no tiene estructura

• Paso costoso

http://www.agbo.biz

http://www.agbo.biz


4 Activar

• Enable

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

http://www.agbo.biz

http://www.agbo.biz


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.

http://www.agbo.biz

http://www.agbo.biz


6 Dibujar

• Draw o Render

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

http://www.agbo.biz

http://www.agbo.biz


7 Desactivar

• Disable

• Indica a OpenGL que se olvide de un buffer.

http://www.agbo.biz

http://www.agbo.biz


8 Eliminar

• Delete

• Eliminamos un buffer y liberamos su memoria.

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

http://www.agbo.biz

http://www.agbo.biz


Recomendaciones

• Una vez creado un buffer, reaprovéchalo.

• Inicializar es caro.

• Destruir también, pero por otras razones.

http://www.agbo.biz

http://www.agbo.biz


Frame Buffers

• Son los buffers de salida.

• Reciben la imagen.

• Front Frame Buffer.

• Back Frame Buffer.

http://www.agbo.biz

http://www.agbo.biz


Contexto de OpenGL

• Contiene toda la configuración necesaria para renderizar.

• Frame buffer, buffers de entrada, texturas y demás.

• Similar al contexto de Core Graphics

http://www.agbo.biz

http://www.agbo.biz


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 definen los vértices (puntos) de una escena.

http://www.agbo.biz

http://www.agbo.biz


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

http://www.agbo.biz

http://www.agbo.biz


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!

http://www.agbo.biz

http://www.agbo.biz


Funciones

Crea un color RGB

http://www.agbo.biz

http://www.agbo.biz


http://www.agbo.biz

http://www.agbo.biz


OpenGL ES en iOS

http://www.agbo.biz

http://www.agbo.biz


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.

http://www.agbo.biz

http://www.agbo.biz


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

http://www.agbo.biz

http://www.agbo.biz


GLKBaseEffect

• Proporciona un entorno por defecto

• luces

• texturas

• “niebla”

• Shaders por defecto

• Abstrae las diferencias entre OpenGL 1.0 y 2.0

http://www.agbo.biz

http://www.agbo.biz


Llegados a este punto...

Suele pasar esto

http://www.agbo.biz

http://www.agbo.biz


Mejor será que vayamos a Xcode

• Un proyecto de una sola vista (GLKView, GLKViewController).

• Un GLKBaseEffect

• 3 vértices (un triángulo)

http://www.agbo.biz

http://www.agbo.biz


http://www.agbo.biz

http://www.agbo.biz


Abstraer C

• ATGLKContext

• ATVertexArrayBuffer

http://www.agbo.biz

http://www.agbo.biz


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.

http://www.agbo.biz

http://www.agbo.biz


GLKViewController al rescate

• preferedFramesPerSecond

• framesPerSecond

• -(void) update

http://www.agbo.biz

http://www.agbo.biz


Volvamos a Xcode

• Añadimos nuestras dos clases.

• Asignamos un preferedFramesPerSecond de 60.

• Recalculamos los vértices y los dibujamos en update

http://www.agbo.biz

http://www.agbo.biz


http://www.agbo.biz

http://www.agbo.biz


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.

http://www.agbo.biz

http://www.agbo.biz


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.

http://www.agbo.biz

http://www.agbo.biz


Texels

{0,0}

{0,1} {1,1}

{1,0}

T

SIndependientemente de las proporciones de la imagen, la textura tendra 1x1.

http://www.agbo.biz

http://www.agbo.biz


Tipos de texturas

• 1D: 1 pixel por n

• 2D: n x m pixels (las más comunes)

• 3D: una pila de 2D

http://www.agbo.biz

http://www.agbo.biz


Mapeados

• Transformar un espacio vectorial en otro

• Del espacio del frame buffer al de pantalla (viewport)

• Del de vértices al de textura

http://www.agbo.biz

http://www.agbo.biz


Mapear Vértices a Texels

• Cada vértice tendrá:

• Posición: Vector 3D

• Coordenadas de textura: Vector 2D

http://www.agbo.biz

http://www.agbo.biz



x,y,zPosición

Coloruv

VérticeTextura

T

S

http://www.agbo.biz

http://www.agbo.biz



• Cada vértice coloreado se llama Fragment

http://www.agbo.biz

http://www.agbo.biz



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

http://www.agbo.biz

http://www.agbo.biz

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

http://www.agbo.biz

http://www.agbo.biz


Funciones de Mapeado “Sampling Modes”

• Nearest: Aspecto pixelado

• Interpolated: Aspecto suave pero es costoso.

http://www.agbo.biz

http://www.agbo.biz


MIP Mapping: La Trampa

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

http://www.agbo.biz

http://www.agbo.biz


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;

http://www.agbo.biz

http://www.agbo.biz


Volvamos a Xcode

• Aplicaremos una textura al triángulo.

http://www.agbo.biz

http://www.agbo.biz


http://www.agbo.biz

http://www.agbo.biz


Aquí hay gato encerrado...

• Lo normal no es tener 1 triángulo, sino miles o millones...

• ¿Los escribo a mano?

• Blender, obj & Cia

http://www.agbo.biz

http://www.agbo.biz


Mucho por verEsto no es una foto...

http://www.agbo.biz

http://www.agbo.biz


Libros

• The OpenGL SuperBible, 4th Edition

• Learning OpenGL ES

http://www.agbo.biz

http://www.agbo.biz


Contacto

• Fernando Rodríguez

• @frr149

• www.agbo.biz

http://www.agbo.biz

http://www.agbo.biz

http://www.agbo.biz

http://www.agbo.biz