版本記錄

前言

很多做視頻和圖像的，相信對這個框架都不是很陌生遭京，它渲染高級3D圖形胃惜，并使用GPU執(zhí)行數(shù)據(jù)并行計算。接下來的幾篇我們就詳細的解析這個框架哪雕。感興趣的看下面幾篇文章船殉。
1. Metal框架詳細解析（一）—— 基本概覽
2. Metal框架詳細解析（二） —— 器件和命令（一）
3. Metal框架詳細解析（三） —— 渲染簡單的2D三角形（一）
4. Metal框架詳細解析（四） —— 關(guān)于GPU Family 4（一）
5. Metal框架詳細解析（五） —— 關(guān)于GPU Family 4之關(guān)于Imageblocks（二）
6. Metal框架詳細解析（六） —— 關(guān)于GPU Family 4之關(guān)于Tile Shading（三）
7. Metal框架詳細解析（七） —— 關(guān)于GPU Family 4之關(guān)于光柵順序組（四）
8. Metal框架詳細解析（八） —— 關(guān)于GPU Family 4之關(guān)于增強的MSAA和Imageblock采樣覆蓋控制（五）
9. Metal框架詳細解析（九） —— 關(guān)于GPU Family 4之關(guān)于線程組共享（六）
10. Metal框架詳細解析（十） —— 基本組件（一）
11. Metal框架詳細解析（十一） —— 基本組件之器件選擇 - 圖形渲染的器件選擇（二）
12. Metal框架詳細解析（十二） —— 基本組件之器件選擇 - 計算處理的設備選擇（三）
13. Metal框架詳細解析（十三） —— 計算處理（一）
14. Metal框架詳細解析（十四） —— 計算處理之你好，計算（二）
15. Metal框架詳細解析（十五） —— 計算處理之關(guān)于線程和線程組（三）
16. Metal框架詳細解析（十六） —— 計算處理之計算線程組和網(wǎng)格大兴购俊（四）
17. Metal框架詳細解析（十七） —— 工具利虫、分析和調(diào)試（一）
18. Metal框架詳細解析（十八） —— 工具、分析和調(diào)試之Metal GPU Capture（二）
19. Metal框架詳細解析（十九） —— 工具堡僻、分析和調(diào)試之GPU活動監(jiān)視器（三）
20. Metal框架詳細解析（二十） —— 工具糠惫、分析和調(diào)試之關(guān)于Metal著色語言文件名擴展名、使用Metal的命令行工具構(gòu)建庫和標記Metal對象和命令（四）
21. Metal框架詳細解析（二十一） —— 基本課程之基本緩沖區(qū)（一）
22. Metal框架詳細解析（二十二） —— 基本課程之基本紋理（二）
23. Metal框架詳細解析（二十三） —— 基本課程之CPU和GPU同步（三）
24. Metal框架詳細解析（二十四） —— 基本課程之參數(shù)緩沖 - 基本參數(shù)緩沖（四）
25. Metal框架詳細解析（二十五） —— 基本課程之參數(shù)緩沖 - 帶有數(shù)組和資源堆的參數(shù)緩沖區(qū)（五）
26. Metal框架詳細解析（二十六） —— 基本課程之參數(shù)緩沖 - 具有GPU編碼的參數(shù)緩沖區(qū)（六）
27. Metal框架詳細解析（二十七） —— 高級技術(shù)之圖層選擇的反射（一）
28. Metal框架詳細解析（二十八） —— 高級技術(shù)之使用專用函數(shù)的LOD（一）
29. Metal框架詳細解析（二十九） —— 高級技術(shù)之具有參數(shù)緩沖區(qū)的動態(tài)地形（一）
30. Metal框架詳細解析（三十） —— 延遲照明（一）
31. Metal框架詳細解析（三十一） —— 在視圖中混合Metal和OpenGL渲染（一）
32. Metal框架詳細解析（三十二） —— Metal渲染管道教程（一）
33. Metal框架詳細解析（三十三） —— Metal渲染管道教程（二）
34. Metal框架詳細解析（三十四） —— Hello Metal钉疫！ 一個簡單的三角形的實現(xiàn)（一）
35. Metal框架詳細解析（三十五） —— Hello Metal硼讽！ 一個簡單的三角形的實現(xiàn)（二）
36. Metal框架詳細解析（三十六） —— Metal編程指南之概覽（一）
37. Metal框架詳細解析（三十七） —— Metal編程指南之基本Metal概念（二）
38. Metal框架詳細解析（三十八） —— Metal編程指南之命令組織和執(zhí)行模型（三）
39. Metal框架詳細解析（三十九） —— Metal編程指南之資源對象：緩沖區(qū)和紋理（四）
40. Metal框架詳細解析（四十） —— Metal編程指南之函數(shù)和庫（五）
41. Metal框架詳細解析（四十一） —— Metal編程指南之圖形渲染：渲染命令編碼器之Part 1（六）
42. Metal框架詳細解析（四十二） —— Metal編程指南之圖形渲染：渲染命令編碼器之Part 2（七）
43. Metal框架詳細解析（四十三） —— Metal編程指南之數(shù)據(jù)并行計算處理：計算命令編碼器（八）
44. Metal框架詳細解析（四十四） —— Metal編程指南之緩沖和紋理操作：Blit命令編碼器（九）
45. Metal框架詳細解析（四十五） —— Metal編程指南之Metal工具（十）
46. Metal框架詳細解析（四十六） —— Metal編程指南之Tessellation（十一）
47. Metal框架詳細解析（四十七） —— Metal編程指南之資源堆（十二）
48. Metal框架詳細解析（四十八） —— 將項目從OpenGL轉(zhuǎn)化到Metal（一）
49. Metal框架詳細解析（四十九） —— 將項目從OpenGL轉(zhuǎn)化到Metal（二）

源碼

1. Swift

OpenGL源碼

首先看下工程組織結(jié)構(gòu)

接著看一下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)
  }
}

下面看一下實現(xiàn)效果

Metal源碼

首先還是看下工程組織結(jié)構(gòu)

接著看sb中的內(nèi)容

下面就是源碼了

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轉(zhuǎn)化到Metal固阁，感興趣的給個贊或者關(guān)注~~~