[TOC]

前言
萬(wàn)事開(kāi)頭難，是因?yàn)槲覀冮_(kāi)頭的時(shí)候不知道從哪入手學(xué)習(xí) OpenGL 這個(gè)龐大的體系。
站在巨人的肩膀上，才能看的更遠(yuǎn)，走得更快。這里推薦 CC老師的簡(jiǎn)書(shū)
書(shū)籍是人類進(jìn)步的階梯，在 OpenGL 的學(xué)習(xí)中，有兩本堪比圣經(jīng)的書(shū)籍
紅寶書(shū)：《OpenGL 編程指南》，當(dāng)前版本是第9版
藍(lán)寶書(shū)：《OpenGL 超級(jí)寶典》，當(dāng)前版本是第5版

一、學(xué)習(xí)階段

1.1 OpenGL 階段：

• 熟悉圖形圖像API中的專有名詞
• 熟悉圖形圖像常用處理手段，比如深度測(cè)試等
• 熟悉圖形渲染流程
• 熟悉API使用

1.2 OpenGL ES 階段：

• 熟練掌握 GLSL 語(yǔ)法
• 熟悉 GLKit 框架
• OpenGL ES 渲染流程
• 能通過(guò)案例靈活運(yùn)用API

1.3 Metal 階段：

• 熟悉 Metal Shading language
• 熟悉 Metal Kit
• 熟悉 Metal 渲染流程
• 能通過(guò)案例靈活運(yùn)用API

二、OpenGL 初識(shí)

2.1 圖形API簡(jiǎn)介

• OpenGL (Open Graphics Library) 是一個(gè)跨編程語(yǔ)言、跨平臺(tái)的編程圖形程序接口，它將計(jì)算機(jī)的資源抽象稱為一個(gè)個(gè) OpenGL對(duì)象，對(duì)這些資源的操作抽象為一個(gè)個(gè)的 OpenGL指令
• OpenGL ES (OpenGL for Embedded Systems)是 OpenGL 三維圖形 API 的子集，針對(duì)手機(jī)、PAD和游戲主機(jī)等嵌入式設(shè)備而設(shè)計(jì)，去除了許多不必要和性能較低的 API 接口。
• Metal：Apple為游戲開(kāi)發(fā)者退出了新的平臺(tái)技術(shù) Metal，該技術(shù)能夠?yàn)?3D 圖像提高 10 被的渲染性能。Metal 是 Apple 為了解決 3D 渲染而退出的框架。
• DirectX 是由很多 API 組成的，DirectX 并不是一個(gè)淡出的圖形 API，最重要的是 DirectX 是屬于Windows上一個(gè)多媒體處理API，并不支持 Windows 以外的平臺(tái)，所以不是跨平臺(tái)框架。按照性質(zhì)分類，可以分為四大部分：顯示部分、聲音部分、輸入部分和網(wǎng)絡(luò)部分。

2.2 圖形API目的解決什么問(wèn)題

簡(jiǎn)單來(lái)說(shuō)，就是實(shí)現(xiàn)圖形的底層渲染

• 比如在游戲開(kāi)發(fā)中，對(duì)于游戲場(chǎng)景、游戲人物的渲染
• 比如在音視頻開(kāi)發(fā)中，對(duì)于視頻解碼后的數(shù)據(jù)渲染
• 比如在地圖引擎，對(duì)于地圖上的數(shù)據(jù)渲染
• 比如在動(dòng)畫(huà)中，實(shí)現(xiàn)動(dòng)畫(huà)的繪制
• 比如在視頻處理中，對(duì)于視頻加上濾鏡效果

OpenGL/OpenGL ES/Metal 在任何項(xiàng)目中解決問(wèn)題的本質(zhì)：
就是利用 GPU芯片 來(lái)高效渲染圖形圖像。
圖形API是iOS開(kāi)發(fā)者唯一接近GPU的方式。

2.3 OpenGL 專業(yè)名詞解釋[重點(diǎn)]

以下這些專有名詞會(huì)貫穿整個(gè) OpenGL 的學(xué)習(xí)，所以要對(duì)每一個(gè)名詞都要爛熟于心。

OpenGL 上下文 [context]

• 在應(yīng)用程序調(diào)用任何 OpenGL 的指令之前，需要安排首先創(chuàng)建一個(gè)OpenGL的上下文。這個(gè)上下文是給非常龐大的狀態(tài)機(jī)，保存了OpenGL的各種狀態(tài)，這也是OpenGL指令執(zhí)行的基礎(chǔ)
• OpenGL的函數(shù)不管是哪個(gè)語(yǔ)言中，都是類似C語(yǔ)言一樣的面向過(guò)程的函數(shù)，本質(zhì)上都是對(duì) OpenGL 上下文這個(gè)龐大的狀態(tài)機(jī)中某個(gè)狀態(tài)或者對(duì)象進(jìn)行操作，當(dāng)然你得先把這個(gè)對(duì)象設(shè)置為當(dāng)前對(duì)象。因此，通過(guò)對(duì) OpenGL 指令的封裝，是可以將 OpenGL 的相關(guān)調(diào)用封裝成一個(gè)面向?qū)ο蟮膱D形API的
• 由于 OpenGL 上下文是一個(gè)巨大的狀態(tài)機(jī)，切換上下文往往會(huì)產(chǎn)生較大的開(kāi)銷，但是不同的繪制模塊，可能需要使用完全獨(dú)立的狀態(tài)管理。因此，可以在應(yīng)用程序中分別創(chuàng)建多個(gè)不同的上下文，在不同線程中使用不同的上下文，上下文之間共享紋理、緩沖區(qū)等資源。這樣的方案，會(huì)比反復(fù)切換上下文，或者大量修改渲染方案，更加合理高效。

OpenGL 狀態(tài)機(jī)

• 狀態(tài)機(jī)是理論上的一種機(jī)器。這個(gè)非常難以理解。所以我們把狀態(tài)機(jī)這么理解：狀態(tài)機(jī)描述了一個(gè)對(duì)象在其生命周期內(nèi)所經(jīng)歷的各種狀態(tài)、狀態(tài)間的轉(zhuǎn)變、發(fā)生轉(zhuǎn)變的動(dòng)因、條件及轉(zhuǎn)變中所執(zhí)行的活動(dòng)。或者說(shuō)，狀態(tài)機(jī)是一種行為，說(shuō)明對(duì)象在其聲明周期中響應(yīng)事件所經(jīng)歷的狀態(tài)序列以及對(duì)那些狀態(tài)事件的響應(yīng)。因此具有以下特點(diǎn)：

  • 有記憶功能，能記住當(dāng)前狀態(tài)；
  • 可以接受輸入，根據(jù)輸入的內(nèi)容和自己的原先狀態(tài)，修改自己當(dāng)前狀態(tài)，并且可以有對(duì)應(yīng)輸出；
  • 當(dāng)進(jìn)入特殊狀態(tài)（停機(jī)狀態(tài)）的時(shí)候，便不再接受輸入，停止工作；

• 類推到 OpenGL 中來(lái)，可以這么理解：

  • OpenGL 可以記錄自己的狀態(tài)（如當(dāng)前所使用的顏色、是否開(kāi)起來(lái)混合功能等）；
  • OpenGL 可以接受輸入（當(dāng)調(diào)用 OpenGL函數(shù)的時(shí)候，實(shí)際上可以看成 OpenGL 在接受我們的輸入），如我們調(diào)用 glColor3f，則 OpenGL 接收到這個(gè)輸入后會(huì)修改自己的“當(dāng)前顏色”這個(gè)狀態(tài)；
  • OpenGL 可以進(jìn)入停止?fàn)顟B(tài)，不在接受輸入。在程序退出前，OpenGL總會(huì)先停止工作的；

渲染（Rendering）

• 將圖形/圖像數(shù)據(jù)轉(zhuǎn)換成 3D 空間圖像

頂點(diǎn)數(shù)組（VertexArray）和頂點(diǎn)緩沖區(qū)（VertexBuffer）

• 圖元：畫(huà)圖一般是先畫(huà)好圖像的骨架，然后再往骨架里面填充顏色，這對(duì)于 OpenGL 也是一樣的。頂點(diǎn)數(shù)據(jù)就是要畫(huà)的圖像的骨架，和現(xiàn)實(shí)中不同的是，OpenGL 中的圖像都是由 圖元 組成；
• 圖元的種類：在 OpenGL ES 中，有3中類型的圖元：點(diǎn)、線、三角形。
• 頂點(diǎn)數(shù)組：那這些頂點(diǎn)數(shù)據(jù)最終是存儲(chǔ)在哪里呢？開(kāi)發(fā)者可以選擇設(shè)定函數(shù)指針，在調(diào)用繪制方法的時(shí)候，直接由內(nèi)存?zhèn)魅腠旤c(diǎn)數(shù)據(jù)，也就是說(shuō)這部分?jǐn)?shù)據(jù)之前是在內(nèi)存當(dāng)中，被稱為頂點(diǎn)數(shù)組。
• 頂點(diǎn)緩沖區(qū)：而性能更高的做法是：提前分配一塊顯存，將頂點(diǎn)數(shù)據(jù)預(yù)先傳入到顯存當(dāng)中。這部分的顯存，就被稱為頂點(diǎn)緩沖區(qū)。
• 頂點(diǎn)：指的是我們?cè)诶L制一個(gè)圖形時(shí)。它的頂點(diǎn)位置數(shù)據(jù)，而這個(gè)數(shù)據(jù)可以直接存儲(chǔ)在數(shù)組中，或者將其緩存到 GPU 內(nèi)存中。

管線

• 在 OpenGL 下渲染圖形，就會(huì)有經(jīng)歷一個(gè)一個(gè)節(jié)點(diǎn)，而這樣的操作可以理解為管線，可以想象為流水線，每個(gè)任務(wù)類似流水般執(zhí)行；
• 任務(wù)之間有先后順序，這個(gè)順序是不能打破的，管線是一個(gè)抽象的概念；
• 顯卡在處理數(shù)據(jù)的時(shí)候是按照一個(gè)固定的順序來(lái)的，而且嚴(yán)格按照這個(gè)順序，就像水從一根館子的一端流到另一端，這個(gè)書(shū)序是不能打破的。

固定管線/存儲(chǔ)著色器

• 在早期的 OpenGL 版本中，它封裝了很多種著色器，程序塊內(nèi)置一端包含了光照、坐標(biāo)轉(zhuǎn)換、裁剪等等諸多功能的固定 shader 程序來(lái)完成，來(lái)幫助開(kāi)發(fā)者完成圖形的渲染。而開(kāi)發(fā)者只需要傳入相應(yīng)的參數(shù)，就能快速完成圖形的渲染。類似于 iOS 開(kāi)發(fā)會(huì)封裝很多 API，而我們只需要調(diào)用，就可以實(shí)現(xiàn)功能，不需要關(guān)注底層實(shí)現(xiàn)原理；
• 但是由于 OpenGL 的使用場(chǎng)景非常豐富，固定管線或者存儲(chǔ)著色器無(wú)法完成每一個(gè)業(yè)務(wù)。這是相關(guān)部分開(kāi)放出可編程。

著色器程序 Shader

• 就全面的將固定渲染管線架構(gòu)變?yōu)榱丝删幊啼秩竟芫€。因此，OpenGL 在實(shí)際調(diào)用繪制函數(shù)之前，還需要指定一個(gè)由 Shader 編譯成的著色器程序；

• 常見(jiàn)的著色器有：

  • 頂點(diǎn)著色器（VertexShader）
  • 片段著色器（FragmentShader）/像素著色器（PixelShader）
  • 幾何著色器（GeometryShader）
  • 曲面細(xì)分著色器（TessellationShader）
  • 片段著色器和像素著色器 是在 OpenGL 和 DX 中的不同叫法
  • 直到OpenGLES3.0，依然只支持頂點(diǎn)著色器和片段著色器這兩個(gè)最基礎(chǔ)的著色器

• OpenGL在處理shader時(shí)，和其他編譯器一樣。通過(guò)編譯、鏈接等步驟，生成了著色器程序（GLProgram）；

• 著色器程序同時(shí)包含了頂點(diǎn)著色器和片段著色器的運(yùn)算邏輯。

• 在OpenGL進(jìn)行繪制的時(shí)候，首先由頂點(diǎn)著色器對(duì)傳入的頂點(diǎn)數(shù)據(jù)進(jìn)行運(yùn)算。再通過(guò)圖元裝配，將頂點(diǎn)轉(zhuǎn)換為圖元。然后進(jìn)行光柵化，將圖元這種矢量圖形，轉(zhuǎn)換為柵格化數(shù)據(jù)。最后，將柵格化數(shù)據(jù)傳入片段著色器中進(jìn)行運(yùn)算。

• 片段著色器會(huì)對(duì)數(shù)據(jù)中的每一個(gè)像素進(jìn)行運(yùn)算，并決定像素的顏色。

頂點(diǎn)著色器（VertexShader）

• 一般用來(lái)處理圖形每個(gè)頂頂啊變換（旋轉(zhuǎn)、平移、投影等）
• 頂點(diǎn)著色器是 OpenGL 中用于計(jì)算頂點(diǎn)屬性的程序，也就是說(shuō)每個(gè)頂點(diǎn)數(shù)據(jù)都會(huì)執(zhí)行一次頂點(diǎn)著色器，當(dāng)然這是并行的，并且頂點(diǎn)著色器運(yùn)算過(guò)程中無(wú)法訪問(wèn)其他頂點(diǎn)的數(shù)據(jù)
• 一般來(lái)說(shuō)，典型的需要計(jì)算的頂點(diǎn)屬性主要包括：頂點(diǎn)坐標(biāo)變換、逐頂點(diǎn)關(guān)照運(yùn)算等。頂點(diǎn)坐標(biāo)由自身坐標(biāo)系轉(zhuǎn)換到歸一化坐標(biāo)系的運(yùn)算，就是在這里發(fā)生的。

片段著色器程序（FragmentShader）

• 一般用來(lái)處理圖形中每個(gè)像素點(diǎn)顏色計(jì)算和填充；
• 片段著色器是 OpenGL 中用于計(jì)算片段（像素）顏色的程序。
• 片段著色器是逐像素運(yùn)算的程序，也就是說(shuō)每個(gè)像素都會(huì)執(zhí)行一次片段著色器，當(dāng)前也是并行的

GLSL（OpenGL Shading Language）

• OpenGL 著色語(yǔ)言（OpenGL Shading Language）是用來(lái)在 OpenGL 中著色變成的語(yǔ)言，也即開(kāi)發(fā)人員寫(xiě)的短小的自定義程序，他們是在圖形卡的GPU（Graphic Processor Unit 圖形處理單元）上執(zhí)行的，代替了固定的渲染管線的一部分，使渲染管線中不同層次具有可編程性。比如：視圖轉(zhuǎn)換、投影轉(zhuǎn)換等
• GLSL（GL Shading Language）的著色器代碼分為2個(gè)部分：Vertex Shader（頂點(diǎn)著色器）和 Fragment Shader（片段著色器）

光柵化（Resterization）

• 是把頂點(diǎn)數(shù)據(jù)轉(zhuǎn)換為片元的過(guò)程，具有將圖轉(zhuǎn)化為一個(gè)個(gè)柵格組成的圖像的作用，特點(diǎn)是每個(gè)元素對(duì)應(yīng)幀緩沖區(qū)中的一像素；

• 光柵化就是把頂點(diǎn)數(shù)據(jù)轉(zhuǎn)換為片元的過(guò)程。片元的每一個(gè)元素對(duì)應(yīng)與幀緩沖區(qū)中的一個(gè)像素；

• 光柵化其實(shí)是一種將集合圖元變?yōu)槎S圖像的過(guò)程。該過(guò)程包含了兩部分工作：

  • 第一部分工作：決定窗口坐標(biāo)中的哪些正星柵格區(qū)域被基本圖元占用；
  • 第二部分工作：分配一個(gè)顏色值和一個(gè)深度值到各個(gè)區(qū)域。光柵化過(guò)程產(chǎn)生的是片元

• 把物體的數(shù)學(xué)描述以及與物體相關(guān)的顏色信息轉(zhuǎn)換為屏幕上用于對(duì)應(yīng)位置的像素及用于填充像素的顏色，這個(gè)過(guò)程稱為光柵化，這是故意而將模擬信號(hào)轉(zhuǎn)化為離散信號(hào)的過(guò)程

紋理

• 紋理可以理解為圖片。大家在渲染圖片時(shí)需要在其編碼填充圖片，為了使得場(chǎng)景更加逼真，而這里使用的圖片，就是常數(shù)偶讀紋理，但是在 OpenGL中，我們更加習(xí)慣叫紋理，而不是圖片。

混合（Blending）

• 在測(cè)試階段之后，如果像素依然沒(méi)有被提出，那么像素的顏色將會(huì)和幀緩沖區(qū)中顏色附著上的顏色進(jìn)行混合
• 混合的算法可以通過(guò) OpenGL 的函數(shù)進(jìn)行指定。但是 OpenGL 提供的混合算法是優(yōu)先的，如果需要更加復(fù)雜的混合算法，一般可以通過(guò)像素著色器進(jìn)行實(shí)現(xiàn)，當(dāng)然性能會(huì)比原生的混合算法差一些。

變換矩陣（Transformation）

• 例如圖形想發(fā)生平移、縮放、旋轉(zhuǎn)變換，就需要使用變換矩陣

投影矩陣（Projection）

• 用于將3D坐標(biāo)轉(zhuǎn)換為二維屏幕坐標(biāo)，實(shí)際線條也將在第二位坐標(biāo)下進(jìn)行繪制

渲染上屏/交換緩存區(qū)（SwapBuffer）

• 渲染緩沖區(qū)一般映射的是系統(tǒng)的資源，比如窗口。如果將圖像直接渲染到串口對(duì)應(yīng)的渲染緩沖區(qū)，則可以將圖像顯示到屏幕上；
• 但是，值的注意的是，如果每個(gè)窗口只有一個(gè)緩沖區(qū)，那么在繪制過(guò)程中屏幕進(jìn)行了刷新，窗口可能顯示出不完整的圖像；
• 為了解決這個(gè)問(wèn)題，常規(guī)的 OpenGL 程序至少都會(huì)有兩個(gè)緩沖區(qū)。顯示在屏幕上的稱為屏幕緩沖區(qū)，沒(méi)有顯示的稱為離屏緩沖區(qū)。在一個(gè)緩沖區(qū)渲染完成之后，通過(guò)屏幕緩沖區(qū)和離屏緩沖區(qū)交換，實(shí)現(xiàn)圖像在屏幕上的顯示；
• 由于顯示器的刷新一般是逐行進(jìn)行的，因此為了防止交換緩沖區(qū)的時(shí)候屏幕上下區(qū)域的圖像分屬于兩個(gè)不同的幀，因此交換一般會(huì)等待顯示器刷新完成的信號(hào)，在顯示器兩次刷新的間隔中進(jìn)行交換，這個(gè)信號(hào)被稱為垂直同步信號(hào)，這個(gè)技術(shù)被稱為垂直同步；
• 使用了雙緩沖區(qū)和垂直同步技術(shù)之后，由于總是要等待緩沖區(qū)交換之后再進(jìn)行下一幀的渲染，是的幀率無(wú)法完全達(dá)到硬件允許的最高水平。為了解決這個(gè)問(wèn)題，引入了三緩沖區(qū)技術(shù)，在等待垂直同步時(shí)，來(lái)回交換渲染兩個(gè)離屏的緩沖區(qū)，而垂直同步發(fā)生時(shí)，屏幕緩沖區(qū)和最近渲染完成的離屏緩沖區(qū)交換，實(shí)現(xiàn)充分利用硬件性能的目的。

2.4 OpenGL下坐標(biāo)系解析

這個(gè)有點(diǎn)抽象，需要多花點(diǎn)時(shí)間理解下

物體、世界、照相機(jī)空間 -> 右手系
規(guī)范空間 -> 左手系

2.5 圖片/圖形從文件渲染到屏幕過(guò)程解析

探討iOS 中圖片的解壓縮到渲染過(guò)程

2.6 OpenGL 案例

上面看了這么多的理論知識(shí)，到這里終于可以開(kāi)始從代碼層面來(lái)認(rèn)識(shí) OpenGL 了。

案例01：固定管線下使用 OpenGL 渲染三角形

案例02：固定管線下使用 OpenGL 渲染正方形、并移動(dòng)

案例03：固定管線下使用 OpenGL 繪制圖形

• 三角函數(shù)

void draw() {

    glClear(GL_COLOR_BUFFER_BIT);
    
    const GLfloat factor = 0.1f;
    GLfloat x;
    
    /// 繪制坐標(biāo)軸
    glBegin(GL_LINES);
    glColor3f(1.0f, 1.0f, 1.0f);
    // x 軸
    glVertex2f(-1.0f, 0.0f);
    glVertex2f(1.0f, 0.0f);
    // y 軸
    glVertex2f(0.0f, -1.0f);
    glVertex2f(0.0f, 1.0f);
    glEnd();
    
    /// 繪制曲線 : 正弦
    glBegin(GL_LINE_STRIP);
    glColor3f(1.0f, 0.0f, 0.0f);
    for (x=-1.0f/factor; x<1.0f/factor; x+=0.01f) {
        glVertex2f(x*factor, sin(x)*factor);
    }
    glEnd();
    
    /// 繪制曲線 : 余弦
    glBegin(GL_LINE_STRIP);
    glColor3f(0.0f, 1.0f, 0.0f);
    for (x=-1.0f/factor; x<1.0f/factor; x+=0.01f) {
        glVertex2f(x*factor, cos(x)*factor);
    }
    glEnd();
    
    /// 繪制曲線 : 正切
    glBegin(GL_LINE_STRIP);
    glColor3f(0.0f, 0.0f, 1.0f);
    for (x=-1.0f/factor; x<1.0f/factor; x+=0.01f) {
        glVertex2f(x*factor, tan(x)*factor);
    }
    glEnd();
    
    glFlush();
}

三角函數(shù)

三、總結(jié)

3.1 帶著問(wèn)題學(xué)習(xí)

OpenGL 本身就是一門比較晦澀的語(yǔ)言，如果我們?cè)趯W(xué)習(xí)過(guò)程中沒(méi)有任何的想法，完全是去讀別人的思想，很難取得進(jìn)展的。
只有自己最清楚自己不理解的地方，將這些地方提出來(lái)，在學(xué)習(xí)的過(guò)程中去尋找答案，你一定能收獲到很多你自己意向不到的知識(shí)。

筆者這里在初始 OpenGL 的過(guò)程中存在以下一些問(wèn)題：

• GPU渲染過(guò)程是咋樣的？

  • 上下文切換
  • 垂直信號(hào)量
  • 當(dāng)前屏幕和離屏的區(qū)別
  • 三屏渲染

• 顯存是啥？

  • 顯存存的是啥玩意，有啥作用
  • 顯存在渲染中扮演啥角色

• CPU和GPU怎么通信

• 為啥要有GPU

  • GUP處理大量的渲染計(jì)算

3.2 獲取其他資料

OpenGL 的API 相對(duì)于 iOS開(kāi)發(fā)者來(lái)說(shuō)，顯得有一點(diǎn)晦澀難懂，體現(xiàn)在接口調(diào)用的方式、參數(shù)的設(shè)置、面向過(guò)程等，都會(huì)給我們帶來(lái)極大的困惑，所以筆者這里找到了一本 OpenGL 的API手冊(cè)，有中文注釋，可查詢方法，相對(duì)于直接看英文注釋來(lái)說(shuō)更加容易理解。

OpenGL4.5中文手冊(cè)