KEMBAR78
GPU Programming 360iDev | PDF
GPU PROGRAMMING WITH 
GPUIMAGE AND METAL 
JANIE CLAYTON-HASZ
About Me 
Janie Clayton-Hasz 
Co-Author of “iOS 8 SDK 
Development” 
Software engineer at 
SonoPlot 
@redqueencoder 
http://redqueencoder.com
What is a GPU? 
A Graphics Processing Unit (GPU) is a small super 
computer that does one thing really really well. That 
one thing is processing floating point math in parallel. 
There are several applications for being able to do 
really fast floating point math: Graphics processing, 
bioinformatics, molecular dynamics, etc… 
Most people are going to primarily focus on graphics 
processing, as we will today. For GPGPU 
programming, go see Jeff Biggus speak about 
OpenCL!
What is Parallel Computing 
The default processes in a project is serialized 
computing. One instruction is processed at a time 
and then the CPU moves on to the next one. 
Parallel computing is the process of allowing 
multiple instructions to be carried out at once. 
Can be done on different threads, cores, and even 
at the bit level.
But I Have Concurrency! 
Concurrency is about dealing with a lot of things 
at once. 
Parallelism is about doing lots of things at once.
Shader Basics 
Shaders are the programs that determine what 
gets displayed on your screen. 
Shaders determine shapes, colors, textures, 
lighting… 
Everything you see and use comes down to 
shaders.
GRAPHICS ON IOS DEVICES
There are many levels of abstraction 
for graphics on iOS. 
! 
Some frameworks are more 
abstracted than others.
UIKit 
Sprite Kit 
Core Animation/Graphics 
OpenGL ES/GLKit
A BRIEF HISTORY OF TIME, 
UH, OPENGL…
OpenGL Origins 
First released in 1992 
Was an attempt to formalize a 3D graphic 
specification across platforms
Problems with OpenGL 
Was created back when GPUs were not very 
powerful and existed on external graphics cards 
that could be swapped out 
The computer system architecture was vastly 
different when OpenGL was created. Things that 
were not very efficient then, like the GPU, are vastly 
more efficient now. 
Nothing is ever deprecated (Don’t ask Java 
programmers what that means, they don’t know)
Creation of OpenGL ES 
ES: Embedded Systems 
Wanted to strip out all of the dead code from 
OpenGL 
Was specifically tailored to work on less powerful 
devices like mobile phones
We don’t need a dozen turtles that all do the same thing
OpenGL ES Specifics 
Streamlined version of OpenGL 
Everything you can do in OpenGL ES can directly 
be ported to OpenGL 
Basically an optimized version of OpenGL
CPU VS GPU PROGRAMMING
CPU Expensive Tasks 
Sending hardware commands to the GPU 
(Changing State Vectors) 
Confirming that API usage is valid 
Compiling the shaders 
Interaction between the state and the shaders
How does the CPU Send 
tasks to the GPU? 
Try to envision a client-server process. Instead of 
your program sending an instruction over the 
network to a server and getting data back, you are 
sending instructions from your CPU to your GPU 
to be executed. Since you are sending instructions 
away from your client to be done elsewhere, you 
want to minimize this as much as possible.
How does the CPU Send 
tasks to the GPU? 
For example, in most Twitter client applications the 
client batches 20 or more Tweets in one call. This 
allows the application to feed tweets to the user 
without them having to wait for the network to 
deliver each and every tweet individually.
Fixed Function Pipeline 
Present in OpenGL ES 1.1 
Shaders were hard-coded into OpenGL 
Easier to use, but were very limited
Programmable Pipeline 
Introduced in OpenGL ES 2.0 
Shaders are now the responsibility of the 
programmer 
Harder to do, but provides far more flexibility and 
options for effects
GLSL SHADER BUILDING
GLSL 
OpenGL Shading Language (GLSL) 
Introduced in OpenGL 2.0 in 2004 
C-like language for building shaders, which are 
small, efficient programs to run on the GPU 
Includes some specific data types and methods 
for processing geometry and graphics math that 
are not included in C
Two Flavors of GLSL 
Shaders 
Vertex 
Fragment
Vertex Shaders
Vertex Shaders 
The Vertex Shader would record the vertices of the 
star (which would be broken down into a series of 
triangles) 
The Vertex Shader would also specify that the area 
between the vertices is yellow. If there was a 
texture instead of a color, the shader would keep 
track of the texture coordinates.
Fragment Shaders
Fragment Shaders 
Fragment Shaders determine what pixels receive 
which color. 
If you look carefully at the star, there are areas 
outside the star that are yellow and areas inside 
that are white. 
If there is a gradient, the Fragment Shader will 
calculate what specific color each individual pixel 
will be.
Inputs and Outputs 
Uniforms 
Attributes 
Varyings
Uniforms 
Values that don’t change during rendering 
Read-Only 
Available in both Vertex and Fragment Shaders
Attributes 
Vertex Shader only 
Input values that change with every vertex, like 
their position, color, and texture coordinates
Varyings 
Used to pass data between the Vertex and the 
Fragment Shaders 
Read-only in the Fragment Shader 
Read-Write in the Vertex Shader 
Varyings are the variables that determine the pixel 
color for the Fragment Shader
GPU IMAGE
Creating GPUImage 
GPUImage dates back to iOS 5. 
Unlike Core Image (at the time), GPUImage utilized 
shaders more efficiently to make image processing 
faster. Core Image has been improved over the 
years and they are now comparable.
Why is GPUImage so 
Efficient? 
OpenGL ES tasks must be performed on one 
thread 
Many people utilize locks to manage the thread or, 
God forbid, only use the main thread. <shudder> 
NSLock is expensive to the CPU 
GPUImage utilizes a serial dispatch queue through 
GCD to manage anything that touches the GPU to 
keep everything happy and thread safe.
Demo
METAL: THE NEW KID IN 
TOWN
What does Metal Promise? 
Deep hardware integration between Apple chips 
and Apple frameworks 
General Purpose GPU programming (GPGPU) 
Precompiled Shaders 
up to 10 times more draw calls per frame 
Being able to perform draw calls on multiple 
threads
What Specifically are the 
CPU Expensive Tasks? 
Compiling Shaders 
Validating State 
Start Work on the GPU
Life Before Metal 
All three of these expensive tasks were done on 
each and every single draw call. 
All of these tasks don’t have to be done thousands 
of times a frame. Many can be done once, as long 
as the program knows that it does not have to 
continually check them.
Life After Metal 
Compiling Shaders: Now done when the 
applications builds 
Validating State: Now done when the content 
loads 
Start Work on the GPU: Still happens on each 
draw call. We can’t win them all…
Why is This Important? 
Before Metal, you would have to balance CPU 
time with GPU time. Tasks were so expensive that 
the GPU would usually not be used to capacity. 
Now that the CPU tasks are less expensive, you 
can take that time to generate more AI and do 
more programming logic.
Where Does Metal Help 
You? 
Metal helps you when you have a lot of objects 
that need to work independently of one another. 
Certain tasks, like image processing, do not 
involve a lot of objects, so you aren’t going to gain 
much with Metal.
ZEN GARDEN DEMO 
EPIC GAMES
SO, WHAT DO I THINK 
ABOUT METAL?
Why Metal is Scary 
You have to control EVERYTHING!!! 
You have to have a deep understanding of how 
the computer works that I have not seen 
demonstrated by a large number of people. 
Metal assumes you know more than the computer 
does, which in my experience is usually a bad 
move.
WHAT HAPPENS WHEN YOU LOOK 
INTO THE HEART OF THE GPU 
BAD WOLF 
PROJECT 
DATE 10/06/14 CLIENT
Why Metal is Exciting 
Metal, along with Swift, signals a shift to figuring 
out how to do more parallel programming. 
I believe Metal is not going anywhere. It will take a 
while for people to learn how to fully utilize it, but I 
believe it has the potential to be a game changer. 
Metal, like Swift, is still partly baked. It gives early 
adopters an opportunity to master something 
extraordinary.
IS THERE ANY POINT IN LEARNING 
OPENGL ES ANYMORE?
“Easy things should be easy. 
Hard things should be possible.” 
–Larry Wall
Yes, absolutely. Metal’s API is very similar to OpenGL ES. 
! 
It will take a while for everyone to transition over 
to devices with A7 chips. 
! 
Apple will continue to support its developers who 
work with OpenGL ES, especially since the 
Mac uses OpenGL and won’t be able to use Metal (yet). 
! 
Also, Metal is new. It usually takes Apple a few 
years to work the kinks out of their new frameworks. 
! 
Also, with Metal’s incredibly stiff learning curve, 
very few people could work with it now.
Take Aways 
Whether you learn GLSL or Metal Shading Language, 
the value comes from the algorithms. The languages 
are not complicated and are similar. If you don’t know 
how the math on a shader works, knowing the language 
won’t really help you. 
There are lots of books on GPU programming out there 
explaining how to create effects, not to mention the 
shaders included in GPUImage. You will need to 
understand the math, but there are great resources 
online out there for this stuff. 
Be tenacious. This takes a lot of time to master. It is 
worth it. Be patient.
Think Different.
The End

GPU Programming 360iDev

  • 1.
    GPU PROGRAMMING WITH GPUIMAGE AND METAL JANIE CLAYTON-HASZ
  • 2.
    About Me JanieClayton-Hasz Co-Author of “iOS 8 SDK Development” Software engineer at SonoPlot @redqueencoder http://redqueencoder.com
  • 3.
    What is aGPU? A Graphics Processing Unit (GPU) is a small super computer that does one thing really really well. That one thing is processing floating point math in parallel. There are several applications for being able to do really fast floating point math: Graphics processing, bioinformatics, molecular dynamics, etc… Most people are going to primarily focus on graphics processing, as we will today. For GPGPU programming, go see Jeff Biggus speak about OpenCL!
  • 4.
    What is ParallelComputing The default processes in a project is serialized computing. One instruction is processed at a time and then the CPU moves on to the next one. Parallel computing is the process of allowing multiple instructions to be carried out at once. Can be done on different threads, cores, and even at the bit level.
  • 5.
    But I HaveConcurrency! Concurrency is about dealing with a lot of things at once. Parallelism is about doing lots of things at once.
  • 6.
    Shader Basics Shadersare the programs that determine what gets displayed on your screen. Shaders determine shapes, colors, textures, lighting… Everything you see and use comes down to shaders.
  • 7.
  • 8.
    There are manylevels of abstraction for graphics on iOS. ! Some frameworks are more abstracted than others.
  • 9.
    UIKit Sprite Kit Core Animation/Graphics OpenGL ES/GLKit
  • 10.
    A BRIEF HISTORYOF TIME, UH, OPENGL…
  • 11.
    OpenGL Origins Firstreleased in 1992 Was an attempt to formalize a 3D graphic specification across platforms
  • 12.
    Problems with OpenGL Was created back when GPUs were not very powerful and existed on external graphics cards that could be swapped out The computer system architecture was vastly different when OpenGL was created. Things that were not very efficient then, like the GPU, are vastly more efficient now. Nothing is ever deprecated (Don’t ask Java programmers what that means, they don’t know)
  • 14.
    Creation of OpenGLES ES: Embedded Systems Wanted to strip out all of the dead code from OpenGL Was specifically tailored to work on less powerful devices like mobile phones
  • 15.
    We don’t needa dozen turtles that all do the same thing
  • 16.
    OpenGL ES Specifics Streamlined version of OpenGL Everything you can do in OpenGL ES can directly be ported to OpenGL Basically an optimized version of OpenGL
  • 17.
    CPU VS GPUPROGRAMMING
  • 18.
    CPU Expensive Tasks Sending hardware commands to the GPU (Changing State Vectors) Confirming that API usage is valid Compiling the shaders Interaction between the state and the shaders
  • 19.
    How does theCPU Send tasks to the GPU? Try to envision a client-server process. Instead of your program sending an instruction over the network to a server and getting data back, you are sending instructions from your CPU to your GPU to be executed. Since you are sending instructions away from your client to be done elsewhere, you want to minimize this as much as possible.
  • 20.
    How does theCPU Send tasks to the GPU? For example, in most Twitter client applications the client batches 20 or more Tweets in one call. This allows the application to feed tweets to the user without them having to wait for the network to deliver each and every tweet individually.
  • 22.
    Fixed Function Pipeline Present in OpenGL ES 1.1 Shaders were hard-coded into OpenGL Easier to use, but were very limited
  • 23.
    Programmable Pipeline Introducedin OpenGL ES 2.0 Shaders are now the responsibility of the programmer Harder to do, but provides far more flexibility and options for effects
  • 24.
  • 25.
    GLSL OpenGL ShadingLanguage (GLSL) Introduced in OpenGL 2.0 in 2004 C-like language for building shaders, which are small, efficient programs to run on the GPU Includes some specific data types and methods for processing geometry and graphics math that are not included in C
  • 26.
    Two Flavors ofGLSL Shaders Vertex Fragment
  • 27.
  • 28.
    Vertex Shaders TheVertex Shader would record the vertices of the star (which would be broken down into a series of triangles) The Vertex Shader would also specify that the area between the vertices is yellow. If there was a texture instead of a color, the shader would keep track of the texture coordinates.
  • 29.
  • 30.
    Fragment Shaders FragmentShaders determine what pixels receive which color. If you look carefully at the star, there are areas outside the star that are yellow and areas inside that are white. If there is a gradient, the Fragment Shader will calculate what specific color each individual pixel will be.
  • 31.
    Inputs and Outputs Uniforms Attributes Varyings
  • 32.
    Uniforms Values thatdon’t change during rendering Read-Only Available in both Vertex and Fragment Shaders
  • 33.
    Attributes Vertex Shaderonly Input values that change with every vertex, like their position, color, and texture coordinates
  • 34.
    Varyings Used topass data between the Vertex and the Fragment Shaders Read-only in the Fragment Shader Read-Write in the Vertex Shader Varyings are the variables that determine the pixel color for the Fragment Shader
  • 35.
  • 36.
    Creating GPUImage GPUImagedates back to iOS 5. Unlike Core Image (at the time), GPUImage utilized shaders more efficiently to make image processing faster. Core Image has been improved over the years and they are now comparable.
  • 37.
    Why is GPUImageso Efficient? OpenGL ES tasks must be performed on one thread Many people utilize locks to manage the thread or, God forbid, only use the main thread. <shudder> NSLock is expensive to the CPU GPUImage utilizes a serial dispatch queue through GCD to manage anything that touches the GPU to keep everything happy and thread safe.
  • 38.
  • 39.
    METAL: THE NEWKID IN TOWN
  • 40.
    What does MetalPromise? Deep hardware integration between Apple chips and Apple frameworks General Purpose GPU programming (GPGPU) Precompiled Shaders up to 10 times more draw calls per frame Being able to perform draw calls on multiple threads
  • 41.
    What Specifically arethe CPU Expensive Tasks? Compiling Shaders Validating State Start Work on the GPU
  • 42.
    Life Before Metal All three of these expensive tasks were done on each and every single draw call. All of these tasks don’t have to be done thousands of times a frame. Many can be done once, as long as the program knows that it does not have to continually check them.
  • 43.
    Life After Metal Compiling Shaders: Now done when the applications builds Validating State: Now done when the content loads Start Work on the GPU: Still happens on each draw call. We can’t win them all…
  • 44.
    Why is ThisImportant? Before Metal, you would have to balance CPU time with GPU time. Tasks were so expensive that the GPU would usually not be used to capacity. Now that the CPU tasks are less expensive, you can take that time to generate more AI and do more programming logic.
  • 45.
    Where Does MetalHelp You? Metal helps you when you have a lot of objects that need to work independently of one another. Certain tasks, like image processing, do not involve a lot of objects, so you aren’t going to gain much with Metal.
  • 46.
    ZEN GARDEN DEMO EPIC GAMES
  • 47.
    SO, WHAT DOI THINK ABOUT METAL?
  • 49.
    Why Metal isScary You have to control EVERYTHING!!! You have to have a deep understanding of how the computer works that I have not seen demonstrated by a large number of people. Metal assumes you know more than the computer does, which in my experience is usually a bad move.
  • 50.
    WHAT HAPPENS WHENYOU LOOK INTO THE HEART OF THE GPU BAD WOLF PROJECT DATE 10/06/14 CLIENT
  • 51.
    Why Metal isExciting Metal, along with Swift, signals a shift to figuring out how to do more parallel programming. I believe Metal is not going anywhere. It will take a while for people to learn how to fully utilize it, but I believe it has the potential to be a game changer. Metal, like Swift, is still partly baked. It gives early adopters an opportunity to master something extraordinary.
  • 52.
    IS THERE ANYPOINT IN LEARNING OPENGL ES ANYMORE?
  • 53.
    “Easy things shouldbe easy. Hard things should be possible.” –Larry Wall
  • 54.
    Yes, absolutely. Metal’sAPI is very similar to OpenGL ES. ! It will take a while for everyone to transition over to devices with A7 chips. ! Apple will continue to support its developers who work with OpenGL ES, especially since the Mac uses OpenGL and won’t be able to use Metal (yet). ! Also, Metal is new. It usually takes Apple a few years to work the kinks out of their new frameworks. ! Also, with Metal’s incredibly stiff learning curve, very few people could work with it now.
  • 55.
    Take Aways Whetheryou learn GLSL or Metal Shading Language, the value comes from the algorithms. The languages are not complicated and are similar. If you don’t know how the math on a shader works, knowing the language won’t really help you. There are lots of books on GPU programming out there explaining how to create effects, not to mention the shaders included in GPUImage. You will need to understand the math, but there are great resources online out there for this stuff. Be tenacious. This takes a lot of time to master. It is worth it. Be patient.
  • 57.
  • 58.