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

SWIPE CONFERENCE 2012 @chrismiles Textures 2 

SWIPE CONFERENCE 2012 @chrismiles OpenGLESDrawing GL_TRIANGLES Textured 3 

SWIPE CONFERENCE 2012 @chrismiles 4 

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

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

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 

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

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 

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 

SWIPE CONFERENCE 2012 @chrismiles Skybox Reflection Map 11 

SWIPE CONFERENCE 2012 @chrismiles Swipe3D 12 

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

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 

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 

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 

SWIPE CONFERENCE 2012 @chrismiles GLKReflectionMapEffect 17 

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 

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

SWIPE CONFERENCE 2012 @chrismiles Debugging, Profiling & Analysis 20 

SWIPE CONFERENCE 2012 @chrismiles 21 

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

SWIPE CONFERENCE 2012 @chrismiles 23 

SWIPE CONFERENCE 2012 @chrismiles OpenGL ES Performance Detective 24 

SWIPE CONFERENCE 2012 @chrismiles OpenGL ES Performance Detective 25 

SWIPE CONFERENCE 2012 @chrismiles Performance 26 

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

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 

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 

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 

SWIPE CONFERENCE 2012 @chrismiles Profile Profile Profile! Performance 31 

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 

SWIPE CONFERENCE 2012 @chrismiles FancySegue 33 

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