Socialcam video effect

1 reply [Last post]
adalekin
User offline. Last seen 8 years 42 weeks ago. Offline
Joined: 08/03/2012
Posts:

Hi everyone!

I'm trying to understand how the following video effect could be implemented with GPUImage. Here it is.

Any ideas is much apprechiated.

vipersnake
User offline. Last seen 8 years 39 weeks ago. Offline
Joined: 06/15/2012
Posts:

Off the top of my head by looking at it briefly I would recommend that you need to create 4-5 overlays of color with transparency. Black around the edges that creates the black border and white stripes/flakes that are semi transparent. Each frame should be slightly different than the previous (or more depending on how much change you want per frame). Save these as PNG so you can load them in with the standard [UIImage imageNamed:@"Overlay 1.png"].

Then you will need to load them into your fragment shader as textures and randomly choose texture2-7 for a frame that you can set as a uniform.

I am new to GPUImage framework a bit but I believe you could set up multiple GPUImagePictures to handle it (I would load the textures myself in the past but this seems so much easier)

UIImage *inputImage1 = [UIImage imageNamed:@"Overlay1.png"]; 
GPUImagePicture * sourceOverlay1 = [[GPUImagePicture alloc] initWithImage:inputImage1 smoothlyScaleOutput:NO];
 
 
[sourceOverlay1 addTarget:filter];
....
[sourceOverlay5 addTarget:filter];

Then use them in your fragment shader 1 per frame and randomly choose which one. Use them by doing a simple Merge compositing mode onto your original pixel.

vec4 t0 = texture2D(inputImageTexture, textureCoordinate);
vec4 t1 = texture2D(overlay1, overlay1TextureCoordinate);
 gl_FragColor = mix(t0, t1, t1.a);

Keep in mind that overlay will probably be a different size than your source but in this case as long as you draw your overlays with a relatively close aspect ratio a little stretching shouldn't be noticeable.

Syndicate content