Rather than using an image view to render the image in our cell,

we're going to use an instance of GLKView,

which is a view subclass that makes drawing from OpenGL ES much easier.

Navigate to Main.storyboard, and to the filtered image cell that we added earlier.

So it's in the Photo Filter Controller Scene, and that's the filtered image cell.

We're going to select the Image View.

You can do that from the document outline, and delete it.

We're going to replace the current image view with a GLKView instance so

we can draw directly onto it.

Now we can do this in Interface Builder.

There is a GLKView we can use in the object library.

But we're going to do it in code.

The IB version comes with a few defaults, and since we don't really know how to

configure this view, it can seem confusing.

Also, to be honest, I implemented a solution in code and

then tried to get that same solution in the Interface Builder version running.

And I couldn't get the filters to render without doing a bunch of additional work.

So we're gonna go to code, and we're going to do that by navigating to the cell

subclass, which is filteredimagecell.

Now, delete this lingering connection here so that we don't have any errors, and

create an instance of GLKView here as a lazy property.

So lazy var, oops, we don't need that @ symbol,

glkView is a type GLKView.

Now it's not going to autocomplete because we need to import GLKit.

Okay, and we'll assign a closure here.

To create a new instance of GLKView, we need to define a frame and

provide an instance of EAGLContext to use.

We define an EAGLContext in the photo filter controller.

Let's use that here by defining a stored property we can assign to,

var eaglContext of type EAGLContext.

And we'll make this an exclusively unwrapped optional.

We can now use this to initialize the GLKView instance, let view = GLKView.

We'll use this last initializer here that takes a frame.

And here, since we're going to occupy the entire content view of the cell,

we'll use the content views frame to initially size it.

It's self.contentView.frame and

self.eaglContext.

Since we're also going to be laying this out in code, we need to set

translatesAutoresizingMaskIntoConstraints = false, and we'll return the view.

Okay, next we need to actually position and size this view and

we'll do this in the layoutSubviews method.

First, we'll call super.layoutSubviews, and this allows the cell to set itself up.

And then in here, we'll add the glkView as a subview of the contentView, so

contentView.addSubview(glkView).

Now, if you've only ever done layout stuff in Interface Builder,

this might seem confusing to you.

I am not going to cover what I'm doing here in detail.

And that's because we have a separate course on programmatic auto layouts that

I'll link to you in the notes.

The constraints here are pretty straightforward.

We're just going to pin the edges of the glkView to the edges of the contentView so

it occupies the entire cell.

We're going to use the NSLayoutConstraint method.

And the class method we're gonna call here is activate constraints, and

this takes an array of constraints.

And it will say glkView.leadingAnchor.constraint(equalTo:

contentView.leadinganchor).

Now I'm going to copy paste this a couple times, three times to be specific.

And we'll change a few attributes.

The next one is the GLKView's topAnchor.

Is going to be pinned to the contentView's topAnchor.

Next, the GLKView's trailingAnchor

is going to be pinned to the contentView's trailingAnchor.

And finally, the view's bottomAnchor, pinned to the contentView's bottomAnchor.

To draw on a GLKView, we don't subclass the view and

override draw rect like we do with UI views.

Instead we provide a delegate object to draw the views contents to draw

to the view's contents.

So where we set it up over here, we'll going to add another line of code,

we'll say, view.delegate = self.

And that's obviously going to cause an error.

So in an extension of this class, we'll say, extension FilteredImageCell:.

We'll conform to the relevant protocol, which over here is GLKViewDelegate.

The method we want to provide an implementation for

is GLKView, drawIn rect.

This method provides a drawing implementation and

renders the drawing onto the view.

To direct the view to draw to the image, we need a reference to that image.

So let's add an implicitly unwrapped optional property to our cell,

var image: CIImage.

To wrap this up, we're going to ask a context

to draw the image in the rect that defines our GLKView.

Now we have an EAGLContext in here but it can't draw directly so

we're going to create an instance of CI context.

Now the nice thing about CIContext is you can ask it to use an underline

EAGLContext that enables it to draw using Open GL ES.

So, let's create this context, lazy var context: CIContext.

And in here, we'll say return CIContext, and there's an initializer that

takes an eaglContext, and here it will say, self.eaglContext.

Don't forget to call this closure.

Okay, we have quite a few stored properties in here but

only some of these will be exposed outside of class.

We'll be assigning an EAGLContext to the cell and providing it with an image.

But the rest of it, the CIContext and the glkView,

there's no reason any other object should know about this.

So let's make these private properties, private lazy var,

and private here as well.

And if it makes more sense, and the way I normally do this is I group

my private properties in one place and public in another.

Okay, so back in the delegate method now,

we can ask the context to draw the image into the GLKView.

So I'll say context.draw(image, in: rect,

the rect provided by this delegate method, from: image.extent.

Okay, lets put this into use, navigate to the PhotoFilterController class,

photo filter controller.

And we're going to change the type on the filtered images,

the lazy property here to CIImage.

And this should reflect the changes we made earlier.

Now in self or item at index path, we're going to get an image from the array,

right over, here we're doing this already.

But remember now this is an instance of CIImage, so we need to copy this out.

And assign it to a constant.

And then for the cell draw the image into the GLKView,

it needs two things, the image and the EAGLContext.

Now we can get rid of this line of code here because we don't have

imageView anymore.

Instead, we'll say, cell.eaglContext = eaglContext, we defined that earlier.

And then cell.image = image.

Let's run this.

All right, let's go to the motion's camera.

Select the photo.

Now the first thing you should notice once you run through these this motions is that

now since we're using the GPU, this might not have any background operations or

doing any of those things.

The image processing is executed in near real time, as you can see, pretty awesome.

So this is where the GPU's good at and we didn't even have to resize that image.

Another advantage here is that we're using CIImage

instead of the other image formats we discussed.

Since CIImage is a recipe, it combines and optimizes the directions we give it,

which return results at least in much better performance.

We still have a problem as it's pretty obvious,

as you can see the images are rendered but not correctly.

They don't seem to be taking up the entire space.

Let's fix that in the next video.