十九、Metal渲染实例

一、利用Metal实现渲染图形

加载一个由N个三角形组成的双色四边形

加载N个三角形

加载流程

Metal渲染流程

• 在VC中创建渲染Renderer，苹果提倡渲染代码和C分离，减少C中关于渲染逻辑的编写。

// ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    MTKView * mtkView = (MTKView *)self.view;
   
    mtkView.device = MTLCreateSystemDefaultDevice();
    if (!mtkView.device) {
        NSLog(@"该设备不支持 Metal");
        return;
    }
    
    self.render = [[Renderer alloc] initWithMetalKitView:mtkView];
    if (!self.render) {
        NSLog(@"render create failed");
        return;
    }
    mtkView.delegate = self.render;
    [self.render mtkView:mtkView drawableSizeWillChange:mtkView.drawableSize];
}

• 创建Renderer
  1.先重写初始化函数；2.生成顶点数据；3.加载渲染器；4.实现代理

- (instancetype)initWithMetalKitView:(nonnull MTKView *)mtkView
{
    self = [super init];
    if (self) {
        _device = mtkView.device;
        
        [self loadMetalShaderWith:mtkView];
    }
    return self;
}

- (void)loadMetalShaderWith:(MTKView *)mtkView
{
    // 1.设置绘制纹理的像素格式
    mtkView.colorPixelFormat = MTLPixelFormatBGRA8Unorm_sRGB;
    // 2.从项目中加载着色器文件
    id<MTLLibrary> defLibary = [_device newDefaultLibrary];
    
    // 从库中加载顶点函数
    id<MTLFunction> vertexFunction = [defLibary newFunctionWithName:@"vertexShader"];
    
    id<MTLFunction> fragmentFunction = [defLibary newFunctionWithName:@"fragmentShader"];
    
    // 3.配置管道
    MTLRenderPipelineDescriptor * pipelineStateDescriptor = [[MTLRenderPipelineDescriptor alloc] init];
    //
    pipelineStateDescriptor.label = @"This is pipeline";
    // 可编程函数-处理渲染过程的顶点
    pipelineStateDescriptor.vertexFunction = vertexFunction;
    // 处理渲染过程的片元
    pipelineStateDescriptor.fragmentFunction = fragmentFunction;
    // 设置管道中存储颜色数据的格式
    pipelineStateDescriptor.colorAttachments[0].pixelFormat = mtkView.colorPixelFormat;
    
    // 4.同步创建并返回渲染管道对象
    NSError * err = nil;
    _pipelineState = [_device newRenderPipelineStateWithDescriptor:pipelineStateDescriptor error:&err];
    // 判断是否创建成功
    if (_pipelineState == nil) {
        NSLog(@"创建渲染管道失败：%@",err);
    }
    
    // 获取顶点数据
    NSData * vertexData = [self createVertexData];
    
    // 创建vertex buffer 交由GPU读取
    _vertexBuffer = [_device newBufferWithLength:vertexData.length options:MTLResourceStorageModeShared];
    /*
        memcpy(void *dst, const void *src, size_t n);
        dst:目的地
        src:源内容
        n: 长度
        */
    memcpy(_vertexBuffer.contents, vertexData.bytes, vertexData.length);
    //计算顶点个数 = 顶点数据长度 / 单个顶点大小
    _numVertices = vertexData.length / sizeof(MetalVertex);
    // 6.创建命令队列
    _commandQueue = [_device newCommandQueue];
    
}

///创建顶点数据
- (nonnull NSData *)createVertexData
{
   //1.正方形 = 三角形+三角形
   const MetalVertex quadVertices[] =
   {
       // Pixel 位置, RGBA 颜色
       { { -20,   20 },    { 1, 0, 0, 1 } },
       { {  20,   20 },    { 1, 0, 0, 1 } },
       { { -20,  -20 },    { 1, 0, 0, 1 } },
       
       { {  20,  -20 },    { 0, 0, 1, 1 } },
       { { -20,  -20 },    { 0, 0, 1, 1 } },
       { {  20,   20 },    { 0, 0, 1, 1 } },
   };
   //行/列 数量
   const NSUInteger NUM_COLUMNS = 25;
   const NSUInteger NUM_ROWS = 15;
   //顶点个数
   const NSUInteger NUM_VERTICES_PER_QUAD = sizeof(quadVertices) / sizeof(MetalVertex);
   //四边形间距
   const float QUAD_SPACING = 50.0;
   //数据大小 = 单个四边形大小 * 行 * 列
   NSUInteger dataSize = sizeof(quadVertices) * NUM_COLUMNS * NUM_ROWS;
   
   //2. 开辟空间
   NSMutableData *vertexData = [[NSMutableData alloc] initWithLength:dataSize];
   //当前四边形
   MetalVertex * currentQuad = vertexData.mutableBytes;
   
   
   //3.获取顶点坐标(循环计算)
   //行
   for(NSUInteger row = 0; row < NUM_ROWS; row++)
   {
       //列
       for(NSUInteger column = 0; column < NUM_COLUMNS; column++)
       {
           //A.左上角的位置
           vector_float2 upperLeftPosition;
           
           //B.计算X,Y 位置.注意坐标系基于2D笛卡尔坐标系,中心点(0,0),所以会出现负数位置
           upperLeftPosition.x = ((-((float)NUM_COLUMNS) / 2.0) + column) * QUAD_SPACING + QUAD_SPACING/2.0;
           
           upperLeftPosition.y = ((-((float)NUM_ROWS) / 2.0) + row) * QUAD_SPACING + QUAD_SPACING/2.0;
           
           //C.将quadVertices数据复制到currentQuad
           memcpy(currentQuad, &quadVertices, sizeof(quadVertices));
           
           //D.遍历currentQuad中的数据
           for (NSUInteger vertexInQuad = 0; vertexInQuad < NUM_VERTICES_PER_QUAD; vertexInQuad++)
           {
               //修改vertexInQuad中的position
               currentQuad[vertexInQuad].position += upperLeftPosition;
           }
           
           //E.更新索引
           currentQuad += 6;
       }
   }
   
   return vertexData;
   
}

#pragma mark - MTKViewDelegate
- (void)drawInMTKView:(nonnull MTKView *)view {

    // 1,为当前渲染的每个渲染传递创建一个新的命令缓存区
    id<MTLCommandBuffer> commandBuffer = [_commandQueue commandBuffer];
    commandBuffer.label = @"My Command";
    // 2.MTLRenderPassDescriptor:一组渲染目标，用作渲染通道生成的像素的输出目标。
    MTLRenderPassDescriptor * renderPassDescriptor = view.currentRenderPassDescriptor;
    // 判断渲染目标是否为空
    if (renderPassDescriptor != nil) {

        // 3.创建渲染命令编码器，这样我们就可以渲染
        id<MTLRenderCommandEncoder> renderEncoder = [commandBuffer renderCommandEncoderWithDescriptor:renderPassDescriptor];
        renderEncoder.label = @"My Render Encoder";
        /**
         * 4.设置绘制区域
         * typedef struct {
         *  double originX, originY, width, height, znear, zfar;
         * } MTLViewport;
         */
        [renderEncoder setViewport:(MTLViewport){0.0, 0.0, _viewportSize.x, _viewportSize.y, -1.0, 1.0}];

        // 5.设置渲染管道
        [renderEncoder setRenderPipelineState:_pipelineState];

        /**
         * 6.发送数据到顶点着色器函数
         * buffer：包含需要传递的缓冲对象
         * offset：从缓冲器的开头字节偏移，指示“顶点指针”指向什么。在这种情况下，我们通过0，所以数据一开始就被传递下来.偏移量
         * index：一个整数索引，对应于我们的“vertexShader”函数中的缓冲区属性限定符的索引。注意，此参数与 -[MTLRenderCommandEncoder setVertexBytes:length:atIndex:] “索引”参数相同。
         */
        [renderEncoder setVertexBuffer:_vertexBuffer offset:0 atIndex:VertexInputIndexVertices];

        // 将 viewportSize 设置到顶点缓存区绑定点设置数据
        [renderEncoder setVertexBytes:&_viewportSize length:sizeof(_viewportSize) atIndex:VertexInputIndexViewportSize];

        /**
         * 7.开始绘图
         * @brief 在不使用索引列表的情况下,绘制图元
         * @param 绘制图形组装的基元类型
         * @param 从哪个位置数据开始绘制,一般为0
         * @param 每个图元的顶点个数,绘制的图型顶点数量
         */
        /* (MTLPrimitiveType)
            MTLPrimitiveTypePoint = 0, 点
            MTLPrimitiveTypeLine = 1, 线段
            MTLPrimitiveTypeLineStrip = 2, 线环
            MTLPrimitiveTypeTriangle = 3,  三角形
            MTLPrimitiveTypeTriangleStrip = 4, 三角型扇
            */

        [renderEncoder drawPrimitives:MTLPrimitiveTypeTriangle vertexStart:0 vertexCount:_numVertices];

        //8.完成编码器命令的生成，结束编码；并从MTLCommandBuffer中分离
        [renderEncoder endEncoding];

        // 9.推出绘制
        [commandBuffer presentDrawable:view.currentDrawable];

    }
    // 10.完成渲染并将命令推送到GPU
    [commandBuffer commit];

}

- (void)mtkView:(nonnull MTKView *)view drawableSizeWillChange:(CGSize)size {
    
    // 保存可绘制的大小
    _viewportSize.x = size.width;
    
    _viewportSize.y = size.height;
}

其中 [renderEncoder setVertexBuffer:_vertexBuffer offset:0 atIndex:VertexInputIndexVertices];，使用该函数发送数据到顶点数据的原因是本实例中顶点数量过大; 当字节数小于4096时则可使用[renderEncoder setVertexBytes: length: atIndex:]

PS：一个顶点字节数为32字节，X、Y、Z、W 各站8位