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

Chris Miles

September 07, 2012
Tweet

More Decks by Chris Miles

Other Decks in Programming

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
    [email protected]
    @chrismiles
    Thank you
    http://chrismiles.info/
    https://github.com/chrismiles/SwipeOpenGLTriangles
    https://github.com/chrismiles/Swipe3D
    https://github.com/chrismiles/FancySegue
    34

    View Slide