How to add effects to UIImage with MSL (Metal Shading Language).
Overview
If you wanna create image effects that are processed faster and concisely, using a shader language is one of the better ways. For example, this cover image is processed by the GPU with just a few lines of shader code. And I’ve published 2 apps(FastFilm / PXSL) using a shader. I will show you how to do it written in MSL.
Development environment
- Xcode 10.0 (Swift 4.2)
- iOS 12.0
Metal & MetalKit are available on iOS 9 and later. However, they don't work on iPhone 5 and 5C.
The shader code
This is duotone shader. There are only 4 lines in the main function. Load it into the Xcode project in metal format(*.metal).
The Swift code to use the shader code
Step 1. Setup MTLDevice & MTLCommandQueue
It enables access to the GPU and using Command buffer. Command buffer is a container for storing commands. The argument of makeFunction() is the function name of the shader program. In this case, use “duotone”.
Step 2. UIImage to MTLTexture
It generates readable / writable MTLTexture. The code from UIGraphicsBeginImageContext() to UIGraphicsEndImageContext() is probably necessary to keep the orientation of the image correctly.
Step 3. Apply duotone shader to MTLTexture
Make an encoder and set some necessary data. After committing, wait for processing to complete, you will get the result image.
Step 4. MTLTexture to UIImage
Completed Swift code
Let's Run !
ImageProcessor.Shared.Setup()
let outImage = ImageProcessor.Shared.Run(inImage)That’s all
Thank you for reading. Please try rewriting the shader program. Next time, I will write about how to create a film-style effect with MSL.
By the way, this is my first post ! So.. finally, "Hello Medium".
