iOS — Transparent Video with CoreImage

Quentin Fasquel
4 min readOct 29, 2017

In a recent project, collaborating with french studio Merci-Michel, I have been facing a small challenge: simulating y-axis rotation of a 3D-object, without using a 3D model, only using an image sequence or a video. In the end it doesn’t matter what we chose to use; I am here today to introduce you to an easy way to render video with an alpha channel just using CoreImage (and AVFoundation, of course).

1 — First, we need a video

Since common video formats, or at least the ones AVPlayer can decode, don’t carry an alpha channel, we need a way to have that alpha information in a regular video. There are two ways to do so, the very well-known “green screen” or a less common one that doesn’t have restrictions on the color palet, which looks like the following image.

xSince it is almost Halloween our video is a cute Play-doh Bat! (provided by this awesome website : La Galerie des Espèces)

Softwares like Autodesk 3ds Max or Adobe After Effects export videos that contain an alpha channel. Without much knowledge it was pretty easy using Adobe Premiere, to create this type of video.

2 — Let’s play that video

Unless you are really unfamiliar with AVFoundation, you can skip this part.

In the view controller of our new “Single View” iOS project (in Swift!), we add a little bit of code to play our video.

--

--