Metal -- Hello Metal!

一、What is Metal？

在 WWDC 2014 上，Apple为游戏开发者推出了新的平台技术 Metal，该技术能够为 3D 图像提高 10 倍的渲染性能，并支持大家熟悉的游戏引擎及公司。

简单点说，Metal是苹果用来替代OpenGL ES的，至于为什么？按照苹果的尿性，我觉得有可能有两个原因：

• 性能原因：苹果在对性能是有极致追求的，在WWDC上，苹果说Metal会比OpenGLES性能提高许多；对于苹果来说，OpenGL ES的性能可能已经无法满足了。
• 技术原因：苹果从来就是一家对技术及其重视的公司，在Metal出现之前，OpenGL和OpenGL ES几乎是业界唯一的标准。但是毕竟不是自己的技术，可能会被限制，毛爷爷说的好，爹有娘有，不如自己有，还是自己搞一套最好。

Metal已经推出几年了，目前怎么样了呢？
目前苹果自己的设备已经完成从OpenGL/OpenGL ES到 Metal的转换。并且性能确实比OpenGL/OpenGL ES有了很大进步。举个🌰：
在苹果御用视频编辑软件Fina Cut Pro X中，苹果使用Metal为其提供了软件加速机制，同样素材导出速度吊锤其他视频软件。

二、Hello Metal

我们先来实现一个简单需求，使用Metal动态修改当前VC的背景颜色。和OpenGL ES类似，苹果将OpenGL ES封装成了GLKit帮助我们学习和使用，苹果也提供了MetalKit帮助我们学习和使用Metal。

1、效果如下：

Hello Metal.gif

2、代码部分

先修改VC的View的class为MTKView，然后添加一个Label添加到View上：

image.png

苹果建议我们在开发中将Metal部分渲染部分和业务逻辑独立出来，方便管理和维护，
所以我们新建一个继承于NSObject的render管理类LPRender，工程整体结构如下：

image.png

LPHelper和Shader.metal后面用到了我们再说

和GLKVView类似，我们在使用MTKView的时候也必须实现它的协议方法来完成我们绘制：

/*!
 @method mtkView:drawableSizeWillChange:
 @abstract Called whenever the drawableSize of the view will change
 @discussion Delegate can recompute view and projection matricies or regenerate any buffers to be compatible with the new view size or resolution
 @param view MTKView which called this method
 @param size New drawable size in pixels
 */
- (void)mtkView:(nonnull MTKView *)view drawableSizeWillChange:(CGSize)size;

/*!
 @method drawInMTKView:
 @abstract Called on the delegate when it is asked to render into the view
 @discussion Called on the delegate when it is asked to render into the view
 */
- (void)drawInMTKView:(nonnull MTKView *)view;

第一个方法，是在我们的绘制窗口发生变化的时候调用，第二个是每当视图需要渲染时调用

接下来看下LPRender中实现：

//颜色结构体
typedef struct {
    float red, green, blue, alpha;
} Color;

//初始化
- (id)initWithMetalKitView:(MTKView *)mtkView
{
    self = [super init];
    if(self)
    {
        _device = mtkView.device;
        
        //所有应用程序需要与GPU交互的第一个对象是一个对象。MTLCommandQueue.
        //你使用MTLCommandQueue 去创建对象,并且加入MTLCommandBuffer 对象中.确保它们能够按照正确顺序发送到GPU.对于每一帧,一个新的MTLCommandBuffer 对象创建并且填满了由GPU执行的命令.
        _commandQueue = [_device newCommandQueue];
    }
    
    return self;
}

//设置颜色
- (Color)makeFancyColor
{
    //1. 增加颜色/减小颜色的 标记
    static BOOL       growing = YES;
    //2.颜色通道值(0~3)
    static NSUInteger primaryChannel = 0;
    //3.颜色通道数组colorChannels(颜色值)
    static float      colorChannels[] = {1.0, 0.0, 0.0, 1.0};
    //4.颜色调整步长
    const float DynamicColorRate = 0.015;
    
    //5.判断
    if(growing)
    {
        //动态信道索引 (1,2,3,0)通道间切换
        NSUInteger dynamicChannelIndex = (primaryChannel+1)%3;
        
        //修改对应通道的颜色值 调整0.015
        colorChannels[dynamicChannelIndex] += DynamicColorRate;
        
        //当颜色通道对应的颜色值 = 1.0
        if(colorChannels[dynamicChannelIndex] >= 1.0)
        {
            //设置为NO
            growing = NO;
            
            //将颜色通道修改为动态颜色通道
            primaryChannel = dynamicChannelIndex;
        }
    }
    else
    {
        //获取动态颜色通道
        NSUInteger dynamicChannelIndex = (primaryChannel+2)%3;
        
        //将当前颜色的值 减去0.015
        colorChannels[dynamicChannelIndex] -= DynamicColorRate;
        
        //当颜色值小于等于0.0
        if(colorChannels[dynamicChannelIndex] <= 0.0)
        {
            //又调整为颜色增加
            growing = YES;
        }
    }
    
    //创建颜色
    Color color;
    
    //修改颜色的RGBA的值
    color.red   = colorChannels[0];
    color.green = colorChannels[1];
    color.blue  = colorChannels[2];
    color.alpha = colorChannels[3];
    
    //返回颜色
    return color;
}

#pragma mark - MTKViewDelegate methods

//每当视图需要渲染时调用
- (void)drawInMTKView:(nonnull MTKView *)view
{
    //1. 获取颜色值
    Color color = [self makeFancyColor];
    //2. 设置view的clearColor
    view.clearColor = MTLClearColorMake(color.red, color.green, color.blue, color.alpha);
    
    //3. Create a new command buffer for each render pass to the current drawable
    //使用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];
}

//当MTKView视图发生大小改变时调用
- (void)mtkView:(MTKView *)view drawableSizeWillChange:(CGSize)size
{
    
}

接下来我们在Viewcontroller中调用render并设置MTKView的代理对象。

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //1. 获取_view
    _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. 创建CCRenderer
    //分开你的渲染循环:
    //在我们开发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;
    
}

这样一个简单的背景色动态修改就完成了。

三、使用Metal渲染一个三角形

效果如下：

三角形.jpeg

在OpenGL ES中我们经常会使用两个着色器文件即顶点着色器和片源着色器，同样的在Metal中我们也会使用他们，不过不再是定义两个文件了，而是直接使用.metal的文件，将片源着色器和顶点着色器集合在一起。我们新建一个metal文件，命名为Shader：

image.png

再新建一个LPHelper.h文件，来保存我们在VC和Metal文件中都要使用的类型。

• LPHelper的实现：

/*
 介绍:
 头文件包含了 Metal shaders 与C/OBJC 源之间共享的类型和枚举常数
*/
#ifndef  LPHelper_h
#define LPHelper_h
// 缓存区索引值 共享与 shader 和 C 代码 为了确保Metal Shader缓存区索引能够匹配 Metal API Buffer 设置的集合调用
typedef enum LPVertexInput{
    //顶点
    LPVertexInputIndexVertices = 0,
    //视图大小
    LPVertexInputIndexViewportSize = 1,
}LPVertexInput;
//结构体: 顶点/颜色值
typedef struct
{
    // 像素空间的位置
    // 像素中心点(100,100)
    vector_float4 position;

    // RGBA颜色
    vector_float4 color;
} LPVertex;
#endif /* LPHelper_h */

• Shader的实现：

#include <metal_stdlib>
using namespace metal;

// 导入Metal shader 代码和执行Metal API命令的C代码之间共享的头
#import "LPHelper.h"

// 顶点着色器输出和片段着色器输入
//结构体
typedef struct
{
    //处理空间的顶点信息
    float4 clipSpacePosition [[position]];

    //颜色
    float4 color;

} RasterizerData;

//顶点着色函数
vertex RasterizerData
vertexShader(uint vertexID [[vertex_id]],
             constant LPVertex *vertices [[buffer(LPVertexInputIndexVertices)]],
             constant vector_uint2 *viewportSizePointer [[buffer(LPVertexInputIndexViewportSize)]])
{
    /*
     处理顶点数据:
        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;
}

然后我们来到LPRender中，实现数据传递和渲染逻辑：

#import "LPRender.h"
#import "LPHelper.h"

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

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

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

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

- (instancetype)initWithMtkView:(MTKView *)view
{
    self = [super init];
    if(self)
    {
        NSError *error = NULL;
        
        //1.获取GPU 设备
        _device = view.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 = @"LPPipel";
        //可编程函数,用于处理渲染过程中的各个顶点
        pipelineStateDescriptor.vertexFunction = vertexFunction;
        //可编程函数,用于处理渲染过程中各个片段/片元
        pipelineStateDescriptor.fragmentFunction = fragmentFunction;
        //一组存储颜色数据的组件
        pipelineStateDescriptor.colorAttachments[0].pixelFormat = view.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;
}

#pragma mark -- MTKViewDelegate
- (void)mtkView:(MTKView *)view drawableSizeWillChange:(CGSize)size{
    _viewportSize.x = size.width;
    _viewportSize.y = size.height;
}
- (void)drawInMTKView:(MTKView *)view{
    //1. 顶点数据/颜色数据
    static const LPVertex 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<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：方法将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:LPVertexInputIndexVertices];

        //viewPortSize 数据
        //1) 发送到顶点着色函数中,视图大小
        //2) 视图大小内存空间大小
        //3) 对应的索引
        [renderEncoder setVertexBytes:&_viewportSize
                               length:sizeof(_viewportSize)
                              atIndex:LPVertexInputIndexViewportSize];

       
        
        //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];
    
}

在- (instancetype)initWithMtkView:(MTKView *)view中，我们主要做的事情就类似于OpenGL ES中对着色器文件的链接、编译。
而在- (void)drawInMTKView:(MTKView *)view中，则是类似OpenGL ES中的数据传递和渲染逻辑。

最后我们在Viewcontroller中调用drawableSizeWillChange方法来实现获取我们三角形的大小信息：

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    _view = (MTKView *)self.view;
    _view.device = MTLCreateSystemDefaultDevice();
    _render = [[LPRender alloc]initWithMtkView:_view];
    [_render mtkView:_view drawableSizeWillChange:_view.drawableSize];
    _view.delegate = _render;
}

四、总结：

注意点：

• 使用Metal的时候注意，尽量将渲染逻辑独立到单独的类中进行管理和维护
• 使用MTKView的时候记得要设置代理，并实现对应的代理方法。
• 顶点着色器和片源着色器使用一个metal文件即可。

Metal作为苹果开发用来替代OpenGL/OpenGL ES的框架，实际使用中流程实际上和OpenGL ES有很类似的地方。主要区别还是在语法上，这个只要多多练习就好。 虽然Metal目前在苹果以外的平台上的情况并不是很好，但是在苹果自家的产品上确实发挥了非常大的作用。就我们开发而言，目前可能也很少使用Metal，但是这并不妨碍我们学习它。毕竟Swift现在也是今非昔比。

觉得不错记得点赞哦！听说看完点赞的人逢考必过，逢奖必中。ღ( ´･ᴗ･` )比心