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
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