Más contenido relacionado Similar a Taller OpenGL (20) Taller OpenGL1. Intro a OpenGL ES 2.0
para iOS
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
2. ¿Qué necesito saber?
• C / Objective C
• Concepto de Vista y
ViewController
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
3. ¿Qué es OpenGL?
• API de C para producir gráficos 3D
• Multiplataforma
• Antiguo: 1992
• Parte en la GPU, parte en la CPU
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
5. 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.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
6. ...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
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
7. Con el tiempo...
• Complejo
• Anticuado
• Había que
poner orden
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
8. OpenGL 2.0
• Elimina todo lo antiguo y sub-óptimo
• Adaptado a las nuevas GPUs
• Más “programable”: shaders
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
9. OpenGL ES
• Embedded Systems
• Subconjunto de OpenGL
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
10. 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).
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
11. GLKit
Y dijo Jobs a sus discípulos:
“Que lo común sea trivial y lo difícil sea factible”
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
12. 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.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
13. 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. ;-)
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
14. 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.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
15. 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.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
16. 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
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
17. 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é... ;-)
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
18. 2 Enlazar
• Bind
• Asignamos el buffer a
OpenGL para que pueda
usarlo.
• Sigue sin haber datos.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
19. 3 Inicializar
• Init buffer data
• El buffer no tiene
estructura
• Paso costoso
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
20. 4 Activar
• Enable
• Indica a OpenGL que
pase a usar un buffer
para un renderizado.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
21. 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.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
22. 6 Dibujar
• Draw o Render
• Indica a OpenGL que
renderice todo o parte
de una escena usando
los buffers enlazados y
activos.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
23. 7 Desactivar
• Disable
• Indica a OpenGL que se
olvide de un buffer.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
24. 8 Eliminar
• Delete
• Eliminamos un buffer y
liberamos su memoria.
• Potencialmente
problemático por
sincronización entre
CPU y GPU
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
25. Recomendaciones
• Una vez creado un
buffer, reaprovéchalo.
• Inicializar es caro.
• Destruir también, pero
por otras razones.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
26. Frame Buffers
• Son los buffers de salida.
• Reciben la imagen.
• Front Frame Buffer.
• Back Frame Buffer.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
27. 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
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
28. 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.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
29. 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
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
30. 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!
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
31. Funciones
Crea un color RGB
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
32. Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
33. OpenGL ES
en iOS
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
34. 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.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
35. 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
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
36. GLKBaseEffect
• Proporciona un entorno por defecto
• luces
• texturas
• “niebla”
• Shaders por defecto
• Abstrae las diferencias entre OpenGL 1.0 y 2.0
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
37. Llegados a este punto...
Suele pasar esto
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
38. Mejor será que
vayamos a Xcode
• Un proyecto de una sola
vista (GLKView,
GLKViewController).
• Un GLKBaseEffect
• 3 vértices (un triángulo)
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
39. Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
40. Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
41. Abstraer C
• ATGLKContext
• ATVertexArrayBuffer
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
42. 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.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
43. GLKViewController al
rescate
• preferedFramesPerSecond
• framesPerSecond
• -(void) update
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
44. Volvamos a Xcode
• Añadimos nuestras dos
clases.
• Asignamos un
preferedFramesPerSecond
de 60.
• Recalculamos los vértices
y los dibujamos en update
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
45. Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
46. Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
47. 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.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
48. 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.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
49. Texels
{0,1} {1,1}
T
{1,0}
{0,0}
S
Independientemente de las proporciones de la imagen, la textura tendra 1x1.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
50. Tipos de texturas
• 1D: 1 pixel por n
• 2D: n x m pixels (las más comunes)
• 3D: una pila de 2D
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
51. Mapeados
• Transformar un espacio vectorial en otro
• Del espacio del frame buffer al de pantalla
(viewport)
• Del de vértices al de textura
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
52. Mapear Vértices a
Texels
• Cada vértice tendrá:
• Posición:Vector 3D
• Coordenadas de textura:Vector 2D
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
53. Mapear Vértices a
Texels
Vértice Textura
Posición
x,y,z T
Color
u
v S
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
54. Mapear Vértices a
Texels
• Cada vértice coloreado se llama Fragment
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
55. 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.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
56. 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?
57. Funciones de Mapeado
“Sampling Modes”
• Dos funciones
• Nearest
• Interpolate
• glTexParameteri al rescate
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
58. Funciones de Mapeado
“Sampling Modes”
• Nearest: Aspecto pixelado
• Interpolated: Aspecto suave pero es
costoso.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
59. MIP Mapping: La Trampa
“El Golpe” consiste en crear
varias versiones de la
textura en distintas
resoluciones.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
60. 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;
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
61. Volvamos a Xcode
• Aplicaremos una textura
al triángulo.
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
62. Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
63. Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
64. Aquí hay gato
encerrado...
• Lo normal no es tener 1
triángulo, sino miles o
millones...
• ¿Los escribo a mano?
• Blender, obj & Cia
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
65. Mucho por ver
Esto no es una foto...
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
66. Libros
• The OpenGL
SuperBible, 4th Edition
• Learning OpenGL ES
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
67. Contacto
• Fernando Rodríguez
• @frr149
• www.agbo.biz
Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz