美文网首页
Metal 案例:MTLBuffer加载大量顶点数据

Metal 案例:MTLBuffer加载大量顶点数据

作者: 奉灬孝 | 来源:发表于2020-08-25 23:42 被阅读0次

    效果图如下:

    Metal加载大量顶点数据.jpeg
    Metal案例:绘制三角形案例中,顶点数据的存储使用的是数组,当顶点传递时通过setVertexBytes(_:length:index:)方法,主要是由于绘制三角形时,所需的顶点只有3个,顶点数据很少,所以可以通过数组存储,此时的数据是存储在CPU中的。那当顶点数据很多时,我们如何存储及传递呢?
    Metal -> MTLBuffer -> 缓存区(存储非常多自定义数据,GPU直接访问 -> 显存) -> 存储顶点数据
    创建的buffer的目的就是为了将顶点数据存储到顶点缓存区,GPU可以直接访问该缓存区获取顶点数据,并且buffer缓存的数据需要通过 setVertexBuffer(_:offset:index:)方法传递到顶点着色器。

    这个案例与Metal案例:绘制三角形 的操作流程也是大致相同的,只需要改动以下几个地方:

    1. metal文件
    2. initWithMetalKitView方法中需要加载metal文件是获取顶点数据
    3. drawInMTKView方法中加载顶点缓冲区数据

    1. metal文件

    1. 定义顶点着色器输出
    2. 初始化输出剪辑空间位置
    3. 获取当前顶点坐标的xy:主要是因为绘制的图形是2D的,其z都为0
    4. 将传入的视图大小转换为vector_float2二维向量类型
    5. 顶点坐标归一化:可以通过一行代码同时分隔两个通道x和y,并执行除法,然后将结果放入输出的x和y通道中,即从像素空间位置转换为裁剪空间位置
    
    #include <metal_stdlib>
    //使用命名空间 Metal
    using namespace metal;
    
    // 导入Metal shader 代码和执行Metal API命令的C代码之间共享的头
    #import "RenderShaderTypes.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.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;
    }
    

    2. initWithMetalKitView方法中需要加载metal文件是获取顶点数据

    1. 获取GPU设备device
    2. 设置绘制纹理的像素格式
    3. 从项目中加载所以的.metal着色器文件
    4. 配置用于创建管道状态的管道描述符
    5. 同步创建并返回渲染管线对象
    6. 获取顶点数据
    7. 创建命令队列
    //初始化
    - (instancetype)initWithMetalKitView:(MTKView *)mtkView
    {
        self = [super init];
        if(self)
        {
             //1.初始GPU设备
            _device = mtkView.device;
            //2.加载Metal文件
            [self loadMetal:mtkView];
        }
        
        return self;
    }
    
    - (void)loadMetal:(nonnull MTKView *)mtkView
    {
        //1.设置绘制纹理的像素格式
        mtkView.colorPixelFormat = MTLPixelFormatBGRA8Unorm_sRGB;
        
        //2.从项目中加载所有的.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 = @"Simple 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);
        }
        
        //5.获取顶点数据
        NSData *vertexData = [RenderObject generateVertexData];
        //创建一个vertex buffer,可以由GPU来读取
        _vertexBuffer = [_device newBufferWithLength:vertexData.length
                                             options:MTLResourceStorageModeShared];
        //复制vertex data 到vertex buffer 通过缓存区的"content"内容属性访问指针
        /*
         memcpy(void *dst, const void *src, size_t n);
         dst:目的地
         src:源内容
         n: 长度
         */
        memcpy(_vertexBuffer.contents, vertexData.bytes, vertexData.length);
        //计算顶点个数 = 顶点数据长度 / 单个顶点大小
        _numVertices = vertexData.length / sizeof(CCVertex);
        
        //6.创建命令队列
        _commandQueue = [_device newCommandQueue];
    }
    

    3. drawInMTKView方法中加载顶点缓冲区数据

    1. 为当前渲染的每个渲染传递创建一个新的命令缓冲区
    2. 创建渲染描述符
    3. 设置我们绘制的可绘制区域
    4. 设置渲染管道
    5. 为了从我们的OC代码找发送数据预加载的MTLBuffer 到我们的Metal 顶点着色函数中
    6. 开始绘图
    7. 结束编码,表示已该编码器生成的命令都已完成,并且从NTLCommandBuffer中分离
    8. 一旦框架缓冲区完成,使用当前可绘制的进度表
    9. 最后,在这里完成渲染并将命令缓冲区推送到GPU
    //每当视图需要渲染帧时调用
    - (void)drawInMTKView:(nonnull MTKView *)view
    {
        //1.为当前渲染的每个渲染传递创建一个新的命令缓冲区
        id<MTLCommandBuffer> commandBuffer = [_commandQueue commandBuffer];
        //指定缓存区名称
        commandBuffer.label = @"MyCommand";
        
        //2. MTLRenderPassDescriptor:一组渲染目标,用作渲染通道生成的像素的输出目标。
        //currentRenderPassDescriptor 从currentDrawable's texture,view's depth, stencil, and sample buffers and clear values.
        MTLRenderPassDescriptor *renderPassDescriptor = view.currentRenderPassDescriptor;
        //判断渲染目标是否为空
        if(renderPassDescriptor != nil)
        {
             //创建渲染命令编码器,这样我们才可以渲染到something
            id<MTLRenderCommandEncoder> renderEncoder =
            [commandBuffer renderCommandEncoderWithDescriptor:renderPassDescriptor];
            //渲染器名称
            renderEncoder.label = @"MyRenderEncoder";
            
            //3.设置我们绘制的可绘制区域
            /*
             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 }];
            
            //4. 设置渲染管道
            [renderEncoder setRenderPipelineState:_pipelineState];
            
            //5.我们调用-[MTLRenderCommandEncoder setVertexBuffer:offset:atIndex:] 为了从我们的OC代码找发送数据预加载的MTLBuffer 到我们的Metal 顶点着色函数中
            /* 这个调用有3个参数
                1) buffer - 包含需要传递数据的缓冲对象
                2) offset - 它们从缓冲器的开头字节偏移,指示“顶点指针”指向什么。在这种情况下,我们通过0,所以数据一开始就被传递下来.偏移量
                3) index - 一个整数索引,对应于我们的“vertexShader”函数中的缓冲区属性限定符的索引。注意,此参数与 -[MTLRenderCommandEncoder setVertexBytes:length:atIndex:] “索引”参数相同。
             */
            
            //将_vertexBuffer 设置到顶点缓存区中
            [renderEncoder setVertexBuffer:_vertexBuffer
                                    offset:0
                                   atIndex:CCVertexInputIndexVertices];
            
            //将 _viewportSize 设置到顶点缓存区绑定点设置数据
            [renderEncoder setVertexBytes:&_viewportSize
                                   length:sizeof(_viewportSize)
                                  atIndex:CCVertexInputIndexViewportSize];
            
            //6.开始绘图
            // @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:_numVertices];
            
            //7.表示已该编码器生成的命令都已完成,并且从NTLCommandBuffer中分离
            [renderEncoder endEncoding];
            
            //8.一旦框架缓冲区完成,使用当前可绘制的进度表
            [commandBuffer presentDrawable:view.currentDrawable];
        }
        
        //9.最后,在这里完成渲染并将命令缓冲区推送到GPU
        [commandBuffer commit];
    }
    

    案例Demo:
    MetalBasicBuffer

    相关文章

      网友评论

          本文标题:Metal 案例:MTLBuffer加载大量顶点数据

          本文链接:https://www.haomeiwen.com/subject/asetsktx.html