Skip to content

Multiply and opacity filters within the same image #2052

Closed
@joselufo

Description

@joselufo

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @joselufo

        Issue actions

          Multiply and opacity filters within the same image · Issue #2052 · BradLarson/GPUImage