通过渲染下图这样一个三角形, 来学习以下几个方面的内容:
1.理解 Metal 应⽤程序
2.如何向 GPU 发送基本的渲染命令
3.如何获取 Metal 设备
4.如何配置 MetalKit 视图
5.如何创建并执行 GPU 指令
6.显示渲染的内容
案例效果图
三角形效果图
一. OC 版
1. 工具类文件 ( GFShaderTypes.h )
#ifndef GFShaderTypes_h
#define GFShaderTypes_h
/// 缓存区索引值 共享与 shader 和 C 代码 为了确保Metal Shader缓存区索引能够匹配 Metal API Buffer 设置的集合调用
typedef enum GFVertexInputIndex {
/// 顶点
GFVertexInputIndexVertices = 0,
/// 视图大小
GFVertexInputIndexViewportSize = 1
} GFVertexInputIndex;
/// 结构体: 顶点/颜色值
typedef struct {
// 像素空间的位置
// 像素中心点(100,100)
vector_float4 position;
// RGBA颜色
vector_float4 color;
} GFVertex;
#endif /* GFShaderTypes_h */
2. Metal 文件 - 着色器函数 ( GFShaders.metal )
#include <metal_stdlib>
//使用命名空间 Metal
using namespace metal;
// 导入Metal shader 代码和执行Metal API命令的C代码之间共享的头
#import "GFShaderTypes.h"
// 顶点着色器输出和片段着色器输入
typedef struct {
//处理空间的顶点信息
float4 clipSpacePosition [[position]];
// 颜色
float4 color;
} RasterizerData;
// MARK: - 顶点着色函数 -
vertex RasterizerData vertexShader(uint vertexID [[vertex_id]],
constant GFVertex *vertexs [[buffer(GFVertexInputIndexVertices)]],
constant vector_uint2 *viewportSizePointer [[buffer(GFVertexInputIndexViewportSize)]])
{
/*
处理顶点数据:
1) 执行坐标系转换,将生成的顶点剪辑空间写入到返回值中.
2) 将顶点颜色值传递给返回值
*/
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.clipSpacePosition = vertexs[vertexID].position;
// 把我们输入的颜色直接赋值给输出颜色. 这个值将于构成三角形的顶点的其他颜色值插值,从而为我们片段着色器中的每个片段生成颜色值.
out.color = vertexs[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;
}
3. 独立渲染类 ( GFRender )
3.1 GFRender.h
//导入MetalKit工具包
@import MetalKit;
@interface GFRender : NSObject <MTKViewDelegate>
- (nonnull instancetype)initWithMetalKitView: (nonnull MTKView *)mtkView;
@end
3.2 GFRender.m
#import "GFRender.h"
//头 在C代码之间共享，这里执行Metal API命令，和.metal文件，这些文件使用这些类型作为着色器的输入。
#import "GFShaderTypes.h"
@implementation GFRender
{
// 我们用来渲染的设备(又名GPU)
id<MTLDevice> _device;
// 我们的渲染管道有顶点着色器和片元着色器 它们存储在.metal shader 文件中
id<MTLRenderPipelineState> _pipelineState;
// 命令队列,从命令缓存区获取
id<MTLCommandQueue> _commandQueue;
// 当前视图大小,这样我们才可以在渲染通道使用这个视图
vector_uint2 _viewportSize;
}
// 初始化
- (instancetype)initWithMetalKitView:(MTKView *)mtkView {
self = [super init];
if (self) {
NSError *error = NULL;
// 1.获取GPU 设备
_device = mtkView.device;
// 2.在项目中加载所有的(.metal)着色器文件
// 从bundle中获取.metal文件
id<MTLLibrary> defaultLibrary = [_device newDefaultLibrary];
// 从库中加载 顶点函数
id<MTLFunction> vertexFunction = [defaultLibrary newFunctionWithName: @"vertexShader"];
//从库中加载 片元函数
id<MTLFunction> fragmentFunction = [defaultLibrary newFunctionWithName: @"fragmentShader"];
// 3.配置用于创建管道状态的管道
MTLRenderPipelineDescriptor *pipelineDescriptor = [[MTLRenderPipelineDescriptor alloc] init];
// 管道名称
pipelineDescriptor.label = @"Simple Pipeline";
// 可编程函数,用于处理渲染过程中的各个顶点
pipelineDescriptor.vertexFunction = vertexFunction;
// 可编程函数,用于处理渲染过程中各个片段/片元
pipelineDescriptor.fragmentFunction = fragmentFunction;
// 一组存储颜色数据的组件
pipelineDescriptor.colorAttachments[0].pixelFormat = mtkView.colorPixelFormat;
// 4.同步创建并返回渲染管线状态对象
_pipelineState = [_device newRenderPipelineStateWithDescriptor:pipelineDescriptor error: &error];
if (!_pipelineState) {
//如果我们没有正确设置管道描述符，则管道状态创建可能失败
NSLog(@"Failed to created pipeline state, error %@", error);
return nil;
}
// 5.创建命令队列
_commandQueue = [_device newCommandQueue];
}
return self;
}
// MARK: -- MTKViewDelegate --
//每当视图改变方向或调整大小时调用
- (void)mtkView:(MTKView *)view drawableSizeWillChange:(CGSize)size {
// 二维向量: 此处 x 表示 width, y 表示 height
_viewportSize.x = size.width;
_viewportSize.y = size.height;
}
//每当视图需要渲染帧时调用
- (void)drawInMTKView:(MTKView *)view {
view.clearColor = MTLClearColorMake(0.8, 0.8, 0.8, 1.0);
// 1.顶点数据/颜色数据
static const GFVertex triangleVertices[] = {
//顶点, RGBA 颜色值
{ { 0.5, -0.25, 0.0, 1.0 }, { 1, 0, 0, 1 } },
{ { -0.5, -0.25, 0.0, 1.0 }, { 0, 1, 0, 1 } },
{ { -0.0, 0.25, 0.0, 1.0 }, { 0, 0, 1, 1 } },
};
// 2.为当前渲染的每个渲染传递创建一个新的命令缓冲区
id<MTLCommandBuffer> commandBuffer = [_commandQueue commandBuffer];
commandBuffer.label = @"MyCommand";
// 3.
// MTLRenderPassDescriptor:一组渲染目标，用作渲染通道生成的像素的输出目标。
MTLRenderPassDescriptor *renderPassDescriptor = view.currentRenderPassDescriptor;
//判断渲染目标是否为空
if (renderPassDescriptor != nil) {
id<MTLRenderCommandEncoder> renderEncoder = [commandBuffer renderCommandEncoderWithDescriptor:renderPassDescriptor];
// 渲染器名称
renderEncoder.label = @"MyRenderEncoder";
// 5.设置我们绘制的可绘制区域
/*
typedef struct {
double originX, originY, width, height, znear, zfar;
} MTLViewport;
*/
//视口指定Metal渲染内容的drawable区域。 视口是具有x和y偏移，宽度和高度以及近和远平面的3D区域
//为管道分配自定义视口需要通过调用setViewport：方法将MTLViewport结构编码为渲染命令编码器。 如果未指定视口，Metal会设置一个默认视口，其大小与用于创建渲染命令编码器的drawable相同。
MTLViewport viewport = {
0, 0, _viewportSize.x, _viewportSize.y, -1.0, 1.0
};
[renderEncoder setViewport:viewport];
// 6.设置当前渲染管道状态对象
[renderEncoder setRenderPipelineState:_pipelineState];
// 7.从应用程序OC 代码 中发送数据给Metal 顶点着色器 函数
// 顶点数据+颜色数据
// 1) 指向要传递给着色器的内存的指针
// 2) 我们想要传递的数据的内存大小
// 3)一个整数索引，它对应于我们的“vertexShader”函数中的缓冲区属性限定符的索引。
[renderEncoder setVertexBytes: triangleVertices length:sizeof(triangleVertices) atIndex:GFVertexInputIndexVertices];
//viewPortSize 数据
//1) 发送到顶点着色函数中,视图大小
//2) 视图大小内存空间大小
//3) 对应的索引
[renderEncoder setVertexBytes:&_viewportSize length:sizeof(_viewportSize) atIndex:GFVertexInputIndexViewportSize];
// 8.画出三角形的3个顶点
// @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:3];
//9.表示已该编码器生成的命令都已完成,并且从NTLCommandBuffer中分离
[renderEncoder endEncoding];
//10.一旦框架缓冲区完成，使用当前可绘制的进度表
[commandBuffer presentDrawable:view.currentDrawable];
}
[commandBuffer commit];
}
@end
4. Controller ( ViewController.m )
#import "ViewController.h"
#import "GFRender.h"
@interface ViewController ()
{
MTKView * _view;
GFRender * _render;
}
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
_view = (MTKView *)self.view;
_view.device = MTLCreateSystemDefaultDevice();
if (!_view.device) {
NSLog(@"Metal is not supported on this device");
return;
}
_render = [[GFRender alloc] initWithMetalKitView:_view];
if (!_render) {
NSLog(@"Renderer failed initialization");
return;
}
_view.delegate = _render;
[_render mtkView:_view drawableSizeWillChange:_view.drawableSize];
}
@end
controller 的 view 在 stroyboard 中改成了 MTKView 类型,
二. Swift 版
1. Metal 文件 - 着色函数 ( GFShaders.metal )
#include <metal_stdlib>
//使用命名空间 Metal
using namespace metal;
typedef enum GFVertexInputIndex {
/// 顶点
GFVertexInputIndexVertices = 0,
/// 视图大小
GFVertexInputIndexViewportSize = 1
} GFVertexInputIndex;
typedef struct {
//处理空间的顶点信息
vector_float4 position;
// 颜色
vector_float4 color;
} Vertex;
// 顶点着色器输出和片段着色器输入
typedef struct {
//处理空间的顶点信息
float4 clipSpacePosition [[position]];
// 颜色
float4 color;
} RasterizerData;
// MARK: - 顶点着色函数 -
vertex RasterizerData vertexShader(uint vertexID [[vertex_id]],
constant Vertex *vertexs [[buffer(GFVertexInputIndexVertices)]],
constant vector_uint2 *viewportSizePointer [[buffer(GFVertexInputIndexViewportSize)]])
{
/*
处理顶点数据:
1) 执行坐标系转换,将生成的顶点剪辑空间写入到返回值中.
2) 将顶点颜色值传递给返回值
*/
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.clipSpacePosition = vertexs[vertexID].position;
// 把我们输入的颜色直接赋值给输出颜色. 这个值将于构成三角形的顶点的其他颜色值插值,从而为我们片段着色器中的每个片段生成颜色值.
out.color = vertexs[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. 渲染类 ( GFRender.swift )
import UIKit
import MetalKit
enum GFVertexInputIndex: Int {
case vertices = 0
case viewportSize = 1
}
struct Vertex {
var position: vector_float4
var color: vector_float4
}
class GFRender: NSObject {
private var device: MTLDevice?
private var pipelineState: MTLRenderPipelineState?
private var commandQueue: MTLCommandQueue?
private var viewportSize: vector_uint2 = .zero
init(_ mtkView: MTKView) {
super.init()
device = mtkView.device
let defaultLibrary = device?.makeDefaultLibrary()
let vertexFunction = defaultLibrary?.makeFunction(name: "vertexShader")
let fragmentFunction = defaultLibrary?.makeFunction(name: "fragmentShader")
let pipelineDescriptor = MTLRenderPipelineDescriptor()
pipelineDescriptor.label = "Simple Pipeline"
pipelineDescriptor.vertexFunction = vertexFunction
pipelineDescriptor.fragmentFunction = fragmentFunction
pipelineDescriptor.colorAttachments[0].pixelFormat = mtkView.colorPixelFormat
pipelineState = try? device?.makeRenderPipelineState(descriptor: pipelineDescriptor)
commandQueue = device?.makeCommandQueue()
}
}
extension GFRender: MTKViewDelegate {
func mtkView(_ view: MTKView, drawableSizeWillChange size: CGSize) {
viewportSize.x = uint(size.width)
viewportSize.y = uint(size.height)
}
func draw(in view: MTKView) {
// 背景色
view.clearColor = MTLClearColor(red: 0.8, green: 0.8, blue: 0.8, alpha: 1.0)
// 1.顶点数据/颜色数据
//顶点, RGBA 颜色值
let triangleVertices: [Vertex] = [
Vertex(position: vector_float4(0.5, -0.25, 0.0, 1.0), color: vector_float4(1, 0, 0, 1)),
Vertex(position: vector_float4(-0.5, -0.25, 0.0, 1.0), color: vector_float4(0, 1, 0, 1)),
Vertex(position: vector_float4(-0.0, 0.25, 0.0, 1.0), color: vector_float4(0, 0, 1, 1))
]
let commandBuffer = commandQueue?.makeCommandBuffer()
commandBuffer?.label = "MyCommand"
if let renderPassDescriptor = view.currentRenderPassDescriptor {
let renderEncoder = commandBuffer?.makeRenderCommandEncoder(descriptor: renderPassDescriptor)
renderEncoder?.label = "MyRenderEncoder"
let viewport = MTLViewport(originX: 0, originY: 0, width: Double(viewportSize.x), height: Double(viewportSize.y), znear: -1.0, zfar: 1.0)
renderEncoder?.setViewport(viewport)
if let state = pipelineState {
renderEncoder?.setRenderPipelineState(state)
}
let vertexLen = MemoryLayout<Vertex>.size * triangleVertices.count
renderEncoder?.setVertexBytes(triangleVertices, length: vertexLen, index: GFVertexInputIndex.vertices.rawValue)
let vpLen = MemoryLayout<vector_uint2>.size
renderEncoder?.setVertexBytes(&viewportSize, length: vpLen, index: GFVertexInputIndex.viewportSize.rawValue)
renderEncoder?.drawPrimitives(type: .triangle, vertexStart: 0, vertexCount: 3)
renderEncoder?.endEncoding()
if let drawable = view.currentDrawable {
commandBuffer?.present(drawable)
}
}
commandBuffer?.commit()
}
}
3. Controller
import UIKit
import MetalKit
class ViewController: UIViewController {
private lazy var mtkView: MTKView = {
let v = MTKView(frame: UIScreen.main.bounds)
v.device = MTLCreateSystemDefaultDevice()
return v
}()
private var render: GFRender?
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
view.addSubview(mtkView)
render = GFRender(mtkView)
mtkView.delegate = render
render?.mtkView(mtkView, drawableSizeWillChange: mtkView.drawableSize)
}
}
网友评论