Metal 三、案例-Metal 大量顶点数据时处理方案 MTLBuffer + 加载纹理

一、Metal 大量顶点数据处理

如上图，setVertexByte: 方法对数据是有限制的 不能大于4K。当大量数据，超过了4K时，我们可以使用 MTLBuffer。

1、MTLBuffer

当顶点数量太多时，对CPU的消耗会增大，尤其在游戏、AI等场景中，为更好的扩展管理 (并不是为了图形图片的加载)，Metal 提出了一个新的对象：MTLBuffer;

Metal --> MTLBuffer --> 缓存区(可以存储了大量的自定义数据，GPU直接访问 <-- 缓存区存在显存中) --> 存储顶点数据

1.1、当顶点数据超过了 4K 上限时，"setVertexBytes:length:atIndex:" 方法会不再生效 --> 简单的绘制三角形 每个顶点 xyzw 占用4*8=32 字节 --> 我们可根据实际业务场景考量是否需要使用 MTLBuffer

2、MTLBuffer 使用

这里不再重复贴代码，可 通过绘制三角形 Demo 进行对比。更多案例可通过 Metal Sample Code 官方 Demo 示例 来下载了解 Metal 相关 API 的使用。

通过 buffer 传值：

// 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:MyVertexInputIndexVertices];

/* ##不需要设置缓冲区，普通传递顶点数据的方法 -- 具体流程使用见绘制三角形 demo
// 顶点 + 颜色
[renderEncoder setVertexBytes:triangleVertices  length:sizeof(triangleVertices) atIndex:MyVertexInputIndexVertices];
*/

缓冲区的创建：

// 5.获取顶点数据
NSData *vertexData = [CCRenderer generateVertexData];
// 创建一个vertex buffer,可以由GPU来读取
_vertexBuffer = [_device newBufferWithLength:vertexData.length
                                      options:MTLResourceStorageModeShared];
// 复制vertex data 到vertex buffer 通过缓存区的"content"内容属性访问指针 --> 顶点数据从内存copy到缓冲区中 MTLBuffer 对象
/*
   memcpy(void *dst, const void *src, size_t n);
   dst:目的地
   src:源内容
   n: 长度
*/
memcpy(_vertexBuffer.contents, vertexData.bytes, vertexData.length);

二、加载纹理

Metal 加载 .jpg .png 文件

1、加载流程

2、主要代码

纹理处理代码

// JPG 图片
-(void)setupTextureJPG {

    // 1.获取图片
    UIImage *image = [UIImage imageNamed:@"cat.jpg"];
    // 2.纹理描述符
    MTLTextureDescriptor *textureDescriptor = [[MTLTextureDescriptor alloc] init];
    // 表示每个像素有蓝色,绿色,红色和alpha通道.其中每个通道都是8位无符号归一化的值.(即0映射成0,255映射成1);
    textureDescriptor.pixelFormat = MTLPixelFormatRGBA8Unorm;
    // 设置纹理的像素尺寸
    textureDescriptor.width = image.size.width;
    textureDescriptor.height = image.size.height;
    
    // 3.使用描述符从设备中创建纹理
    _texture = [_device newTextureWithDescriptor:textureDescriptor];
    
    /*
     typedef struct
     {
     MTLOrigin origin; // 开始位置x,y,z
     MTLSize   size; // 尺寸width,height,depth
     } MTLRegion;
     */
    // MLRegion 结构用于标识纹理的特定区域。 demo 使用图像数据填充整个纹理；因此，覆盖整个纹理的像素区域等于纹理的尺寸。
    // 4. 创建 MTLRegion 结构体  [纹理上传的范围]
    MTLRegion region = {{ 0, 0, 0 }, {image.size.width, image.size.height, 1}};
    
    // 5.获取图片数据
    Byte *imageBytes = [self loadImage:image];
    
    // 6.UIImage 的数据需要转成二进制才能上传，且不用 jpg、png 的NSData
    if (imageBytes) {
        [_texture replaceRegion:region
                        mipmapLevel:0
                          withBytes:imageBytes
                        bytesPerRow:4 * image.size.width];
        free(imageBytes);
        imageBytes = NULL;
    }
}

Metal 代码：

// 顶点函数
vertex RasterizerData
vertexShader(uint vertexID [[vertex_id]],
             constant MyVertex *vertexArray [[buffer(MyVertexInputIndexVertices)]],
             constant vector_uint2 *viewportSizePointer [[buffer(MyVertexInputIndexViewportSize)]]) {

    /*
     处理顶点数据:
     1) 执行坐标系转换,将生成的顶点剪辑空间写入到返回值中.
     2) 将顶点颜色值传递给返回值
     */
    
    // 定义 out
    RasterizerData out;
    
    // 初始化输出剪辑空间位置
    out.clipSpacePosition = vector_float4(0.0, 0.0, 0.0, 1.0);
    
    // 索引到我们的数组位置以获得当前顶点
    // 我们的位置是在像素维度中指定的.
    float2 pixelSpacePosition = vertexArray[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.z = 0.0f;
    out.clipSpacePosition.w = 1.0f;
    
    // 把我们输入的颜色直接赋值给输出颜色. 这个值将于构成三角形的顶点的其他颜色值插值,从而为我们片段着色器中的每个片段生成颜色值.
    out.textureCoordinate = vertexArray[vertexID].textureCoordinate;
    
    // 完成! 将结构体传递到管道中下一个阶段:
    return out;
}


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


// 片元函数
fragment float4 fragmentShader(RasterizerData in [[stage_in]],
                               texture2d<half> colorTexture [[texture(MyTextureIndexBaseColor)]]) {

    constexpr sampler textureSampler(mag_filter::linear,
                                     min_filter::linear);
    
    const half4 colorSampler = colorTexture.sample(textureSampler,in.textureCoordinate);
    
    return float4(colorSampler);
}

Demo 地址