IOS

Metal框架详细解析（四十九） —— 将项目从OpenGL转化

2019-01-18  本文已影响72人  刀客传奇

版本记录

版本号 时间
V1.0 2019.01.18 星期五

前言

很多做视频和图像的，相信对这个框架都不是很陌生，它渲染高级3D图形，并使用GPU执行数据并行计算。接下来的几篇我们就详细的解析这个框架。感兴趣的看下面几篇文章。
1. Metal框架详细解析（一）—— 基本概览
2. Metal框架详细解析（二） —— 器件和命令（一）
3. Metal框架详细解析（三） —— 渲染简单的2D三角形（一）
4. Metal框架详细解析（四） —— 关于GPU Family 4（一）
5. Metal框架详细解析（五） —— 关于GPU Family 4之关于Imageblocks（二）
6. Metal框架详细解析（六） —— 关于GPU Family 4之关于Tile Shading（三）
7. Metal框架详细解析（七） —— 关于GPU Family 4之关于光栅顺序组（四）
8. Metal框架详细解析（八） —— 关于GPU Family 4之关于增强的MSAA和Imageblock采样覆盖控制（五）
9. Metal框架详细解析（九） —— 关于GPU Family 4之关于线程组共享（六）
10. Metal框架详细解析（十） —— 基本组件（一）
11. Metal框架详细解析（十一） —— 基本组件之器件选择 - 图形渲染的器件选择（二）
12. Metal框架详细解析（十二） —— 基本组件之器件选择 - 计算处理的设备选择（三）
13. Metal框架详细解析（十三） —— 计算处理（一）
14. Metal框架详细解析（十四） —— 计算处理之你好，计算（二）
15. Metal框架详细解析（十五） —— 计算处理之关于线程和线程组（三）
16. Metal框架详细解析（十六） —— 计算处理之计算线程组和网格大小（四）
17. Metal框架详细解析（十七） —— 工具、分析和调试（一）
18. Metal框架详细解析（十八） —— 工具、分析和调试之Metal GPU Capture（二）
19. Metal框架详细解析（十九） —— 工具、分析和调试之GPU活动监视器（三）
20. Metal框架详细解析（二十） —— 工具、分析和调试之关于Metal着色语言文件名扩展名、使用Metal的命令行工具构建库和标记Metal对象和命令（四）
21. Metal框架详细解析（二十一） —— 基本课程之基本缓冲区（一）
22. Metal框架详细解析（二十二） —— 基本课程之基本纹理（二）
23. Metal框架详细解析（二十三） —— 基本课程之CPU和GPU同步（三）
24. Metal框架详细解析（二十四） —— 基本课程之参数缓冲 - 基本参数缓冲（四）
25. Metal框架详细解析（二十五） —— 基本课程之参数缓冲 - 带有数组和资源堆的参数缓冲区（五）
26. Metal框架详细解析（二十六） —— 基本课程之参数缓冲 - 具有GPU编码的参数缓冲区（六）
27. Metal框架详细解析（二十七） —— 高级技术之图层选择的反射（一）
28. Metal框架详细解析（二十八） —— 高级技术之使用专用函数的LOD（一）
29. Metal框架详细解析（二十九） —— 高级技术之具有参数缓冲区的动态地形（一）
30. Metal框架详细解析（三十） —— 延迟照明（一）
31. Metal框架详细解析（三十一） —— 在视图中混合Metal和OpenGL渲染（一）
32. Metal框架详细解析（三十二） —— Metal渲染管道教程（一）
33. Metal框架详细解析（三十三） —— Metal渲染管道教程（二）
34. Metal框架详细解析（三十四） —— Hello Metal！ 一个简单的三角形的实现（一）
35. Metal框架详细解析（三十五） —— Hello Metal！ 一个简单的三角形的实现（二）
36. Metal框架详细解析（三十六） —— Metal编程指南之概览（一）
37. Metal框架详细解析（三十七） —— Metal编程指南之基本Metal概念（二）
38. Metal框架详细解析（三十八） —— Metal编程指南之命令组织和执行模型（三）
39. Metal框架详细解析（三十九） —— Metal编程指南之资源对象：缓冲区和纹理（四）
40. Metal框架详细解析（四十） —— Metal编程指南之函数和库（五）
41. Metal框架详细解析（四十一） —— Metal编程指南之图形渲染：渲染命令编码器之Part 1（六）
42. Metal框架详细解析（四十二） —— Metal编程指南之图形渲染：渲染命令编码器之Part 2（七）
43. Metal框架详细解析（四十三） —— Metal编程指南之数据并行计算处理：计算命令编码器（八）
44. Metal框架详细解析（四十四） —— Metal编程指南之缓冲和纹理操作：Blit命令编码器（九）
45. Metal框架详细解析（四十五） —— Metal编程指南之Metal工具（十）
46. Metal框架详细解析（四十六） —— Metal编程指南之Tessellation（十一）
47. Metal框架详细解析（四十七） —— Metal编程指南之资源堆（十二）
48. Metal框架详细解析（四十八） —— 将项目从OpenGL转化到Metal（一）

Adding Shaders

创建一个新文件。 单击File ▸ New ▸ File…，选择iOS ▸ Source ▸ Metal File。 点击下一步。 将其命名为Shaders.metal并将其保存在您想要的任何位置。

Metal使用C ++编写着色器。 在大多数情况下，它类似于用于OpenGL的GLSL。

将其添加到文件的底部：

struct VertexIn {
    packed_float3 position;
    packed_float4 color;
};

struct VertexOut {
    float4 computedPosition [[position]];
    float4 color;
};

您将使用这些结构作为顶点着色器的输入和输出数据。

1. Writing a Vertex Shader

顶点着色器是为您绘制的每个顶点运行的函数。

在结构下面，添加以下代码：

vertex VertexOut basic_vertex( // 1
  const device VertexIn* vertex_array [[ buffer(0) ]], // 2
  unsigned int vid [[ vertex_id ]]) {                  // 3
    // 4
    VertexIn v = vertex_array[vid];

    // 5
    VertexOut outVertex = VertexOut();
    outVertex.computedPosition = float4(v.position, 1.0);
    outVertex.color = v.color;
    return outVertex;
}

此时，顶点着色器的工作已完成。

2. Writing a Fragment Shader

顶点着色器完成后，片段着色器将针对每个可能的像素运行。

在顶点着色器下方，添加以下代码：

fragment float4 basic_fragment(VertexOut interpolated [[stage_in]]) { 
  return float4(interpolated.color);              
}

片段着色器接收顶点着色器的输出 - VertexOut。 然后，片段着色器返回当前片段的颜色。

3. Hooking up the Shaders to the Pipeline

着色器已就位，但您还没有将它们连接到您的管道上。 为此，请返回ViewController.swift，并将此属性添加到类中：

private var pipelineState: MTLRenderPipelineState!

此属性将包含着色器数据。

现在，找到setupMetal（）。 在方法的底部添加以下内容：

// 1
let defaultLibrary = metalDevice.makeDefaultLibrary()!
let fragmentProgram = defaultLibrary.makeFunction(name: "basic_fragment")
let vertexProgram = defaultLibrary.makeFunction(name: "basic_vertex")

// 2
let pipelineStateDescriptor = MTLRenderPipelineDescriptor()
pipelineStateDescriptor.vertexFunction = vertexProgram
pipelineStateDescriptor.fragmentFunction = fragmentProgram
pipelineStateDescriptor.colorAttachments[0].pixelFormat = .bgra8Unorm

// 3
pipelineState = try! metalDevice
  .makeRenderPipelineState(descriptor: pipelineStateDescriptor)

这就是代码的作用：

现在，管道状态已准备就绪。 是时候使用它了。 为此，在draw(in:)中，下面代码的前面：

renderEncoder.drawIndexedPrimitives(
  type: .triangle, 
  indexCount: Indices.count, 
  indexType: .uint32, 
  indexBuffer: indicesBuffer, 
  indexBufferOffset: 0)

添加

renderEncoder.setRenderPipelineState(pipelineState)

构建并运行，你会看到彩色的屏幕。

Matrices

为了操纵场景，您需要将投影和模型视图矩阵(projection and model-view matrices)传递给GPU。 投影矩阵允许您操纵场景的感知，使更近的物体看起来比更远的物体更大。 模型视图矩阵允许您操纵对象或整个场景的位置，旋转和缩放。

为了使用这些矩阵，您将创建一个新的结构。 打开Vertex.swift。 在文件的顶部，添加：

struct SceneMatrices {
    var projectionMatrix: GLKMatrix4 = GLKMatrix4Identity
    var modelviewMatrix: GLKMatrix4 = GLKMatrix4Identity
}

请注意，您仍将使用GLKMatrix4。 这一部分不使用GLKit，因此您可以将它用于Metal中的矩阵。

现在，打开ViewController.swift，并添加两个新属性：

private var sceneMatrices = SceneMatrices()
private var uniformBuffer: MTLBuffer!

到方法draw(in:)中，在下面之前

renderEncoder.setRenderPipelineState(pipelineState)

添加

// 1
let modelViewMatrix = GLKMatrix4MakeTranslation(0.0, 0.0, -6.0)
sceneMatrices.modelviewMatrix = modelViewMatrix

// 2
let uniformBufferSize = MemoryLayout.size(ofValue: sceneMatrices)
uniformBuffer = metalDevice.makeBuffer(
  bytes: &sceneMatrices, 
  length: uniformBufferSize, 
  options: .storageModeShared)

// 3
renderEncoder.setVertexBuffer(uniformBuffer, offset: 0, index: 1)

以下是上面代码的作用：

1. Projection Matrix

当你仍然在ViewController.swift中，在mtkView（_：drawableSizeWillChange :)中，添加以下内容：

let aspect = fabsf(Float(size.width) / Float(size.height))  
let projectionMatrix = GLKMatrix4MakePerspective(
  GLKMathDegreesToRadians(65.0), 
  aspect, 
  4.0, 
  10.0)
sceneMatrices.projectionMatrix = projectionMatrix

此代码基于视图的纵横比创建投影矩阵。 然后，它将它分配给场景的投影矩阵。

有了这个，您的方块现在看起来方形，而不是伸展到整个屏幕。

2. Matrices in Shaders

接下来，您需要在着色器中接收矩阵数据。 打开Shaders.metal。 在最顶层，添加一个新结构：

struct SceneMatrices {
    float4x4 projectionMatrix;
    float4x4 viewModelMatrix;
};

现在，用以下内容替换basic_vertex函数：

vertex VertexOut basic_vertex(
  const device VertexIn* vertex_array [[ buffer(0) ]],
  const device SceneMatrices& scene_matrices [[ buffer(1) ]], // 1
  unsigned int vid [[ vertex_id ]]) {
    // 2
    float4x4 viewModelMatrix = scene_matrices.viewModelMatrix;
    float4x4 projectionMatrix = scene_matrices.projectionMatrix;
    
    VertexIn v = vertex_array[vid];

    // 3
    VertexOut outVertex = VertexOut();
    outVertex
      .computedPosition = projectionMatrix * viewModelMatrix * float4(v.position, 1.0);
    outVertex.color = v.color;
    return outVertex;
}

下面就是代码做的事情：

构建并运行应用程序。 你应该看到这个：

这就是一个正方形了。

Making it Spin

在OpenGL实现中，GLViewController提供了lastUpdateDate，它将告诉您何时执行最后一次渲染。 在Metal中，你必须自己创建它。

首先，在ViewController中添加一个新属性：

private var lastUpdateDate = Date()

在方法draw(in: )里，下面之前：

commandBuffer.present(drawable)

添加下面代码

commandBuffer.addCompletedHandler { _ in
  self.lastUpdateDate = Date()
}

有了这个，当一帧绘制完成时，它会将lastUpdateDate更新为当前日期和时间。

现在，是时候旋转了！ 在draw（in :)中，替换：

let modelViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0, 0, -6.0)

使用下面的内容

var modelViewMatrix = GLKMatrix4MakeTranslation(0.0, 0.0, -6.0)
let timeSinceLastUpdate = lastUpdateDate.timeIntervalSince(Date()) 

// 1
rotation += 90 * Float(timeSinceLastUpdate)

// 2
modelViewMatrix = GLKMatrix4Rotate(
  modelViewMatrix, 
  GLKMathDegreesToRadians(rotation), 0, 0, 1)

这会将rotation属性增加一个与最后一次渲染和此渲染之间的时间成比例的量。 然后，它将围绕Z轴的旋转应用于模型视图矩阵。

构建并运行应用程序。 你会看到立方体旋转。 成功！

恭喜！ 你已经学到了很多关于Metal API的知识！ 现在，您了解了Metal中一些最重要的概念，例如着色器，设备，命令缓冲区和管道(shaders, devices, command buffers, and pipelines)，并且您对OpenGL和Metal之间的差异进行深入的了解。

更多信息，请务必查看Apple的这些优秀资源：

后记

本篇主要讲述了将项目从OpenGL转化到Metal，感兴趣的给个赞或者关注~~~

上一篇下一篇

猜你喜欢

热点阅读