Show Menu

Looking to hire an app developer?

Submit your 30 day Job Listing for FREE

GPUIImage Logo

I’m going to show you how you can create effects like; dents, pinching, twisting, squashing, etc. on a UIImage using OpenGL ES as seen in the iPhone Application: PhotoTwist.

The words here are the written words of Brad Larsen. The post was only created by Mark Petherbridge. The most performant way of doing this kind of image processing would be to use OpenGL ES 2.0 shaders. Once again, if I might point you to my GPUImage framework, it can do many of the distortion operations you describe. For those that are missing, you can write your own fragment shaders.


This answer was originally taken from StackOverflow.

The effects I have in there are a convex bulge distortion (using a GPUImageBulgeDistortionFilter):

iOS GPUImage Convex buldge effect

A concave distortion (using an inverted scale parameter to the previous filter):

iOS GPUImage bulge effect

A swirl distortion (using the GPUImageSwirlFilter):

iOS GPUImage Swirl effect

And finally, a pinch distortion (using the GPUImagePinchDistortionFilter):

iOS GPUImage Pinch effect

If you look at the shaders used for each of the filters, you’ll find that the math is very similar between them. You should be able to tweak that to produce your own custom effects from this same base.

It’s fairly easy to apply these filters to UIImages. If you have just one filter you’d like to use, you can do something like the following:

UIImage *inputImage = [UIImage imageNamed:@"test.jpg"];
GPUImageBulgeDistortionFilter *stillImageFilter = [[GPUImageBulgeDistortionFilter alloc] init];
UIImage *quickFilteredImage = [stillImageFilter imageByFilteringImage:inputImage];

This will create a UIImage from disk, use OpenGL ES to filter it, and return a filtered UIImage for you to work with. You can use a GPUImagePicture and a custom filter pipeline if you’d like to perform more advanced chained effects, or you can use a different input source for filtering live camera video or movies.

[socialRansom file=””]

The source code for this project is available at the above link under a BSD license, so you can dig into it to see how to transfer data to and from OpenGL ES and how to perform these kinds of filters.

having issues?

We have a Questions and Answer section where you can ask your iOS Development questions to thousands of iOS Developers.

Ask Question

FREE Download!

Get your FREE Swift 2 Cheat Sheet and quick reference guide PDF download when you sign up to SwiftMonthly

Sharing is caring

If you enjoyed this tutorial, please help us and others by sharing using one of the social media buttons below.

iOS-Blog Admin Team

Written by:

We're here to help.