OpenGL ES with iOS 5 - Part 2: Rendering a masterpiece

3e9b0b47a98cdc664bcf58fa3ff5a758?s=47 Chris Miles
September 07, 2012

OpenGL ES with iOS 5 - Part 2: Rendering a masterpiece

The second of two OpenGL ES with iOS talks I gave at Swipe Conference 2012 in Sydney, Australia.

Demonstrates rendering effects in OpenGL using GLKit, looking at the OpenGL debugging and profiling tools that ship with Xcode, and demonstrating how OpenGL can be used for some fancy segue transitions.

Watch the presentation video at:
https://www.youtube.com/watch?v=dkqBjsEpt5g

Read more:
http://blog.chrismiles.info/2012/10/opengl-es-with-ios-5-part-2-rendering.html

Also see part 1:
https://speakerdeck.com/chrismiles/opengl-es-with-ios-5-part-1-learning-to-draw

3e9b0b47a98cdc664bcf58fa3ff5a758?s=128

Chris Miles

September 07, 2012
Tweet

Transcript

  1. @chrismiles http://chrismiles.info/ Chris Miles OpenGL ES with iOS 5 Part

    2: Rendering a masterpiece 1
  2. SWIPE CONFERENCE 2012 @chrismiles Textures 2

  3. SWIPE CONFERENCE 2012 @chrismiles OpenGLESDrawing GL_TRIANGLES Textured 3

  4. SWIPE CONFERENCE 2012 @chrismiles 4

  5. SWIPE CONFERENCE 2012 @chrismiles Front Side Right Side Back Side

    Left Side 5
  6. SWIPE CONFERENCE 2012 @chrismiles typedef struct _vertexStruct { GLfloat position[3];

    GLfloat normals[3]; GLfloat texCoords[2]; } vertexStruct; #define kBytesPerVertex (sizeof(vertexStruct)) 6
  7. SWIPE CONFERENCE 2012 @chrismiles UIImage *textureImage = [UIImage imageNamed:@"BoxTexture1"]; NSError

    *error = nil; NSDictionary *options = @{ GLKTextureLoaderGenerateMipmaps : @(YES), GLKTextureLoaderOriginBottomLeft : @(YES), }; GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithCGImage:textureImage.CGImage options:options error:&error]; 7
  8. SWIPE CONFERENCE 2012 @chrismiles self.effect = [[GLKBaseEffect alloc] init]; self.effect.texture2d0.enabled

    = YES; self.effect.texture2d0.name = _textureInfo.name; 8
  9. SWIPE CONFERENCE 2012 @chrismiles - (void)glkView:(GLKView *)view drawInRect:(CGRect)rect { glClearColor(0.0f,

    0.0f, 0.0f, 1.0f); glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); [self.effect prepareToDraw]; glBufferData(GL_ARRAY_BUFFER, sizeof(GLfloat) * kNumVertices * kFloatsPerVertex, _vertexData, GL_DYNAMIC_DRAW); glDrawArrays(GL_TRIANGLES, 0, kNumVertices); } 9
  10. SWIPE CONFERENCE 2012 @chrismiles GLKTextureLoader Load 2D or cubemap textures

    Load synchronously or asynchronously Load texture from file, URL, data or CGImage Can vertically flip coordinate system Can generate mipmaps 10
  11. SWIPE CONFERENCE 2012 @chrismiles Skybox Reflection Map 11

  12. SWIPE CONFERENCE 2012 @chrismiles Swipe3D 12

  13. SWIPE CONFERENCE 2012 @chrismiles GLKSkyboxEffect Left Front Right Back Top

    Bottom 13
  14. SWIPE CONFERENCE 2012 @chrismiles NSArray *cubeMapFilenames = @[ [[NSBundle mainBundle]

    pathForResource:@"skybox_cubemap_right" ofType:@"jpg"], [[NSBundle mainBundle] pathForResource:@"skybox_cubemap_left" ofType:@"jpg"], [[NSBundle mainBundle] pathForResource:@"skybox_cubemap_up" ofType:@"jpg"], [[NSBundle mainBundle] pathForResource:@"skybox_cubemap_down" ofType:@"jpg"], [[NSBundle mainBundle] pathForResource:@"skybox_cubemap_front" ofType:@"jpg"], [[NSBundle mainBundle] pathForResource:@"skybox_cubemap_back" ofType:@"jpg"], ]; NSError *error = nil; NSDictionary *options = @{ GLKTextureLoaderOriginBottomLeft: [NSNumber numberWithBool:NO] }; self.skyboxCubemap = [GLKTextureLoader cubeMapWithContentsOfFiles:cubeMapFilenames options:options error:&error]; 14
  15. SWIPE CONFERENCE 2012 @chrismiles - (void)setupGL { self.skyboxEffect = [[GLKSkyboxEffect

    alloc] init]; self.skyboxEffect.textureCubeMap.name = self.skyboxCubemap.name; } - (void)update { self.skyboxEffect.transform.projectionMatrix = projectionMatrix; self.skyboxEffect.transform.modelviewMatrix = modelViewMatrix; } - (void)glkView:(GLKView *)view drawInRect:(CGRect)rect { [self.skyboxEffect prepareToDraw]; [self.skyboxEffect draw]; } 15
  16. SWIPE CONFERENCE 2012 @chrismiles Manages vertex data for skybox Requires

    a texture cube map Call [effect prepareToDraw] to load shader Then call [effect draw] to render skybox GLKSkyboxEffect 16
  17. SWIPE CONFERENCE 2012 @chrismiles GLKReflectionMapEffect 17

  18. SWIPE CONFERENCE 2012 @chrismiles - (void)setupGL { self.reflectionMapEffect = [[GLKReflectionMapEffect

    alloc] init]; self.reflectionMapEffect.light0.enabled = GL_TRUE; self.reflectionMapEffect.material.diffuseColor = GLKVector4Make(245.0f/255.0f, 130.0f/255.0f, 32.0f/255.0f, 1.0f); self.reflectionMapEffect.material.ambientColor = GLKVector4Make(0.5f, 0.5f, 0.5f, 1.0f); self.reflectionMapEffect.material.emissiveColor = GLKVector4Make(0.2f, 0.2f, 0.2f, 1.0f); self.reflectionMapEffect.textureCubeMap.name = self.skyboxCubemap.name; } - (void)update { self.reflectionMapEffect.transform.projectionMatrix = projectionMatrix; self.reflectionMapEffect.transform.modelviewMatrix = modelViewMatrix; self.reflectionMapEffect.matrix = GLKMatrix3InvertAndTranspose(GLKMatrix3MakeRotation(-_rotation, 0.0f, 1.0f, 0.0f), NULL); } - (void)glkView:(GLKView *)view drawInRect:(CGRect)rect { [self.reflectionMapEffect prepareToDraw]; } GLKReflectionMapEffect 18
  19. SWIPE CONFERENCE 2012 @chrismiles Extends GLKBaseEffect Adds a texturing stage

    to perform reflection mapping Requires a cube map texture GLKReflectionMapEffect 19
  20. SWIPE CONFERENCE 2012 @chrismiles Debugging, Profiling & Analysis 20

  21. SWIPE CONFERENCE 2012 @chrismiles 21

  22. SWIPE CONFERENCE 2012 @chrismiles 22 Tiler Utilization: Vertex processing Renderer

    Utilization: Fragment processing
  23. SWIPE CONFERENCE 2012 @chrismiles 23

  24. SWIPE CONFERENCE 2012 @chrismiles OpenGL ES Performance Detective 24

  25. SWIPE CONFERENCE 2012 @chrismiles OpenGL ES Performance Detective 25

  26. SWIPE CONFERENCE 2012 @chrismiles Performance 26

  27. SWIPE CONFERENCE 2012 @chrismiles Profile before & after changes Keep

    data small & optimised Bottleneck could be Vertex stage, Fragment stage or CPU Performance 27
  28. SWIPE CONFERENCE 2012 @chrismiles Vertex: Use Vertex Array Objects Use

    Vertex Buffer Objects Interleave vertex data Use triangle strips or fans to reduce # vertices Consider using element arrays, to reduce data size Performance 28
  29. SWIPE CONFERENCE 2012 @chrismiles Fragment: Keep textures as small as

    possible Combine Textures into Texture Atlases Use mipmaps Consider using PVR compressed textures (ref texturetool or PVRTexTool) Consider using a lower precision pixel format. RGB565, RGBA5551, RGBA4444 much smaller than RGBA8888 Performance 29
  30. SWIPE CONFERENCE 2012 @chrismiles Limit object modifications to the start

    or end of a frame Avoid Synchronising and Flushing commands Avoid Querying OpenGL ES State Avoid copying data back from OpenGL ES to the application Use GLKMath functions Performance 30
  31. SWIPE CONFERENCE 2012 @chrismiles Profile Profile Profile! Performance 31

  32. SWIPE CONFERENCE 2012 @chrismiles References Apple’s “OpenGL ES Programming Guide

    for iOS” http:/ /developer.apple.com/library/ios/#documentation/3DDrawing/Conceptual/ OpenGLES_ProgrammingGuide/ Imagination Technologies PowerVR Docs http:/ /www.imgtec.com/powervr/insider/powervr-sdk-docs.asp PowerVR Performance Recommendations (PDF) SGX Architecture Guide for Developers (PDF) 32
  33. SWIPE CONFERENCE 2012 @chrismiles FancySegue 33

  34. SWIPE CONFERENCE 2012 Chris Miles iOS Specialist Software Engineer miles.chris@gmail.com

    @chrismiles Thank you http://chrismiles.info/ https://github.com/chrismiles/SwipeOpenGLTriangles https://github.com/chrismiles/Swipe3D https://github.com/chrismiles/FancySegue 34