How to generate an histogram using iOS GPUImage?

Question

Working on https://github.com/luisespinoza/LEColorPicker project, I am trying to generate an histogram UIImage from an arbitrary input UIImage using the project GPUImage (https:

Answer 1

You can look at the FilterShowcase example to see how this is supposed to work in practice.

The GPUImageHistogramFilter takes in an image and outputs a 256x3 image that encodes the histogram (it's 3 pixels tall because a 1 pixel height isn't allowed in framebuffer construction). The R, G, and B values are stored in their respective color channels within a central 1-pixel-tall stripe at the center of that image.

To visualize this, you'll need to use a GPUImageHistogramGenerator, and feed the GPUImageHistogramFilter's output into that. The GPUImageHistogramGenerator creates a visual representation of the histogram input as an image. You do need to use -forceProcessingAtSize: to set the size for the GPUImageHistogramGenerator's output image, because it doesn't have a set size by default.

One other caution is that you'll need to have a dummy filter of some kind between your input image and the GPUImageHistogramFilter. GPUImageHistogramFilter currently relies on glReadPixels() and that only works for rendered content, not directly uploaded images or video frames.

The code used in the FilterShowcase for this is as follows:

        filter = [[GPUImageHistogramFilter alloc] initWithHistogramType:kGPUImageHistogramRGB];

        GPUImageGammaFilter *gammaFilter = [[GPUImageGammaFilter alloc] init];
        [videoCamera addTarget:gammaFilter];
        [gammaFilter addTarget:filter];

        GPUImageHistogramGenerator *histogramGraph = [[GPUImageHistogramGenerator alloc] init];

        [histogramGraph forceProcessingAtSize:CGSizeMake(256.0, 330.0)];
        [filter addTarget:histogramGraph];

        GPUImageAlphaBlendFilter *blendFilter = [[GPUImageAlphaBlendFilter alloc] init];
        blendFilter.mix = 0.75;            
        [blendFilter forceProcessingAtSize:CGSizeMake(256.0, 330.0)];

        [videoCamera addTarget:blendFilter];
        [histogramGraph addTarget:blendFilter];

        [blendFilter addTarget:filterView];

This overlays the generated histogram visualization on top of the incoming camera video.