|
1 | | -# GPUImage3 |
2 | | -GPUImage 3 is a BSD-licensed Swift framework for GPU-accelerated video and image processing using Metal. |
| 1 | +# GPUImage 3 # |
| 2 | + |
| 3 | +<div style="float: right"><img src="http://sunsetlakesoftware.com/sites/default/files/GPUImageLogo.png" /></div> |
| 4 | + |
| 5 | +Brad Larson |
| 6 | + |
| 7 | +http://www.sunsetlakesoftware.com |
| 8 | + |
| 9 | +[@bradlarson](http://twitter.com/bradlarson) |
| 10 | + |
| 11 | + |
| 12 | + |
| 13 | +Janie Clayton |
| 14 | + |
| 15 | +http://redqueengraphics.com |
| 16 | + |
| 17 | +[@RedQueenCoder](https://twitter.com/RedQueenCoder) |
| 18 | + |
| 19 | +## Overview ## |
| 20 | + |
| 21 | +GPUImage 3 is the third generation of the <a href="https://github.com/BradLarson/GPUImage">GPUImage framework</a>, an open source project for performing GPU-accelerated image and video processing on Mac and iOS. The original GPUImage framework was written in Objective-C and targeted Mac and iOS, the second iteration rewritten in Swift using OpenGL to target Mac, iOS, and Linux, and now this third generation is redesigned to use Metal in place of OpenGL. |
| 22 | + |
| 23 | +The objective of the framework is to make it as easy as possible to set up and perform realtime video processing or machine vision against image or video sources. [Something about Metal here] |
| 24 | + |
| 25 | +## License ## |
| 26 | + |
| 27 | +BSD-style, with the full license available with the framework in License.txt. |
| 28 | + |
| 29 | +## Technical requirements ## |
| 30 | + |
| 31 | +- Swift 4 |
| 32 | +- Xcode 9.0 on Mac or iOS |
| 33 | +- iOS: 8.0 or higher (Swift is supported on 7.0, but not Mac-style frameworks) |
| 34 | +- OSX: 10.9 or higher |
| 35 | + |
| 36 | +## General architecture ## |
| 37 | + |
| 38 | +The framework relies on the concept of a processing pipeline, where image sources are targeted at image consumers, and so on down the line until images are output to the screen, to image files, to raw data, or to recorded movies. Cameras, movies, still images, and raw data can be inputs into this pipeline. Arbitrarily complex processing operations can be built from a combination of a series of smaller operations. |
| 39 | + |
| 40 | +This is an object-oriented framework, with classes that encapsulate inputs, processing operations, and outputs. The processing operations use Metal vertex and fragment shaders to perform their image manipulations on the GPU. |
| 41 | + |
| 42 | +Examples for usage of the framework in common applications are shown below. |
| 43 | + |
| 44 | +## Using GPUImage in a Mac or iOS application ## |
| 45 | + |
| 46 | +To add the GPUImage framework to your Mac or iOS application, either drag the GPUImage.xcodeproj project into your application's project or add it via File | Add Files To... |
| 47 | + |
| 48 | +After that, go to your project's Build Phases and add GPUImage_iOS or GPUImage_macOS as a Target Dependency. Add it to the Link Binary With Libraries phase. Add a new Copy Files build phase, set its destination to Frameworks, and add the upper GPUImage.framework (for Mac) or lower GPUImage.framework (for iOS) to that. That last step will make sure the framework is deployed in your application bundle. |
| 49 | + |
| 50 | +In any of your Swift files that reference GPUImage classes, simply add |
| 51 | + |
| 52 | +```swift |
| 53 | +import GPUImage |
| 54 | +``` |
| 55 | + |
| 56 | +and you should be ready to go. |
| 57 | + |
| 58 | +Note that you may need to build your project once to parse and build the GPUImage framework in order for Xcode to stop warning you about the framework and its classes being missing. |
| 59 | + |
| 60 | +## Performing common tasks ## |
| 61 | + |
| 62 | +### Filtering live video ### |
| 63 | + |
| 64 | +To filter live video from a Mac or iOS camera, you can write code like the following: |
| 65 | + |
| 66 | +```swift |
| 67 | +do { |
| 68 | + camera = try Camera(sessionPreset:AVCaptureSessionPreset640x480) |
| 69 | + filter = SaturationAdjustment() |
| 70 | + camera --> filter --> renderView |
| 71 | + camera.startCapture() |
| 72 | +} catch { |
| 73 | + fatalError("Could not initialize rendering pipeline: \(error)") |
| 74 | +} |
| 75 | +``` |
| 76 | + |
| 77 | +where renderView is an instance of RenderView that you've placed somewhere in your view hierarchy. The above instantiates a 640x480 camera instance, creates a saturation filter, and directs camera frames to be processed through the saturation filter on their way to the screen. startCapture() initiates the camera capture process. |
| 78 | + |
| 79 | +The --> operator chains an image source to an image consumer, and many of these can be chained in the same line. |
| 80 | + |
| 81 | +### Capturing and filtering a still photo ### |
| 82 | + |
| 83 | +Functionality not completed. |
| 84 | + |
| 85 | +### Capturing an image from video ### |
| 86 | + |
| 87 | +(Not currently available on Linux.) |
| 88 | + |
| 89 | +To capture a still image from live video, you need to set a callback to be performed on the next frame of video that is processed. The easiest way to do this is to use the convenience extension to capture, encode, and save a file to disk: |
| 90 | + |
| 91 | +```swift |
| 92 | +filter.saveNextFrameToURL(url, format:.PNG) |
| 93 | +``` |
| 94 | + |
| 95 | +Under the hood, this creates a PictureOutput instance, attaches it as a target to your filter, sets the PictureOutput's encodedImageFormat to PNG files, and sets the encodedImageAvailableCallback to a closure that takes in the data for the filtered image and saves it to a URL. |
| 96 | + |
| 97 | +You can set this up manually to get the encoded image data (as NSData): |
| 98 | + |
| 99 | +```swift |
| 100 | +let pictureOutput = PictureOutput() |
| 101 | +pictureOutput.encodedImageFormat = .JPEG |
| 102 | +pictureOutput.encodedImageAvailableCallback = {imageData in |
| 103 | + // Do something with the NSData |
| 104 | +} |
| 105 | +filter --> pictureOutput |
| 106 | +``` |
| 107 | + |
| 108 | +You can also get the filtered image in a platform-native format (NSImage, UIImage) by setting the imageAvailableCallback: |
| 109 | + |
| 110 | +```swift |
| 111 | +let pictureOutput = PictureOutput() |
| 112 | +pictureOutput.encodedImageFormat = .JPEG |
| 113 | +pictureOutput.imageAvailableCallback = {image in |
| 114 | + // Do something with the image |
| 115 | +} |
| 116 | +filter --> pictureOutput |
| 117 | +``` |
| 118 | + |
| 119 | +### Processing a still image ### |
| 120 | + |
| 121 | +(Not currently available on Linux.) |
| 122 | + |
| 123 | +There are a few different ways to approach filtering an image. The easiest are the convenience extensions to UIImage or NSImage that let you filter that image and return a UIImage or NSImage: |
| 124 | + |
| 125 | +```swift |
| 126 | +let testImage = UIImage(named:"WID-small.jpg")! |
| 127 | +let toonFilter = SmoothToonFilter() |
| 128 | +let filteredImage = testImage.filterWithOperation(toonFilter) |
| 129 | +``` |
| 130 | + |
| 131 | +for a more complex pipeline: |
| 132 | + |
| 133 | +```swift |
| 134 | +let testImage = UIImage(named:"WID-small.jpg")! |
| 135 | +let toonFilter = SmoothToonFilter() |
| 136 | +let luminanceFilter = Luminance() |
| 137 | +let filteredImage = testImage.filterWithPipeline{input, output in |
| 138 | + input --> toonFilter --> luminanceFilter --> output |
| 139 | +} |
| 140 | +``` |
| 141 | + |
| 142 | +One caution: if you want to display an image to the screen or repeatedly filter an image, don't use these methods. Going to and from Core Graphics adds a lot of overhead. Instead, I recommend manually setting up a pipeline and directing it to a RenderView for display in order to keep everything on the GPU. |
| 143 | + |
| 144 | +Both of these convenience methods wrap several operations. To feed a picture into a filter pipeline, you instantiate a PictureInput. To capture a picture from the pipeline, you use a PictureOutput. To manually set up processing of an image, you can use something like the following: |
| 145 | + |
| 146 | +```swift |
| 147 | +let toonFilter = SmoothToonFilter() |
| 148 | +let testImage = UIImage(named:"WID-small.jpg")! |
| 149 | +let pictureInput = PictureInput(image:testImage) |
| 150 | +let pictureOutput = PictureOutput() |
| 151 | +pictureOutput.imageAvailableCallback = {image in |
| 152 | + // Do something with image |
| 153 | +} |
| 154 | +pictureInput --> toonFilter --> pictureOutput |
| 155 | +pictureInput.processImage(synchronously:true) |
| 156 | +``` |
| 157 | + |
| 158 | +In the above, the imageAvailableCallback will be triggered right at the processImage() line. If you want the image processing to be done asynchronously, leave out the synchronously argument in the above. |
| 159 | + |
| 160 | +### Filtering and re-encoding a movie ### |
| 161 | + |
| 162 | +To filter an existing movie file, you can write code like the following: |
| 163 | + |
| 164 | +```swift |
| 165 | + |
| 166 | +do { |
| 167 | + let bundleURL = Bundle.main.resourceURL! |
| 168 | + let movieURL = URL(string:"sample_iPod.m4v", relativeTo:bundleURL)! |
| 169 | + movie = try MovieInput(url:movieURL, playAtActualSpeed:true) |
| 170 | + filter = SaturationAdjustment() |
| 171 | + movie --> filter --> renderView |
| 172 | + movie.start() |
| 173 | +} catch { |
| 174 | + fatalError("Could not initialize rendering pipeline: \(error)") |
| 175 | +} |
| 176 | +``` |
| 177 | + |
| 178 | +where renderView is an instance of RenderView that you've placed somewhere in your view hierarchy. The above loads a movie named "sample_iPod.m4v" from the application's bundle, creates a saturation filter, and directs movie frames to be processed through the saturation filter on their way to the screen. start() initiates the movie playback. |
| 179 | + |
| 180 | +### Writing a custom image processing operation ### |
| 181 | + |
| 182 | +The framework uses a series of protocols to define types that can output images to be processed, take in an image for processing, or do both. These are the ImageSource, ImageConsumer, and ImageProcessingOperation protocols, respectively. Any type can comply to these, but typically classes are used. |
| 183 | + |
| 184 | +Many common filters and other image processing operations can be described as subclasses of the BasicOperation class. BasicOperation provides much of the internal code required for taking in an image frame from one or more inputs, rendering a rectangular image (quad) from those inputs using a specified shader program, and providing that image to all of its targets. Variants on BasicOperation, such as TextureSamplingOperation or TwoStageOperation, provide additional information to the shader program that may be needed for certain kinds of operations. |
| 185 | + |
| 186 | +To build a simple, one-input filter, you may not even need to create a subclass of your own. All you need to do is supply a fragment shader and the number of inputs needed when instantiating a BasicOperation: |
| 187 | + |
| 188 | +```swift |
| 189 | +let myFilter = BasicOperation(fragmentShaderFile:MyFilterFragmentShaderURL, numberOfInputs:1) |
| 190 | +``` |
| 191 | + |
| 192 | +A shader program is composed of matched vertex and fragment shaders that are compiled and linked together into one program. By default, the framework uses a series of stock vertex shaders based on the number of input images feeding into an operation. Usually, all you'll need to do is provide the custom fragment shader that is used to perform your filtering or other processing. |
| 193 | + |
| 194 | +Fragment shaders used by GPUImage look something like this: |
| 195 | + |
| 196 | +[TODO: Rework for Metal operations] |
| 197 | + |
| 198 | +### Grouping operations ### |
| 199 | + |
| 200 | +If you wish to group a series of operations into a single unit to pass around, you can create a new instance of OperationGroup. OperationGroup provides a configureGroup property that takes a closure which specifies how the group should be configured: |
| 201 | + |
| 202 | +```swift |
| 203 | +let boxBlur = BoxBlur() |
| 204 | +let contrast = ContrastAdjustment() |
| 205 | + |
| 206 | +let myGroup = OperationGroup() |
| 207 | + |
| 208 | +myGroup.configureGroup{input, output in |
| 209 | + input --> self.boxBlur --> self.contrast --> output |
| 210 | +} |
| 211 | +``` |
| 212 | + |
| 213 | +Frames coming in to the OperationGroup are represented by the input in the above closure, and frames going out of the entire group by the output. After setup, myGroup in the above will appear like any other operation, even though it is composed of multiple sub-operations. This group can then be passed or worked with like a single operation. |
| 214 | + |
| 215 | +### Interacting with Metal ### |
| 216 | + |
| 217 | +[TODO: Rework for Metal] |
| 218 | + |
| 219 | +## Common types ## |
| 220 | + |
| 221 | +The framework uses several platform-independent types to represent common values. Generally, floating-point inputs are taken in as Floats. Sizes are specified using Size types (constructed by initializing with width and height). Colors are handled via the Color type, where you provide the normalized-to-1.0 color values for red, green, blue, and optionally alpha components. |
| 222 | + |
| 223 | +Positions can be provided in 2-D and 3-D coordinates. If a Position is created by only specifying X and Y values, it will be handled as a 2-D point. If an optional Z coordinate is also provided, it will be dealt with as a 3-D point. |
| 224 | + |
| 225 | +Matrices come in Matrix3x3 and Matrix4x4 varieties. These matrices can be build using a row-major array of Floats, or can be initialized from CATransform3D or CGAffineTransform structs. |
| 226 | + |
| 227 | +## Built-in operations ## |
| 228 | + |
| 229 | +[TODO: Fill in with operations as they are added] |
0 commit comments