Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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:

Read more:

Also see part 1:

Chris Miles

September 07, 2012

More Decks by Chris Miles

Other Decks in Programming


  1. SWIPE CONFERENCE 2012 @chrismiles typedef struct _vertexStruct { GLfloat position[3];

    GLfloat normals[3]; GLfloat texCoords[2]; } vertexStruct; #define kBytesPerVertex (sizeof(vertexStruct)) 6
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. SWIPE CONFERENCE 2012 @chrismiles Extends GLKBaseEffect Adds a texturing stage

    to perform reflection mapping Requires a cube map texture GLKReflectionMapEffect 19
  10. SWIPE CONFERENCE 2012 @chrismiles Profile before & after changes Keep

    data small & optimised Bottleneck could be Vertex stage, Fragment stage or CPU Performance 27
  11. 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
  12. 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
  13. 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
  14. 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
  15. SWIPE CONFERENCE 2012 Chris Miles iOS Specialist Software Engineer [email protected]

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