advanced graphics and animations for ios apps...advanced graphics and animations for ios apps...
TRANSCRIPT
![Page 1: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/1.jpg)
© 2014 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.
#WWDC14
Advanced Graphics and Animations for iOS Apps
Session 419 Axel Wefers iOS Software Engineer
Tools
!
Michael Ingrassia iOS Software Engineer
![Page 2: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/2.jpg)
What You Will Learn
Core Animation pipeline
Rendering concepts
UIBlurEffect UIVibrancyEffect
Profiling tools
Case studies
![Page 3: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/3.jpg)
Technology Framework
UIKit
Core Animation
Graphics Hardware
Core GraphicsOpenGL ES
![Page 4: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/4.jpg)
Core Animation Pipeline
Axel Wefers iOS Software Engineer
![Page 5: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/5.jpg)
Core Animation PipelineApplication
![Page 6: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/6.jpg)
Core Animation PipelineApplication
Core Animation
![Page 7: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/7.jpg)
Core Animation PipelineApplication
Render Server
Core Animation
![Page 8: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/8.jpg)
Core Animation PipelineApplication
Render Server
Core Animation
Core Animation
![Page 9: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/9.jpg)
Core Animation PipelineApplication
Render Server
GPU
Core Animation
Core Animation
![Page 10: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/10.jpg)
Core Animation Pipeline
Display
Application
Render Server
GPU
Core Animation
Core Animation
![Page 11: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/11.jpg)
Core Animation Pipeline
Display
Application
Render Server
GPU
Core Animation
Core Animation
16.67 ms
![Page 12: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/12.jpg)
Core Animation Pipeline
Display
Application
Render Server
GPU
Core Animation
Core Animation
16.67 ms
Handle Events
![Page 13: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/13.jpg)
Core Animation Pipeline
Display
Application
Render Server
GPU
Core Animation
Core Animation
16.67 ms
Commit Transaction
![Page 14: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/14.jpg)
Core Animation Pipeline
Display
Application
Render Server
GPU
Core Animation
Core Animation
16.67 ms
Commit Transaction
Decode
![Page 15: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/15.jpg)
Core Animation Pipeline
Display
Application
Render Server
GPU
Core Animation
Core Animation
16.67 ms
Commit Transaction
Decode
Draw Calls
![Page 16: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/16.jpg)
Core Animation Pipeline
Display
Application
Render Server
GPU
Core Animation
Core Animation
16.67 ms
Commit Transaction
Decode
Render
Draw Calls
![Page 17: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/17.jpg)
Core Animation Pipeline
Display
Application
Render Server
GPU
Core Animation
Core Animation
16.67 ms
Commit Transaction
Decode
Render
Draw Calls
Display
![Page 18: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/18.jpg)
Core Animation Pipeline
Display
Application
Render Server
GPU
Core Animation
Core Animation
16.67 ms
![Page 19: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/19.jpg)
Core Animation Pipeline
Display
Application
Render Server
GPU
Core Animation
Core Animation
16.67 ms
Commit Transaction
![Page 20: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/20.jpg)
Commit Transaction
![Page 21: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/21.jpg)
Commit Transaction
Set up the views
Layout
![Page 22: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/22.jpg)
Commit Transaction
Set up the views
Draw the views
Layout Display
![Page 23: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/23.jpg)
Commit Transaction
Set up the views
Draw the views
Additional Core Animation work
Layout Display Prepare
![Page 24: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/24.jpg)
Commit Transaction
Set up the views
Draw the views
Additional Core Animation work
Package up layers and send them to render server
Layout Display Prepare Commit
![Page 25: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/25.jpg)
Commit TransactionLayout Display Prepare Commit
![Page 26: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/26.jpg)
Layout
layoutSubviews overrides are invoked
View creation, addSubview:
Populate content, database lookups
Usually CPU bound or I/O bound
Layout Display Prepare Commit
![Page 27: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/27.jpg)
Display
Draw contents via drawRect: if it is overridden
String drawing
Usually CPU or memory bound
Layout Display Prepare Commit
![Page 28: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/28.jpg)
Prepare Commit
Image decoding
Image conversion
Layout CommitPrepareDisplay
![Page 29: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/29.jpg)
Commit
Package up layers and send to render server
Recursive
Expensive if layer tree is complex
Layout Display Prepare Commit
![Page 30: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/30.jpg)
AnimationThree-stage process
Application Render Server
![Page 31: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/31.jpg)
AnimationThree-stage process
Application Render Server
1. Create animation and update view hierarchy (animateWithDuration:animations:)
![Page 32: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/32.jpg)
AnimationThree-stage process
Application Render Server
1. Create animation and update view hierarchy (animateWithDuration:animations:)
2. Prepare and commit animation (layoutSubviews, drawRect:)
![Page 33: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/33.jpg)
AnimationThree-stage process
Application Render Server
1. Create animation and update view hierarchy (animateWithDuration:animations:)
2. Prepare and commit animation (layoutSubviews, drawRect:)Layout Display Prepare Commit
![Page 34: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/34.jpg)
AnimationThree-stage process
Application Render Server
1. Create animation and update view hierarchy (animateWithDuration:animations:)
2. Prepare and commit animation (layoutSubviews, drawRect:)
3. Render each frame
Layout Display Prepare Commit
![Page 35: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/35.jpg)
Rendering Concepts
Axel Wefers iOS Software Engineer
![Page 36: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/36.jpg)
Rendering Concepts
Tile based rendering
Render passes
Example masking
![Page 37: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/37.jpg)
Tile Based Rendering
Screen is split into tiles of NxN pixels
Each tile fits into the SoC cache
Geometry is split in tile buckets
Rasterization can begin after all geometry is submitted
![Page 38: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/38.jpg)
Tile Based Rendering
Screen is split into tiles of NxN pixels
Each tile fits into the SoC cache
Geometry is split in tile buckets
Rasterization can begin after all geometry is submitted
![Page 39: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/39.jpg)
Tile Based Rendering
Screen is split into tiles of NxN pixels
Each tile fits into the SoC cache
Geometry is split in tile buckets
Rasterization can begin after all geometry is submitted
![Page 40: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/40.jpg)
Tile Based Rendering
Screen is split into tiles of NxN pixels
Each tile fits into the SoC cache
Geometry is split in tile buckets
Rasterization can begin after all geometry is submitted
![Page 41: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/41.jpg)
Tile Based Rendering
Screen is split into tiles of NxN pixels
Each tile fits into the SoC cache
Geometry is split in tile buckets
Rasterization can begin after all geometry is submitted
![Page 42: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/42.jpg)
Tile Based RenderingRendering pass
ApplicationRender Server
Core Animation Core Animation
![Page 43: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/43.jpg)
Tile Based RenderingRendering pass
ApplicationRender Server
Core Animation
GPU
OpenGL
Core Animation
![Page 44: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/44.jpg)
Tile Based RenderingRendering pass
ApplicationRender Server
Core Animation
GPUCommand Buffer
OpenGL
Core Animation
![Page 45: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/45.jpg)
Tile Based RenderingRendering pass
ApplicationRender Server
Core Animation
GPUVertex Processing “Vertex Shader”Command Buffer
OpenGL
Core Animation
![Page 46: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/46.jpg)
Tile Based RenderingRendering pass
ApplicationRender Server
Core Animation
GPU
Tiling
Vertex Processing “Vertex Shader”Command Buffer
OpenGL
Core Animation
![Page 47: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/47.jpg)
Tile Based RenderingRendering pass
ApplicationRender Server
Core Animation
GPUTiler
Tiling
Vertex Processing “Vertex Shader”Command Buffer
OpenGL
Core Animation
![Page 48: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/48.jpg)
Tile Based RenderingRendering pass
ApplicationRender Server
Core Animation
GPUTiler
Parameter BufferTiling
Vertex Processing “Vertex Shader”Command Buffer
OpenGL
Core Animation
![Page 49: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/49.jpg)
Tile Based RenderingRendering pass
ApplicationRender Server
Core Animation
GPUTiler
Pixel Processing “Pixel Shader”
Parameter BufferTiling
Vertex Processing “Vertex Shader”Command Buffer
OpenGL
Core Animation
![Page 50: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/50.jpg)
Tile Based RenderingRendering pass
ApplicationRender Server
Core Animation
GPUTiler
RendererPixel Processing “Pixel Shader”
Parameter BufferTiling
Vertex Processing “Vertex Shader”Command Buffer
OpenGL
Core Animation
![Page 51: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/51.jpg)
Tile Based RenderingRendering pass
ApplicationRender Server
Core Animation
GPUTiler
Renderer
Render BufferPixel Processing “Pixel Shader”
Parameter BufferTiling
Vertex Processing “Vertex Shader”Command Buffer
OpenGL
Core Animation
![Page 52: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/52.jpg)
MaskingRendering passes
GPU
ApplicationRender Server
Core Animation Core Animation
Command Buffer
OpenGL
![Page 53: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/53.jpg)
MaskingRendering passes
GPUTiler
Renderer
Mask TexturePixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
ApplicationRender Server
Core Animation Core Animation
Command Buffer
OpenGL
Pass 1 Render layer mask to texture
![Page 54: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/54.jpg)
MaskingRendering passes
GPUTiler
Renderer
Mask TexturePixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Tiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Layer Texture
ApplicationRender Server
Core Animation Core Animation
Command Buffer
OpenGL
Pass 1 Render layer mask to texture
Pass 2 Render layer content to texture
![Page 55: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/55.jpg)
MaskingRendering passes
GPUTiler
Renderer
Mask TexturePixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Tiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Tiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Layer Texture
ApplicationRender Server
Core Animation Core Animation
Command Buffer
OpenGL
Pass 1 Render layer mask to texture
Pass 2 Render layer content to texture
Compositing pass Apply mask to content texture
Frame Buffer
![Page 56: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/56.jpg)
UIBlurEffect
Axel Wefers iOS Software Engineer
![Page 57: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/57.jpg)
UIVisualEffectView with UIBlurEffectUIBlurEffect styles
No effect Extra light Light Dark
![Page 58: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/58.jpg)
UIVisualEffectView with UIBlurEffectRendering passes (best case)
GPUCommand Buffer
![Page 59: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/59.jpg)
UIVisualEffectView with UIBlurEffectRendering passes (best case)
GPUTiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Content
Command BufferPass 1 Render content
![Page 60: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/60.jpg)
UIVisualEffectView with UIBlurEffectRendering passes (best case)
GPU
Tiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Downscaled Content
Tiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Content
Command Buffer
Pass 2 Capture content
Pass 1 Render content
![Page 61: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/61.jpg)
UIVisualEffectView with UIBlurEffectRendering passes (best case)
GPU
Tiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Downscaled Content
Tiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Blur X
Tiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Content
Tiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Blur Y
Command Buffer
Pass 3 Horizontal blur
Pass 2 Capture content
Pass 1 Render content
Pass 4 Vertical blur
![Page 62: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/62.jpg)
UIVisualEffectView with UIBlurEffectRendering passes (best case)
GPU
Tiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Downscaled Content
Tiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Blur X
Tiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Content
Tiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Blur Y
Tiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Frame Buffer
Command Buffer
Pass 3 Horizontal blur
Pass 2 Capture content
Pass 1 Render content
Pass 4 Vertical blur
Compositing pass Upscale and tint
![Page 63: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/63.jpg)
UIVisualEffectView with UIBlurEffectGPU utilization, fullscreen, iPad Air
![Page 64: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/64.jpg)
UIVisualEffectView with UIBlurEffectGPU utilization, fullscreen, iPad Air
Renderer Pixel processing
VBlank interrupt Every 16.67 ms
Tiler Vertex processing
16.67 ms
![Page 65: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/65.jpg)
UIVisualEffectView with UIBlurEffectGPU utilization, fullscreen, iPad Air
Renderer Pixel processing
VBlank interrupt Every 16.67 ms
Tiler Vertex processing
16.67 ms
![Page 66: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/66.jpg)
UIVisualEffectView with UIBlurEffectGPU utilization, fullscreen, iPad Air
Renderer Pixel processing
VBlank interrupt Every 16.67 ms
Tiler Vertex processing
16.67 ms
!!!!
Pass 1
![Page 67: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/67.jpg)
UIVisualEffectView with UIBlurEffectGPU utilization, fullscreen, iPad Air
Renderer Pixel processing
VBlank interrupt Every 16.67 ms
Tiler Vertex processing
16.67 ms
!!!!
Pass 1
!!!!
Pass 2
![Page 68: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/68.jpg)
UIVisualEffectView with UIBlurEffectGPU utilization, fullscreen, iPad Air
Renderer Pixel processing
VBlank interrupt Every 16.67 ms
Tiler Vertex processing
16.67 ms
!!!!
Pass 1
!!!!
Pass 2
!!!!
Pass 3
![Page 69: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/69.jpg)
UIVisualEffectView with UIBlurEffectGPU utilization, fullscreen, iPad Air
Renderer Pixel processing
VBlank interrupt Every 16.67 ms
Tiler Vertex processing
16.67 ms
!!!!
Pass 1
!!!!
Pass 2
!!!!
Pass 3
!!!!
Pass 4
![Page 70: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/70.jpg)
UIVisualEffectView with UIBlurEffectGPU utilization, fullscreen, iPad Air
Renderer Pixel processing
VBlank interrupt Every 16.67 ms
Tiler Vertex processing
16.67 ms
!!!!
Pass 1
!!!!
Pass 2
!!!!
Pass 3
!!!!
Pass 4
!!!!
Pass 5
![Page 71: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/71.jpg)
UIVisualEffectView with UIBlurEffectGPU utilization, fullscreen, iPad Air
Renderer Pixel processing
VBlank interrupt Every 16.67 ms
Tiler Vertex processing
16.67 ms
![Page 72: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/72.jpg)
UIBlurEffectStyleExtraLight
UIBlurEffectStyleLight
UIBlurEffectStyleDark
GPU time in milliseconds (smaller is better)
0.00 4.17 8.34 12.50 16.67
7.02
6.88
10.03
4.59
4.59
4.59
iPad (3rd generation) iPad Air
16.67
7.02
6.88
10.03
14.41
14.69
18.15
UIVisualEffectView with UIBlurEffectFullscreen performance
![Page 73: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/73.jpg)
UIBlurEffectStyleExtraLight
UIBlurEffectStyleLight
UIBlurEffectStyleDark
GPU time in milliseconds (smaller is better)
0.00 4.17 8.34 12.50 16.67
7.02
6.88
10.03
4.59
4.59
4.59
iPad (3rd generation) iPad Air
UIVisualEffectView with UIBlurEffectFullscreen performance
![Page 74: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/74.jpg)
UIVisualEffectView with UIBlurEffectUIBlurEffect support
Device Blur Tint
iPad 2
iPad (3rd generation)
iPad (4th generation)
iPad Air
iPad mini
iPad mini Retina display
All iPhones
iPod touch
![Page 75: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/75.jpg)
UIVisualEffectView with UIBlurEffectPerformance considerations
UIBlurEffect adds multiple offscreen passes depending on style
Only dirty regions are redrawn
Effect is very costly
UI can easily be GPU bound
Keep bounds of view as small as possible
Make sure to budget for effect
![Page 76: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/76.jpg)
UIVibrancyEffect
Axel Wefers iOS Software Engineer
![Page 77: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/77.jpg)
UIVisualEffectView with UIVibrancyEffectUIVibrancyEffect styles
Extra light Light Dark
![Page 78: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/78.jpg)
UIVisualEffectView with UIVibrancyEffectUIVibrancyEffect styles
Extra light Light Dark
![Page 79: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/79.jpg)
UIVisualEffectView with UIVibrancyEffectUIVibrancyEffect styles
Extra light Light Dark
![Page 80: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/80.jpg)
UIVisualEffectView with UIVibrancyEffectRendering passes
GPU
ApplicationRender Server
Core Animation Core Animation
Command Buffer
OpenGL
![Page 81: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/81.jpg)
UIVisualEffectView with UIVibrancyEffectRendering passes
GPUBlur Effect
ApplicationRender Server
Core Animation Core Animation
Command Buffer
OpenGL
Pass 1 to 5 Render blur effect
![Page 82: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/82.jpg)
UIVisualEffectView with UIVibrancyEffectRendering passes
GPUBlur Effect
Tiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Layer Texture
ApplicationRender Server
Core Animation Core Animation
Command Buffer
OpenGL
Pass 1 to 5 Render blur effect
Pass 6 Render layer content to texture
![Page 83: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/83.jpg)
UIVisualEffectView with UIVibrancyEffectRendering passes
GPUBlur Effect
Tiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Tiler
RendererPixel Processing “Pixel Shader”Parameter BufferTiling
Vertex Processing “Vertex Shader”
Layer Texture
ApplicationRender Server
Core Animation Core Animation
Command Buffer
OpenGL
Pass 1 to 5 Render blur effect
Pass 6 Render layer content to texture
Compositing pass Apply filter to content texture
Frame Buffer
![Page 84: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/84.jpg)
UIVisualEffectView with UIVibrancyEffectGPU utilization, fullscreen, iPad Air
Renderer Pixel processing
VBlank interrupt Every 16.67 ms
Tiler Vertex processing
16.67 ms
!!!!
Pass 1
!!!!
Pass 2
!!!!
Pass 3
!!!!
Pass 4
!!!!
Pass 5
!!!!
Pass 6
!!!!
Pass 7
![Page 85: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/85.jpg)
UIVisualEffectView with UIVibrancyEffectGPU utilization, fullscreen, iPad Air
Renderer Pixel processing
VBlank interrupt Every 16.67 ms
Tiler Vertex processing
16.67 ms
!!!!
Pass 1
!!!!
Pass 2
!!!!
Pass 3
!!!!
Pass 4
!!!!
Pass 5
!!!!
Pass 6
!!!!
Pass 7
![Page 86: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/86.jpg)
UIVisualEffectView with UIVibrancyEffectGPU utilization, fullscreen, iPad Air
Renderer Pixel processing
VBlank interrupt Every 16.67 ms
Tiler Vertex processing
16.67 ms
!!!!
Pass 1
!!!!
Pass 2
!!!!
Pass 3
!!!!
Pass 4
!!!!
Pass 5
!!!!
Pass 6
!!!!
Pass 7
![Page 87: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/87.jpg)
UIVisualEffectView with UIVibrancyEffectGPU utilization, fullscreen, iPad Air
Renderer Pixel processing
VBlank interrupt Every 16.67 ms
Tiler Vertex processing
16.67 ms
![Page 88: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/88.jpg)
UIBlurEffectStyleExtraLight
UIBlurEffectStyleLight
UIBlurEffectStyleDark
GPU time in milliseconds (smaller is better)
0.00 8.34 16.67 25.01 33.34
iPad (3rd generation) iPad Air
7.02
6.88
10.03
4.59
4.59
4.59
UIVisualEffectView with UIVibrancyEffectFullscreen performance
![Page 89: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/89.jpg)
UIBlurEffectStyleExtraLight
UIBlurEffectStyleLight
UIBlurEffectStyleDark
GPU time in milliseconds (smaller is better)
0.00 8.34 16.67 25.01 33.34
iPad (3rd generation) iPad Air
7.02
6.88
10.03
4.59
4.59
4.59
14.06
14.35
17.48
26.32
27.03
27.03
UIVisualEffectView with UIVibrancyEffectFullscreen performance
![Page 90: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/90.jpg)
UIVisualEffectView with UIVibrancyEffectPerformance considerations
UIVibrancyEffect adds two offscreen passes
UIVibrancyEffect uses expensive compositing filter for content
Use UIVibrancyEffect on small regions
Only dirty regions are redrawn
UIVibrancyEffect is very costly on all devices
UI can easily be GPU bound
Keep bounds of view as small as possible
Make sure to budget for effects
![Page 91: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/91.jpg)
RasterizationPerformance considerations
Use to composite to image once with GPU
Enable with shouldRasterize property on CALayer
Extra offscreen passes when updating content
Do not overuse, cache size is limited to 2.5x of screen size
Rasterized images evicted from cache if unused for more than 100ms
![Page 92: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/92.jpg)
RasterizationTypical use cases
Avoid redrawing expensive effects for static content
Avoid redrawing of complex view hierarchies
![Page 93: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/93.jpg)
Group OpacityPerformance considerations
Disable with allowsGroupOpacity property on CALayer
Will introduce offscreen passes: • If layer is not opaque (opacity != 1.0)
• And if layer has nontrivial content (child layers or background image)
Sub view hierarchy needs to be composited before being blended
Always turn it off if not needed
![Page 94: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/94.jpg)
Tools
Michael Ingrassia iOS Software Engineer
![Page 95: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/95.jpg)
Performance Investigation Mindset
![Page 96: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/96.jpg)
Performance Investigation Mindset
What is the frame rate? Goal is always 60 frames per second
![Page 97: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/97.jpg)
Performance Investigation Mindset
What is the frame rate? Goal is always 60 frames per second
CPU or GPU bound? Lower utilization is desired and saves battery
![Page 98: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/98.jpg)
Performance Investigation Mindset
What is the frame rate? Goal is always 60 frames per second
CPU or GPU bound? Lower utilization is desired and saves battery
Any unnecessary CPU rendering? GPU is desirable but know when CPU makes sense
![Page 99: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/99.jpg)
Performance Investigation Mindset
What is the frame rate? Goal is always 60 frames per second
CPU or GPU bound? Lower utilization is desired and saves battery
Any unnecessary CPU rendering? GPU is desirable but know when CPU makes sense
Too many offscreen passes? Fewer is better
![Page 100: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/100.jpg)
Performance Investigation Mindset
What is the frame rate? Goal is always 60 frames per second
CPU or GPU bound? Lower utilization is desired and saves battery
Any unnecessary CPU rendering? GPU is desirable but know when CPU makes sense
Too many offscreen passes? Fewer is better
Too much blending? Less is better
![Page 101: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/101.jpg)
Performance Investigation Mindset
What is the frame rate? Goal is always 60 frames per second
CPU or GPU bound? Lower utilization is desired and saves battery
Any unnecessary CPU rendering? GPU is desirable but know when CPU makes sense
Too many offscreen passes? Fewer is better
Too much blending? Less is better
Any strange image formats or sizes? Avoid on-the-fly conversions or resizing
![Page 102: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/102.jpg)
Performance Investigation Mindset
What is the frame rate? Goal is always 60 frames per second
CPU or GPU bound? Lower utilization is desired and saves battery
Any unnecessary CPU rendering? GPU is desirable but know when CPU makes sense
Too many offscreen passes? Fewer is better
Too much blending? Less is better
Any strange image formats or sizes? Avoid on-the-fly conversions or resizing
Any expensive views or effects? Understand the cost of what is in use
![Page 103: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/103.jpg)
Performance Investigation Mindset
What is the frame rate? Goal is always 60 frames per second
CPU or GPU bound? Lower utilization is desired and saves battery
Any unnecessary CPU rendering? GPU is desirable but know when CPU makes sense
Too many offscreen passes? Fewer is better
Too much blending? Less is better
Any strange image formats or sizes? Avoid on-the-fly conversions or resizing
Any expensive views or effects? Understand the cost of what is in use
Anything unexpected in hierarchy? Know the actual view hierarchy
![Page 104: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/104.jpg)
Tools
Instruments • Core Animation instrument
• OpenGL ES Driver instrument
Simulator • Color debug options
Xcode • View debugging
![Page 105: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/105.jpg)
InstrumentsCore Animation template
![Page 106: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/106.jpg)
InstrumentsCore Animation template
![Page 107: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/107.jpg)
Core Animation InstrumentMeasuring frame rate
![Page 108: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/108.jpg)
Core Animation InstrumentMeasuring frame rate
![Page 109: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/109.jpg)
Core Animation InstrumentMeasuring frame rate
![Page 110: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/110.jpg)
Core Animation InstrumentMeasuring frame rate
![Page 111: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/111.jpg)
Time Profiler InstrumentCPU utilization
![Page 112: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/112.jpg)
Time Profiler InstrumentCPU utilization
![Page 113: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/113.jpg)
Time Profiler InstrumentCPU utilization
![Page 114: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/114.jpg)
Core Animation InstrumentColor debug options
![Page 115: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/115.jpg)
Core Animation InstrumentColor debug options
![Page 116: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/116.jpg)
Core Animation InstrumentColor debug options
![Page 117: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/117.jpg)
Core Animation InstrumentColor blended layers
![Page 118: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/118.jpg)
Core Animation InstrumentColor hits green and misses red
![Page 119: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/119.jpg)
Core Animation InstrumentColor copied images
![Page 120: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/120.jpg)
Core Animation InstrumentColor misaligned images
![Page 121: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/121.jpg)
Core Animation InstrumentColor offscreen-rendered yellow
![Page 122: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/122.jpg)
Core Animation InstrumentColor OpenGL fast path blue
![Page 123: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/123.jpg)
Core Animation InstrumentFlash updated regions
![Page 124: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/124.jpg)
Performance Investigation MindsetCore Animation instrument summary
What is the frame rate? Goal is always 60 frames per second
Any unnecessary CPU rendering? GPU is desirable but know when CPU makes sense
Too many offscreen passes? Fewer is better
Too much blending? Less is better
Any strange image formats or sizes? Avoid on-the-fly conversions or resizing
![Page 125: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/125.jpg)
iOS Simulator Coloring Options
![Page 126: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/126.jpg)
InstrumentsOpenGL ES Driver template
![Page 127: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/127.jpg)
InstrumentsOpenGL ES Driver template
![Page 128: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/128.jpg)
OpenGL ES Driver InstrumentSelecting statistics to list
![Page 129: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/129.jpg)
OpenGL ES Driver InstrumentSelecting statistics to list
![Page 130: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/130.jpg)
OpenGL ES Driver InstrumentSelecting statistics to list
![Page 131: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/131.jpg)
OpenGL ES Driver InstrumentGPU utilization
![Page 132: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/132.jpg)
OpenGL ES Driver InstrumentGPU utilization
![Page 133: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/133.jpg)
OpenGL ES Driver InstrumentGPU utilization
![Page 134: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/134.jpg)
Time Profiler InstrumentCPU utilization
![Page 135: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/135.jpg)
Time Profiler InstrumentCPU utilization
![Page 136: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/136.jpg)
Time Profiler InstrumentCPU utilization
![Page 137: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/137.jpg)
Performance Investigation MindsetOpenGL ES Driver instrument summary
What is the frame rate? Goal is always 60 frames per second
CPU or GPU bound? Lower utilization is desired and saves battery
Any unnecessary CPU rendering? GPU is desirable but know when CPU make sense
![Page 138: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/138.jpg)
XcodeView debugging
![Page 139: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/139.jpg)
XcodeView debugging
![Page 140: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/140.jpg)
XcodeView debugging
![Page 141: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/141.jpg)
XcodeView debugging
![Page 142: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/142.jpg)
Performance Investigation Mindset
Any expensive views or effects? Understand the cost of what is in use
Anything unexpected in hierarchy? Know the actual view hierarchy
Xcode view debugging summary
![Page 143: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/143.jpg)
Case Studies
Michael Ingrassia iOS Software Engineer
![Page 144: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/144.jpg)
Case Studies
Explore several scenarios
Measure performance on different devices
Keep the same appearance with better performance
![Page 145: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/145.jpg)
Fictitious Photo ApplicationCase study
Simple table view
Each cell shows a photo thumbnail and some text
Each photo has a small shadow
![Page 146: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/146.jpg)
Measure Frame Rate on iPhone 5sOpenGL ES Driver instrument
![Page 147: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/147.jpg)
Measure Frame Rate on iPhone 5sOpenGL ES Driver instrument
![Page 148: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/148.jpg)
Ship it?Awesome
![Page 149: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/149.jpg)
Fictitious Photo ApplicationiPod touch scrolling performance
What about the performance on other devices?
![Page 150: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/150.jpg)
Measure Frame Rate on iPod touchOpenGL ES Driver instrument
![Page 151: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/151.jpg)
Measure Frame Rate on iPod touchOpenGL ES Driver instrument
![Page 152: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/152.jpg)
Measure Frame Rate on iPod touchOpenGL ES Driver instrument
![Page 153: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/153.jpg)
Analyzing View Hierarchy on iPod touchXcode view debugging
![Page 154: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/154.jpg)
Analyzing View Hierarchy on iPod touchXcode view debugging
![Page 155: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/155.jpg)
Color Offscreen-Rendered YellowCore Animation instrument
![Page 156: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/156.jpg)
How Are We Setting up the Shadow?
![Page 157: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/157.jpg)
How Are We Setting up the Shadow?
We are asking Core Animation to generate the shadow CALayer *imageViewLayer = cell.imageView.layer; imageViewLayer.shadowColor = [UIColor blackColor].CGColor; imageViewLayer.shadowOpacity = 1.0; imageViewLayer.shadowRadius = 2.0; imageViewLayer.shadowOffset = CGSizeMake(1.0, 1.0);
![Page 158: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/158.jpg)
How Are We Setting up the Shadow?
We are asking Core Animation to generate the shadow CALayer *imageViewLayer = cell.imageView.layer; imageViewLayer.shadowColor = [UIColor blackColor].CGColor; imageViewLayer.shadowOpacity = 1.0; imageViewLayer.shadowRadius = 2.0; imageViewLayer.shadowOffset = CGSizeMake(1.0, 1.0);
Perhaps there is a more efficient way imageViewLayer.shadowPath = CGPathCreateWithRect(imageRect, NULL);
![Page 159: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/159.jpg)
Color Offscreen-Rendered YellowCore Animation instrument
![Page 160: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/160.jpg)
Measure Frame Rate on iPod touchOpenGL ES Driver instrument
![Page 161: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/161.jpg)
Measure Frame Rate on iPod touchOpenGL ES Driver instrument
![Page 162: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/162.jpg)
Measure Frame Rate on iPod touchOpenGL ES Driver instrument
![Page 163: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/163.jpg)
Can we ship it now?Awesome
![Page 164: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/164.jpg)
Measure Frame Rate on iPhone 4sOpenGL ES Driver instrument
![Page 165: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/165.jpg)
Measure Frame Rate on iPhone 4sOpenGL ES Driver instrument
![Page 166: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/166.jpg)
Measure Frame Rate on iPhone 4sOpenGL ES Driver instrument
![Page 167: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/167.jpg)
Fictitious Photo ApplicationPerformance across devices
CA Shadow
shadowPath
Frame Rate (target is 60 fps)
15 30 45 60
60
33
60
45
60
55
60
60 iPhone 5siPhone 5iPhone 4siPod touch
![Page 168: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/168.jpg)
Ship it!Awesome
![Page 169: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/169.jpg)
Fictitious Photo ApplicationSummary
Offscreen passes are expensive • Use Core Animation instrument to find them
• Know what you can do to avoid them
Measure performance across different devices • Use OpenGL ES Driver instrument for GPU time
• Use Time Profiler instrument for CPU time
Know your view hierarchy and any hidden costs • This is especially true for table cells and scrolling
![Page 170: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/170.jpg)
Fictitious Contacts ApplicationCase study
Simple table view
Each cell shows a round thumbnail and some text
![Page 171: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/171.jpg)
Frame Rate (target is 60 fps)
15 30 45 60
46
55
60
60
iPhone 5siPhone 5iPhone 4siPod touch
Fictitious Contacts ApplicationPerformance across devices
![Page 172: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/172.jpg)
Measure Frame Rate on iPod touchOpenGL ES Driver instrument
![Page 173: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/173.jpg)
Measure Frame Rate on iPod touchOpenGL ES Driver instrument
![Page 174: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/174.jpg)
Measure Frame Rate on iPod touchOpenGL ES Driver instrument
![Page 175: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/175.jpg)
Color Offscreen-Rendered YellowCore Animation instrument
![Page 176: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/176.jpg)
How Are We Achieving Round Thumbnails?
![Page 177: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/177.jpg)
How Are We Achieving Round Thumbnails?
We are asking Core Animation to mask the image CALayer *imageViewLayer = cell.imageView.layer; imageViewLayer.cornerRadius = imageHeight / 2.0; imageViewLayer.masksToBounds = YES;
![Page 178: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/178.jpg)
How Are We Achieving Round Thumbnails?
We are asking Core Animation to mask the image CALayer *imageViewLayer = cell.imageView.layer; imageViewLayer.cornerRadius = imageHeight / 2.0; imageViewLayer.masksToBounds = YES;
Perhaps there is a more efficient way • Don’t mask on the fly, pre-generate thumbnails as round, or
![Page 179: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/179.jpg)
How Are We Achieving Round Thumbnails?
We are asking Core Animation to mask the image CALayer *imageViewLayer = cell.imageView.layer; imageViewLayer.cornerRadius = imageHeight / 2.0; imageViewLayer.masksToBounds = YES;
Perhaps there is a more efficient way • Don’t mask on the fly, pre-generate thumbnails as round, or
• If that is not possible, fake it - Table background is solid white
- Render a white inverted circle on top of square thumbnail asset
- Reducing offscreen passes but increasing blending, still a net performance win
![Page 180: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/180.jpg)
Measure Frame Rate on iPod touchOpenGL ES Driver instrument
![Page 181: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/181.jpg)
Measure Frame Rate on iPod touchOpenGL ES Driver instrument
![Page 182: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/182.jpg)
Measure Frame Rate on iPod touchOpenGL ES Driver instrument
![Page 183: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/183.jpg)
before
after
Frame Rate (target is 60 fps)
15 30 45 60
60
46
60
55
60
60
60
60 iPhone 5siPhone 5iPhone 4siPod touch
Fictitious Contacts ApplicationPerformance across devices
![Page 184: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/184.jpg)
Fictitious Contacts ApplicationSummary
Offscreen passes are expensive • Use Core Animation instrument to find them
• Know what you can do to avoid them
Measure performance across different devices • Use OpenGL ES Driver instrument for GPU time
• Use Time Profiler instrument for CPU time
Know your view hierarchy and any hidden costs • This is especially true for table cells and scrolling
![Page 185: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/185.jpg)
Performance Investigation Mindset
What is the frame rate? Core Animation or OpenGL ES Driver instrument
CPU or GPU bound? OpenGL ES Driver and Time Profiler instrument
Any unnecessary CPU rendering? Time Profiler instrument
Too many offscreen passes? Core Animation instrument
Too much blending? Core Animation instrument
Any strange image formats or sizes? Core Animation instrument
Any expensive views or effects? Xcode View Debugger
Anything unexpected in hierarchy? Xcode View Debugger
Summary
![Page 186: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/186.jpg)
Summary
Core Animation pipeline
Rendering concepts
UIBlurEffect UIVibrancyEffect
Profiling tools
Case studies
![Page 187: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/187.jpg)
More Information
Jake Behrens App Frameworks Evangelist [email protected]
Dave DeLong Developer Tools Evangelist [email protected]
Documentation Core Animation http://developer.apple.com/library/IOs/documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html
Apple Developer Forums http://devforums.apple.com
![Page 188: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/188.jpg)
Related Sessions
• Improving Your App with Instruments Marina Tuesday 4:30PM
• Debugging in Xcode 6 Marina Wednesday 10:15AM
• Writing Energy Efficient Code, Part 1 Russian Hill Wednesday 10:15AM
• Writing Energy Efficient Code, Part 2 Russian Hill Wednesday 11:30AM
• Creating Custom iOS User Interfaces Marina Wednesday 3:15PM
• Building Interruptible and Responsive Interactions Presidio Friday 11:30AM
![Page 189: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/189.jpg)
Labs
• Core Animation and Quartz 2D Lab Graphics and Games Lab A Tuesday 2:00PM
• Interface Builder and Live Views Lab Tools Lab C Wednesday 9:00AM
• Power and Performance Lab Core OS Lab B Wednesday 2:00PM
• Dynamics, View Animations, and Core Animation Lab
Frameworks Lab A Thursday 9:00AM
• Power and Performance Lab Core OS Lab A Thursday 3:15PM
• Visual Effects and Appearance Customization Lab
Frameworks Lab A Friday 9:00AM
![Page 190: Advanced Graphics and Animations for iOS Apps...Advanced Graphics and Animations for iOS Apps Session 419 Axel Wefers iOS Software Engineer Tools! Michael Ingrassia iOS Software Engineer](https://reader036.vdocuments.mx/reader036/viewer/2022062603/5f0b79f87e708231d430b516/html5/thumbnails/190.jpg)