【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