iOS視覺 OpenGL初探

1、圖形API

1. 圖形API簡介

• OpenGL是一個跨編程語言、跨平臺的編程圖形程序接口
• OpenGL ES是 OpenGL三維圖形API的本身，針對 手機、PDA和遊戲主機等嵌入式設備而設計的，去除了不少沒必要要覺和性能較低的API接口
• DirectX是由不少API組成的， DirectX並非一個單純的圖形API。最重要的是 DirectX是屬於Windows上一個多媒體處理框架，並不支持Windows之外的平臺
• Metal是Apple爲遊戲開發者退出的新的平臺技術，該技術能爲3D圖像提升10倍的渲染性能

2. 圖形API做用

簡單來講就是 實現圖形的底層渲染

• 好比在遊戲開發中對於遊戲場景/遊戲人物的渲染
• 好比在音視頻開發中對於視頻解碼後的數據渲染
• 好比在地圖引擎對於地圖上的數據渲染
• 好比在動畫中實現動畫的繪製
• 好比在視頻處理中對於視頻加上濾鏡效果

OpenGL/OpenGL ES/Metal 在任何項目中解決問題的本質——利用 GPU芯片來高效渲染圖形圖像

圖形API是iOS開發者惟一接近GPU的方式

2、OpenGL下專業名詞

• OpenGL上下文 Context

  • 上下文是一個很是龐大的狀態機，保存了OpenGL中的各類狀態
  • 無論在哪一個語言中，都是相似C語言同樣面向過程的函數
• OpenGL狀態機描述了一個對象的生命週期經歷各類狀態發生轉變時的動因、條件及轉變中所執行的活動

  • 有記憶功能，能記住其當前的狀態（如當前所使用的顏色、是否開始了混合功能等）

    • glClearColor(1,1,1,1)設置顏色
    • glEable(GL_DEPTH_TEST)開啓深度測試
    • glEable(GL_BLEND)開啓混合
  • 能夠接收輸入，根據輸入的內容和本身的原先狀態，修改本身當前狀態，而且能夠有對應輸出
  • 當進入特殊狀態（停機狀態）時便再也不接收輸入，中止工做
• 渲染：將圖形/圖像數據轉換成3D空間圖像的操做叫作渲染（Rendering）即 數據->可視化界面的過程，也就是咱們口中所說的 繪製
• 頂點數組（VertexArray）和 頂點緩衝區（VertexBuffer）：

  • 頂點數據是由GPU處理的
  • 頂點數組是存在內存中，GPU經過操做內存來處理頂點數據
  • 頂點緩衝區存在顯卡顯存中，使得GPU的操做更爲簡單
  • 在調用繪製方法的時候，直接有內存傳入頂點數據，也就是這部分數據以前是存儲在內存中的，被稱爲頂點數組；性能更高的作法是，提早分配一塊顯存，將頂點數據預先傳入到顯存當中，這塊顯存就是頂點緩衝區
• 管線：能夠理解爲流水線。在OpenGL下渲染圖形，就會經歷一個一個節點，這樣的操做能夠理解爲管線。之因此稱爲管線是由於顯卡在處理數據的時候是按照一個固定的順序來的
• 固定管線/存儲着色器：在早期OpenGL版本中，開發者只須要傳入相應的參數，就能快速完成圖形的渲染。開發者只須要調用API使用封裝好的固定shader程序段，並不須要關注底層實現原理
• 着色器程序Shader是一段程序代碼，是用來操做GPU進行計算的，主要的着色器有：

  • 頂點着色器（VertexShader）
  • 片元着色器（Metal叫片元函數）/片斷着色器（FragmentShader）/像素着色器（PixelShader）
  • 幾何着色器（GeometryShader）
  • 曲面細分着色器（TessellationShader）
  • 在繪製的時候首先由 頂點着色器對傳入的頂點數據進行運算，將頂點轉換爲圖元；而後進行 光柵化轉化爲柵格化數據；最後傳入 片元着色器進行運算
• 頂點着色器（VertexShader）

  • 用來處理圖形每一個頂點變換——旋轉/平移/投影
  • 每個頂點都會執行一次
• 片元着色器（FragmentShader）

  • 用來處理圖形中每一個像素點的顏色計算和填充
  • 每一個像素都會執行一次片元着色器（並行執行）
• GLSL（OpenGL Shading Language）

  • 是用來在OpenGL中着色編程的語言，即開發人員寫的短小的自定義程序
  • 代替了固定渲染管線，使渲染管線中不一樣層次具備可編程性，好比：視圖轉換、投影轉換等
  • 用來操做 頂點着色器和 片元着色器
• 光柵化（Rasterization）

  • 是把頂點數據轉換成片元的過程，具備將圖轉化爲一個個柵格組成的圖像的做用
  • 其實就是將 幾何圖元變爲二維圖像的過程。該過程包含了兩部分工做：決定窗口座標中的那些整形柵格區域被基本圖元佔用；分配一個顏色值和一個深度值到各個區域
  • 把物體的數學描述以及與物體相關的顏色信息轉換爲屏幕上用於對應位置的像素及用於填充像素的顏色，這個過程稱爲光柵化
• 紋理：即圖片（位圖）
• 混合：兩種顏色的視圖疊在一塊兒後的顏色就叫混合
• 變換矩陣（Transformation）：圖形發平生移、縮放、旋轉變換
• 投影矩陣（Projection）：將3D座標轉換爲二維屏幕座標
• 渲染上屏/交換緩衝區（SwapBuffer）

  • 常規的OpenGL程序至少都會有兩個緩衝區，顯示在屏幕上的成爲屏幕緩衝區，沒有顯示的成爲離屏緩衝區。在一個緩衝區渲染完成以後，經過將屏幕緩衝區和離屏緩衝區交換，實現圖像在屏幕上的顯示
  • 爲了防止交換緩衝區的時候屏幕上下區域的圖像分屬於兩個不一樣的幀，所以交換通常會等待顯示器刷新完成的信號，在顯示器兩次刷新的間各類進行交換，這個信號就成爲 垂直同步信號，這個技術成爲 垂直同步

3、OpenGL座標系統解析

• 視口：顯示的窗口區域 ，OpenGL使用glViewPort來設置視口
• 投影方式

  • 正投影：用來渲染平面圖形（遠近物體大小同樣）
  • 透視投影：用來渲染立體圖形（遠小近大）

MVP矩陣：Model、View、Projection

• 2D笛卡爾座標系：擁有x軸、y軸的平面座標系（用來描述平面圖形）
• 3D笛卡爾座標系：擁有x軸、y軸、z軸（z軸表示深度）的立體座標系（用來描述立體圖形）
• 攝像機座標系/照相機座標系/觀察者座標系：自身爲原點，向上爲+y，向前爲+z，向右爲+x
• 標準化設備座標系（NDC）：x軸、y軸的範圍都是從-1到1的座標系
• 左手座標系、右手座標系：拇指方向爲+x，食指方向爲+y，手心方向爲+z

  • 規範化設備座標是左手座標系
  • 物體/世界/照相機座標系都是右手系座標

經常使用座標系的比較

• 世界座標系：系統的、絕對的座標系
• 物體空間座標系：針對於物體個體的座標系
• 攝像機座標系：觀察的一個角度
• 慣性座標系：是 物體座標系 和 世界座標系 轉換過程當中的一箇中轉站，爲了方便物體座標系轉換到世界座標系
  

座標系對應的空間系

• 局部空間（物體空間座標系） ：在描述這個物體自己
• 世界空間：在大環境中的位置
• 觀察空間：觀察座標系空間
• 裁剪空間：超過部分要裁剪
• 屏幕空間：設備

4、理解圖片從文件渲染屏幕的過程

1. 渲染過程當中的座標變換

物體座標/對象座標->(模型變換）->世界座標->（視覺變換）->觀察者座標/攝像機座標->（投影變換）->裁剪座標->（透視除法）->規範化設備座標->（視口變化）->屏幕座標
這個過程當中如下過程是能夠開發者定義的：

• 頂點信息（Attribute）
• 模型變換（Vertex）
• 模型空間（Model Space）
• 世界空間（World Space）
• 觀察空間（Camera Space）
• 裁剪空間（Clip Space）

2. 着色器的渲染流程

• 頂點着色器處理頂點數據
• 細分着色器描述物體的形狀（OpenGL3.0已經不開放細分着色器的API）
• 幾何着色器 決定輸出的圖元類型和個數（不須要關心細節）
• 圖元設置明確圖元的類型，是三條線仍是三角形（三個頂點並必定是三角形）
• 光柵化幾何圖元轉爲二維圖像（像素點）
• 片元着色器填充像素點的顏色、深度值等

3. 圖片渲染流程

具體請見iOS中圖片的解壓縮到渲染過程

• 圖片從文件到屏幕過程

  • CPU計算視圖frame、圖片解碼，而後經過數據總線交給GPU
  • GPU負責紋理混合、頂點變換與計算、像素點的填充計算，渲染到幀緩衝區
  • 時鐘信號：垂直同步信號V-Sync/水平同步信號H-Sync
  • iOS設備雙緩衝機制：顯示系統一般會引入兩個幀緩衝區
• 圖片加載的工做流程

  • 使用 +imageWithContentOfFile:從磁盤中加載一張圖片並不會解壓縮圖片
  • 顯示圖片時CPU纔會去解碼圖片
  • 隱式的 CATransaction捕獲到了 UIImageView圖層數的變化
  • 在主線程的下一個 Runloop到來時， Core Animation提交了這個隱式的 transaction
  • 渲染流程：即 4.2流程
• 爲何解壓縮圖片

  • 位圖就是一個像素數組，數組中的每一個像素就表明着圖片中的一個點（jpeg和png都是位圖）
  • 在將磁盤中的圖片渲染到屏幕以前，必須先要獲得圖片的原始像素數據，才能執行後續的繪製操做
• 解壓縮原理

  • 使用 CGBitmapContextCreate 對圖片進行從新繪製，獲得一張新的解壓縮後的位圖