Metal 二、案例-背景渲染+三角形绘制

通过 Metal，实现 渲染颜色到屏幕 和 三角形的绘制 两个简单案例。

一、Metal 使用

Metal Programing Guide 官方文档

类似于 OpenGL ES 的 GLKit, 苹果为开发者提供了 MetalKit 。并对开发者做了以下建议(当然这只是建议，不是必须遵循的规则)：

1、Separate Your Rendering Loop  --  单独处理你的渲染循环

即：当我们使用 Metal 开发程序时，将 渲染循环单独做一个类来处理。使用单独的类，我们可以更好的管理 Metal 及 Metal 的视图委托。

Metal 的相关处理 和 viewController 分开。

// 示例：
_render = [[YourRenderClass alloc] initWithMetalKitView:_view];
_view.delegate = _render;

2、Respond to View Event  --  视图响应事件

// 在 MTKViewDelegate 协议中有 2 个方法
//
// 每当窗口大小变化或者重新布局(设备方向更改)时,视图就会调用此方法.
 - (void)mtkView:(nonnull MTKView *)view drawableSizeWillChange:(CGSize)size;
    
// 每当视图需要渲染时调用 
// 视图可以根据视图属性上设置 View.preferredFramesPerSecond 帧速率(指定时间来调用 drawInMTKView 方法) --> 默认 60
- (void)drawInMTKView:(nonnull MTKView *)view;

3、Metal Command Object  --  Metal 命令对象

Metal 命令对象之间的关系

1）命令缓存区(command buffer) 是从 命令队列(command queue) 创建的

2）命令编码器(command encoders) 将 命令 编码到 命令缓存区

3）提交 命令缓冲区 并将其发送到 GPU

4）GPU 执行命令 并将结果 呈现为可绘

// 一个 MTLDevice 对象表示 GPU，
// 方法 MTLCreateSystemDefaultDevice(): 获取 默认的 GPU 单个对象.
_view.device = MTLCreateSystemDefaultDevice();

// 应用程序 需要与 GPU 交互的第一个对象是 MTLCommandQueue 对象
_commandQueue = [_device newCommandQueue];

// Create a new command buffer for each render pass to the current drawable
// 为当前渲染的每个渲染传递 创建一个新的命令缓冲区
// 使用 MTLCommandQueue 创建对象并且加入到 MTCommandBuffer 对象中去。确保它们能够按照正确顺序发送到 GPU，对于每一帧,一个新的 MTLCommandBuffer 对象 创建且填满了由 GPU 执行的命令
id<MTLCommandBuffer> commandBuffer = [_commandQueue commandBuffer];

二、案例

此案例实现比较简单，主要是 Metal 的API 是使用，过程均在代码注释中。

渲染管线的 3 大阶段：

1、背景色渲染

Render class：

// .h
#import <Foundation/Foundation.h>

@import MetalKit;

NS_ASSUME_NONNULL_BEGIN

@interface MyMetalRender : NSObject <MTKViewDelegate>

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

@end

NS_ASSUME_NONNULL_END


// .m
#import "MyMetalRender.h"

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

@implementation MyMetalRender
{
    id<MTLDevice> _device;// GPU
    id<MTLCommandQueue> _commandQueue;
}

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

// 设置颜色
- (Color)configColor {
    
    // 1. 增加颜色/减小颜色的 标记
    static BOOL       growing = YES;
    // 2.颜色通道值(0~3)
    static NSUInteger primaryChannel = 0;
    // 3.颜色通道数组 colorChannels(颜色值) --> 初始值：红色 透明度1
    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 - MTKView delegate -
// 每当视图渲染时 调用
- (void)drawInMTKView:(nonnull MTKView *)view {
    
    // 拿到颜色
    Color color = [self configColor];
    
    // 1. 设置颜色 --> 类似OpenGL ES 的 clearColor
    view.clearColor = MTLClearColorMake(color.red, color.green, color.blue, color.alpha);
    // 2. Create a new command buffer for each render pass to the current drawable
    // 使用MTLCommandQueue 创建对象并且加入到MTCommandBuffer对象中去.
    // 为当前渲染的每个渲染传递创建一个新的命令缓冲区
    id<MTLCommandBuffer> commandBuffer = [_commandQueue commandBuffer];
    commandBuffer.label = @"MyCommandBuffer";
    
    // 3.从视图中,获得 渲染描述符
    MTLRenderPassDescriptor *renderDescriptor = view.currentRenderPassDescriptor;
    if (renderDescriptor) {
        
        // 4.通过渲染描述符 renderPassDescriptor  创建 MTLRenderCommandEncoder 对象
        id<MTLRenderCommandEncoder> renderEncoder = [commandBuffer renderCommandEncoderWithDescriptor:renderDescriptor];
        renderEncoder.label = @"MyRenderEncoder";
        
        // 5.我们可以使用 MTLRenderCommandEncoder 来绘制对象,此 demo 仅仅创建编码器就可以了,我们并没有让 Metal 去执行我们绘制的东西,这个时候表示我们的任务已经完成.
        // 即: 可结束 MTLRenderCommandEncoder 工作
        [renderEncoder endEncoding];
        
        /*
         当编码器结束之后,命令缓存区就会接受到 2 个命令.
         1) present
         2) commit
         因为 GPU 是不会直接绘制到屏幕上,因此若不给出指令，则不会有任何内容渲染到屏幕上.
        */
        // 6.添加最后一个命令 来显示清楚的可绘制的屏幕
        [commandBuffer presentDrawable:view.currentDrawable];
        
    }
    // 7. 完成渲染并将命令缓冲区提交给 GPU
    [commandBuffer commit];
}

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

@end

viewController.m

#import "ViewController.h"
#import "MyMetalRender.h"

@interface ViewController () {
    
    MTKView *_view;
    MyMetalRender *_render;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    _view = (MTKView *)self.view;
    // 一个 MTLDevice 对象 表示 GPU
    _view.device = MTLCreateSystemDefaultDevice();
    // 判断是否设置成功
    if (!_view.device) {
        NSLog(@"Metal is not supported on this device");
        return;
    }
    
    // render
    _render = [[MyMetalRender alloc] initWithMTKView:_view];
    
    _view.delegate = _render;
    // 设置帧速率 --> 指定时间来调用 drawInMTKView 方法--视图需要渲染时调用 默认60
    _view.preferredFramesPerSecond = 60;
}

@end

2、绘制三角形

我们只给了三角形的三个顶点的颜色, Metal 会自动计算过度颜色差值，和 OpenGL 一样。

主要代码：

// 1. 顶点/颜色 数据
    static const MyVertex triangleVertices[] =
    {
        // 顶点 xyzw,                 颜色值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 = @"MyCommandBuffer";
    
    // 3.MTLRenderPassDescriptor:一组渲染目标，用作渲染通道生成的像素的输出目标。
    MTLRenderPassDescriptor *renderPassDescriptor = view.currentRenderPassDescriptor;
    if (renderPassDescriptor) {
        // 4.创建 渲染命令编码
        id<MTLRenderCommandEncoder> renderEncoder = [commandBuffer renderCommandEncoderWithDescriptor:renderPassDescriptor];
        renderEncoder.label = @"MyRenderEncoder";
        // 5.设置 可绘制区域 Viewport
        /*
        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:MyVertexInputIndexVertices];

        // viewPortSize 数据
        //  1) 发送到顶点着色函数中,视图大小
        //  2) 视图大小内存空间大小
        //  3) 对应的索引
        [renderEncoder setVertexBytes:triangleVertices length:sizeof(_viewportSize) atIndex:MyVertexInputIndexViewportSize];
        
        
        // 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];
    

Metal 代码：

// 顶点着色器输出和片段着色器输入 -- 经过了光栅化的数据
// 结构体
typedef struct {
    // 处理空间的顶点信息
    float4 clipSpacePosition[[position]];
    // 颜色
    float4 color;
} RasterizerData;


// 顶点着色函数
/*
处理顶点数据:
   1) 执行坐标系转换,将生成的顶点剪辑空间写入到返回值中.
   2) 将顶点颜色值传递给返回值
*/
vertex RasterizerData vertexShader (uint vertexID [[vertex_id]],
                                    constant MyVertex *vertices [[buffer(MyVertexInputIndexVertices)]],
                                    constant vector_uint2 *viewportSizePointer [[buffer(MyVertexInputIndexViewportSize)]]) {
    
    // 定义输出
    RasterizerData out;
    out.clipSpacePosition = vertices[vertexID].position;

    out.color = vertices[vertexID].color;
    
    // 完成! 将结构体传递到管道中下一个阶段:
    return out;
}


// 当顶点函数执行3次,三角形的每个顶点都执行一次后,则执行管道中的下一个阶段 --> 栅格化/光栅化 之后 --> 片元函数


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

Demo 地址