Metal入门案例详解

案例一：随机改变背景色

案例一效果图

需要使用的框架：MetalKit
其中的MTKViewDelegate 协议中有2个方法.

 - (void)mtkView:(nonnull MTKView *)view drawableSizeWillChange:(CGSize)size;

每当窗口大小变化或者重新布局(设备方向更改)时,视图就会调用此方法.
视图可以根据视图属性上设置View.preferredFramesPerSecond帧速率(指定时间来调用drawInMTKView方法),

- (void)drawInMTKView:(nonnull MTKView *)view;

每当视图需要渲染时调用

苹果建议开发者：分开你的渲染循环
在我们开发Metal 程序时,将渲染循环分为自己创建的类,是非常有用的一种方式,使用单独的类,我们可以更好管理初始化Metal,以及Metal视图委托。
所以这里我们创建一个类，用来管理渲染循环。

第一步：创建管理渲染循环的类

首先，创建一个iOS工程，创建一个类，用来管理渲染循环。

@import MetalKit;
@interface CCRenderer : NSObject<MTKViewDelegate>

-(id)initWithMetalKitView:(MTKView *)mtkView;

在创建类里导入MetalKt，遵从<MTKViewDelegate>协议。传入一个MTKView对象进行初始化。

    id<MTLDevice> _device;
    id<MTLCommandQueue> _commandQueue;
  typedef struct {
      float red, green, blue, alpha;
  } Color;

在.m文件中定义两个全局变量及创建颜色通道结构体

//初始化
- (id)initWithMetalKitView:(MTKView *)mtkView
{
    self = [super init];
    if(self)
    {
        _device = mtkView.device;
        _commandQueue = [_device newCommandQueue];
    }
    return self;
}

device是所有应用程序需要与GPU交互的第一个对象。
MTLCommandQueue，使用MTLCommandQueue 去创建对象,并且加入MTLCommandBuffer 对象中。确保它们能够按照正确顺序发送到GPU。对于每一帧，一个新的MTLCommandBuffer对象创建并且填满了由GPU执行的命令。

- (void)drawInMTKView:(nonnull MTKView *)view{}

在每次渲染调用的代理方法中添加以下的渲染命令。

主要步骤分为：

设置清屏颜色
为每个渲染传递创建一个新的命令缓冲区到当前绘制
从视图绘制中,获得渲染描述符
判断渲染描述符是否创建成功,成功则进行以下渲染操作，失败则直接执行第9步
通过渲染描述符renderPassDescriptor创建MTLRenderCommandEncoder对象
如果需要的话，使用MTLRenderCommandEncoder来绘制对象，这个案例我们不需要其他渲染，所以直接执行下一步
结束MTLRenderCommandEncoder 工作
添加一个最后的命令present用以显示可绘制的屏幕
完成渲染并将命令缓冲区提交给GPU

整体代码块

//每当视图需要渲染时调用
- (void)drawInMTKView:(nonnull MTKView *)view
{
    //1. 获取随机的颜色值
    Color color = [self doRandomColor];
    //2. 设置view的clearColor
    view.clearColor = MTLClearColorMake(color.red, color.green, color.blue, color.alpha);
    
    //3. 使用MTLCommandQueue 创建对象并且加入到MTCommandBuffer对象中去.
    //为当前渲染的每个渲染传递创建一个新的命令缓冲区
    id<MTLCommandBuffer> commandBuffer = [_commandQueue commandBuffer];
    commandBuffer.label = @"MyCommand";
    
    //4.从视图绘制中,获得渲染描述符
    MTLRenderPassDescriptor *renderPassDescriptor = view.currentRenderPassDescriptor;
    
    //5.判断renderPassDescriptor 渲染描述符是否创建成功,否则则跳过任何渲染.
    if(renderPassDescriptor != nil)
    {
        //6.通过渲染描述符renderPassDescriptor创建MTLRenderCommandEncoder 对象
        id<MTLRenderCommandEncoder> renderEncoder = [commandBuffer renderCommandEncoderWithDescriptor:renderPassDescriptor];
        renderEncoder.label = @"MyRenderEncoder";
        
        //7.我们可以使用MTLRenderCommandEncoder 来绘制对象,但是这个demo我们仅仅创建编码器就可以了,我们并没有让Metal去执行我们绘制的东西,这个时候表示我们的任务已经完成.
        //即可结束MTLRenderCommandEncoder 工作
        [renderEncoder endEncoding];
        
        /*
         当编码器结束之后,命令缓存区就会接受到2个命令.
         1) present
         2) commit
         因为GPU是不会直接绘制到屏幕上,因此你不给出去指令.是不会有任何内容渲染到屏幕上.  
        */
        //8.添加一个最后的命令来显示清除的可绘制的屏幕
        [commandBuffer presentDrawable:view.currentDrawable];
    }
    
    //9.在这里完成渲染并将命令缓冲区提交给GPU
    [commandBuffer commit];
}

Metal命令对象间的关系图

Metal命令对象之间的关系

命令缓存区(command buffer) 是从命令队列(command queue) 创建的
命令编码器(command encoders) 将命令编码到命令缓存区中
提交命令缓存区并将其发送到GPU
GPU执⾏行行命令并将结果呈现为可绘制.

- (void)mtkView:(MTKView *)view drawableSizeWillChange:(CGSize)size
{  
}

由于本案例未更改视口大小和无需转化归一化坐标，该代理方法里无需任何操作。

第二部： ViewController中加载MTKView，并将渲染事务代理给渲染循环类处理

先在ViewController中导入@import MetalKit;和#import "CCRenderer.h"。
在viewDidLoad方法中写入一下代码

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //1. 获取_view，由于直接设置self.view，需要到main.storyboard中根控制器中加view继承于MTKView
    _view = (MTKView *)self.view;
    
    //2.为_view 设置MTLDevice，一个MTLDevice 对象就代表这着一个GPU,通常我们可以调用方法MTLCreateSystemDefaultDevice()来获取代表默认的GPU单个对象.
    _view.device = MTLCreateSystemDefaultDevice();
    
    //3.判断是否设置成功
    if (!_view.device) {
        NSLog(@"Metal is not supported on this device");
        return;
    }
    
    //4. 创建自定义的渲染循环类
    //分开你的渲染循环:
    //在我们开发Metal 程序时,将渲染循环分为自己创建的类,是非常有用的一种方式,使用单独的类,我们可以更好管理初始化Metal,以及Metal视图委托.
    _render =[[CCRenderer alloc] initWithMetalKitView:_view];
    
    //5.判断_render 是否创建成功
    if (!_render) {
        NSLog(@"Renderer failed initialization");
        return;
    }
    
    //6.设置MTKView 的代理(由CCRender来实现MTKView 的代理方法)
    _view.delegate = _render;
    
    //7.视图可以根据视图属性上设置帧速率(指定时间来调用drawInMTKView方法--视图需要渲染时调用)
    _view.preferredFramesPerSecond = 60;
    
}

案例二：渲染一个三角形

三角形效果图

2.1 这个案例对ViewController的处理和案例1一样。
可以通过增加以下调用传入视图size，以修改可绘制大小，当绘制时，会将这些值传递给顶点着色器，在屏幕像素坐标系位置转换到剪辑空间的位置时，可用视口大小size来计算换算后的位置。

[_renderer mtkView:_view drawableSizeWillChange:_view.drawableSize];

2.2 在CCShaderTypes.h中
创建一个.h头文件CCShaderTypes.h，定义两个结构体，该头文件包含了 Metal shaders与C/OBJC 源之间共享的类型和枚举常数。
CCVertexInputIndex缓存区索引值，共享于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;

2.3 在创建的Metal文件中
2.3.1 创建一个metal类型文件，用于处理顶点着色器和片元着色器的输入数据并将处理后数据返回给渲染管道执行下一阶段。

创建Metal文件

2.3.2 在metal文件中导入上面创建的头文件，用于Metal shader 代码和执行Metal API命令的C代码之间共享

#import "CCShaderTypes.h"

2.3.3 定义顶点着色器输出和片段着色器输入数据的结构体

typedef struct
{
    //处理空间的顶点信息
    float4 clipSpacePosition [[position]];

    //颜色
    float4 color;

} RasterizerData;

2.3.4 定义一个顶点着色函数
作用：处理顶点数据。
1) 执行坐标系转换,将生成的顶点剪辑空间（也称归一化设备坐标空间，NDC）写入到返回值中（由于这个例子传入的数据为归一化数据，不用到坐标系转换）。
2) 将顶点颜色值传递给返回值
vertex：顶点函数修饰符
RasterizerData：顶点函数返回值类型
vertexShader：函数名
vertexID：顶点索引
vertices：顶点数组
viewportSizePointer：视口大小
[[vertex_id]]：属性修饰符
[[buffer(CCVertexInputIndexVertices)]]：属性修饰符
[[buffer(CCVertexInputIndexViewportSize)]]：属性修饰符

//顶点着色函数
vertex RasterizerData
vertexShader(uint vertexID [[vertex_id]],
             constant CCVertex *vertices [[buffer(CCVertexInputIndexVertices)]],
             constant vector_uint2 *viewportSizePointer [[buffer(CCVertexInputIndexViewportSize)]])
{
//定义out
    RasterizerData out; 
//把输入的剪辑空间的位置直接赋值给输出位置
    out.clipSpacePosition = vertices[vertexID].position;
//把我们输入的颜色直接赋值给输出颜色。这个值将为构成三角形的顶点的其他颜色值插值，从而为我们片段着色器中的每个片段生成颜色值.
    out.color = vertices[vertexID].color;

    //将结构体传递到管道中下一个阶段
    return out;
}

需要特别注意的是外部传入的顶点数据是归一化数据，所以我们直接赋值positionout.clipSpacePosition = vertices[vertexID].position;
而当外部传入的顶点数据是像素维度数据时，这一步需要换成以下操作转换坐标空间

 //初始化输出剪辑空间位置
    out.clipSpacePosition = vector_float4(0.0, 0.0, 0.0, 1.0);

//通过索引vertexID到我们的数组位置以获得当前顶点
    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);

归一化设备空间NDC

2.3.5 当顶点函数执行3次（3个顶点），三角形的每个顶点执行一次后，则执行管道中的下一个阶段 栅格化/光栅化。这一步由系统帮我们完成，我们无法自定义。

2.3.6 光栅化完成后，进入管道下一阶段片元着色处理
主要作用是处理传⼊的片段数据并计算可绘制像素的颜色值。
在片元函数中，片元着色函数使用的单个片元输入数据是由顶点着色函数输出，然后经过光栅化生成的。单个片元输入函数数据可以使用[[stage_in]]属性修饰符。
fragment：片元函数修饰符
float4：函数返回值类型
fragmentShader：函数名
RasterizerData：顶点函数返回值类型
in：变量名

fragment float4 fragmentShader(RasterizerData in [[stage_in]])
{
    
    //返回输入的片元颜色
    return in.color;
}

在metal文件中执行的渲染管道流程如图所示

渲染管线3大阶段

他们的作用可以用下图理解会更加清晰

管线3大阶段目的

3 创建管理渲染循环的类CCRenderer
步骤与案例1一致，区别在于这个案例需要自定义渲染管线中的着色程序，绘制对象。
3.1 定义渲染管道状态的全局变量_pipelineState，我们的渲染管道有顶点着色器和片元着色器，它们存储在.metal shader 文件中

//我们用来渲染的设备(又名GPU)
    id<MTLDevice> _device;

    
    // 我们的渲染管道有顶点着色器和片元着色器 它们存储在.metal shader 文件中
    id<MTLRenderPipelineState> _pipelineState;

    //命令队列,从命令缓存区获取
    id<MTLCommandQueue> _commandQueue;

    //当前视图大小,这样我们才可以在渲染通道使用这个视图
    vector_uint2 _viewportSize;

3.2 在初始化方法initWithMetalKitView中，获取函数库并创建管道

//初始化MTKView
- (nonnull instancetype)initWithMetalKitView:(nonnull MTKView *)mtkView
{
    self = [super init];
    if(self)
    {
        
        //1.获取GPU 设备
        _device = mtkView.device;

        //2.在项目中加载所有的(.metal)着色器文件
        // 从bundle中获取.metal文件
        id<MTLLibrary> defaultLibrary = [_device newDefaultLibrary];
        //从库中加载顶点函数
        id<MTLFunction> vertexFunction = [defaultLibrary newFunctionWithName:@"vertexShader"];
        //从库中加载片元函数
        id<MTLFunction> fragmentFunction = [defaultLibrary newFunctionWithName:@"fragmentShader"];

        //3.配置用于创建管道状态的管道
        MTLRenderPipelineDescriptor *pipelineStateDescriptor = [[MTLRenderPipelineDescriptor alloc] init];
        //管道名称
        pipelineStateDescriptor.label = @"the Pipeline";
        //可编程函数,用于处理渲染过程中的各个顶点
        pipelineStateDescriptor.vertexFunction = vertexFunction;
        //可编程函数,用于处理渲染过程中各个片段/片元
        pipelineStateDescriptor.fragmentFunction = fragmentFunction;
        //一组存储颜色数据的组件
        pipelineStateDescriptor.colorAttachments[0].pixelFormat = mtkView.colorPixelFormat;
        
        //4.同步创建并返回渲染管线状态对象
        NSError *error = NULL;
        _pipelineState = [_device newRenderPipelineStateWithDescriptor:pipelineStateDescriptor error:&error];
        //判断是否返回了管线状态对象
        if (!_pipelineState)
        {
           
            //如果我们没有正确设置管道描述符，则管道状态创建可能失败
            NSLog(@"Failed to created pipeline state, error %@", error);
            return nil;
        }

        //5.创建命令队列
        _commandQueue = [_device newCommandQueue];
    }

    return self;
}

3.3 实现可绘制大小变化的代理方法，保存可绘制的大小，因为当我们绘制时，我们将把这些值传递给顶点着色器

//每当视图改变方向或调整大小时调用
- (void)mtkView:(nonnull MTKView *)view drawableSizeWillChange:(CGSize)size
{
    _viewportSize.x = size.width;
    _viewportSize.y = size.height;
}

3.4 实现视图渲染的代理方法

//每当视图需要渲染帧时调用
- (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 } },
    };
    //像素空间顶点数据
//如果metal着色程序中的顶点数据是基于像素空间的，需要将归一化数据乘以视口大小的一半，转换成像素坐标
//    static const CCVertex triangleVertices[] =
//    {
//        //顶点,    RGBA 颜色值
//        { {  0.5*621.0, -0.5*552.0, 0.0, 1.0 }, { 1, 0, 0, 1 } },
//        { { -0.5*621.0, -0.5*552.0, 0.0, 1.0 }, { 0, 1, 0, 1 } },
//        { { -0.0f, 0.5*552.0, 0.0, 1.0 }, { 0, 0, 1, 1 } },
//    };

    //2.为当前渲染的每个渲染传递创建一个新的命令缓冲区
    id<MTLCommandBuffer> commandBuffer = [_commandQueue commandBuffer];
    //指定缓存区名称
    commandBuffer.label = @"MyCommand";
    
    //3.
    // MTLRenderPassDescriptor:一组渲染目标，用作渲染通道生成的像素的输出目标。
    MTLRenderPassDescriptor *renderPassDescriptor = view.currentRenderPassDescriptor;
    //判断渲染目标是否为空
    if(renderPassDescriptor != nil)
    {
        //4.创建渲染命令编码器,这样我们才可以渲染到something
        id<MTLRenderCommandEncoder> renderEncoder =[commandBuffer renderCommandEncoderWithDescriptor:renderPassDescriptor];
        //渲染器名称
        renderEncoder.label = @"MyRenderEncoder";

        //5.设置我们绘制的可绘制区域
        /*
        typedef struct {
            double originX, originY, width, height, znear, zfar;
        } MTLViewport;
         */
        //视口指定Metal渲染内容的drawable区域。 视口是具有x和y偏移，宽度和高度以及近和远平面的3D区域
        //为管道分配自定义视口需要通过调用setViewport。 如果未指定视口，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.表示该编码器生成的命令都已完成,并且从MTLCommandBuffer中分离
        [renderEncoder endEncoding];

        //10.一旦框架缓冲区完成，使用当前可绘制的进度表
        [commandBuffer presentDrawable:view.currentDrawable];
    }

    //11.最后,在这里完成渲染并将命令缓冲区推送到GPU
    [commandBuffer commit];
}

至此，完成案例2的三角形渲染过程。