从零到一：在iOS上用MetalKit画个红色三角形（附完整Swift代码）-编程阁

从零到一：在iOS上用MetalKit画个红色三角形（附完整Swift代码）

当你第一次接触Metal时，可能会被那些陌生的术语吓到——渲染管线、命令缓冲区、着色器...但别担心，我们今天就从最基础的开始：在屏幕上画一个红色三角形。这个看似简单的任务，却能让你快速掌握Metal的核心工作流程。

Metal是苹果为iOS和macOS设备提供的高性能图形和计算API。与OpenGL不同，Metal提供了更底层的GPU访问，这意味着更高的性能，但也意味着开发者需要处理更多细节。幸运的是，MetalKit框架帮我们简化了很多工作，让我们可以专注于图形编程本身。

1. 项目设置与环境准备

1.1 创建Metal项目

首先在Xcode中创建一个新的iOS项目，选择"App"模板。确保勾选"Use SwiftUI"和"Use Swift"，这样我们可以使用最新的Swift语法。

在项目设置中，找到"Frameworks, Libraries, and Embedded Content"部分，点击"+"按钮添加以下框架：

Metal
MetalKit

这些框架将为我们提供Metal编程所需的所有类和函数。

1.2 准备Metal视图

在SwiftUI中，我们需要创建一个UIViewRepresentable来包装MTKView。创建一个新文件MetalView.swift，内容如下：

import SwiftUI import MetalKit struct MetalView: UIViewRepresentable { func makeUIView(context: Context) -> MTKView { let mtkView = MTKView() mtkView.device = MTLCreateSystemDefaultDevice() mtkView.clearColor = MTLClearColor(red: 1, green: 1, blue: 1, alpha: 1) mtkView.delegate = context.coordinator return mtkView } func updateUIView(_ uiView: MTKView, context: Context) {} func makeCoordinator() -> Coordinator { Coordinator(self) } class Coordinator: NSObject, MTKViewDelegate { var parent: MetalView var renderer: Renderer? init(_ parent: MetalView) { self.parent = parent super.init() if let mtkView = parent.makeUIView(context: parent.context) { renderer = Renderer(metalView: mtkView) } } func mtkView(_ view: MTKView, drawableSizeWillChange size: CGSize) {} func draw(in view: MTKView) { renderer?.draw() } } }

这段代码创建了一个可重用的Metal视图组件，我们可以在SwiftUI中像使用普通视图一样使用它。

2. 渲染器实现

2.1 创建Renderer类

渲染器是Metal绘制的核心，它负责管理渲染管线、命令缓冲区等资源。创建一个新文件Renderer.swift：

import MetalKit class Renderer: NSObject { let device: MTLDevice let commandQueue: MTLCommandQueue var pipelineState: MTLRenderPipelineState? var vertexBuffer: MTLBuffer? init(metalView: MTKView) { device = metalView.device! commandQueue = device.makeCommandQueue()! super.init() setupPipeline(metalView: metalView) createVertexBuffer() } func setupPipeline(metalView: MTKView) { // 着色器代码将在下一步添加 } func createVertexBuffer() { // 顶点数据将在下一步添加 } func draw() { // 绘制逻辑将在后续步骤实现 } }

2.2 编写着色器代码

Metal使用一种基于C++14的语言来编写着色器。创建一个新文件Shaders.metal：

#include <metal_stdlib> using namespace metal; struct Vertex { float4 position [[position]]; float4 color; }; vertex Vertex vertexShader(constant Vertex *vertices [[buffer(0)]], uint vertexId [[vertex_id]]) { return vertices[vertexId]; } fragment float4 fragmentShader(Vertex in [[stage_in]]) { return in.color; }

这个着色器非常简单：

顶点着色器接收顶点数据并原样返回
片元着色器返回顶点颜色

2.3 配置渲染管线

回到Renderer.swift，完善setupPipeline方法：

func setupPipeline(metalView: MTKView) { guard let library = device.makeDefaultLibrary() else { fatalError("无法加载默认库") } let vertexFunction = library.makeFunction(name: "vertexShader") let fragmentFunction = library.makeFunction(name: "fragmentShader") let pipelineDescriptor = MTLRenderPipelineDescriptor() pipelineDescriptor.vertexFunction = vertexFunction pipelineDescriptor.fragmentFunction = fragmentFunction pipelineDescriptor.colorAttachments[0].pixelFormat = metalView.colorPixelFormat do { pipelineState = try device.makeRenderPipelineState(descriptor: pipelineDescriptor) } catch { fatalError("创建渲染管线失败: \(error)") } }

2.4 准备顶点数据

在Renderer.swift中完善createVertexBuffer方法：

func createVertexBuffer() { let vertices: [Vertex] = [ Vertex(position: [0, 1, 0, 1], color: [1, 0, 0, 1]), // 顶部顶点，红色 Vertex(position: [-1, -1, 0, 1], color: [1, 0, 0, 1]), // 左下顶点，红色 Vertex(position: [1, -1, 0, 1], color: [1, 0, 0, 1]) // 右下顶点，红色 ] vertexBuffer = device.makeBuffer(bytes: vertices, length: vertices.count * MemoryLayout<Vertex>.stride, options: .storageModeShared) }

这里我们定义了三角形的三个顶点，每个顶点包含位置和颜色信息。位置坐标使用归一化设备坐标(NDC)，范围是[-1,1]。

3. 绘制三角形

3.1 实现绘制方法

在Renderer.swift中完善draw方法：

func draw() { guard let drawable = metalView?.currentDrawable, let pipelineState = pipelineState, let renderPassDescriptor = metalView?.currentRenderPassDescriptor else { return } let commandBuffer = commandQueue.makeCommandBuffer() let renderEncoder = commandBuffer?.makeRenderCommandEncoder(descriptor: renderPassDescriptor) renderEncoder?.setRenderPipelineState(pipelineState) renderEncoder?.setVertexBuffer(vertexBuffer, offset: 0, index: 0) renderEncoder?.drawPrimitives(type: .triangle, vertexStart: 0, vertexCount: 3) renderEncoder?.endEncoding() commandBuffer?.present(drawable) commandBuffer?.commit() }

3.2 整合到SwiftUI视图

最后，在ContentView中使用我们的MetalView：

import SwiftUI struct ContentView: View { var body: some View { MetalView() .frame(width: 300, height: 300) } }

4. 运行与调试

4.1 常见问题解决

如果运行后看不到红色三角形，可以检查以下几点：

设备支持：确保你的设备支持Metal。所有运行iOS 8+的苹果设备都支持Metal，但模拟器上的支持有限。
着色器编译错误：如果着色器代码有语法错误，Xcode会在编译时提示。检查控制台输出是否有相关错误。
顶点数据：确认顶点坐标在[-1,1]范围内，且三个点不共线。
颜色格式：确保片元着色器返回的颜色值在[0,1]范围内。

4.2 性能优化提示

虽然这个简单示例不需要太多优化，但养成良好的习惯很重要：

尽可能重用命令队列和管线状态对象
避免在绘制循环中创建新对象
对大块数据使用MTLBuffer而不是setVertexBytes

5. 扩展与深入学习

现在你已经成功绘制了一个红色三角形，可以尝试以下扩展：

添加动画：通过更新顶点位置实现旋转或移动效果
使用索引缓冲：减少重复顶点的内存占用
加载3D模型：从文件加载更复杂的几何形状
添加纹理：给三角形贴上图片而不是纯色

Metal的学习曲线可能比较陡峭，但掌握它后，你将能够充分利用苹果设备的图形性能。这个简单的三角形只是开始，Metal还能用于机器学习、图像处理等计算密集型任务。

从零到一：在iOS上用MetalKit画个红色三角形（附完整Swift代码）