如何用OpenGLES或Core Graphics在UIView实时绘制vImage计算的RGB直方图？

嘿，我来帮你搞定这个实时直方图绘制的问题！刚好Core Graphics和OpenGLES这俩框架我都熟，给你分两种方案拆解，保证能轻松达到30fps以上的实时要求～

如果你的场景对帧率要求是30fps左右，Core Graphics完全够用，而且代码量少、易维护。核心思路是用CADisplayLink同步屏幕刷新，在每帧里快速绘制归一化后的直方图数据。

关键步骤： #

1. 自定义UIView子类
   先建一个HistogramView继承自UIView，专门处理直方图绘制。我们要保存三个通道的直方图数据，还要用CADisplayLink触发每帧重绘（它会和屏幕刷新率同步，避免掉帧）。

2. 数据归一化预处理
   拿到vImage输出的256个bin数据后，得先把数值归一化到View的高度范围内——不然bin值太大的话，柱子会画出View外面。做法是：

   • 先找出三个通道里的最大bin值（用max()遍历数组，或者用vImage的加速函数更快）
   • 每个bin值除以最大值，再乘以View的高度，得到该bin对应的绘制高度

3. 高效绘制逻辑
   在draw(_:)里，直接用CGContext绘制每个通道的柱状条。这里要注意减少上下文状态切换（比如不要频繁切换颜色），尽量复用资源。

代码示例（Swift）： #

import UIKit

class HistogramView: UIView {
    // 存储三个通道的直方图数据
    var redBins: [UInt] = Array(repeating: 0, count: 256)
    var greenBins: [UInt] = Array(repeating: 0, count: 256)
    var blueBins: [UInt] = Array(repeating: 0, count: 256)
    
    private let displayLink: CADisplayLink
    private var maxBinValue: UInt = 1 // 避免除以0
    
    override init(frame: CGRect) {
        displayLink = CADisplayLink(target: self, selector: #selector(updateDisplay))
        displayLink.add(to: .main, forMode: .common)
        super.init(frame: frame)
        backgroundColor = .black
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // 更新直方图数据（外部调用，比如从vImage拿到数据后）
    func updateHistogram(red: [UInt], green: [UInt], blue: [UInt]) {
        redBins = red
        greenBins = green
        blueBins = blue
        // 计算最大bin值，用于归一化
        maxBinValue = max(red.max() ?? 1, green.max() ?? 1, blue.max() ?? 1)
    }
    
    @objc private func updateDisplay() {
        setNeedsDisplay()
    }
    
    override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext() else { return }
        let binWidth = rect.width / 256.0
        let height = rect.height
        
        // 绘制红色通道（底部）
        context.setFillColor(UIColor.red.cgColor)
        for i in 0..<256 {
            let binHeight = CGFloat(redBins[i]) / CGFloat(maxBinValue) * height
            let x = CGFloat(i) * binWidth
            let rect = CGRect(x: x, y: height - binHeight, width: binWidth - 0.5, height: binHeight)
            context.fill(rect)
        }
        
        // 绘制绿色通道（中间叠加，降低透明度）
        context.setFillColor(UIColor.green.withAlphaComponent(0.5).cgColor)
        for i in 0..<256 {
            let binHeight = CGFloat(greenBins[i]) / CGFloat(maxBinValue) * height
            let x = CGFloat(i) * binWidth
            let rect = CGRect(x: x, y: height - binHeight, width: binWidth - 0.5, height: binHeight)
            context.fill(rect)
        }
        
        // 绘制蓝色通道（顶部叠加，降低透明度）
        context.setFillColor(UIColor.blue.withAlphaComponent(0.5).cgColor)
        for i in 0..<256 {
            let binHeight = CGFloat(blueBins[i]) / CGFloat(maxBinValue) * height
            let x = CGFloat(i) * binWidth
            let rect = CGRect(x: x, y: height - binHeight, width: binWidth - 0.5, height: binHeight)
            context.fill(rect)
        }
    }
}

优化Tips： #

• 把binWidth、height这些固定值提前计算，不要在循环里重复计算
• 如果256个bin太密，可以合并成64个（每4个bin合并一次），减少绘制次数
• 避免在draw(_:)里创建UIColor、CGRect这些对象，尽量提前缓存

如果需要更高的帧率（比如60fps）或者更复杂的视觉效果（比如渐变、动画），OpenGLES的硬件加速是更好的选择。核心思路是把直方图数据传给GPU，用着色器批量绘制柱状条。

关键步骤： #

1. 用GLKView简化OpenGLES初始化
   GLKView已经封装了EAGLContext、帧缓冲区等底层细节，比自定义CAEAGLLayer省事多了。我们建一个GLHistogramView继承自GLKView。

2. 编写着色器程序

   • 顶点着色器：负责把每个bin的位置转换到GPU的裁剪空间
   • 片段着色器：负责设置每个通道的颜色

3. 传递直方图数据到GPU
   把归一化后的直方图数据作为uniform数组传给着色器，GPU会自动帮我们批量绘制所有柱状条。

代码示例（Swift）： #

import GLKit

class GLHistogramView: GLKView {
    private var program: GLuint = 0
    private var positionAttribute: GLint = 0
    private var colorUniform: GLint = 0
    private var heightUniform: GLint = 0
    
    // 归一化后的直方图数据（0~1）
    var redHeights: [Float] = Array(repeating: 0, count: 256)
    var greenHeights: [Float] = Array(repeating: 0, count: 256)
    var blueHeights: [Float] = Array(repeating: 0, count: 256)
    
    private let displayLink: CADisplayLink
    
    override init(frame: CGRect) {
        context = EAGLContext(api: .openGLES2)!
        displayLink = CADisplayLink(target: self, selector: #selector(renderFrame))
        displayLink.add(to: .main, forMode: .common)
        super.init(frame: frame)
        setupShaderProgram()
        setupVertexData()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // 更新直方图数据（外部调用）
    func updateHistogram(red: [UInt], green: [UInt], blue: [UInt]) {
        let maxVal = Float(max(red.max() ?? 1, green.max() ?? 1, blue.max() ?? 1))
        redHeights = red.map { Float($0)/maxVal }
        greenHeights = green.map { Float($0)/maxVal }
        blueHeights = blue.map { Float($0)/maxVal }
    }
    
    @objc private func renderFrame() {
        display()
    }
    
    private func setupShaderProgram() {
        // 顶点着色器源码
        let vertexShaderSource = """
        attribute vec2 position;
        uniform float height;
        void main() {
            gl_Position = vec4(position.x, position.y * height, 0.0, 1.0);
            gl_PointSize = 2.0;
        }
        """
        
        // 片段着色器源码
        let fragmentShaderSource = """
        uniform vec4 color;
        void main() {
            gl_FragColor = color;
        }
        """
        
        // 编译链接着色器程序
        program = createShaderProgram(vertexSource: vertexShaderSource, fragmentSource: fragmentShaderSource)
        glUseProgram(program)
        
        // 获取属性和uniform的位置
        positionAttribute = glGetAttribLocation(program, "position")
        colorUniform = glGetUniformLocation(program, "color")
        heightUniform = glGetUniformLocation(program, "height")
    }
    
    private func setupVertexData() {
        // 每个bin对应四个顶点（矩形），x范围从-1到1
        var vertices: [Float] = []
        for i in 0..<256 {
            let xLeft = -1.0 + Float(i)*2.0/256.0
            let xRight = -1.0 + Float(i+1)*2.0/256.0
            vertices.append(xLeft)
            vertices.append(0.0)
            vertices.append(xRight)
            vertices.append(0.0)
            vertices.append(xRight)
            vertices.append(1.0)
            vertices.append(xLeft)
            vertices.append(1.0)
        }
        
        // 创建VBO存储顶点数据
        var vbo: GLuint = 0
        glGenBuffers(1, &vbo)
        glBindBuffer(GLenum(GL_ARRAY_BUFFER), vbo)
        glBufferData(GLenum(GL_ARRAY_BUFFER), vertices.count*MemoryLayout<Float>.size, vertices, GLenum(GL_STATIC_DRAW))
        
        // 启用顶点属性
        glEnableVertexAttribArray(GLuint(positionAttribute))
        glVertexAttribPointer(GLuint(positionAttribute), 2, GLenum(GL_FLOAT), GLboolean(GL_FALSE), 0, nil)
    }
    
    override func draw(_ rect: CGRect) {
        glClearColor(0.0, 0.0, 0.0, 1.0)
        glClear(GLbitfield(GL_COLOR_BUFFER_BIT))
        
        // 绘制红色通道
        glUniform4f(colorUniform, 1.0, 0.0, 0.0, 1.0)
        for i in 0..<256 {
            glUniform1f(heightUniform, redHeights[i])
            glDrawArrays(GLenum(GL_TRIANGLE_FAN), i*4, 4)
        }
        
        // 绘制绿色通道（半透明）
        glUniform4f(colorUniform, 0.0, 1.0, 0.0, 0.5)
        for i in 0..<256 {
            glUniform1f(heightUniform, greenHeights[i])
            glDrawArrays(GLenum(GL_TRIANGLE_FAN), i*4, 4)
        }
        
        // 绘制蓝色通道（半透明）
        glUniform4f(colorUniform, 0.0, 0.0, 1.0, 0.5)
        for i in 0..<256 {
            glUniform1f(heightUniform, blueHeights[i])
            glDrawArrays(GLenum(GL_TRIANGLE_FAN), i*4, 4)
        }
    }
    
    // 辅助函数：编译链接着色器程序
    private func createShaderProgram(vertexSource: String, fragmentSource: String) -> GLuint {
        let program = glCreateProgram()
        
        // 编译顶点着色器
        let vertexShader = compileShader(source: vertexSource, type: GLenum(GL_VERTEX_SHADER))
        glAttachShader(program, vertexShader)
        
        // 编译片段着色器
        let fragmentShader = compileShader(source: fragmentSource, type: GLenum(GL_FRAGMENT_SHADER))
        glAttachShader(program, fragmentShader)
        
        glLinkProgram(program)
        
        // 检查链接状态
        var linkStatus: GLint = 0
        glGetProgramiv(program, GLenum(GL_LINK_STATUS), &linkStatus)
        if linkStatus == GL_FALSE {
            var logLength: GLint = 0
            glGetProgramiv(program, GLenum(GL_INFO_LOG_LENGTH), &logLength)
            if logLength > 0 {
                let log = UnsafeMutablePointer<CChar>.allocate(capacity: Int(logLength))
                glGetProgramInfoLog(program, logLength, nil, log)
                print("Shader link error: \(String(cString: log))")
                log.deallocate()
            }
            glDeleteProgram(program)
            return 0
        }
        
        return program
    }
    
    private func compileShader(source: String, type: GLenum) -> GLuint {
        let shader = glCreateShader(type)
        let cString = source.cString(using: .utf8)!
        glShaderSource(shader, 1, &cString, nil)
        glCompileShader(shader)
        
        // 检查编译状态
        var compileStatus: GLint = 0
        glGetShaderiv(shader, GLenum(GL_COMPILE_STATUS), &compileStatus)
        if compileStatus == GL_FALSE {
            var logLength: GLint = 0
            glGetShaderiv(shader, GLenum(GL_INFO_LOG_LENGTH), &logLength)
            if logLength > 0 {
                let log = UnsafeMutablePointer<CChar>.allocate(capacity: Int(logLength))
                glGetShaderInfoLog(shader, logLength, nil, log)
                print("Shader compile error: \(String(cString: log))")
                log.deallocate()
            }
            glDeleteShader(shader)
            return 0
        }
        
        return shader
    }
}

优化Tips： #

• 把顶点数据存在VBO里，避免每次绘制都重新传递数据
• 可以把三个通道的高度数据合并成一个纹理，用纹理采样代替uniform数组，效率更高
• 尽量减少绘制调用次数（比如把三个通道的绘制合并成一次，用顶点颜色区分）

• 如果只是需要30fps的实时绘制，Core Graphics方案足够，代码简单易维护
• 如果需要60fps或者更复杂的视觉效果，OpenGLES方案是最优解，硬件加速能扛住更高的负载

另外要注意：更新直方图数据时，尽量在后台线程完成vImage的计算，然后回到主线程更新View的数据，避免阻塞主线程影响帧率。

内容的提问来源于stack exchange，提问作者Deepak Sharma