GPUImage: How to determine an average color within the hexagon?

Question

I’m doing video processing with GPUImage2. When the app starts, I create a hexagonal grid and add it to my cameraView. The grid is fullscreen and consists of about 100 of hexagons. In general, what I’m trying to achieve is

For each frame I want to find an average color (in RGB or even better HSV) within each cell of the grid. When the color is determined, I want to draw something in the center of each hexagon depending on its average color.

I have an array with hexagons, each of them knows its vertexes’ coordinates and center. I also have an array with UIBezierPaths which contains bounds of these hexagons (just in case).

So my code looks like this

class ViewController: UIViewController {
    var hexagons = [HKHexagon]()
    var hexagonsBounds = [UIBezierPath]()
    let averageColorExtractor = AverageColorExtractor()

  override func viewDidLoad() {
        super.viewDidLoad()
        do {
            camera = try Camera(sessionPreset:AVCaptureSessionPreset1920x1080)
            camera.delegate = self
            cameraView.orientation = .landscapeLeft
            camera --> cameraView

            camera.startCapture()
            drawGrid()
        } catch {
            fatalError("Could not initialize rendering pipeline: \(error)")
        }
  }
}

extension ViewController: CameraDelegate {
    func didCaptureBuffer(_ sampleBuffer: CMSampleBuffer) {
        for hexagon in hexagons {

        }
    }
}

I guess didCaptureBuffer() should be the place to apply averageColorExtractor to each hexagon but don’t have an idea what to do next..

I am new to iOS development and it’s the first time I use GPUImage2… Please, guide me in the right direction.

score 0 · Answer 1 · edited May 23 '17 at 12:19

Not coding for your platform at all but GPU architecture allows to do it like this:

pass the image as texture
render the center points only as points
in fragment shader compute the avg color of hex around actual position This is the hardest and most performance demanding part. If you compute just inscribed circle it is easy but for hexagon you need to compute which texel is inside and which not. For axis aligned hexagons you can divide hex into regions (2x rectangle, 4x triangle) for rotated hexes you need add transformation matrix.
compute/render output inside the center point.

I do not know what your framework can do for you from this. If you rendered stuff is bigger then just the center point then you need either use another pass in your render or use bigger primitive then points in #2 but that means you will compute the avg color for each rendered pixel which can slow things down a lot.

Take a look at GLSL shader that uses this technique (for entirely different task but the technique is the same):

How to implement 2D raycasting light effect in GLSL

If this is not adaptable to your platform then ignore this answer ...

GPUImage: How to determine an average color within the hexagon?

1 Answers1