Metal图像解决——直方图均衡化

作者 : 开心源码 本文共7654个字,预计阅读时间需要20分钟 发布时间: 2022-05-12 共167人阅读

前言

Metal入门教程总结

正文

核心思路

首先,我们使用直方图来表示一张图像:横坐标代表的是颜色值,纵坐标代表的是该颜色值在图像中出现次数。

如图,对于某些图像,可能出现颜色值集中分布在某个区间的情况。
直方图均衡化(Histogram Equalization) ,指的是对图像的颜色值进行重新分配,使得颜色值的分布更加均匀。

本文使用compute shader对图像的颜色值进行统计,而后计算得出映射关系,由fragment shader进行颜色映射解决。

效果展现

具体步骤

1、Metal的render管道、compute管道配置;

同前文,不再赘述,详见Metal入门教程总结。

2、CPU进行直方图均衡化解决;
  • 2.1 把UIImage转成Bytes;

  • 2.2 颜色统计;

    // CPU进行统计    Byte *color = (Byte *)spriteData;    for (int i = 0; i < width * height; ++i) {        for (int j = 0; j < LY_CHANNEL_NUM; ++j) {            uint c = color[i * 4 + j];            ++cpuColorBuffer.channel[j][c];        }    }
  • 2.3 映射关系;
    int rgb[3][LY_CHANNEL_SIZE], sum = (int)(width * height);    int val[3] = {0};    // 颜色映射    for (int i = 0; i < 3; ++i) {        for (int j = 0; j < LY_CHANNEL_SIZE; ++j) {            val[i] += cpuColorBuffer.channel[i][j];            rgb[i][j] = val[i] * 1.0 * (LY_CHANNEL_SIZE - 1) / sum;        }    }
  • 2.4 颜色值修改;
    // 值修改    for (int i = 0; i < width * height; ++i) {        for (int j = 0; j < LY_CHANNEL_NUM; ++j) {            uint c = color[i * 4 + j];            color[i * 4 + j] = rgb[j][c];        }    }

最后使用解决之后的Bytes生成新图片。

3 GPU进行直方图均衡化解决;
  • 3.1 compute shader进行颜色统计;
kernel voidgrayKernel(texture2d<float, access::read>  sourceTexture  [[textureLYKernelTextureIndexSource]], // 纹理输入,           device LYColorBuffer &out [[buffer(LYKernelBufferIndexOutput)]], // 输出的buffer           uint2                          grid         [[thread_position_in_grid]]) // 格子索引{    // 边界保护    if(grid.x < sourceTexture.get_width() && grid.y < sourceTexture.get_height())    {        float4 color  = sourceTexture.read(grid); // 初始颜色        int3 rgb = int3(color.rgb * SIZE); // 乘以SIZE,得到[0, 255]的颜色值        // 颜色统计,每个像素点计一次        atomic_fetch_add_explicit(&out.channel[0][rgb.r], 1, memory_order_relaxed);        atomic_fetch_add_explicit(&out.channel[1][rgb.g], 1, memory_order_relaxed);        atomic_fetch_add_explicit(&out.channel[2][rgb.b], 1, memory_order_relaxed);    }}

atomic_fetch_add_explicit是使用于在多线程进行数据操作,具体的函数解释见这里。

  • 3.2 映射关系解决;
    compute shader回调后,根据GPU统计的颜色分布结果,求出映射关系;
        LYLocalBuffer *buffer = (LYLocalBuffer *)strongSelf.colorBuffer.contents; // GPU统计的结果        LYLocalBuffer *convertBuffer = self.convertBuffer.contents; // 颜色转换的buffer        int sum = (int)(self.sourceTexture.width * self.sourceTexture.height); // 总的像素点        int val[3] = {0}; // 累计和        for (int i = 0; i < 3; ++i) {            for (int j = 0; j < LY_CHANNEL_SIZE; ++j) {                val[i] += buffer->channel[i][j]; // 当前[0, j]累计出现的总次数                convertBuffer->channel[i][j] = val[i] * 1.0 * (LY_CHANNEL_SIZE - 1) / sum;                                // 比照CPU和GPU解决的结果                if (buffer->channel[i][j] != strongSelf->cpuColorBuffer.channel[i][j]) {                    // 假如不相同,则把对应的结果输出                    printf("%d, %d, gpuBuffer:%u  cpuBuffer:%u \n", i, j, buffer->channel[i][j], strongSelf->cpuColorBuffer.channel[i][j]);                }            }        }        memset(buffer, 0, strongSelf.colorBuffer.length);

3.3 根据映射关系解决原图片,并渲染到屏幕上;

fragment float4samplingShader(RasterizerData input [[stage_in]], // stage_in表示这个数据来自光栅化。(光栅化是顶点解决之后的步骤,业务层无法修改)               texture2d<float> colorTexture [[ texture(LYFragmentTextureIndexSource) ]], // texture表明是纹理数据,LYFragmentTextureIndexSource是索引               device LYLocalBuffer &convertBuffer [[buffer(LYFragmentBufferIndexConvert)]]) // 转换的buffer{    constexpr sampler textureSampler (mag_filter::linear, min_filter::linear); // sampler是采样器    float4 colorSample = colorTexture.sample(textureSampler, input.textureCoordinate); // 得到纹理对应位置的颜色    int3 rgb = int3(colorSample.rgb * SIZE); // 记得先乘以SIZE    colorSample.rgb = float3(convertBuffer.channel[0][rgb.r], convertBuffer.channel[1][rgb.g], convertBuffer.channel[2][rgb.b]) / SIZE; // 返回的值也要经过归一化解决    return colorSample;}

遇到的问题

1、统计结果集中在头部

问题体现:
统计结果异常,集中在前面两个值。
如下,green通道的颜色集中在r[0]和r[1]上:

// 0~255颜色值的分布28269 4492 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

问题分析:
实际上,gpu里面存着的是0.0~1.0的值;(归一化)
统计的值一律是在前面,是由于没有乘以255!
先使用CPU实现了直方图均衡化,在实现shader的时候,参考CPU的代码实现,犯了这个错误。

2、cpu和gpu统计结果相差较多

问题体现:
如下代码,buffer是gpu统计的颜色值分布结果,cpuColorBuffer是cpu统计的颜色值分布结果。
理论上结果应该接近,但实际上printf出来的差异非常多。

        for (int i = 0; i < 3; ++i) {            for (int j = 0; j < LY_CHANNEL_SIZE; ++j) {                val[i] += buffer->channel[i][j];                convertBuffer->channel[i][j] = val[i] * 1.0 * (LY_CHANNEL_SIZE - 1) / sum;                                // 比照CPU和GPU解决的结果                if (buffer->channel[i][j] != strongSelf->cpuColorBuffer.channel[i][j]) {                    // 假如不相同,则把对应的结果输出                    printf("%d, %d, gpuBuffer:%u  cpuBuffer:%u \n", i, j, buffer->channel[i][j], strongSelf->cpuColorBuffer.channel[i][j]);                }            }        }

问题分析
通过检查代码,先判定cpu统计的结果是正常。(cpu的解决过程就是正常的for循环,不易出错)
仔细观察log的不同:
0, 1, gpuBuffer:763 cpuBuffer:762
结果很接近,但是有细微的差距。
我们知道gpu是浮点数的解决,而cpu是整数型解决,浮点数到整数中间有精度的问题。
此时再看我们的shader,我们是以half来进行计算,这样统计出来的结果会有点误差。

grayKernel(texture2d<half, access::read>  sourceTexture  [[texture(LYFragmentTextureIndexTextureSource)]],           device LYColorBuffer &out [[buffer(LYKernelBufferIndexOutput)]],           uint2                          grid         [[thread_position_in_grid]])

通过把精度从half改成float,cpu和gpu的统计差异就只有3个:

0, 248, gpuBuffer:23215  cpuBuffer:228541, 74, gpuBuffer:23201  cpuBuffer:228402, 64, gpuBuffer:23336  cpuBuffer:22975
3、gpu渲染的图片为白色

问题体现:
在gpu统计的结果与cpu接近的情况下,把映射buffer传给fragment shader,最后进行一次颜色解决。
但是结果是白色的图片,shader的代码如下:

fragment float4samplingShader(RasterizerData input [[stage_in]], // stage_in表示这个数据来自光栅化。(光栅化是顶点解决之后的步骤,业务层无法修改)               texture2d<float> colorTexture [[ texture(LYFragmentTextureIndexTextureSource) ]], // texture表明是纹理数据,LYFragmentTextureIndexTextureSource是索引               device LYLocalBuffer &localBuffer [[buffer(LYFragmentBufferIndexConvert)]]){    constexpr sampler textureSampler (mag_filter::linear,                                      min_filter::linear); // sampler是采样器        float4 colorSample = colorTexture.sample(textureSampler, input.textureCoordinate); // 得到纹理对应位置的颜色    int3 rgb = int3(colorSample.rgb);    colorSample.rgb = float3(localBuffer.channel[0][rgb.r], localBuffer.channel[1][rgb.g], localBuffer.channel[2][rgb.b]);        return colorSample;}

问题分析:
我们先把colorSample.rgb = ...的这行代码屏蔽,发现渲染结果是正常的,那么问题就出现在映射解决上面。
再通过Xcode的Capture GPU Frame工具,查看传入的映射buffer数据,也是正常的数据。
那么问题可能出现int3 rgb的初始化,或者者从映射buffer读取数据。
观察到int3 rgb = int3(colorSample.rgb),是有一个float->int的操作,联想到前面提到的归一化解决,马上明白:在这里的初始化时应该乘以SIZE。

那么问题能否就此处理?不是的。

我们在进行颜色转换的时候,float->int 需要乘以SIZE;
在获取到映射buffer里面对应颜色的值后,仍需要做一次int->float的解决,除以SIZE;
假如下:

    float4 colorSample = colorTexture.sample(textureSampler, input.textureCoordinate); // 得到纹理对应位置的颜色    int3 rgb = int3(colorSample.rgb * size);    colorSample.rgb = float3(localBuffer.channel[0][rgb.r], localBuffer.channel[1][rgb.g], localBuffer.channel[2][rgb.b]) / size;    

4、映射结果异常

问题体现:
问题如下,映射结果应该是0~255的值,但是通过Xcode看到最终的映射值远超过255,甚至接近255*2的数字。

问题分析:
下面是映射的算法

    int rgb[3][LY_CHANNEL_SIZE], sum = (int)(width * height);    int val[3] = {0};    for (int i = 0; i < 3; ++i) {        for (int j = 0; j < LY_CHANNEL_SIZE; ++j) {            val[i] += cpuColorBuffer.channel[i][j];            rgb[i][j] = val[i] * 1.0 * (LY_CHANNEL_SIZE - 1) / sum;        }    }

sum是固定值,LY_CHANNEL_SIZE是常量值256,那么映射结果超过255的起因就是val[i]的统计结果太大!
通过Xcode调试,的确如此:

那么,会是什么起因导致?

在看到结果接近255的两倍时,大概猜测可能是重复运算导致。
我们的均衡化解决是在MTKView的回调进行,如下:

- (void)drawInMTKView:(MTKView *)view {    [self customDraw];}

这里会回调屡次,从而导致屡次执行compute shader的颜色统计,这里可以引入isDrawing的临时变量处理:

- (void)drawInMTKView:(MTKView *)view {    if (!self.isDrawing) {        self.isDrawing = YES;        [self customDraw];    }}

但是,问题并没有彻底处理:初次统计正常,但是第二次解决的时候就会累积上一次的统计值。
如何对值进行清除?(这里实际上只解决一次也行,但是debug过程中需要通过Xcode的GPU Capture Frame工具进行查看,而这个工具需要屡次渲染)
我们知道MTLBuffer是cpu、gpu都可以操作的buffer,那么在cpu直接清理这个数据就可。
commandBuffer addCompletedHandler:^(){}的结束回调中,用memset(buffer, 0, strongSelf.colorBuffer.length)清除统计结果。

5、映射结果最大值为256

问题体现:
在踩过上面的各种坑之后,直方图均衡化的效果也已经展示,但是仍有一点小问题:
映射结果buffer的数字范围是0~256,而不是255。

问题分析:
根据直方图均衡化的算法,我们知道是由于像素颜色值的统计,结果略微偏大。
回顾Compute Shader的代码:

kernel voidgrayKernel(texture2d<float, access::read>  sourceTexture  [[texture(LYFragmentTextureIndexTextureSource)]],           device LYColorBuffer &out [[buffer(LYKernelBufferIndexOutput)]],           uint2                          grid         [[thread_position_in_grid]]) {    // 边界保护    if(grid.x <= sourceTexture.get_width() && grid.y <= sourceTexture.get_height())    {        float4 color  = sourceTexture.read(grid); // 初始颜色        int3 rgb = int3(color.rgb * size); //        atomic_fetch_add_explicit(&out.channel[0][rgb.r], 1, memory_order_relaxed);        atomic_fetch_add_explicit(&out.channel[1][rgb.g], 1, memory_order_relaxed);        atomic_fetch_add_explicit(&out.channel[2][rgb.b], 1, memory_order_relaxed);    }}

Metal的Compute Shader是按每组网格进行解决,那么可能会出现边界超过图像的情况,所以增加了边界保护。
但是,这里存在误判的情况:边界判断不应该是<=,而是<
由于这个起因,会导致统计的结果偏大,最终出现256的情况。

在修复完这个问题后,Demo再无其余问题,GPU的解决结果也和CPU的解决结果完全一致!

总结

本文是在前文的Metal入门教程基础上进行更复杂的尝试,过程中也遇到较多问题,最终demo也顺利完成,地址在Github。

——-2018年8月31日 周五 23:51,踩着8月的尾巴升级这一篇文章,九月是休假月。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Metal图像解决——直方图均衡化

发表回复