渲染原理

• 本文是基于“Metal渲染繪制三角形”這樣頂點(diǎn)較少圖形基礎(chǔ)之上的延伸, 在渲染三角形的時(shí)候, 頂點(diǎn)數(shù)據(jù)的存儲使用的是數(shù)組，當(dāng)頂點(diǎn)傳遞時(shí)通過setVertexBytes(_:length:index:)方法，主要是由于繪制三角形時(shí)，所需的頂點(diǎn)只有三個(gè)，頂點(diǎn)數(shù)據(jù)很少，所以可以通過數(shù)組存儲，此時(shí)的數(shù)據(jù)是存儲在CPU中的;
• Metal三角形的渲染繪制請參考:Metal之渲染繪制三角形
• 對于小于4KB（即4096字節(jié)）的一次性數(shù)據(jù)，使用setVertexBytes(:length:index:)，如果數(shù)據(jù)長度超過4KB 或者需要多次使用頂點(diǎn)數(shù)據(jù)時(shí)，需要創(chuàng)建一個(gè)MTLBuffer對象，創(chuàng)建的buffer的目的就是為了將頂點(diǎn)數(shù)據(jù)存儲到頂點(diǎn)緩存區(qū)，GPU可以直接訪問該緩存區(qū)獲取頂點(diǎn)數(shù)據(jù)，并且buffer緩存的數(shù)據(jù)需要通過setVertexBuffer(:offset:index:)方法傳遞到頂點(diǎn)著色器。
• 當(dāng)圖形的頂點(diǎn)數(shù)據(jù)較多時(shí), 頂點(diǎn)的傳遞與存儲過程如下:
  ① Metal -> MTLBuffer -> 緩存區(qū)(存儲非常多自定義數(shù)據(jù)，GPU直接訪問 -> 顯存) -> 存儲頂點(diǎn)數(shù)據(jù);
  ② 創(chuàng)建的buffer的目的就是為了將頂點(diǎn)數(shù)據(jù)存儲到頂點(diǎn)緩存區(qū)，GPU可以直接訪問該緩存區(qū)獲取頂點(diǎn)數(shù)據(jù)，并且buffer緩存的數(shù)據(jù)需要通過 setVertexBuffer(_:offset:index:)方法傳遞到頂點(diǎn)著色器。

渲染流程

一、Metal文件

metal文件中，在頂點(diǎn)著色函數(shù)需要對頂點(diǎn)坐標(biāo)進(jìn)行歸一化處理，因?yàn)轫旤c(diǎn)數(shù)據(jù)初始化時(shí)使用的是物體坐標(biāo)。頂點(diǎn)坐標(biāo)的歸一化主要有以下步驟：

• 定義頂點(diǎn)著色器輸出
• 初始化輸出剪輯空間位置
• 獲取當(dāng)前頂點(diǎn)坐標(biāo)的xy：主要是因?yàn)槔L制的圖形是2D的，其z都為0
• 將傳入的視圖大小轉(zhuǎn)換為vector_float2二維向量類型
• 頂點(diǎn)坐標(biāo)歸一化：可以通過一行代碼同時(shí)分隔兩個(gè)通道x和y，并執(zhí)行除法，然后將結(jié)果放入輸出的x和y通道中，即從像素空間位置轉(zhuǎn)換為裁剪空間位置

#include <metal_stdlib> // 使用命名空間 Metal using namespace metal;// 導(dǎo)入Metal shader代碼和執(zhí)行Metal API命令的C代碼之間共享的頭 #import "YDWShaderTypes.h"// 頂點(diǎn)著色器輸出和片段著色器輸入 // 結(jié)構(gòu)體 typedef struct {// 處理空間的頂點(diǎn)信息float4 clipSpacePosition [[position]];// 顏色float4 color;} RasterizerData;// 頂點(diǎn)著色函數(shù) vertex RasterizerData vertexShader(uint vertexID [[vertex_id]],constant CCVertex *vertices [[buffer(CCVertexInputIndexVertices)]],constant vector_uint2 *viewportSizePointer [[buffer(CCVertexInputIndexViewportSize)]]) {/*處理頂點(diǎn)數(shù)據(jù):1) 執(zhí)行坐標(biāo)系轉(zhuǎn)換,將生成的頂點(diǎn)剪輯空間寫入到返回值中2) 將頂點(diǎn)顏色值傳遞給返回值*/// 定義outRasterizerData out;// 初始化輸出剪輯空間位置out.clipSpacePosition = vector_float4(0.0, 0.0, 0.0, 1.0);// 索引到數(shù)組位置以獲得當(dāng)前頂點(diǎn), 位置是在像素維度中指定的float2 pixelSpacePosition = vertices[vertexID].position.xy;// 將vierportSizePointer 從verctor_uint2 轉(zhuǎn)換為vector_float2 類型vector_float2 viewportSize = vector_float2(*viewportSizePointer);// 每個(gè)頂點(diǎn)著色器的輸出位置在剪輯空間中(也稱為歸一化設(shè)備坐標(biāo)空間,NDC),剪輯空間中的(-1,-1)表示視口的左下角,而(1,1)表示視口的右上角.// 計(jì)算和寫入 XY值到我們的剪輯空間的位置.為了從像素空間中的位置轉(zhuǎn)換到剪輯空間的位置,我們將像素坐標(biāo)除以視口的大小的一半.out.clipSpacePosition.xy = pixelSpacePosition / (viewportSize / 2.0);// 把輸入的顏色直接賦值給輸出顏色. 這個(gè)值將于構(gòu)成三角形的頂點(diǎn)的其他顏色值插值,從而為我們片段著色器中的每個(gè)片段生成顏色值.out.color = vertices[vertexID].color;// 完成, 將結(jié)構(gòu)體傳遞到管道中下一個(gè)階段return out; }//當(dāng)頂點(diǎn)函數(shù)執(zhí)行3次,三角形的每個(gè)頂點(diǎn)執(zhí)行一次后,則執(zhí)行管道中的下一個(gè)階段.柵格化/光柵化. // 片元函數(shù) // [[stage_in]],片元著色函數(shù)使用的單個(gè)片元輸入數(shù)據(jù)是由頂點(diǎn)著色函數(shù)輸出.然后經(jīng)過光柵化生成的.單個(gè)片元輸入函數(shù)數(shù)據(jù)可以使用"[[stage_in]]"屬性修飾符. // 一個(gè)頂點(diǎn)著色函數(shù)可以讀取單個(gè)頂點(diǎn)的輸入數(shù)據(jù),這些輸入數(shù)據(jù)存儲于參數(shù)傳遞的緩存中,使用頂點(diǎn)和實(shí)例ID在這些緩存中尋址.讀取到單個(gè)頂點(diǎn)的數(shù)據(jù).另外,單個(gè)頂點(diǎn)輸入數(shù)據(jù)也可以通過使用"[[stage_in]]"屬性修飾符的產(chǎn)生傳遞給頂點(diǎn)著色函數(shù). // 被stage_in 修飾的結(jié)構(gòu)體的成員不能是如下這些.Packed vectors 緊密填充類型向量,matrices 矩陣,structs 結(jié)構(gòu)體,references or pointers to type 某類型的引用或指針. arrays,vectors,matrices 標(biāo)量,向量,矩陣數(shù)組. fragment float4 fragmentShader(RasterizerData in [[stage_in]]) {// 返回輸入的片元顏色return in.color; }

二、 initWithMetalKitView

主要需要加載metal文件來獲取頂點(diǎn)數(shù)據(jù)

• 獲取GPU設(shè)備device: 通過視圖控制器中初始化render對象時(shí)傳入的MTKView對象view，利用view來獲取GPU的使用權(quán)限

_device = mtkView.device;

• 設(shè)置繪制紋理的像素格式

mtkView.colorPixelFormat = MTLPixelFormatBGRA8Unorm_sRGB;

• 從項(xiàng)目中加載所以的.metal著色器文件

// 從項(xiàng)目中加載所以的.metal著色器文件id<MTLLibrary> defaultLibrary = [_device newDefaultLibrary];// 從庫中加載頂點(diǎn)函數(shù)id<MTLFunction> vertexFunction = [defaultLibrary newFunctionWithName:@"vertexShader"];// 從庫中加載片元函數(shù)id<MTLFunction> fragmentFunction = [defaultLibrary newFunctionWithName:@"fragmentShader"];

• 配置用于創(chuàng)建管道狀態(tài)的管道描述符

// 配置用于創(chuàng)建管道狀態(tài)的管道MTLRenderPipelineDescriptor *pipelineStateDescriptor = [[MTLRenderPipelineDescriptor alloc] init];// 管道名稱pipelineStateDescriptor.label = @"Simple Pipeline";// 可編程函數(shù),用于處理渲染過程中的各個(gè)頂點(diǎn)pipelineStateDescriptor.vertexFunction = vertexFunction;// 可編程函數(shù),用于處理渲染過程總的各個(gè)片段/片元pipelineStateDescriptor.fragmentFunction = fragmentFunction;// 設(shè)置管道中存儲顏色數(shù)據(jù)的組件格式pipelineStateDescriptor.colorAttachments[0].pixelFormat = mtkView.colorPixelFormat;

• 同步創(chuàng)建并返回渲染管線對象

// 同步創(chuàng)建并返回渲染管線對象NSError *error = NULL;_pipelineState = [_device newRenderPipelineStateWithDescriptor:pipelineStateDescriptorerror:&error];

• 獲取頂點(diǎn)數(shù)據(jù)

// 獲取頂點(diǎn)數(shù)據(jù)NSData *vertexData = [YDWRenderer generateVertexData];// 創(chuàng)建一個(gè)vertex buffer,可以由GPU來讀取_vertexBuffer = [_device newBufferWithLength:vertexData.lengthoptions:MTLResourceStorageModeShared];/* 復(fù)制vertex data 到vertex buffer 通過緩存區(qū)的"content"內(nèi)容屬性訪問指針** memcpy(void *dst, const void *src, size_t n);* dst:目的地* src:源內(nèi)容* n: 長度*/memcpy(_vertexBuffer.contents, vertexData.bytes, vertexData.length);// 計(jì)算頂點(diǎn)個(gè)數(shù) = 頂點(diǎn)數(shù)據(jù)長度 / 單個(gè)頂點(diǎn)大小_numVertices = vertexData.length / sizeof(CCVertex); // 頂點(diǎn)數(shù)據(jù) + (nonnull NSData *)generateVertexData {// 正方形 = 三角形+三角形const CCVertex 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 } },};// 行/列 數(shù)量const NSUInteger NUM_COLUMNS = 25;const NSUInteger NUM_ROWS = 15;// 頂點(diǎn)個(gè)數(shù)const NSUInteger NUM_VERTICES_PER_QUAD = sizeof(quadVertices) / sizeof(CCVertex);// 四邊形間距const float QUAD_SPACING = 50.0;// 數(shù)據(jù)大小 = 單個(gè)四邊形大小 * 行 * 列NSUInteger dataSize = sizeof(quadVertices) * NUM_COLUMNS * NUM_ROWS;// 開辟空間NSMutableData *vertexData = [[NSMutableData alloc] initWithLength:dataSize];// 當(dāng)前四邊形CCVertex * currentQuad = vertexData.mutableBytes;// 獲取頂點(diǎn)坐標(biāo)(循環(huán)計(jì)算)// 行for(NSUInteger row = 0; row < NUM_ROWS; row++) {// 列for(NSUInteger column = 0; column < NUM_COLUMNS; column++) {// 左上角的位置vector_float2 upperLeftPosition;// 計(jì)算X,Y 位置.注意坐標(biāo)系基于2D笛卡爾坐標(biāo)系,中心點(diǎn)(0,0),所以會出現(xiàn)負(fù)數(shù)位置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;// 將quadVertices數(shù)據(jù)復(fù)制到currentQuadmemcpy(currentQuad, &quadVertices, sizeof(quadVertices));// 遍歷currentQuad中的數(shù)據(jù)for (NSUInteger vertexInQuad = 0; vertexInQuad < NUM_VERTICES_PER_QUAD; vertexInQuad++) {//修改vertexInQuad中的positioncurrentQuad[vertexInQuad].position += upperLeftPosition;}// 更新索引currentQuad += 6;}}return vertexData; }

• 創(chuàng)建命令隊(duì)列

// 創(chuàng)建命令隊(duì)列_commandQueue = [_device newCommandQueue];

三、drawInMTKView

主要加載頂點(diǎn)緩沖區(qū)數(shù)據(jù)

• 為當(dāng)前渲染的每個(gè)渲染傳遞創(chuàng)建一個(gè)新的命令緩沖區(qū)

// 為當(dāng)前渲染的每個(gè)渲染傳遞創(chuàng)建一個(gè)新的命令緩沖區(qū)id<MTLCommandBuffer> commandBuffer = [_commandQueue commandBuffer];// 指定緩存區(qū)名稱commandBuffer.label = @"MyCommand";

• 創(chuàng)建渲染描述符

MTLRenderPassDescriptor *renderPassDescriptor = view.currentRenderPassDescriptor;// 判斷渲染目標(biāo)是否為空if(renderPassDescriptor != nil) {// 創(chuàng)建渲染命令編碼器,這樣才可以渲染到somethingid<MTLRenderCommandEncoder> renderEncoder =[commandBuffer renderCommandEncoderWithDescriptor:renderPassDescriptor];// 渲染器名稱renderEncoder.label = @"MyRenderEncoder";}

• 設(shè)置我們繪制的可繪制區(qū)域

/*設(shè)置繪制的可繪制區(qū)域**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}];

• 設(shè)置渲染管道

// 設(shè)置渲染管道[renderEncoder setRenderPipelineState:_pipelineState];

• 為了從OC代碼找發(fā)送數(shù)據(jù)預(yù)加載的MTLBuffer 到Metal 頂點(diǎn)著色函數(shù)中

// 將_vertexBuffer 設(shè)置到頂點(diǎn)緩存區(qū)中[renderEncoder setVertexBuffer:_vertexBufferoffset:0atIndex:CCVertexInputIndexVertices];// 將 _viewportSize 設(shè)置到頂點(diǎn)緩存區(qū)綁定點(diǎn)設(shè)置數(shù)據(jù)[renderEncoder setVertexBytes:&_viewportSizelength:sizeof(_viewportSize)atIndex:CCVertexInputIndexViewportSize];

• 開始繪圖

[renderEncoder drawPrimitives:MTLPrimitiveTypeTrianglevertexStart:0vertexCount:_numVertices];

• 結(jié)束編碼，表示已該編碼器生成的命令都已完成,并且從NTLCommandBuffer中分離

[renderEncoder endEncoding];

• 一旦框架緩沖區(qū)完成，使用當(dāng)前可繪制的進(jìn)度表

[commandBuffer presentDrawable:view.currentDrawable];

• 完成渲染并將命令緩沖區(qū)推送到GPU

[commandBuffer commit];

效果展示

完整示例

Metal之MTLBuffer批量加載頂點(diǎn)數(shù)量較多的圖形渲染

總結(jié)

以上是生活随笔為你收集整理的Metal之MTLBuffer批量加载顶点数量较多的图形渲染的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。