I'm a big fan of Apple's Core Image technology: my Nodality application is based entirely around Core Image filters. However, for new users, the code for adding a simple filter to an image is a little oblique and the implementation is very "stringly" typed.

 This post looks at an alternative, GPUImage from Brad Larson. GPUImage is a framework containing a rich set of image filters, many of which aren't in Core Image. It has a far simpler and more strongly typed API and, in some cases, is faster than Core Image.

 To kick off, let's look at the code required to apply a Gaussian blue to an image (inputImage) using Core Filter:
        let inputImage = UIImage()
        let ciContext = CIContext(options: nil)
        
        let blurFilter = CIFilter(name: "CIGaussianBlur")
        blurFilter.setValue(CIImage(image: inputImage), forKey: "inputImage")
        blurFilter.setValue(10, forKey: "inputRadius")
        
        let outputImageData = blurFilter.valueForKey("outputImage") as CIImage!
        let outputImageRef: CGImage = ciContext.createCGImage(outputImageData, fromRect: outputImageData.extent())

        let outputImage = UIImage(CGImage: outputImageRef)!

 ...not only do we need to explicitly define the context, both the filter name and parameter are strings and we need a few steps to convert the filter's output into a UIImage. 

Here's the same functionality using GPUImage:
        let inputImage = UIImage()
        
        let blurFilter = GPUImageGaussianBlurFilter()
        blurFilter.blurRadiusInPixels = 10
        
        let outputImage = blurFilter.imageByFilteringImage(inputImage)

 Here, both the filter and its blur radius parameter are properly typed and the filter returns a UIImage instance.

 On the flip-side, there is some setting up to do. Once you've got a local copy of GPUImage, drag the framework project into your application's project. Then under the application target's build phases, add a target dependency, a reference to GPUImage.framework under link binaries and a copy files stage.

 Your build phases screen should look like this:

Then, by simply importing GPUImage, you're ready to roll.

 To show off some of the funkier filters contained in GPUImage, I've created a little demonstration app, GPUImageDemo.

 The app demonstrates Polar Pixellate, Polka Dot, Sketch, Threshold Sketch, Toon, Smooth Toon, Emboss, Sphere Refraction and Glass Sphere - none of which are available in Core Image. 

 The filtering work is all done in my GPUImageDelegate class where a switch statement declares a GPUImageOutput variable (the class that includes the imageByFiltering() method) and sets it to the appropriate concrete class depending on the user interface.

 For example, if the picker is set the threshold sketch, the following case statement is executed:
       case ImageFilter.ThresholdSketch:

            gpuImageFilter =  GPUImageThresholdSketchFilter()
            
            if let gpuImageFilter = gpuImageFilter as? GPUImageThresholdSketchFilter
            {
                if values.count > 1
                {
                    gpuImageFilter.edgeStrength = values[0]
                    gpuImageFilter.threshold = values[1]
                }
            }

 If you build this project, you may encounter a build error on the documentation target. I've simply deleted this target on affected machines.

 GPUImage is fast enough to filter video. I've taken my recent two million particles experiment and added a post processing step that consists of a cartoon filter and an emboss filter. These are packaged together in a GPUImageFilterGroup:
        let toonFilter = GPUImageSmoothToonFilter()
        let embossFilter = GPUImageEmbossFilter()

        let filterGroup = GPUImageFilterGroup()
        toonFilter.threshold = 1
        embossFilter.intensity = 2
        filterGroup.addFilter(toonFilter)
        filterGroup.addFilter(embossFilter)
        
        toonFilter.addTarget(embossFilter)
        
        filterGroup.initialFilters = [ toonFilter ]

        filterGroup.terminalFilter = embossFilter

 Since GPUImageFilterGroup extends GPUImageFilterOutput, I can take the output from the  Metal texture, create a UIImage instance of it and pass it to the composite filter:
        self.imageView.image = self.filterGroup.imageByFilteringImage(UIImage(CGImage: imageRef)!)

 On my iPad Air 2, the final result of 2,000,000 particles with a two filter post process on a 1,024 x 1,024 image still runs at around 20 frames per second. Here's a real time screen capture:

The source code for my GPUImageDemo is available at my GitHub repository here and GPUImage lives here.
Posted by
Labels: CIImageFilter GPUImage image editing swift
4

View comments

  1. their is errors when i tried to run the application
    how can i solve it i use xcode 7.2

    ReplyDelete

  2. I'm using an old version of GPUImage. I'll try to find time to update it.

    ReplyDelete

  3. Same problem. We would all be thankful if you could update it. Thanks.

    ReplyDelete

  4. Just updated that project - runs fine now under Xcode 7.2. Cheers!

    ReplyDelete

It's been a fairly busy few months at my "proper" job, so my recreational Houdini tinkering has taken a bit of a back seat. However, when I saw my Swarm Chemistry hero, Hiroki Sayama tweeting a link to How a life-like system emerges from a simple particle motion law, I thought I'd dust off Houdini to see if I could implement this model in VEX.

The paper discusses a simple particle system, named Primordial Particle Systems (PPS), that leads to life-like structures through morphogenesis. Each particle in the system is defined by its position and heading and, with each step in the simulation, alters its heading based on the PPS rule and moves forward at a defined speed. The heading is updated based on the number of neighbors to the particle's left and right.
5

This blog post discusses a technique for rendering SideFX Houdini FLIP fluids as sparse fields of wormlike particles (hence my slightly over-the-top Sparse Vermiform moniker) with their color based on the fluid system's gas pressure field.

The project begins with an oblate spheroid that is converted to a FLIP Fluid using the FLIP Fluid from Object shelf tool. The fluid object sits within a box that's converted to a static body with its volume inverted to act as a container.
3

This post continues from my recent blog entry, Particle Advection by Reaction Diffusion in SideFX Houdini. In this project, I've done away with the VEX in the DOP network, and replaced it with a VDB Analysis node to create a vector field that represents the gradient in the reaction diffusion volume. This allows me to use a POP Advect by Volumes node in the DOP network rather than hand coding by own force wrangle.

After watching this excellent tutorial that discusses advecting particles by magnetic fields to create an animation of the sun, I was inspired to use the same technique to advect particles by fields that are a function of reaction diffusion systems. 

The source for my reaction diffusion vector field is a geometry node.
1

I played with animating mitosis in Houdini last year (see Simulating Mitosis in Houdini), but the math wasn't quite right, so I thought I'd revisit my VEX to see if it could be improved. After some tinkering, the video above shows my latest (hopefully improved) results.
4

This post describes a simple way to create a system comprising of a regularly surfaced fluid and a faux grain system. The video above contains three clips using the same basic technique: creating a single point source for the FLIP SOP initial data but using groups to render some as a fluid and some as individual tiny spheres - the grains. 

The first clip shows a granular sphere dropping into a fluid tank.
1

Fibonacci spheres are created from a point set that follows a spiral path to form a sphere (you can see an example, with code at OpenProcessing).

This video contains five clips using SideFX Houdini's Grain Solver with an attached POP Wrangle that uses VEX to generate custom forces. Here's a quick rundown of the VEX I used for each clip (please forgive the use of a variable named oomph).

Clip One "Twin Peaks"

Here, I compare each grain's current angle to the scene's origin to the current time.

The Rayleigh-Taylor instability is the instability between two fluids of different densities. It can appear as "fingers" of a denser liquid dropping into a less dense liquid or as a mushroom cloud in an explosion.

The phenomenon "comes for free" in SideFX Houdini FLIP Fluids.
1

Following on from my recent blog post, Mixing Fluids in Houdini, I wanted to simulate a toroidal eddy effect where the incoming drip takes the form of a torus and the fluid flows around the circumference of its minor radius. 

My first thought was to use a POP Axis Force, but that rotates particles around the circumference of the major radius. So, I took another approach: create lots of curves placed around a circle and use those as the geometry source for a POP Curve Force.
About Me
About Me
Labels
Labels
Blog Archive
Blog Archive
Loading