OpenGL

前言

隨著短視頻、美顏相機(jī)等APP越來越火墓怀，對(duì)于一個(gè)移動(dòng)端開發(fā)工程師來說汽纠，跟上時(shí)代的潮流便是我們必備的意識(shí)。

當(dāng)然還有一點(diǎn)傀履，接觸移動(dòng)開發(fā)虱朵，我們不僅僅是要了解如果使用API去將控件擺在屏幕上，我們還應(yīng)該去了解钓账，圖片是如何去渲染到屏幕上面的碴犬，這里面到底有哪些過程，通過了解這些過程之后梆暮，在后面的開發(fā)這種我們能怎么去優(yōu)化項(xiàng)目呢服协？這里面的門道，往往是一些初中級(jí)程序員忽略的部分啦粹。

那么這一系列的文章偿荷，就是從OpenGL開始，手把手的帶大家感受圖形渲染的魅力唠椭。在我自己的學(xué)習(xí)過程中跳纳，也將自己的學(xué)習(xí)過程，以及學(xué)習(xí)成果分享給大家贪嫂。希望能幫助到大家寺庄，如果有不認(rèn)同的地方，歡迎能在留言中指出來，當(dāng)然也可以將問題發(fā)送到我的郵箱：coderspr1nghall@gmail.com斗塘。我們一起討論赢织，一起飛。

這篇文章主要是將一些常用的專業(yè)術(shù)語進(jìn)行總結(jié)馍盟，方便自己日后的查閱于置。

[TOC]

常用專業(yè)術(shù)語

一、語言種類

1朽合、OpenGL

OpenGL (Open Graphics library) 是?一個(gè)跨編程語?俱两、跨平臺(tái)的編程圖形程序接?，它將計(jì)算機(jī)的資源抽象稱為一個(gè)個(gè)OpenGL的對(duì)象曹步，對(duì)這些資源的操作抽象為一個(gè)個(gè)的OpenGL指令宪彩。

2、OpenGL ES

OpenGL ES (OpenGL for Embedded Systems) 是 OpenGL 三維圖形 API 的子集讲婚，針對(duì)?機(jī)尿孔、 PDA和游戲主機(jī)等嵌入式設(shè)備而設(shè)計(jì)，去除了許多不必要和性能較低的API接口筹麸。

3活合、DirectX

DirectX 是由很多API組成的，DirectX并不是一個(gè)單純的圖形API. 最重要的是DirectX是屬于 Windows上一個(gè)多媒體處理API.并不支持Windows以外的平臺(tái),所以不是跨平臺(tái)框架. 按照性 質(zhì)分類物赶，可以分為四大部分白指，顯示部分、聲音部分酵紫、輸?部分和網(wǎng)絡(luò)部分告嘲。

4、Metal

Metal 是Apple為游戲開發(fā)者推出了新的平臺(tái)技術(shù) Metal奖地，該技術(shù)能夠?yàn)?3D 圖 像提高 10 倍的渲染性能橄唬。Metal 是Apple為了解決3D渲染?而推出的框架。

其實(shí)蘋果自14年推出Metal 之后参歹，就已經(jīng)很明確的告訴大家仰楚，在極限性能方面，Metal 的表現(xiàn)是要更加的出色的犬庇。因?yàn)樗麄儗?duì)Metal做了很多針對(duì)性的優(yōu)化僧界，讓他在iOS的設(shè)備上能有一個(gè)更完美的發(fā)揮。

這里也可以看出臭挽，Metal是可以取代OpenGL ES的捎泻。但是現(xiàn)在市場(chǎng)上面，依然還是OpenGL ES的使用率更高埋哟。所以OpenGL ES和Metal的關(guān)系就有點(diǎn)像是Objective-C和Swift的關(guān)系一樣。

二、OpenGL專業(yè)名詞解析

1赤赊、OpenGL 上下文（ Context ）

• 在應(yīng)用程序調(diào)用任何OpenGL指令之前闯狱，需要安排首先創(chuàng)建一個(gè)OpenGL的上下文。這個(gè)上下文是一個(gè)非常龐大的狀態(tài)機(jī)抛计，保存了OpenGL中的各種狀態(tài)哄孤，這也是OpenGL指令執(zhí)行的基礎(chǔ)。

• 其實(shí)這里的上下文吹截，我們可以類比一下JSContext瘦陈，我在之前的一篇講JSCore的博客里面講到過這個(gè)東西。我們?cè)诓僮魅魏蔚膶?duì)象的時(shí)候波俄，都需要通過上下文去拿到對(duì)象晨逝，同時(shí)上下文里面也記錄了很多的我們需要使用的信息。

• OpenGL的函數(shù)不管在哪個(gè)語言中懦铺，都是類似C語言一樣的面向過程的函數(shù)捉貌，本質(zhì)上面都是對(duì)OpenGL上下文這個(gè)龐大的狀態(tài)機(jī)中的某個(gè)狀態(tài)或者對(duì)象進(jìn)行操作。當(dāng)然你得首先把這個(gè)對(duì)象設(shè)置為當(dāng)前對(duì)象冬念。因此趁窃，通過對(duì)OpenGL指令的封裝，是可以將OpenGL的相關(guān)調(diào)用封裝成為一個(gè)面向?qū)ο蟮膱D形API的急前。

• 由于OpenGL上下文是一個(gè)巨大的狀態(tài)機(jī)醒陆，切換上下文往往會(huì)產(chǎn)生較大的開銷。但是不同的繪制模塊裆针，可能需要使用完全獨(dú)立的狀態(tài)管理刨摩。因此，可以在應(yīng)用程序中分別創(chuàng)建多個(gè)不同的上下文据块，在不同的線程中使用不同的上下文码邻，上下文之間共享紋理、緩沖區(qū)等資源另假。這樣的方案像屋，會(huì)比反復(fù)切換上下文，或者大量修改渲染狀態(tài)边篮，更加合理高效的己莺。

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

狀態(tài)機(jī)理論上是一種機(jī)器戈轿，其實(shí)我們可以這樣去理解凌受，狀態(tài)機(jī)描述了一個(gè)對(duì)象在其生命周期中所經(jīng)歷的各種狀態(tài)，狀態(tài)之間的轉(zhuǎn)變思杯，發(fā)生轉(zhuǎn)變的動(dòng)因胜蛉，條件以及轉(zhuǎn)變中所執(zhí)行的活動(dòng)挠进。這一點(diǎn)上來說，跟JSContext也可以類比一下誊册。我們的任何行為都是依賴著狀態(tài)機(jī)的领突，狀態(tài)機(jī)會(huì)記錄所有的行為，那么我們?cè)谛枰褂媚骋粋€(gè)行為的時(shí)候案怯，也是可以通過狀態(tài)機(jī)去拿出來某一個(gè)行為君旦。所以狀態(tài)機(jī)也是一種行為，說明對(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í)候，便不再接收輸入离咐，停止工作谱俭。

3、渲染（Rendering）

這個(gè)好理解宵蛀，就是將圖形/圖像數(shù)據(jù)轉(zhuǎn)換成3D空間圖像操作叫做渲染昆著。例如，在圖片或者視頻進(jìn)行解碼之后术陶，形成了一大堆的二進(jìn)制文件凑懂，然后我們將這一堆的二進(jìn)制文件顯示到屏幕上面的過程就可以理解為渲染。

4梧宫、頂點(diǎn)數(shù)組（VertexArray）

那么什么是頂點(diǎn)呢接谨？頂點(diǎn)就是指我們?cè)倮L制一個(gè)圖形的時(shí)候，他的頂點(diǎn)的位置數(shù)據(jù)塘匣，這個(gè)數(shù)據(jù)是可以直接存儲(chǔ)在數(shù)組中或者將其緩存在GPU內(nèi)存中的脓豪。如果存儲(chǔ)在數(shù)組中就構(gòu)成了頂點(diǎn)數(shù)組。其實(shí)頂點(diǎn)數(shù)據(jù)就是我們?cè)诋嫯嫷臅r(shí)候忌卤，最開始畫的一個(gè)大致的骨架扫夜。在OpenGL中的圖像都是由圖元組成。在OpenGL ES中驰徊，有三種圖元：點(diǎn)笤闯、線、三角形棍厂。我們通過設(shè)定函數(shù)的指針颗味，將頂點(diǎn)數(shù)據(jù)存儲(chǔ)在內(nèi)存中，然后需要繪制的時(shí)候牺弹，直接從內(nèi)存中取出來使用浦马。這一部分的數(shù)據(jù)其實(shí)就是頂點(diǎn)數(shù)組时呀。

5、頂點(diǎn)緩沖區(qū)（VertexBuffer）

我們上面說了捐韩，我們?cè)谡{(diào)用繪制方法的時(shí)候退唠，直接就由內(nèi)存?zhèn)魅腠旤c(diǎn)數(shù)據(jù)。還有一種更加高性能的方法荤胁，就是提前分配一快內(nèi)存，將頂點(diǎn)數(shù)據(jù)預(yù)先傳入到顯存當(dāng)中屎债，這部分的顯存仅政，就叫做頂點(diǎn)緩沖區(qū)。值得注意的是盆驹，這一塊空間不再內(nèi)存中圆丹，而是在顯存的一塊空間中。

6躯喇、管線

因?yàn)槲覀兊腉PU在處理數(shù)據(jù)的時(shí)候辫封，是通過一個(gè)固定的順序來的，這個(gè)順序不能被打破廉丽。類似一個(gè)流水線的形式倦微，所以被稱之為管線。

7正压、固定管線/存儲(chǔ)著色器

• 在早期的OpenGL版本欣福，它封裝了很多著色器程序塊內(nèi)置的一段包含了光照、坐標(biāo)變換焦履、裁剪等等諸多功能的固定shader程序來完成拓劝，來幫助開發(fā)者來完成圖形的渲染。而開發(fā)者只需要傳入相應(yīng)的參數(shù)嘉裤，就能快速完成圖形的渲染郑临，類似于iOS開發(fā)會(huì)封裝很多的API。而我們只需要調(diào)用屑宠，就可以實(shí)現(xiàn)功能厢洞，不需要關(guān)注底層實(shí)現(xiàn)原理

• 但是猶豫OpenGL的使用場(chǎng)景非常豐富，固定管線或存儲(chǔ)著色器無法完成每一個(gè)業(yè)務(wù)侨把，這是將相關(guān)部分開放成可編程犀变。

8、著色器程序Shader

• 就全面的將固定渲染管線架構(gòu)變?yōu)榱丝删幊啼秩竟芫€秋柄。因此获枝，OpenGL在實(shí)際調(diào)?繪制函數(shù)之前，還需要指定一個(gè)由shader編譯成的著色?程序骇笔。常見的著色?主要有頂點(diǎn)著??(VertexShader)省店，?段著?? (FragmentShader)/像素著??(PixelShader)/片元著色器嚣崭，?何著?? (GeometryShader)，曲?細(xì)分著??(TessellationShader)懦傍。?段著??和像素著??只是在OpenGL和DX中的不同叫法?而已雹舀。可惜的是粗俱，直到 OpenGLES 3.0说榆，依然只支持了頂點(diǎn)著??和片段著??這兩個(gè)最基礎(chǔ)的著??。

• OpenGL在處理shader時(shí)寸认，和其他編譯器一樣签财。通過編譯、鏈接等步驟偏塞，?成了著??程序(glProgram)唱蒸，著??程序同時(shí)包含了頂點(diǎn)著??和?段著??的運(yùn)算邏輯。在OpenGL進(jìn)行繪制的時(shí)候灸叼，?先由頂點(diǎn)著??對(duì)傳?的頂點(diǎn)數(shù)據(jù)進(jìn)行運(yùn)算神汹。再通過圖元裝配，將頂點(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)算但狭，并決定像素的顏?披诗。

9、頂點(diǎn)著色器VertexShader

• 一般用來處理圖形每個(gè)頂點(diǎn)變換[旋轉(zhuǎn)/平移/投影等]

• 頂點(diǎn)著色器是OpenGL中用于計(jì)算頂點(diǎn)屬性的程序立磁。頂點(diǎn)著色器是逐個(gè)頂點(diǎn)運(yùn)算的程序呈队，也就是說每個(gè)頂點(diǎn)數(shù)據(jù)都會(huì)執(zhí)行一次頂點(diǎn)著色器，當(dāng)然這是并行的唱歧，并且頂點(diǎn)著色器運(yùn)算過程中無法訪問其他頂點(diǎn)的數(shù)據(jù)

• 一般來說典型的需要計(jì)算的頂點(diǎn)屬性包括頂點(diǎn)坐標(biāo)變換宪摧、逐個(gè)頂點(diǎn)光照運(yùn)算等等。頂點(diǎn)坐標(biāo)由自身坐標(biāo)系轉(zhuǎn)換到歸一化做標(biāo)記的運(yùn)算颅崩，就是在這里發(fā)生的几于。

10、片元著色器FragmentShader

• 一般用來處理圖形中每個(gè)像素點(diǎn)顏色計(jì)算和填充

• 片段著色器是OpenGL中用于計(jì)算片段（像素）顏色的程序沿后。片段著色器是逐個(gè)像素運(yùn)算的程序沿彭，也就是說每個(gè)像素都會(huì)執(zhí)行一次片段著色器，當(dāng)然也是并行的尖滚。

11喉刘、GLSL（OpenGL Shading language)

• OpenGL著色語言（OpenGL Shading language)是用來在OpenGl中著色編程的語言瞧柔，類似于C語言。他們是在圖形卡的GPU（Graphic Proccessor Unit圖形處理單元）上執(zhí)行的睦裳。代替了固定的渲染管線的一部分造锅，使渲染管線中不同層次具有可編程性。比如：視圖轉(zhuǎn)換廉邑、投影轉(zhuǎn)換等哥蔚。GLSL的著色器代碼分成兩個(gè)部分：頂點(diǎn)著色器和片段著色器

12、光柵化Rasterization

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

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

• 光柵化其實(shí)是一種將幾何圖元變?yōu)槎S圖像的過程。該過程包含了兩部分的工作猴伶。第一部分工作：決定了窗口坐標(biāo)中哪些整型格柵區(qū)域被基本圖元占用课舍。第二部分工作：分配一個(gè)顏色值和一個(gè)深度值到各個(gè)區(qū)域。光柵化過程產(chǎn)生的是片元他挎。

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

13办桨、紋理

紋理可以理解為一個(gè)圖片筹淫，也就是位圖。?家在渲染圖形時(shí)需要在其編碼填充圖?,為了使得場(chǎng)景更加逼真.?這里使?的圖片,就是常說的紋理.但是在OpenGL,我們更加習(xí)慣叫紋理,?不是圖片呢撞。

14损姜、混合（Blending）

在測(cè)試階段之后，如果像素依然沒有被剔除殊霞，那么像素的顏色將會(huì)和幀緩沖區(qū)中顏色附著上的顏色進(jìn)行混合摧阅，混合的算法可以通過OpenGL的函數(shù)進(jìn)行指定。但是OpenGL提供的混合算法是有限的绷蹲，如果需要更加復(fù)雜的混合 算法棒卷，?般可以通過像素著??進(jìn)行實(shí)現(xiàn)，當(dāng)然性能會(huì)比原生的混合算法差一些祝钢。

15比规、變換矩陣(Transformation)

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

16蜒什、投影矩陣（Projection）

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

17龄章、渲染上屏/交換緩沖區(qū)(SwapBuffer)

當(dāng)我們想把一個(gè)圖像渲染到窗口的時(shí)候吃谣，GPU會(huì)開辟一個(gè)渲染緩沖區(qū)乞封。但是每一個(gè)窗口又只有一個(gè)緩沖區(qū)，那么如果在繪制的過程中屏幕進(jìn)行了刷新岗憋，窗口顯示的畫面就有可能不完整肃晚。為了解決這個(gè)問題，常規(guī)的OpenGL程序至少都會(huì)有兩個(gè)緩沖區(qū)仔戈。顯示在屏幕上的稱為屏幕緩沖區(qū)关串，沒有顯示的稱為離屏緩沖區(qū)，在一個(gè)緩沖區(qū)渲染完成之后监徘，通過將屏幕緩沖區(qū)和離屏緩沖區(qū)交換晋修，實(shí)現(xiàn)圖像在屏幕上的顯示。在iOS中經(jīng)常遇到的離屏渲染凰盔，其實(shí)就是雙緩沖區(qū)的機(jī)制引起的墓卦。如果這方面有疑問的，可以移步iOS 保持界面流暢的技巧去了解户敬。

使用了雙緩沖區(qū)和垂直同步技術(shù)之后落剪，由于總是要等待緩沖區(qū)交換之后再進(jìn)行下一幀的渲染，使得幀率無法完全達(dá)到硬件允許的最高水平尿庐。為了解決這個(gè)問題忠怖，引入了三緩沖區(qū)技術(shù)，在等待垂直同步時(shí)抄瑟，來回交替渲染兩個(gè)離屏的緩沖區(qū)凡泣，而垂直同步發(fā)生時(shí)，屏幕緩沖區(qū)和最近渲染完成的離屏緩沖區(qū)交換皮假，實(shí)現(xiàn)充分利用硬件性能的目的鞋拟。