Taller OpenGL

446 views

Published on

Taller de OpenGL en el Barcelona Developers Conference 2012 por Fernando Rodriguez & AGBO Training

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
446
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Taller OpenGL

  1. 1. Intro a OpenGL ES 2.0 para iOS Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  2. 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. 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
  4. 4. ConceptosFundamentalesCopyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  5. 5. Un poco de HistoriaDevelopers, 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. 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. 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. 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. 9. OpenGL ES• Embedded Systems• Subconjunto de OpenGL Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  10. 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. 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. 12. RenderizadoCrear una imagen a partir de una descripcióngeométrica y de algunos datos más necesariospara crear la ilusión de 3 dimensiones. Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  13. 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. 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. 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. 16. El Noble Octuple Sendero hacia el Nirvana del Buffer 1 Crear 8 eliminar 2 Enlazar7 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 31. Funciones Crea un color RGBCopyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  32. 32. Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  33. 33. OpenGL ES en iOSCopyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  34. 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. 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. 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. 37. Llegados a este punto... Suele pasar esto Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  38. 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. 39. Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  40. 40. Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  41. 41. Abstraer C• ATGLKContext• ATVertexArrayBuffer Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  42. 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. 43. GLKViewController al rescate• preferedFramesPerSecond• framesPerSecond• -(void) update Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  44. 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. 45. Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  46. 46. Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  47. 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. 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. 49. Texels {0,1} {1,1} T {1,0} {0,0} SIndependientemente 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. 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. 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. 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. 53. Mapear Vértices a TexelsVértice TexturaPosiciónx,y,z T Color u v S Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  54. 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. 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. 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. 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. 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. 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. 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. 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. 62. Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  63. 63. Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  64. 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. 65. Mucho por verEsto no es una foto... Copyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz
  66. 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. 67. Contacto • Fernando Rodríguez • @frr149 • www.agbo.bizCopyright © 2012 AGBO Business Architecture S.L. Todos los derechos reservados. www.agbo.biz

×