【iOS】OpenGL入門資料整理

• 2020 年 3 月 30 日
• 筆記

一、OpenGL、OpenGL ES專業名詞解析

1、圖形API簡介

• OpenGL（Open Graphics Library）是一個跨程式語言、跨平台的編程圖形程式介面，它將電腦的資源抽象稱為一個個OpenGL的對象，對這些資源的操作抽象為一個個的OpenGL指令
• OpenGL ES（OpenGL for Embedded Systems）是 OpenGL 三維圖形 API 的子集，針對手機、PDA和遊戲主機等嵌入式設備而設計，去除了許多不必要和性能較低的API介面。
• DirectX:是由很多API組成的，DirectX並不是一個單純的圖形API. 最重要的是DirectX是屬於Windows上一個多媒體處理API.並不支援Windows以外的平台,所以不是跨平台框架. 按照性質分類，可以分為四大部分，顯示部分、聲音部分、輸入部分和網路部分.
• Metal: Apple為遊戲開發者推出了新的平台技術 Metal，該技術能夠為 3D 影像提高 10 倍的渲染性能.Metal 是Apple為了解決3D渲染而推出的框架,在2014年以前蘋果一直沿用OpenGL ES 來解決底層渲染.而後開始慢慢將自身的底層框架的依賴從OpenGL ES遷移到Metal.但其核心的處理思想還是源於OpenGL ES.對於適應於OpenGL ES的開發者而言並沒有太大的改變.

註：iOS12開始棄用OpenGL，改用Metal

2、OpenGL專用名詞

2.1、OpenGL上下文（context）

在應用程式調用任何OpenGL執行之前，首先需要創建一個OpenGL的上下文。這個上下文是一個非常龐大的狀態機，保存了OpenGL中的各種狀態，這也是OpenGL指令的基礎。

2.2、 OpenGL狀態機

狀態機描述了一個對象在其生命周期內所經歷的各種狀態，狀態間的轉變，發生轉變的動因，條件以及轉變中所執行的活動。或者說，狀態機是一種行為，說明對象在其生命周期中響應事件所經歷的狀態序列以及對那些狀態事件的響應。

2.3、渲染

將圖形/影像數據轉換成3D空間影像操作叫做渲染(Rendering).

2.4、頂點數組（VertexArray）和頂點緩衝區（VertexBuffer）

• 畫圖一般是先畫好影像的骨架，然後再往骨架裡面填充顏色，這對於OpenGL也是一樣的。頂點數據就是要畫的影像的骨架，和現實不同的是，OpenGL中的影像都是由圖元組成。在OpenGLES中，有3中類型的圖元：點、線、三角形。那這些頂點數據最終是存儲在哪裡的呢？開發者可以選擇設定函數指針，在調用繪製方法的時候，直接由記憶體傳入頂點數據，也是說這部分數據之前是存儲在記憶體當中的，被稱為頂點數組。而性能更高的做法是，提前分配一塊顯示記憶體，將頂點數據預先傳入到顯示記憶體中。這部分的顯示記憶體，就被成為頂點快取區。
• 頂點指的是我們在繪製一個圖形時，它的頂點位置數據。而這個數據可以直接存儲在數組中或者將其快取到GPU中。

2.5、管線

在OpenGL下渲染圖形，就會有經歷一個一個節點。而這樣的操作可以理解管線。大家可以想像成流水線。每個任務類似流水線搬執行。任務之間有先後順序，管線是一個抽象的概念，之所以稱之為管線是因為顯示卡在處理數據的時候是按照一個固定的順序來的，而且嚴格按照這個順序。就像水從一根管子的一段流到另一端，這個順序是不能打破的。

2.6、固定管線/存儲著⾊色器器

• 在早期的OpenGL 版本,它封裝了很多種著⾊器程式塊內置的⼀段包含了光照、坐標變換、裁剪等諸多功能的固定shader程式來完成，來幫助開發者來完成圖形的渲染。而開發者只需要傳入相應的參數，就能快速完成圖形的渲染。 類似於iOS開發會封裝很多API，⽽我們只需要調用，就可以實現功能。不需要關注底層實現原理
• 但是由於OpenGL 的使⽤場景⾮常豐富，固定管線或存儲著⾊器⽆法完成每⼀個業務。這時將相關部分開放成可編程

2.7、著色器程式shader

• 就全面的將固定渲染管線架構變為了可編程渲染管線。因此，OpenGL在實際調用繪製函數之前，還需要指定一個由shader編譯成的著色器程式。常見的著色器主要有頂點著色器（VertexShader），片段著色器（FragmentShader）/ 像素著色器器(PixelShader)，⼏何著⾊器 (GeometryShader)，曲面細分著色器(TessellationShader)。⽚段著⾊器和像素著⾊器只是在OpenGL和DX中的不同叫法⽽已。可惜的是，直到OpenGLES 3.0，依然只⽀支援了頂點著色器器和片段著色器這兩個最基礎的著⾊器。
• OpenGL在處理shader時，和其他編譯器一樣。通過編譯、鏈接等步驟，生成了著色器程式（glProgram），著色器程式同時包含了頂點著色器和片段著色器的運算邏輯。在OpenGL進行繪製的時候，首先由頂點著色器對傳入的頂點數據進行運算。再通過圖元裝配，將頂點轉換為圖元。然後進行光柵化，將圖元這種矢量圖形，轉換為柵格化數據。最後，將柵格化數據傳入片段著色器中進行運算。片段著色器會對柵格化數據中的每一個像素進行運算，並決定像素的顏色

2.8、頂點著色器VertexShader

• 一般用來處理圖形每個頂點變換(旋轉/平移/投影等)
• 頂點著色器是OpenGL中用於計算頂點屬性的程式。頂點著色器是逐頂點運算的程式，也就是說每個頂點數據都會執行一次頂點著色器，當然這是並行的，並且頂點著色器運算過程中無法訪問其他頂點的數據。
• 一般來說典型的需要計算的頂點屬性主要包括頂點坐標變換、逐頂點光照運算等等。頂點坐標由自身坐標系轉換到歸一化坐標系的運算，就是在這裡發生的。

2.9、片元著色器FragmentShader

• 一般用來處理圖形中每個像素點顏色計算和填充
• 片段著色器是OpenGL中用於計算片段（像素）顏色的程式。片段著色器是逐像素運算的程式，也就是說每個像素都會執行一次片段著色器，當然也是並行的。

2.10、GLSL（OpenGL Shading Language）

OpenGL著色語言（OpenGL Shading Language）是用來在OpenGL中著色編程的語言，也即開發人員寫的短小的自定義程式，他們是在圖形卡的GPU （Graphic Processor Unit圖形處理單元）上執行的，代替了固定的渲染管線的一部分，使渲染管線中不同層次具有可編程性。比如：視圖轉換、投影轉換等。GLSL（GL Shading Language）的著色器程式碼分成2個部分：Vertex Shader（頂點著色器）和Fragment（片斷著色器）

2.11、光柵化

• 是把頂點數據轉換為片元的過程，具有將圖轉化為一個個柵格組成的圖象的作用，特點是每個元素對應幀緩衝區中的一像素。
• 光柵化就是把頂點數據轉換為片元的過程。片元中的每一個元素對應於幀緩衝區中的一個像素。
• 光柵化其實是一種將幾何圖元變為二維影像的過程。該過程包含了兩部分的工作。第一部分工作：決定窗口坐標中的哪些整型柵格區域被基本圖元佔用；第二部分工作：分配一個顏色值和一個深度值到各個區域。光柵化過程產生的是片元
• 把物體的數學描述以及與物體相關的顏色資訊轉換為螢幕上用於對應位置的像素及用於填充像素的顏色，這個過程稱為光柵化，這是一個將模擬訊號轉化為離散訊號的過程

2.12、紋理

紋理可以理解為圖片. 大家在渲染圖形時需要在其編碼填充圖片,為了使得場景更加逼真.而這裡使用的圖片,就是常說的紋理.但是在OpenGL,我們更加習慣叫紋理,而不是圖片.

2.13、混合（Blending）

在測試階段之後，如果像素依然沒有被剔除，那麼像素的顏色將會和幀緩衝區中顏色附著上的顏色進行混合，混合的演算法可以通過OpenGL的函數進行指定。但是OpenGL提供的混合演算法是有限的，如果需要更加複雜的混合演算法，一般可以通過像素著色器進行實現，當然性能會比原生的混合演算法差一些。

2.14、變換矩陣（Transformation）

例如圖形想發生平移,縮放,旋轉變換.就需要使用變換矩陣

2.15、投影矩陣（Projection）

用於將3D坐標轉換為二維螢幕坐標,實際線條也將在二維坐標下進行繪製.

2.16、渲染上屏/交換緩衝區(SwapBuffer)

• 渲染緩衝區一般映射的是系統的資源比如窗口。如果將影像直接渲染到窗口對應的渲染緩衝區，則可以將影像顯示到螢幕上。
• 但是，值得注意的是，如果每個窗口只有一個緩衝區，那麼在繪製過程中螢幕進行了刷新，窗口可能顯示出不完整的影像。
• 為了解決這個問題，常規的OpenGL程式至少都會有兩個緩衝區。顯示在螢幕上的稱為螢幕緩衝區，沒有顯示的稱為離屏緩衝區。在一個緩衝區渲染完成之後，通過將螢幕緩衝區和離屏緩衝區交換，實現影像在螢幕上的顯示。
• 由於顯示器的刷新一般是逐行進行的，因此為了防止交換緩衝區的時候螢幕上下區域的影像分屬於兩個不同的幀，因此交換一般會等待顯示器刷新完成的訊號，在顯示器兩次刷新的間隔中進行交換，這個訊號就被稱為垂直同步訊號，這個技術被稱為垂直同步。
• 使用了雙緩衝區和垂直同步技術之後，由於總是要等待緩衝區交換之後再進行下一幀的渲染，使得幀率無法完全達到硬體允許的最高水平。為了解決這個問題，引入了三緩衝區技術，在等待垂直同步時，來回交替渲染兩個離屏的緩衝區，而垂直同步發生時，螢幕緩衝區和最近渲染完成的離屏緩衝區交換，實現充分利用硬體性能的目的。

二、著色器渲染流程圖

三、Mac OpenGL環境搭建

https://juejin.im/entry/5c8662dbf265da2de52dc3ea

四、參考

https://www.jianshu.com/p/1b09101aa117