opengl es with ios 5 - chris...

@chrismileshttp://chrismiles.info/

Chris Miles

OpenGL ES with iOS 5Part 2: Rendering a masterpiece

1

SWIPE CONFERENCE 2012@chrismiles

Textures

2

SWIPE CONFERENCE 2012@chrismiles

OpenGLESDrawingGL_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

SkyboxReflection 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 processingRenderer 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 MilesiOS Specialist Software Engineer

miles.chris@gmail.com@chrismiles

Thank you

http://chrismiles.info/

https://github.com/chrismiles/SwipeOpenGLTriangleshttps://github.com/chrismiles/Swipe3Dhttps://github.com/chrismiles/FancySegue

34