[SOUND] Okay, so we solved that problem.

It took a few long videos but we did it,

our implementation involved creating two image context.

A temporary one to scale the image down and another one to apply the filter along

with the operations based approach to schedule all this work in the background.

This is a fine approach and we could stop here, but this is an opportunity

to talk and learn about the various ways we can tackle different problems.

So let's switch tracks here and talk about the GPU.

When the core image frame work renders and image,

it can do so using either the CPU or the GPU.

Before we talk about why this matters,

let's make sure we understand the difference between these two components.

In a previous course, we touched upon the CPU, the Central Processing Unit or

what is commonly referred to as the brains of the computer.

There's another important component in modern computers known as the GPU or

the Graphics Processing Unit.

We learned when talking about concurrency, that the CPU is architected with a few

cores that can handle different software threads at the same time.

This processing structure means that the CPU can render images on one of its'

background threads, but it can only do this well enough for basic graphics.

The GPU, on the other hand, is a very specialized device

that is extremely efficient at concurrent processing.

Where the CPU has a few cores, modern GPUs can have several hundred cores

that process thousands of threads simultaneously.

As its name states, this makes it quite suited for graphics processing and

in fact, nearly every pixel that ends up on your screen was put there by the GPU.

Even tasks like scrolling, view transitions, zooming,

are all handled by the GPU on your mobile device.

Without using multiple contexts and operations our filter processes ran

really slowly, and that's because we were rendering images on the CPU.

So let's try switching over to using the GPU and controlling the process.

Now, few videos ago we created a separate get branch to work on the first solution.

Let's switch back to master,

so that we can create a new branch of the GPU based approach.

So if you don't have you're project navigator up, bring it up and

hover to the second tab, and you can do this easily by hitting command two,

this is the source control navigator.

Now in here we can see the different branches,

we're going to right-click on the master branch and select Checkout.

Now when we do this, it says here that all files in the working copy will switch

from the current branch to master.

Hit check out, and you'll notice that all your code should be back to the place

where we took the snapshot earlier right before we switched to the branch, okay.

Now, right-click on master again, and select branch from master.

This time the branch name GPU-based-approach, again,

if you inspect the code you can see we're back to square one more or less.

Let's navigate to the FilteredImageBuilder class, and

then inspect the code we wrote to apply the filter.

You can see that our apply method here is back to returning an instance of ciImage,

which we then convert to an instance of UIImage and return at some point.

The reason our filters take awhile to load here is because

we're using the CPU to draw from the CGImage back to the UIImage.

And then we hand the object right back to UIKit, which uses the GPU to render it.

cgImage, as the class name suggests, is form the core graphics framework, and

we can avoid this round trip from the CPU to the GPU by using the GPU directly to

do all the work.

To do this we're going to utilize the Open Graphics Library, commonly called OpenGL.

OpenGL is a multipurpose open standard graphics library that supports

applications for 2D and 3D digital content creation, mechanical and

architectural design, virtual prototyping, flight simulation, video games, and more.

Now, OpenGL for embedded systems, OpenGL ES is what we're going to use, and

this is a simplified version of OpenGL that is easier to implement in

mobile graphics hardware.

To do this, we're going to redefine the context that we use.

So instead of using a CIContext like we did earlier we're

going to use an underlying EAGLContext.

An EAGLContext object manages an OpenGL ES rendering context.

The state information, the commands, and

the resources needed to draw directly using OpenGL ES.

So navigate to PhotoFilterController.swift, and

in here as a stored property we're going to define our EAGLContext.

So, let eaglContext = EAGLContext,

now the initializer we're going to use takes an EAGLRenderingAPI.

Here, we're going to use OpenGL E3, so if you start typing openGLES3 right here.

This is only available in iOS 7 and higher versions.

Now, the mechanics by which OpenGL ES does its magic, is a bit outside the scope of

this course and honestly quite complicated, all over my head at least.

And that's not all there is to this, instead of rendering the image via

UIImage and UIKit, we are now going to use an instance of GLKView.

Which is a subclass of UIView that communicates with this

OpenGL context directly, and lets the GPU draw on it.

Since we're doing that, drawing to a GLKView directly, we don't need

this image view that we added earlier, or this instance of UIImage.

So we're going to go back to FilteredImageBuilder, and

again we're going to modify our message to return a different image type.

Now earlier we switched from returning an array of UIImage to CGImage,

we're gonna change that again and this time return CIImages instead.

One thing we didn't talk about earlier,

was that ciImage isn't actually an image format, think of it more like a recipe,

it contains instructions about how the image should be rendered.

So what is the point of this?

Well, holding the data this way makes it easy for

us to chain operations like filters or any other image processing requirements.

Imagine you had a large image that you wanted to apply a black and

white filter to and then crop by 50%.

If you first apply the filter, render the image with the filter,

given that it's a large image this is going to be expensive.

Now after this operation, after the filter application we're going to crop the image

and reduce it's size in half.

So had you combined all those operations together, had you applied the filter after

the crop, where we have a smaller image, it would decrease processing time.

Now you know this because we ran into that very constrain and

had to take the exact approach.

So what ciImage does is it takes all the instructions we provide crops, filters,

drawing directions and so on, and combines them so that it optimizes the process.

So that when we eventually render it,

it does it in the right order to minimize how expensive the operation is.

Inside the main method, so inside our applyFilter method over here,

we'll use the output image that we get from this line to do something

similar to what we did earlier.

We're going to return the output image cropped to the bounds of the input image.

So here we'll just get rid of the return statement and

say outputImage.cropped to Rect inputImage.extent, okay.

Now, let's change this return type to CIImage and

the last one as well, we're almost there.

We now have an OpenGL ES context, and we have an object that returns a set of

instructions on how to draw a filtered image.

The next place we need to make changes is the collection view cell,

which we'll do in the next video.