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

Transcript

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

   View Slide

2. SWIPE CONFERENCE 2012
   @chrismiles
   Textures
   2
   

   View Slide

3. SWIPE CONFERENCE 2012
   @chrismiles
   OpenGLESDrawing
   GL_TRIANGLES Textured
   3
   

   View Slide

4. SWIPE CONFERENCE 2012
   @chrismiles
   4
   

   View Slide

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

   View Slide

6. SWIPE CONFERENCE 2012
   @chrismiles
   typedef struct _vertexStruct
   {
   GLfloat position[3];
   GLfloat normals[3];
   GLfloat texCoords[2];
   } vertexStruct;
   #define kBytesPerVertex (sizeof(vertexStruct))
   6
   

   View Slide

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
   

   View Slide

8. SWIPE CONFERENCE 2012
   @chrismiles
   self.effect = [[GLKBaseEffect alloc] init];
   self.effect.texture2d0.enabled = YES;
   self.effect.texture2d0.name = _textureInfo.name;
   8
   

   View Slide

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
   

   View Slide

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
    

    View Slide

11. SWIPE CONFERENCE 2012
    @chrismiles
    Skybox
    Reflection Map
    11
    

    View Slide

12. SWIPE CONFERENCE 2012
    @chrismiles
    Swipe3D
    12
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

17. SWIPE CONFERENCE 2012
    @chrismiles
    GLKReflectionMapEffect
    17
    

    View Slide

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
    

    View Slide

19. SWIPE CONFERENCE 2012
    @chrismiles
    Extends GLKBaseEffect
    Adds a texturing stage to perform reflection mapping
    Requires a cube map texture
    GLKReflectionMapEffect
    19
    

    View Slide

20. SWIPE CONFERENCE 2012
    @chrismiles
    Debugging, Profiling & Analysis
    20
    

    View Slide

21. SWIPE CONFERENCE 2012
    @chrismiles
    21
    

    View Slide

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

    View Slide

23. SWIPE CONFERENCE 2012
    @chrismiles
    23
    

    View Slide

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

    View Slide

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

    View Slide

26. SWIPE CONFERENCE 2012
    @chrismiles
    Performance
    26
    

    View Slide

27. SWIPE CONFERENCE 2012
    @chrismiles
    Profile before & after changes
    Keep data small & optimised
    Bottleneck could be Vertex stage, Fragment stage or CPU
    Performance
    27
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

31. SWIPE CONFERENCE 2012
    @chrismiles
    Profile
    Profile
    Profile!
    Performance
    31
    

    View Slide

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
    

    View Slide

33. SWIPE CONFERENCE 2012
    @chrismiles
    FancySegue
    33
    

    View Slide

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
    

    View Slide