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


OpenGLESDrawingGL_TRIANGLES Textured

3


4


Front Side

Right Side

Back Side

Left Side

5


typedef struct _vertexStruct{ GLfloat position[3]; GLfloat normals[3]; GLfloat texCoords[2];} vertexStruct;

#define kBytesPerVertex (sizeof(vertexStruct))

6


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


self.effect = [[GLKBaseEffect alloc] init];

self.effect.texture2d0.enabled = YES;self.effect.texture2d0.name = _textureInfo.name;

8


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


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


SkyboxReflection Map

11


Swipe3D

12


GLKSkyboxEffect

Left Front Right Back

Top

Bottom

13


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


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


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


GLKReflectionMapEffect

17


- (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];}


18


Extends GLKBaseEffect

Adds a texturing stage to perform reflection mapping

Requires a cube map texture


19


Debugging, Profiling & Analysis

20


21


22

Tiler Utilization: Vertex processingRenderer Utilization: Fragment processing


23


OpenGL ES Performance Detective

24


OpenGL ES Performance Detective

25


Performance

26


Profile before & after changes

Keep data small & optimised

Bottleneck could be Vertex stage, Fragment stage or CPU

Performance

27


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


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


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


Profile

Profile

Profile!

Performance

31


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


FancySegue

33

SWIPE CONFERENCE 2012

Chris MilesiOS Specialist Software Engineer

[email protected]@chrismiles

Thank you

http://chrismiles.info/

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

34

https://github.com/Swipe3D

https://github.com/Swipe3D

opengl es with ios 5 - chris...

Documents