前言
這里是一篇Metal新手教程，先定個(gè)小目標(biāo)：把繪制一張圖片到屏幕上。
Metal系列教程的代碼地址；
OpenGL ES系列教程在這里；
你的star和fork是我的源動(dòng)力，你的意見能讓我走得更遠(yuǎn)。
正文
核心思路
通過MetalKit，盡量簡(jiǎn)單地實(shí)現(xiàn)把一張圖片繪制到屏幕，核心的內(nèi)容包括：設(shè)置渲染管道、設(shè)置頂點(diǎn)和紋理緩存、簡(jiǎn)單的shader理解。
效果展示
具體步驟
1、新建MTKView
// 初始化 MTKView
self.mtkView = [[MTKView alloc] initWithFrame:self.view.bounds];
self.mtkView.device = MTLCreateSystemDefaultDevice(); // 獲取默認(rèn)的device
self.view = self.mtkView;
self.mtkView.delegate = self;
self.viewportSize = (vector_uint2){self.mtkView.drawableSize.width, self.mtkView.drawableSize.height};
MTKView是MetalKit提供的一個(gè)View，用來顯示Metal的繪制；
MTLDevice代表GPU設(shè)備，提供創(chuàng)建緩存、紋理等的接口；
2、設(shè)置渲染管道
// 設(shè)置渲染管道
-(void)setupPipeline {
id<MTLLibrary> defaultLibrary = [self.mtkView.device newDefaultLibrary]; // .metal
id<MTLFunction> vertexFunction = [defaultLibrary newFunctionWithName:@"vertexShader"]; // 頂點(diǎn)shader，vertexShader是函數(shù)名
id<MTLFunction> fragmentFunction = [defaultLibrary newFunctionWithName:@"samplingShader"]; // 片元shader，samplingShader是函數(shù)名
MTLRenderPipelineDescriptor *pipelineStateDescriptor = [[MTLRenderPipelineDescriptor alloc] init];
pipelineStateDescriptor.vertexFunction = vertexFunction;
pipelineStateDescriptor.fragmentFunction = fragmentFunction;
pipelineStateDescriptor.colorAttachments[0].pixelFormat = self.mtkView.colorPixelFormat;
self.pipelineState = [self.mtkView.device newRenderPipelineStateWithDescriptor:pipelineStateDescriptor
error:NULL]; // 創(chuàng)建圖形渲染管道，耗性能操作不宜頻繁調(diào)用
self.commandQueue = [self.mtkView.device newCommandQueue]; // CommandQueue是渲染指令隊(duì)列，保證渲染指令有序地提交到GPU
}
MTLRenderPipelineDescriptor是渲染管道的描述符，可以設(shè)置頂點(diǎn)處理函數(shù)、片元處理函數(shù)、輸出顏色格式等；
[device newCommandQueue]創(chuàng)建的是指令隊(duì)列，用來存放渲染的指令；
3、設(shè)置頂點(diǎn)數(shù)據(jù)
- (void)setupVertex {
static const LYVertex quadVertices[] =
{ // 頂點(diǎn)坐標(biāo)，分別是x、y、z、w； 紋理坐標(biāo)，x、y；
{ { 0.5, -0.5, 0.0, 1.0 }, { 1.f, 1.f } },
{ { -0.5, -0.5, 0.0, 1.0 }, { 0.f, 1.f } },
{ { -0.5, 0.5, 0.0, 1.0 }, { 0.f, 0.f } },
{ { 0.5, -0.5, 0.0, 1.0 }, { 1.f, 1.f } },
{ { -0.5, 0.5, 0.0, 1.0 }, { 0.f, 0.f } },
{ { 0.5, 0.5, 0.0, 1.0 }, { 1.f, 0.f } },
};
self.vertices = [self.mtkView.device newBufferWithBytes:quadVertices
length:sizeof(quadVertices)
options:MTLResourceStorageModeShared]; // 創(chuàng)建頂點(diǎn)緩存
self.numVertices = sizeof(quadVertices) / sizeof(LYVertex); // 頂點(diǎn)個(gè)數(shù)
}
頂點(diǎn)數(shù)據(jù)里包括頂點(diǎn)坐標(biāo)，metal的世界坐標(biāo)系與OpenGL ES一致，范圍是[-1, 1]，故而點(diǎn)(0, 0)是在屏幕的正中間；
頂點(diǎn)數(shù)據(jù)里還包括紋理坐標(biāo)，紋理坐標(biāo)系的取值范圍是[0, 1]，原點(diǎn)是在左下角；
[device newBufferWithBytes:quadVertices..]創(chuàng)建的是頂點(diǎn)緩存，類似OpenGL ES的glGenBuffer創(chuàng)建的緩存。
4、設(shè)置紋理數(shù)據(jù)
- (void)setupTexture {
UIImage *image = [UIImage imageNamed:@"abc"];
// 紋理描述符
MTLTextureDescriptor *textureDescriptor = [[MTLTextureDescriptor alloc] init];
textureDescriptor.pixelFormat = MTLPixelFormatRGBA8Unorm;
textureDescriptor.width = image.size.width;
textureDescriptor.height = image.size.height;
self.texture = [self.mtkView.device newTextureWithDescriptor:textureDescriptor]; // 創(chuàng)建紋理
MTLRegion region = {{ 0, 0, 0 }, {image.size.width, image.size.height, 1}}; // 紋理上傳的范圍
Byte *imageBytes = [self loadImage:image];
if (imageBytes) { // UIImage的數(shù)據(jù)需要轉(zhuǎn)成二進(jìn)制才能上傳，且不用jpg、png的NSData
[self.texture replaceRegion:region
mipmapLevel:0
withBytes:imageBytes
bytesPerRow:4 * image.size.width];
free(imageBytes); // 需要釋放資源
imageBytes = NULL;
}
}
MTLTextureDescriptor是紋理數(shù)據(jù)的描述符，可以設(shè)置像素顏色格式、圖像寬高等，用于創(chuàng)建紋理；
紋理創(chuàng)建完畢后，需要用-replaceRegion: mipmapLevel:withBytes:bytesPerRow:接口上傳紋理數(shù)據(jù)；
MTLRegion類似UIKit的frame，用于表明紋理數(shù)據(jù)的存放區(qū)域；
5、具體渲染過程
- (void)drawInMTKView:(MTKView *)view {
// 每次渲染都要單獨(dú)創(chuàng)建一個(gè)CommandBuffer
id<MTLCommandBuffer> commandBuffer = [self.commandQueue commandBuffer];
MTLRenderPassDescriptor *renderPassDescriptor = view.currentRenderPassDescriptor;
// MTLRenderPassDescriptor描述一系列attachments的值，類似GL的FrameBuffer；同時(shí)也用來創(chuàng)建MTLRenderCommandEncoder
if(renderPassDescriptor != nil)
{
renderPassDescriptor.colorAttachments[0].clearColor = MTLClearColorMake(0.0, 0.5, 0.5, 1.0f); // 設(shè)置默認(rèn)顏色
id<MTLRenderCommandEncoder> renderEncoder = [commandBuffer renderCommandEncoderWithDescriptor:renderPassDescriptor]; //編碼繪制指令的Encoder
[renderEncoder setViewport:(MTLViewport){0.0, 0.0, self.viewportSize.x, self.viewportSize.y, -1.0, 1.0 }]; // 設(shè)置顯示區(qū)域
[renderEncoder setRenderPipelineState:self.pipelineState]; // 設(shè)置渲染管道，以保證頂點(diǎn)和片元兩個(gè)shader會(huì)被調(diào)用
[renderEncoder setVertexBuffer:self.vertices
offset:0
atIndex:0]; // 設(shè)置頂點(diǎn)緩存
[renderEncoder setFragmentTexture:self.texture
atIndex:0]; // 設(shè)置紋理
[renderEncoder drawPrimitives:MTLPrimitiveTypeTriangle
vertexStart:0
vertexCount:self.numVertices]; // 繪制
[renderEncoder endEncoding]; // 結(jié)束
[commandBuffer presentDrawable:view.currentDrawable]; // 顯示
}
[commandBuffer commit]; // 提交；
}
drawInMTKView:方法是MetalKit每幀的渲染回調(diào)，可以在內(nèi)部做渲染的處理；
繪制的第一步是從commandQueue里面創(chuàng)建commandBuffer，commandQueue是整個(gè)app繪制的隊(duì)列，而commandBuffer存放每次渲染的指令，commandQueue內(nèi)部存在著多個(gè)commandBuffer。
整個(gè)繪制的過程與OpenGL ES一致，先設(shè)置窗口大小，然后設(shè)置頂點(diǎn)數(shù)據(jù)和紋理，最后繪制兩個(gè)三角形。
CommandQueue、CommandBuffer和CommandEncoder的關(guān)系如下：
6、Shader處理
typedef struct
{
float4 clipSpacePosition [[position]]; // position的修飾符表示這個(gè)是頂點(diǎn)
float2 textureCoordinate; // 紋理坐標(biāo)，會(huì)做插值處理
} RasterizerData;
vertex RasterizerData // 返回給片元著色器的結(jié)構(gòu)體
vertexShader(uint vertexID [[ vertex_id ]], // vertex_id是頂點(diǎn)shader每次處理的index，用于定位當(dāng)前的頂點(diǎn)
constant LYVertex *vertexArray [[ buffer(0) ]]) { // buffer表明是緩存數(shù)據(jù)，0是索引
RasterizerData out;
out.clipSpacePosition = vertexArray[vertexID].position;
out.textureCoordinate = vertexArray[vertexID].textureCoordinate;
return out;
}
fragment float4
samplingShader(RasterizerData input [[stage_in]], // stage_in表示這個(gè)數(shù)據(jù)來自光柵化。（光柵化是頂點(diǎn)處理之后的步驟，業(yè)務(wù)層無(wú)法修改）
texture2d<half> colorTexture [[ texture(0) ]]) // texture表明是紋理數(shù)據(jù)，0是索引
{
constexpr sampler textureSampler (mag_filter::linear,
min_filter::linear); // sampler是采樣器
half4 colorSample = colorTexture.sample(textureSampler, input.textureCoordinate); // 得到紋理對(duì)應(yīng)位置的顏色
return float4(colorSample);
}
Shader如上。與OpenGL ES的shader相比，最明顯是輸入的參數(shù)可以用結(jié)構(gòu)體，返回的參數(shù)也可以用結(jié)構(gòu)體；
LYVertex是shader和Objective-C公用的結(jié)構(gòu)體，RasterizerData是頂點(diǎn)Shader返回再傳給片元Shader的結(jié)構(gòu)體；
Shader的語(yǔ)法與C++類似，參數(shù)名前面的是類型，后面的[[ ]]是描述符。
總結(jié)
Metal和OpenGL一樣，需要有一定的圖形學(xué)基礎(chǔ)，才能理解具體的含義。
本文為了降低上手的門檻，簡(jiǎn)化掉一些邏輯，增加很多注釋，同時(shí)保留最核心的幾個(gè)步驟以便理解。
這里可以下載demo代碼。
