iOS 利用 Metal 实现 LUT 滤镜
源码地址：MetalCode
之前探究过 iOS 上通过 CoreImage、OpenGLES 等技术实现 LUT 滤镜的对比 -- iOS 针对 LUT 滤镜的实现对比，但是其实在图形处理这块，Apple 更推崇自家公司的 Metal，这是一个和 OpenGLES 类似的面向底层的图形编程接口，最早在 2014 年的 WWDC 的时候发布，可用于从 CPU 发送指令到 GPU 驱动 GPU 进行大量并行矩阵运算。
Metal 提供以下特性：
- 低开销接口。Metal 被设计用于消灭像状态检查一类的隐性性能瓶颈，你可以控制 GPU 的异步行为，以实现用于并行创建和提交命令缓冲区的高效多线程操作
- 内存和资源管理。Metal 框架提供了表示 GPU 内存分配的缓冲区和纹理对象，纹理对象具有确切的像素格式，能被用于纹理图像或附件
- 集成对图形和计算操作的支持。Metal 对图形操作和计算操作使用了相同的数据结构和资源（如 buffer、texture、command queue），Metal 的着色器语言同时支持图形函数和计算函数，Metal 框架支持在运行时接口（CPU）、图形着色器和计算方法间共享资源
- 预编译着色器。Metal 的着色器函数能与代码一同在编译器编译，并在运行时加载，这样的流程能提供更方便的着色器调试功能。
Metal 的对象关系如图所示
image
其中连接 CPU 和 GPU 的就是命令队列 Command Queue，其上装载多个命令缓冲 Command Buffer，Command Buffer 里能承载 Metal 定义的多种图形、计算命令编码器，在编码器中就是开发者创建的实际的命令和资源，它们最终被传送到 GPU 中进行计算和渲染。
接下来就用 Metal 实现一个图片 LUT 滤镜。
1. 初始化
Metal 初始化工作主要将一些初始化开销大、能够复用的对象进行预先生成和持有.
首先初始化 GPU 接口，可以理解为持有 GPU，在 Metal 中它被定义为 MTLDevice 类型的对象
self.mtlDevice = MTLCreateSystemDefaultDevice(); // 获取 GPU 接口
其次初始化一个 MTKView，它相当于画布，用于 GPU 渲染内容到屏幕上
[self.view addSubview:self.mtlView];
[self.mtlView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.equalTo(self.view);
make.width.height.equalTo(self.view);
}];
Metal 的渲染流程与 OpenGLES 很类似，大致如下图所示
因此同样的，需要传入顶点数据、顶点着色器和片段着色器
顶点数据定义如下，每一行的前四个分量为顶点坐标，后两个分量为纹理坐标（归一化）。
static const float vertexArrayData[] = {
-1.0, -1.0, 0.0, 1.0, 0, 1,
-1.0, 1.0, 0.0, 1.0, 0, 0,
1.0, -1.0, 0.0, 1.0, 1, 1,
-1.0, 1.0, 0.0, 1.0, 0, 0,
1.0, 1.0, 0.0, 1.0, 1, 0,
1.0, -1.0, 0.0, 1.0, 1, 1
};
然后加载到顶点 buffer 中
self.vertexBuffer = [self.mtlDevice newBufferWithBytes:vertexArrayData length:sizeof(vertexArrayData) options:0]; // 利用数组初始化一个顶点缓存，MTLResourceStorageModeShared 资源存储在CPU和GPU都可访问的系统存储器中
Metal 搜索顶点着色器和片段着色器的范围是以 Bundle 为维度的，在一个 Bundle 内放进任意名称的 Metal 文件，其中的着色器函数都可以被 Metal 搜索并加载到内存中。
id<MTLLibrary> library = [self.mtlDevice newDefaultLibraryWithBundle:[NSBundle bundleWithPath:[[NSBundle mainBundle] pathForResource:@"XXXXXX" ofType:@"bundle"]] error:nil];
id<MTLFunction> vertextFunc = [library newFunctionWithName:@"vertex_func"];
id<MTLFunction> fragFunc = [library newFunctionWithName:@"fragment_func"]; //从 bundle 中获取顶点着色器和片段着色器
接下来要将着色器函数装配到渲染管线上，需要用到 MTLRenderPipelineDescriptor 对象
MTLRenderPipelineDescriptor *pipelineDescriptor = [MTLRenderPipelineDescriptor new];
pipelineDescriptor.vertexFunction = vertextFunc;
pipelineDescriptor.fragmentFunction = fragFunc;
pipelineDescriptor.colorAttachments[0].pixelFormat = MTLPixelFormatBGRA8Unorm; //此设置配置像素格式，以便通过渲染管线的所有内容都符合相同的颜色分量顺序（在本例中为Blue(蓝色)，Green(绿色)，Red(红色)，Alpha(阿尔法)）以及尺寸（在这种情况下，8-bit(8位)颜色值变为 从0到255）
self.pipelineState = [self.mtlDevice newRenderPipelineStateWithDescriptor:pipelineDescriptor error:nil]; // 初始化一个渲染管线状态描述位，相当于 CPU 和 GPU 之间建立的管道
最后是初始化渲染队列，以及创建纹理缓存
self.commandQueue = [self.mtlDevice newCommandQueue]; // 获取一个渲染队列，其中装载需要渲染的指令 MTLCommandBuffer
CVMetalTextureCacheCreate(NULL, NULL, self.mtlDevice, NULL, &_textureCache); // 创建纹理缓存
2. 图片纹理加载
Metal 为加载图片纹理提供了便捷类 MTKTextureLoader，能够根据多种参数生成 MTLTexture 纹理对象，但是实际使用中发现了两个问题：
- 问题1：BGRA 问题
Metal 的渲染视图 MTKView 默认支持的 pixelFormat 是 MTLPixelFormatBGRA8Unorm，而说明文档上说 MTKView 还支持以下格式
The color pixel format for the current drawable's texture.
The pixel format for a MetalKit view must be MTLPixelFormatBGRA8Unorm, MTLPixelFormatBGRA8Unorm_sRGB, MTLPixelFormatRGBA16Float, MTLPixelFormatBGRA10_XR, or MTLPixelFormatBGRA10_XR_sRGB.
但是我尝试设置为其他值时都发生了 crash，所以整个渲染流程、命令编码过程中都需要设置 pixelFormat 为 BGRA 格式，这样遇到的问题就是针对一些内部像素排列顺序是 RGBA 格式的图片，生成的纹理和最终渲染出来的图片会发蓝，为了确保传入的图片都是 BGRA 格式的图片，我预先将传入的图片按 BGRA 渲染到 CGContext 上，再提取出 UIImage 对象传入
- (unsigned char *)bitmapFromImage:(UIImage *)targetImage
{
CGImageRef imageRef = targetImage.CGImage;
NSUInteger iWidth = CGImageGetWidth(imageRef);
NSUInteger iHeight = CGImageGetHeight(imageRef);
NSUInteger iBytesPerPixel = 4;
NSUInteger iBytesPerRow = iBytesPerPixel * iWidth;
NSUInteger iBitsPerComponent = 8;
unsigned char *imageBytes = malloc(iWidth * iHeight * iBytesPerPixel);
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(imageBytes,
iWidth,
iHeight,
iBitsPerComponent,
iBytesPerRow,
colorspace,
kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedFirst); // 转 BGRA 格式
CGRect rect = CGRectMake(0, 0, iWidth, iHeight);
CGContextDrawImage(context, rect, imageRef);
CGColorSpaceRelease(colorspace);
CGContextRelease(context);
return imageBytes;
}
- (NSData *)imageDataFromBitmap:(unsigned char *)imageBytes imageSize:(CGSize)imageSize
{
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(imageBytes,
imageSize.width,
imageSize.height,
8,
imageSize.width * 4,
colorSpace,
kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedFirst);
CGImageRef imageRef = CGBitmapContextCreateImage(context);
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
UIImage *result = [UIImage imageWithCGImage:imageRef];
NSData *imageData = UIImagePNGRepresentation(result);
CGImageRelease(imageRef);
return imageData;
}
- 问题2：sRGB 问题
这个问题的表现现象是最终渲染出来的图片偏暗，即使是原图也会偏暗，StackOverflow 上有很多对这个 strange color 问题的回答，均提到将 MTKTextureLoader 的 MTKTextureLoaderOptionSRGB 选项设置为 NO，它默认为 YES。
我的理解是，sRGB 实际上是一种对颜色的编码，其效果是增加暗色域的编码精度，降低亮色域的编码精度。那么针对 sRGB 编码的图片就需要进行一次 gamma 校正，以确保进行诸如 LUT 对照计算时能够严格按照线性 RGB 计算。但是实际上我传入的图片都是以 RGB 格式排列，因此不需要进行 gamma 校正，如果不设置关闭 sRGB 的校正，就会对线性 RGB 格式的数据进行校正，导致最终图片偏暗。这个问题在我做 CoreImage 的滤镜调研时也出现过，下面是效果图
- 最终代码
生成 LUT 纹理代码
unsigned char *imageBytes = [self bitmapFromImage:lutImage];
NSData *imageData = [self imageDataFromBitmap:imageBytes imageSize:CGSizeMake(CGImageGetWidth(lutImage.CGImage), CGImageGetHeight(lutImage.CGImage))];
free(imageBytes);
self.lutTexture = [loader newTextureWithData:imageData options:@{MTKTextureLoaderOptionSRGB:@(NO)} error:&err]; // 生成 LUT 滤镜纹理
生成原图纹理代码
unsigned char *imageBytes = [self bitmapFromImage:image];
NSData *imageData = [self imageDataFromBitmap:imageBytes imageSize:CGSizeMake(CGImageGetWidth(image.CGImage), CGImageGetHeight(image.CGImage))];
free(imageBytes);
MTKTextureLoader *loader = [[MTKTextureLoader alloc] initWithDevice:self.mtlDevice];
NSError* err;
self.originalTexture = [loader newTextureWithData:imageData options:@{MTKTextureLoaderOptionSRGB:@(NO)} error:&err];
3. 着色器代码
Metal 着色器代码与 OpenGLES 的着色器类似，因为它们的原理都是一样的
#include <metal_stdlib>
using namespace metal;
struct Vertex {
packed_float4 position;
packed_float2 texCoords;
};
struct ColoredVertex
{
float4 position [[position]];
float2 texCoords;
};
vertex ColoredVertex vertex_func(constant Vertex *vertices [[buffer(0)]], uint vid [[vertex_id]]) {
Vertex inVertex = vertices[vid];
ColoredVertex outVertex;
outVertex.position = inVertex.position;
outVertex.texCoords = inVertex.texCoords;
return outVertex;
}
fragment half4 fragment_func(ColoredVertex vert [[stage_in]], texture2d<half> originalTexture [[texture(0)]], texture2d<half> lutTexture [[texture(1)]]) {
// stage_in 修饰光栅化顶点
float width = originalTexture.get_width();
float height = originalTexture.get_height();
uint2 gridPos = uint2(vert.texCoords.x * width ,vert.texCoords.y * height);
half4 color = originalTexture.read(gridPos);
float blueColor = color.b * 63.0;
int2 quad1;
quad1.y = floor(floor(blueColor) / 8.0);
quad1.x = floor(blueColor) - (quad1.y * 8.0);
int2 quad2;
quad2.y = floor(ceil(blueColor) / 8.0);
quad2.x = ceil(blueColor) - (quad2.y * 8.0);
half2 texPos1;
texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * color.r);
texPos1.y = (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * color.g);
half2 texPos2;
texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * color.r);
texPos2.y = (quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * color.g);
half4 newColor1 = lutTexture.read(uint2(texPos1.x * 512,texPos1.y * 512));
half4 newColor2 = lutTexture.read(uint2(texPos2.x * 512,texPos2.y * 512));
half4 newColor = mix(newColor1, newColor2, half(fract(blueColor)));
half4 finalColor = mix(color, half4(newColor.rgb, 1.0), half(1.0));
half4 realColor = half4(finalColor);
return realColor;
}
此处不再赘述。
4. 渲染到屏幕
渲染过程首先要获取到下一个内容区缓存，即“画布”
id<CAMetalDrawable> drawable = [(CAMetalLayer*)[self.mtlView layer] nextDrawable]; // 获取下一个可用的内容区缓存，用于绘制内容
if (!drawable) {
return;
}
然后生成 MTLRenderPassDescriptor，相当于对此次渲染流程的描述符
MTLRenderPassDescriptor *renderPassDescriptor = [self.mtlView currentRenderPassDescriptor]; // 获取当前的渲染描述符
if (!renderPassDescriptor) {
return;
}
renderPassDescriptor.colorAttachments[0].clearColor = MTLClearColorMake(0.5, 0.5, 0.5, 1.0); // 设置颜色附件的清除颜色
renderPassDescriptor.colorAttachments[0].loadAction = MTLLoadActionClear; // 用于避免渲染新的帧时附带上旧的内容
接下来从命令队列中取出一个可用的命令 buffer，装载进去一个命令编码器，命令编码器里包含着色器所需的顶点、纹理等
id<MTLCommandBuffer> commandBuffer = [self.commandQueue commandBuffer]; // 获取一个可用的命令 buffer
id<MTLRenderCommandEncoder> commandEncoder = [commandBuffer renderCommandEncoderWithDescriptor:renderPassDescriptor]; // 通过渲染描述符构建 encoder
[commandEncoder setCullMode:MTLCullModeBack]; // 设置剔除背面
[commandEncoder setFrontFacingWinding:MTLWindingClockwise]; // 设定按顺时针顺序绘制顶点的图元是朝前的
[commandEncoder setViewport:(MTLViewport){0.0, 0.0, self.mtlView.drawableSize.width, self.mtlView.drawableSize.height, -1.0, 1.0 }]; // 设置可视区域
[commandEncoder setRenderPipelineState:self.pipelineState];// 设置渲染管线状态位
[commandEncoder setVertexBuffer:self.vertexBuffer offset:0 atIndex:0]; // 设置顶点buffer
[commandEncoder setFragmentTexture:self.originalTexture atIndex:0]; // 设置纹理 0，即原图
[commandEncoder setFragmentTexture:self.lutTexture atIndex:1]; // 设置纹理 1，即 LUT 图
[commandEncoder drawPrimitives:MTLPrimitiveTypeTriangle vertexStart:0 vertexCount:6]; // 绘制三角形图元
最终提交到队列中
[commandEncoder endEncoding];
[commandBuffer presentDrawable:drawable];
[commandBuffer commit];
仍然选取如下原图做测试
选择如下 LUT 图
lookup.png
最终滤镜效果
