版本記錄

前言

很多做視頻和圖像的，相信對這個框架都不是很陌生，它渲染高級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（一）
49. Metal框架詳細解析（四十九） —— 將項目從OpenGL轉化到Metal（二）

源碼

1. Swift

OpenGL源碼

首先看下工程組織結構

接著看一下sb文件

下面就是源碼了

1. Array+Helpers.swift

import Foundation

//
// MARK: - Array Helpers
//

/// Array extension to help with size/memory calculations when working with OpenGL.
extension Array {
  //
  // MARK: - Instance Methods
  //
  
  /// Returns the memory size/footprint (in bytes) of a given array.
  ///
  /// - Returns: Integer value representing the memory size the array.
  func size() -> Int {
    return count * MemoryLayout.size(ofValue: self[0])
  }
}

2. Vertex.swift

import GLKit

//
// MARK: - Vertex
//

/// Structure to hold a vertex's position and color data.
struct Vertex {
  /// Stores the X coordinate of a vertex.
  var x: GLfloat
  /// Stores the Y coordinate of a vertex.
  var y: GLfloat
  /// Stores the Z coordinate of a vertex.
  var z: GLfloat
  /// Stores the red color value of a vertex.
  var r: GLfloat
  /// Stores the green color value of a vertex.
  var g: GLfloat
  /// Stores the blue color value of a vertex.
  var b: GLfloat
  /// Stores the alpha value of a vertex.
  var a: GLfloat
}

3. ViewController.swift

import GLKit

final class ViewController: GLKViewController {
  var Vertices = [
    Vertex(x:  1, y: -1, z: 0, r: 1, g: 0, b: 0, a: 1),
    Vertex(x:  1, y:  1, z: 0, r: 0, g: 1, b: 0, a: 1),
    Vertex(x: -1, y:  1, z: 0, r: 0, g: 0, b: 1, a: 1),
    Vertex(x: -1, y: -1, z: 0, r: 0, g: 0, b: 0, a: 1),
    ]
  
  var Indices: [GLubyte] = [0, 1, 2, 2, 3, 0]
  
  private var context: EAGLContext?
  private var effect = GLKBaseEffect()
  private var rotation: Float = 0.0
  private var ebo = GLuint()
  private var vbo = GLuint()
  private var vao = GLuint()
  
  deinit {
    tearDownGL()
  }
  
  private func setupGL() {
    context = EAGLContext(api: .openGLES3)
    EAGLContext.setCurrent(context)
    
    if let view = view as? GLKView, let context = context {
      view.context = context
      delegate = self
    }
    
    // Helper variables to identify the position and color attributes for OpenGL calls.
    let vertexAttribColor = GLuint(GLKVertexAttrib.color.rawValue)
    let vertexAttribPosition = GLuint(GLKVertexAttrib.position.rawValue)
    
    // The size, in memory, of a Vertex structure.
    let vertexSize = MemoryLayout<Vertex>.stride
    let colorOffset = MemoryLayout<GLfloat>.stride * 3
    let colorOffsetPointer = UnsafeRawPointer(bitPattern: colorOffset)
    
    // VAO
    
    // Generate and bind a vertex array object.
    glGenVertexArraysOES(1, &vao)
    glBindVertexArrayOES(vao)
    
    // VBO
    glGenBuffers(1, &vbo)
    glBindBuffer(GLenum(GL_ARRAY_BUFFER), vbo)
    glBufferData(GLenum(GL_ARRAY_BUFFER), Vertices.size(), Vertices, GLenum(GL_STATIC_DRAW))
    glEnableVertexAttribArray(vertexAttribPosition)
    glVertexAttribPointer(vertexAttribPosition, 3, GLenum(GL_FLOAT), GLboolean(UInt8(GL_FALSE)), GLsizei(vertexSize), nil)
    
    // Enable the colors vertex attribute to then specify information about how the color of a vertex is stored.
    glEnableVertexAttribArray(vertexAttribColor)
    glVertexAttribPointer(vertexAttribColor, 4, GLenum(GL_FLOAT), GLboolean(UInt8(GL_FALSE)), GLsizei(vertexSize), colorOffsetPointer)
    
    // EBO
    glGenBuffers(1, &ebo)
    glBindBuffer(GLenum(GL_ELEMENT_ARRAY_BUFFER), ebo)
    glBufferData(GLenum(GL_ELEMENT_ARRAY_BUFFER), Indices.size(), Indices, GLenum(GL_STATIC_DRAW))
    glBindBuffer(GLenum(GL_ARRAY_BUFFER), 0)
    glBindVertexArrayOES(0)
  }
  
  /// Perform cleanup, and delete buffers and memory.
  private func tearDownGL() {
    EAGLContext.setCurrent(context)
    
    glDeleteBuffers(1, &vao)
    glDeleteBuffers(1, &vbo)
    glDeleteBuffers(1, &ebo)
    
    EAGLContext.setCurrent(nil)
    context = nil
  }
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    setupGL()
  }
}

extension ViewController: GLKViewControllerDelegate {
  func glkViewControllerUpdate(_ controller: GLKViewController) {
    let aspect = fabsf(Float(view.bounds.size.width) / Float(view.bounds.size.height))
    let projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(65.0), aspect, 4.0, 10.0)
    effect.transform.projectionMatrix = projectionMatrix
    
    var modelViewMatrix = GLKMatrix4MakeTranslation(0.0, 0.0, -6.0)
    rotation += 90 * Float(timeSinceLastUpdate)
    modelViewMatrix = GLKMatrix4Rotate(modelViewMatrix, GLKMathDegreesToRadians(rotation), 0, 0, 1)
    effect.transform.modelviewMatrix = modelViewMatrix
  }

  override func glkView(_ view: GLKView, drawIn rect: CGRect) {
    glClearColor(0.85, 0.85, 0.85, 1.0)
    glClear(GLbitfield(GL_COLOR_BUFFER_BIT))
    
    effect.prepareToDraw()
    glBindVertexArrayOES(vao)
    glDrawElements(GLenum(GL_TRIANGLES), GLsizei(Indices.count), GLenum(GL_UNSIGNED_BYTE), nil)
    glBindVertexArrayOES(0)
  }
}

下面看一下實現效果

Metal源碼

首先還是看下工程組織結構

接著看sb中的內容

下面就是源碼了

1. Array+Helpers.swift

import Foundation

// MARK: - Array Helpers

/// Array extension to help with size/memory calculations when working with OpenGL.
extension Array {
  // MARK: - Instance Methods
  
  /// Returns the memory size/footprint (in bytes) of a given array.
  ///
  /// - Returns: Integer value representing the memory size the array.
  func size() -> Int {
    return count * MemoryLayout.size(ofValue: self[0])
  }
}

2. Vertex.swift

import GLKit

//
// MARK: - Vertex
//

/// Structure to hold a vertex's position and color data.
struct Vertex {
  /// Stores the X coordinate of a vertex.
  var x: GLfloat
  /// Stores the Y coordinate of a vertex.
  var y: GLfloat
  /// Stores the Z coordinate of a vertex.
  var z: GLfloat
  /// Stores the red color value of a vertex.
  var r: GLfloat
  /// Stores the green color value of a vertex.
  var g: GLfloat
  /// Stores the blue color value of a vertex.
  var b: GLfloat
  /// Stores the alpha value of a vertex.
  var a: GLfloat
}

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

3. ViewController.swift

import GLKit
import MetalKit
final class ViewController: UIViewController {
  @IBOutlet weak var metalView: MTKView!

  private var vertexBuffer: MTLBuffer!
  private var indicesBuffer: MTLBuffer!
  private var metalDevice: MTLDevice!
  private var metalCommandQueue: MTLCommandQueue!
  private var pipelineState: MTLRenderPipelineState!

  var Vertices = [
    Vertex(x:  1, y: -1, z: 0, r: 1, g: 0, b: 0, a: 1),
    Vertex(x:  1, y:  1, z: 0, r: 0, g: 1, b: 0, a: 1),
    Vertex(x: -1, y:  1, z: 0, r: 0, g: 0, b: 1, a: 1),
    Vertex(x: -1, y: -1, z: 0, r: 0, g: 0, b: 0, a: 1),
    ]
  
  var Indices: [UInt32] = [0, 1, 2, 2, 3, 0]
  
  private var rotation: Float = 0.0
  private var ebo = GLuint()
  private var vbo = GLuint()
  private var vao = GLuint()

  private var sceneMatrices = SceneMatrices()
  private var uniformBuffer: MTLBuffer!
  private var lastUpdateDate = Date()
  
  private func setupMetal() {
    metalDevice = MTLCreateSystemDefaultDevice()  // 1
    metalCommandQueue = metalDevice.makeCommandQueue()  // 2
    metalView.device = metalDevice // 3
    metalView.delegate = self // 4

    let vertexBufferSize = Vertices.size()
    vertexBuffer = metalDevice.makeBuffer(bytes: &Vertices, length: vertexBufferSize, options: .storageModeShared)

    let indicesBufferSize = Indices.size()
    indicesBuffer = metalDevice.makeBuffer(bytes: &Indices, length: indicesBufferSize, options: .storageModeShared)

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

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

    pipelineState = try! metalDevice.makeRenderPipelineState(descriptor: pipelineStateDescriptor) // 3
  }
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    setupMetal()
  }
}

// MARK: - MTKView Delegate Extension
extension ViewController: MTKViewDelegate {
  // 1
  func mtkView(_ view: MTKView, drawableSizeWillChange size: CGSize) {
    let aspect = fabsf(Float(size.width) / Float(size.height))  // 1
    let projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(65.0), aspect, 4.0, 10.0)  // 2
    sceneMatrices.projectionMatrix = projectionMatrix  // 3
  }

  // 2
  func draw(in view: MTKView) {
    // 1
    guard let drawable = view.currentDrawable else {
      return
    }

    let renderPassDescriptor = MTLRenderPassDescriptor() // 2
    renderPassDescriptor.colorAttachments[0].texture = drawable.texture // 3
    renderPassDescriptor.colorAttachments[0].loadAction = .clear // 4
    renderPassDescriptor.colorAttachments[0].clearColor = MTLClearColor(red: 0.85, green: 0.85, blue: 0.85, alpha: 1.0) // 5

    // 6
    guard let commandBuffer = metalCommandQueue.makeCommandBuffer() else {
      return
    }

    // 7
    guard let renderEncoder = commandBuffer.makeRenderCommandEncoder(descriptor: renderPassDescriptor) else {
      return
    }

    // Frame drawing goes here
    renderEncoder.setVertexBuffer(vertexBuffer, offset: 0, index: 0)  // 1
    // Update logic
    var modelViewMatrix = GLKMatrix4MakeTranslation(0.0, 0.0, -6.0)
    let timeSinceLastUpdate = lastUpdateDate.timeIntervalSince(Date())
    rotation += 90 * Float(timeSinceLastUpdate) // 1
    modelViewMatrix = GLKMatrix4Rotate(modelViewMatrix, GLKMathDegreesToRadians(rotation), 0, 0, 1)  // 2
    sceneMatrices.modelviewMatrix = modelViewMatrix

    // Set uniform buffer
    let uniformBufferSize = MemoryLayout.size(ofValue: sceneMatrices)
    uniformBuffer = metalDevice.makeBuffer(bytes: &sceneMatrices, length: uniformBufferSize, options: .storageModeShared) // 2
    renderEncoder.setVertexBuffer(uniformBuffer, offset: 0, index: 1)  // 3

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

    renderEncoder.endEncoding() // 8
    commandBuffer.addCompletedHandler { _ in
      self.lastUpdateDate = Date()
    }
    commandBuffer.present(drawable) // 9
    commandBuffer.commit() // 10
  }
}

具體效果同OpenGL一樣，這里就不展示了。

后記

本篇主要講述了將項目從OpenGL轉化到Metal，感興趣的給個贊或者關注~~~