1.Metal简介
Metal是苹果为了减少对OpenGLES的依赖所封装的框架，在iOS系统中，Metal可以发挥GPU的最大性能。在做音视频编码和解码时，由于需要进行大量高并发的运算，在苹果中，运用到了硬件加速器，也就是GPU芯片，因为GPU上有大量的计算单元，可以做到真正的高并发运算。
在Metal框架中，也为我们提供了可以自定义编程的入口，可以对一些机器学习进行并发处理，像一些AI处理等。也就是说，我们可以通过Metal Shading Language去驱动GPU做一些高效的运算。
提醒：Metal必须是在真机上运行的（A7处理器，iPhone 6以上的设备）。
在早前，苹果的核心动画是依赖OpenGL ES来封装的，直至2018之后，苹果才将核心动画迁移到了Metal。
2.MetalKit
在学习OpenGL ES时，苹果给我们提供了GLKit库，使我们可以更加高效快捷使用OpenGL ES来解决某一些问题，同样，Metal的学习成本也是很高的，所以苹果也提供了MetalKit，帮助我们更好地学习Metal。
在使用GLKit时，苹果提供了GLKView来帮助我们解决一些很小的问题，同样，在MetalKit中，苹果也提供了MTKView。与GLKitView一样，MTKView内部也有一个定时器，在屏幕更新的时候进行重绘，当然，里面有一个属性可以进行暂停的。
- 苹果建议一：
Apple建议：Separate Your Rendering Loop （分开你的渲染循环）。
苹果建议我们对Metal的处理有一个专门的工具类：在我们开发Metal时，将渲染循环分为自己创建的类，使用时更加我们进行管理，比如对Metal进行初始化以及实现MTKView的代理方法。 - 苹果建议二：
Apple建议：Respond to View Events ,响应视图的事件，也就是实现size的修改以及的视图的绘制的代理方法。
每当窗口大小变化或者重新布局(设备方向更改)时,视图就会调用此方法
-(void)mtkView:(nonnull MTKView *)view drawableSizeWillChange:(CGSize)size;视图可以根据视图属性上设置View.preferredFramesPerSecond帧速率(指定时间来调用drawInMTKView方法),当视图渲染时调用此方法
-(void)drawInMTKView:(nonnull MTKView *)view;
- 苹果建议三：
Apple建议：Metal Command Objects
Metal会创建Command Objects,也就是说，苹果会创建很多这样的命令对象，比如MTLDevice(GPU)，MTLCommandQueue等。
Metal 命令对象之间的关系
Metal 命令对象之间的关系.png
- 命令缓存区(command buffer) 是从命令队列(command queue) 创建的
- 命令编码器(command encoders) 将命令编码到命令缓存区中
- 提交命令缓存区并将其发送到GPU
- GPU执行命令并将结果呈现为可绘制
3.使用Metal渲染三角形
因为苹果建议，对Metal的处理可以创建一个类来进行管理，所以我们可以创建一个工具类(Render.h,Render.m)来对Metal进行管理，然后创建一个Metal文件(Shader.metal)来编写顶点函数以及着色函数，最后还需要创建一个h文件(RenderType.h)来建立metal文件和工具类之间的联系。
RenderType.h：
// 缓存区索引值 共享与 shader 和 C 代码 为了确保Metal Shader缓存区索引能够匹配 Metal API Buffer 设置的集合调用
typedef enum CCVertexInputIndex
{
//顶点
CCVertexInputIndexVertices = 0,
//视图大小
CCVertexInputIndexViewportSize = 1,
} CCVertexInputIndex;
//结构体: 顶点/颜色值
typedef struct
{
// 像素空间的位置
// 像素中心点(100,100)
vector_float4 position;
// RGBA颜色
vector_float4 color;
} CCVertex;
Render.h：
//导入MetalKit工具包
@import MetalKit;
//这是一个独立于平台的渲染类
//MTKViewDelegate协议:允许对象呈现在视图中并响应调整大小事件
@interface Render : NSObject
//初始化一个MTKView
- (nonnull instancetype)initWithMetalKitView:(nonnull MTKView *)mtkView;
Render.m：
@import MetalKit;
#import "Render.h"
//头 在C代码之间共享，这里执行Metal API命令，和.metal文件，这些文件使用这些类型作为着色器的输入。
#import "RenderType.h"
//执行渲染的类
@implementation Render
{
//我们用来渲染的设备(又名GPU)
id _device;
// 我们的渲染管道有顶点着色器和片元着色器 它们存储在.metal shader 文件中
id _pipelineState;
//命令队列,从命令缓存区获取
id _commandQueue;
//当前视图大小,这样我们才可以在渲染通道使用这个视图
vector_uint2 _viewportSize;
}
初始化MTKView
- (nonnull instancetype)initWithMetalKitView:(nonnull MTKView *)mtkView
{
self = [super init];
if(self)
{
NSError *error = NULL;
//1.获取GPU 设备
_device = mtkView.device;
//2.在项目中加载所有的(.metal)着色器文件
// 从bundle中获取.metal文件
id defaultLibrary = [_device newDefaultLibrary];
//从库中加载顶点函数
id vertexFunction = [defaultLibrary newFunctionWithName:@"vertexShader"];
//从库中加载片元函数
id fragmentFunction = [defaultLibrary newFunctionWithName:@"fragmentShader"];
//3.配置用于创建管道状态的管道
MTLRenderPipelineDescriptor *pipelineStateDescriptor = [[MTLRenderPipelineDescriptor alloc] init];
//管道名称
pipelineStateDescriptor.label = @"Simple Pipeline";
//可编程函数,用于处理渲染过程中的各个顶点
pipelineStateDescriptor.vertexFunction = vertexFunction;
//可编程函数,用于处理渲染过程中各个片段/片元
pipelineStateDescriptor.fragmentFunction = fragmentFunction;
//一组存储颜色数据的组件
pipelineStateDescriptor.colorAttachments[0].pixelFormat = mtkView.colorPixelFormat;
//4.同步创建并返回渲染管线状态对象
_pipelineState = [_device newRenderPipelineStateWithDescriptor:pipelineStateDescriptor error:&error];
//判断是否返回了管线状态对象
if (!_pipelineState)
{
//如果我们没有正确设置管道描述符，则管道状态创建可能失败
NSLog(@"Failed to created pipeline state, error %@", error);
return nil;
}
//5.创建命令队列
_commandQueue = [_device newCommandQueue];
}
return self;
}
每当视图改变方向或调整大小时调用
- (void)mtkView:(nonnull MTKView *)view drawableSizeWillChange:(CGSize)size
{
// 保存可绘制的大小，因为当我们绘制时，我们将把这些值传递给顶点着色器
_viewportSize.x = size.width;
_viewportSize.y = size.height;
}
每当视图需要渲染帧时调用
- (void)drawInMTKView:(nonnull MTKView *)view
{
//1. 顶点数据/颜色数据
static const CCVertex triangleVertices[] =
{
//顶点, RGBA 颜色值
{ { 0.5, -0.25, 0.0, 1.0 }, { 1, 0, 0, 1 } },
{ { -0.5, -0.25, 0.0, 1.0 }, { 0, 1, 0, 1 } },
{ { -0.0f, 0.25, 0.0, 1.0 }, { 0, 0, 1, 1 } },
};
//2.为当前渲染的每个渲染传递创建一个新的命令缓冲区
id commandBuffer = [_commandQueue commandBuffer];
//指定缓存区名称
commandBuffer.label = @"MyCommand";
//3.
// MTLRenderPassDescriptor:一组渲染目标，用作渲染通道生成的像素的输出目标。
MTLRenderPassDescriptor *renderPassDescriptor = view.currentRenderPassDescriptor;
//判断渲染目标是否为空
if(renderPassDescriptor != nil)
{
//4.创建渲染命令编码器,这样我们才可以渲染到something
id renderEncoder =[commandBuffer renderCommandEncoderWithDescriptor:renderPassDescriptor];
//渲染器名称
renderEncoder.label = @"MyRenderEncoder";
//5.设置我们绘制的可绘制区域
/*
typedef struct {
double originX, originY, width, height, znear, zfar;
} MTLViewport;
*/
//视口指定Metal渲染内容的drawable区域。 视口是具有x和y偏移，宽度和高度以及近和远平面的3D区域
//为管道分配自定义视口需要通过调用setViewport：方法将MTLViewport结构编码为渲染命令编码器。 如果未指定视口，Metal会设置一个默认视口，其大小与用于创建渲染命令编码器的drawable相同。
MTLViewport viewPort = {
0.0,0.0,_viewportSize.x,_viewportSize.y,-1.0,1.0
};
[renderEncoder setViewport:viewPort];
//[renderEncoder setViewport:(MTLViewport){0.0, 0.0, _viewportSize.x, _viewportSize.y, -1.0, 1.0 }];
//6.设置当前渲染管道状态对象
[renderEncoder setRenderPipelineState:_pipelineState];
//7.从应用程序OC 代码 中发送数据给Metal 顶点着色器 函数
//顶点数据+颜色数据
// 1) 指向要传递给着色器的内存的指针
// 2) 我们想要传递的数据的内存大小
// 3)一个整数索引，它对应于我们的“vertexShader”函数中的缓冲区属性限定符的索引。
[renderEncoder setVertexBytes:triangleVertices
length:sizeof(triangleVertices)
atIndex:CCVertexInputIndexVertices];
//viewPortSize 数据
//1) 发送到顶点着色函数中,视图大小
//2) 视图大小内存空间大小
//3) 对应的索引
[renderEncoder setVertexBytes:&_viewportSize
length:sizeof(_viewportSize)
atIndex:CCVertexInputIndexViewportSize];
//8.画出三角形的3个顶点
// @method drawPrimitives:vertexStart:vertexCount:
//@brief 在不使用索引列表的情况下,绘制图元
//@param 绘制图形组装的基元类型
//@param 从哪个位置数据开始绘制,一般为0
//@param 每个图元的顶点个数,绘制的图型顶点数量
/*
MTLPrimitiveTypePoint = 0, 点
MTLPrimitiveTypeLine = 1, 线段
MTLPrimitiveTypeLineStrip = 2, 线环
MTLPrimitiveTypeTriangle = 3, 三角形
MTLPrimitiveTypeTriangleStrip = 4, 三角型扇
*/
[renderEncoder drawPrimitives:MTLPrimitiveTypeTriangle
vertexStart:0
vertexCount:3];
//9.表示已该编码器生成的命令都已完成,并且从NTLCommandBuffer中分离
[renderEncoder endEncoding];
//10.一旦框架缓冲区完成，使用当前可绘制的进度表
[commandBuffer presentDrawable:view.currentDrawable];
}
//11.最后,在这里完成渲染并将命令缓冲区推送到GPU
[commandBuffer commit];
}
@end
Shader.metal：
#include
//使用命名空间 Metal
using namespace metal;
// 导入Metal shader 代码和执行Metal API命令的C代码之间共享的头
#import "RenderType.h"
// 顶点着色器输出和片段着色器输入
//结构体
typedef struct
{
//处理空间的顶点信息
float4 clipSpacePosition [[position]];
//颜色
float4 color;
} RasterizerData;
//顶点着色函数
vertex RasterizerData
vertexShader(uint vertexID [[vertex_id]],
constant CCVertex *vertices [[buffer(CCVertexInputIndexVertices)]],
constant vector_uint2 *viewportSizePointer [[buffer(CCVertexInputIndexViewportSize)]])
{
/*
处理顶点数据:
1) 执行坐标系转换,将生成的顶点剪辑空间写入到返回值中.
2) 将顶点颜色值传递给返回值
*/
//定义out
RasterizerData out;
// //初始化输出剪辑空间位置
// out.clipSpacePosition = vector_float4(0.0, 0.0, 0.0, 1.0);
//
// // 索引到我们的数组位置以获得当前顶点
// // 我们的位置是在像素维度中指定的.
// float2 pixelSpacePosition = vertices[vertexID].position.xy;
//
// //将vierportSizePointer 从verctor_uint2 转换为vector_float2 类型
// vector_float2 viewportSize = vector_float2(*viewportSizePointer);
//
// //每个顶点着色器的输出位置在剪辑空间中(也称为归一化设备坐标空间,NDC),剪辑空间中的(-1,-1)表示视口的左下角,而(1,1)表示视口的右上角.
// //计算和写入 XY值到我们的剪辑空间的位置.为了从像素空间中的位置转换到剪辑空间的位置,我们将像素坐标除以视口的大小的一半.
// out.clipSpacePosition.xy = pixelSpacePosition / (viewportSize / 2.0);
out.clipSpacePosition = vertices[vertexID].position;
//把我们输入的颜色直接赋值给输出颜色. 这个值将于构成三角形的顶点的其他颜色值插值,从而为我们片段着色器中的每个片段生成颜色值.
out.color = vertices[vertexID].color;
//完成! 将结构体传递到管道中下一个阶段:
return out;
}
当顶点函数执行3次,三角形的每个顶点执行一次后,则执行管道中的下一个阶段.图元装配以及栅格化(光栅化),然后就会来到片元函数。
// 片元函数
//[[stage_in]],片元着色函数使用的单个片元输入数据是由顶点着色函数输出.然后经过光栅化生成的.单个片元输入函数数据可以使用"[[stage_in]]"属性修饰符.
//一个顶点着色函数可以读取单个顶点的输入数据,这些输入数据存储于参数传递的缓存中,使用顶点和实例ID在这些缓存中寻址.读取到单个顶点的数据.另外,单个顶点输入数据也可以通过使用"[[stage_in]]"属性修饰符的产生传递给顶点着色函数.
//被stage_in 修饰的结构体的成员不能是如下这些.Packed vectors 紧密填充类型向量,matrices 矩阵,structs 结构体,references or pointers to type 某类型的引用或指针. arrays,vectors,matrices 标量,向量,矩阵数组.
fragment float4 fragmentShader(RasterizerData in [[stage_in]])
{
//返回输入的片元颜色
return in.color;
}
然后我们在ViewDidLoad中调用即可
_mview = [[MTKView alloc] initWithFrame:self.view.frame];
_mview.device = MTLCreateSystemDefaultDevice();
[self.view addSubview:_mview];
if(!_mview.device)
{
NSLog(@"Metal is not supported on this device");
return;
}
_renderer = [[Render alloc] initWithMetalKitView:_mview];
if(!_renderer)
{
NSLog(@"Renderer failed initialization");
return;
}
// Initialize our renderer with the view size
[_renderer mtkView:_mview drawableSizeWillChange:_mview.drawableSize];
_mview.delegate = _renderer;
效果
因为我们在三角形的3个顶点设置了3个颜色，所以metal在进行渲染的时候回形成这种融合的效果。
效果.jpeg