Metal 案例04：加载图片

typedef enum CJLVertexInputIndex
{
//    顶点
    CJLVertexInputIndexVertices = 0,
//    视图大小
    CJLVertexInputIndexViewportSize = 1,
}CJLVertexInputIndex;
//纹理索引：用于往片元着色器传递纹理数据的索引
typedef enum CJLTextureIndex
{
    CJLTextureIndexBaseColor = 0
}CJLTextureIndex;
//顶点数据结构体:顶点/颜色值
typedef struct
{
//    像素空间的位置
//    像素中心点（100，100）
//    顶点坐标
    vector_float2 position;
//    2D 纹理
//    纹理坐标
    vector_float2 textureCoordinate;
}CJLVertex;

//返回值结构体：顶点着色器输出和片元着色器输入（相当于OpenGL ES中的varying修饰的变量，即桥接）
typedef struct
{
//    顶点坐标
    float4 clipSpacePosition [[position]];
//    纹理坐标
    float2 textureCoordinate;
}RasterizerData;

vertex RasterizerData
vertexShader(uint vertexID [[vertex_id]],
             constant CJLVertex *vertexArray [[buffer(CJLVertexInputIndexVertices)]],
             constant vector_uint2 *viewportSizePointer [[buffer(CJLVertexInputIndexViewportSize)]])
{
        /*
        处理顶点数据:
           1) 执行坐标系转换,将生成的顶点剪辑空间写入到返回值中.
           2) 将顶点颜色值传递给返回值
        */
//    1、定义out
    RasterizerData out;
//    2、初始化输出剪辑空间位置，将w改为2.0，实际运行结果比1.0小一倍
    out.clipSpacePosition = vector_float4(0.0, 0.0, 0.0, 1.0);
//    3、获取当前顶点坐标的xy，因为是2D图形
    // 索引到我们的数组位置以获得当前顶点
    // 我们的位置是在像素维度中指定的.
    float2 pixelSpacePosition = vertexArray[vertexID].position.xy;
    //将vierportSizePointer 从verctor_uint2 转换为vector_float2 类型
    vector_float2 viewportSize = vector_float2(*viewportSizePointer);
//    4、顶点坐标归一化处理
    //每个顶点着色器的输出位置在剪辑空间中(也称为归一化设备坐标空间,NDC),剪辑空间中的(-1,-1)表示视口的左下角,而(1,1)表示视口的右上角.
    //计算和写入 XY值到我们的剪辑空间的位置.为了从像素空间中的位置转换到剪辑空间的位置,我们将像素坐标除以视口的大小的一半.
    //可以使用一行代码同时分割两个通道。执行除法，然后将结果放入输出位置的x和y通道中
    out.clipSpacePosition.xy = pixelSpacePosition / (viewportSize / 2.0);
    out.clipSpacePosition.z = 0.0f;
    out.clipSpacePosition.w = 1.0f;
    //把我们输入的颜色直接赋值给输出颜色. 这个值将于构成三角形的顶点的其他颜色值插值,从而为我们片段着色器中的每个片段生成颜色值.
//    纹理坐标桥接
    out.textureCoordinate = vertexArray[vertexID].textureCoordinate;
    //完成! 将结构体传递到管道中下一个阶段:
    return out;
}

fragment float4 fragmentShader(RasterizerData in [[stage_in]],
                               texture2d<half> colorTexture [[texture(CJLTextureIndexBaseColor)]])
{
//    当texture2d没有写access时，默认是sampler，
//    设置采样器：过滤方式
    constexpr sampler textureSampler(mag_filter::linear, min_filter::linear);
//    读取纹素（即纹理对应像素点的颜色值），相当于GLSL中的内建函数texture2D
//      half4取决于 texture2d<half>中的half ，由于颜色是RGBA，所以是half4
//    GLSL中属性的设置都是通过状态机，
//    而metal中属性的设置是一个对象的思维，都是纹理采样的属性设置
    const half4 colorSampler = colorTexture.sample(textureSampler, in.textureCoordinate);
//    进行灰度/...
//    将half4 类型转换为 float4类型，如果不想这么麻烦，也可以将texture2d<half>中的half改为float，这样颜色的类型就是float4了
    return float4(colorSampler);
}

//设置顶点相关操作
- (void) setupVertex{
//    1、根据顶点/纹理坐标建立一个MTLBuffer
    static const CJLVertex quadVertices[] = {
//       不是-1~1的都是物体坐标系
        //像素坐标,纹理坐标
        { {  250,  -250 },  { 1.f, 0.f } },
        { { -250,  -250 },  { 0.f, 0.f } },
        { { -250,   250 },  { 0.f, 1.f } },
        { {  250,  -250 },  { 1.f, 0.f } },
        { { -250,   250 },  { 0.f, 1.f } },
        { {  250,   250 },  { 1.f, 1.f } },
    };
//    2、创建我们的顶点缓冲区，并用我们的Qualsits数组初始化它
    _vertexBuffer = [_device newBufferWithBytes:quadVertices length:sizeof(quadVertices) options:MTLResourceStorageModeShared];
//    3、通过将字节长度除以每个顶点的大小来计算顶点的数目
    _numVertices = sizeof(quadVertices) / sizeof(CJLVertex);
}

//设置渲染管道相关操作
- (void)setupPipeLine{
//    1、创建渲染管道
    //从项目中加载.metal文件,创建一个library
    id<MTLLibrary> defaultLibrary = [_device newDefaultLibrary];
    //从库中加载顶点函数
    id<MTLFunction> vertexFunction = [defaultLibrary newFunctionWithName:@"vertexShader"];
     //从库中加载片元函数
    id<MTLFunction> fragmentFunction = [defaultLibrary newFunctionWithName:@"fragmentShader"];
//    2、配置用于创建渲染管道状态的管道
    MTLRenderPipelineDescriptor *renderPipelineDescriptor = [[MTLRenderPipelineDescriptor alloc] init];
    //管道名称
    renderPipelineDescriptor.label = @"Texturing Pipeline";
    //可编程函数,用于处理渲染过程中的各个顶点
    renderPipelineDescriptor.vertexFunction = vertexFunction;
    //可编程函数,用于处理渲染过程总的各个片段/片元
    renderPipelineDescriptor.fragmentFunction = fragmentFunction;
    //设置管道中存储颜色数据的组件格式
    renderPipelineDescriptor.colorAttachments[0].pixelFormat = cjlMTKView.colorPixelFormat;
//    3、创建并返回渲染管线对象 & 判断是否创建成功
    NSError *error;
    _pipelineState = [_device newRenderPipelineStateWithDescriptor:renderPipelineDescriptor error:&error];
    if (!_pipelineState) {
       NSLog(@"Failed to created pipeline state, error %@", error);
    }
//    4、使用device创建commandQueue
    _commandQueue = [_device newCommandQueue];
}

//    1、获取TGA文件路径 --- TGA文件解压
    NSURL *imageFileLocation = [[NSBundle mainBundle] URLForResource:@"circle" withExtension:@"tga"];
    //将tag文件->CJLImage对象
    CJLImage *image = [[CJLImage alloc] initWithTGAFileAtLocation:imageFileLocation];
    //判断图片是否转换成功
    if (!image) {
        NSLog(@"Failed to create the image from:%@",imageFileLocation.absoluteString);
        return;
    }

//    2、创建纹理描述对象 & 设置属性 --- CJLImage --> 纹理（即位图变成纹理对象）
    MTLTextureDescriptor *textureDescriptor = [[MTLTextureDescriptor alloc] init];
    //表示每个像素有蓝色,绿色,红色和alpha通道.其中每个通道都是8位无符号归一化的值.(即0映射成0,255映射成1);
    //位图信息
    textureDescriptor.pixelFormat = MTLPixelFormatBGRA8Unorm;
    //设置纹理的像素尺寸，即纹理的分辨率
    textureDescriptor.width = image.width;
    textureDescriptor.height = image.height;
//    3、创建纹理对象：使用描述符从设备中创建纹理
    _texture = [_device newTextureWithDescriptor:textureDescriptor];

typedef struct
     {
     MTLOrigin origin; //开始位置x,y,z
     MTLSize   size; //尺寸width,height,depth
     } MTLRegion;

//计算图像每行的字节数
    NSUInteger bytesPerRow = 4 * image.width;
//    4、创建MTLRegion结构体
    /*
     typedef struct
     {
     MTLOrigin origin; //开始位置x,y,z
     MTLSize   size; //尺寸width,height,depth
     } MTLRegion;
     */
    //MLRegion结构用于标识纹理的特定区域。 demo使用图像数据填充整个纹理；因此，覆盖整个纹理的像素区域等于纹理的尺寸。
    MTLRegion region = {
        {0,0,0},
        {image.width, image.height, 1},
    };
//    5、复制图片数据到texture
    /*
     将图片复制到纹理0中（即用纹理替换region表示的区域）
     - (void)replaceRegion:(MTLRegion)region mipmapLevel:(NSUInteger)level withBytes:(const void *)pixelBytes bytesPerRow:(NSUInteger)bytesPerRow;
     参数1-region：像素区域在纹理中的位置
     参数2-level：从零开始的值，指定哪个mipmap级别是目标。如果纹理没有mipmap，请使用0。
     参数3-pixelBytes：指向要复制图片的字节数
     参数4-bytesPerRow：对于普通或压缩像素格式，源数据行之间的跨度（以字节为单位）。对于压缩像素格式，跨度是从一排块的开头到下一行的开始的字节数。
     */
   [_texture replaceRegion:region mipmapLevel:0 withBytes:image.data.bytes bytesPerRow:bytesPerRow];****

/*
 需要传递的数据有以下三种：
 1）顶点数据、纹理坐标，
 2）viewportSize视图大小
 3）纹理图片
 */
//将数据加载到MTLBuffer （即metal文件中的顶点着色函数）--> 顶点函数
[commandEncoder setVertexBuffer:_vertexBuffer offset:0 atIndex:CJLVertexInputIndexVertices];
//将数据加载到GPU（即metal文件中的顶点着色函数） --> 视图大小
[commandEncoder setVertexBytes:&_viewportSize length:sizeof(_viewportSize) atIndex:CJLVertexInputIndexViewportSize];
//将纹理对象传递到片元着色器（即metal中的片元着色函数） -- 纹理图片
[commandEncoder setFragmentTexture:_texture atIndex:CJLTextureIndexBaseColor];

//加载纹理TGA文件
- (void)setupTexturePNG{
//    1、获取图片
    UIImage *image = [UIImage imageNamed:@"mouse.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];
//    4、创建MTLRegion对象
     //MLRegion结构用于标识纹理的特定区域。 demo使用图像数据填充整个纹理；因此，覆盖整个纹理的像素区域等于纹理的尺寸。
    /*
    typedef struct
    {
    MTLOrigin origin; //开始位置x,y,z
    MTLSize   size; //尺寸width,height,depth （即宽、高、深度）
    } MTLRegion;
    */
    MTLRegion region = {
        {0, 0, 0},
        {image.size.width, image.size.height, 1},
    };
//    5、获取纹理图片:通过context重绘获取纹理图片
    Byte *imageBytes = [self loadImage:image];
//    6、UIImage的数据需要转成二进制才能上传，且不用jpg、png的NSData
    if (imageBytes) {
        //将纹理图片复制到texture
        [_texture replaceRegion:region mipmapLevel:0 withBytes:imageBytes bytesPerRow:4 * image.size.width];
        //释放
        free(imageBytes);
        imageBytes = NULL;
    }
}
//从UIImage 中读取Byte 数据返回 -- png/jpg 都是通过context重绘 解压成位图
- (Byte *)loadImage:(UIImage *)image{
//    1、将UIImage转换为CGImageRef
    CGImageRef spriteImage = image.CGImage;
//    2、读取图片的大小
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
//    3、计算图片字节数
    Byte *spriteData = (Byte *)calloc(width * height * 4, sizeof(Byte));
//    4、创建context
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4, CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
//    5、在context上绘图
    CGContextDrawImage(spriteContext, CGRectMake(0, 0, width, height), spriteImage);
//    6、图片翻转过来
    CGRect rect = CGRectMake(0, 0, width, height);
    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    CGContextScaleCTM(spriteContext, 1.0, -1.0);
    CGContextDrawImage(spriteContext, rect, spriteImage);
//    7、释放context
    CGContextRelease(spriteContext);
    return spriteData;;
}