Description
We would like to do a filter similar to what Photoshop does when you do multiply on two layers and play with opacity on the top layer (see GIF 1)
The idea would be to have two images (I1 & I2), the image on top (I2) should have "multiply" effect (GPUImageMultiplyBlendFilter), since our top image (I2) will be black & white, that would mean making all white pixels transparent, and black opaques, same way as Photoshop does when you play with it (see attached image1). Once we applied multiply effect over the image on top (I2), we would like to apply then opacity (GPUImageOpacityFilter) to the same image (I2) and be able to play with the values. (again, reproduce GIF 1 on our app using your library).
The bottom image (I1) won't be affected by any effect, we will only blend it when we've decided the amount of opacity we want on the top image (I2).
Example with photoshop:
https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/72106/792868/el2bWkOhSVwU1JW/GIF-1-photoshop-multiply-screen.gif
Example with the application:
https://dl.dropboxusercontent.com/u/7628679/GIF-2-MyMoments-Multiply-Opacity.gif
We've been trying it already, but for some reason the resulting effect it's not exactly what we expected, so maybe I guess we're doing something wrong with the target orders, or something like that. The current result we're having, works when opacity value is 1.0, but doesn't works properly when it's lower than 1.0 since the bottom image becomes like burn (brightness) while it should just be the same, and the top image (I2) less visible. See GIF 2 for reference.
GPUImagePicture *gpuImagePicture;
GPUImageView *gpuImageView;
GPUImageMultiplyBlendFilter multiplyBlendFilter = [[GPUImageMultiplyBlendFilter alloc] init];
[multiplyBlendFilter addTarget:gpuImageView];
GPUImageOpacityFilter opacityFilter = [[GPUImageOpacityFilter alloc] init];
[opacityFilter setOpacity:0.0];
CGSize size = image.size;
GPUImagePicture pictureOverlay = [[GPUImagePicture alloc] initWithImage:[MYMAbstractFilterDefinition overlayImageForType:self.type size:size]];
[pictureOverlay addTarget:opacityFilter];
[opacityFilter addTarget:multiplyBlendFilter];
[gpuImagePicture addTarget:multiplyBlendFilter];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[pictureOverlay processImage];
[gpuImagePicture processImage];
});
and when we change the value of the opacity we do this:
_opacityFilter.opacity = value;
[self.gpuImagePicture processImage];
[_pictureOverlay processImage];
Could you please help us find out how to properly achieve this effect?
Activity