學(xué)習(xí)目標(biāo):

• 1. 圖形API簡介(了解)
• 2. OpenGL中專業(yè)名詞解析(了解)
• 3. OpenGL坐標(biāo)系解析(了解)
• 4. 圖形\圖片從文件渲染到屏幕過程解析(掌握)
• 5. 三角形渲染Demo(實踐)
• 6. 正方形圖形移動Demo(實踐)
• 7. 繪制圖形：三角形、正方形、圓、正弦函數(shù)(實踐)

1.圖形API簡介

• OpenGL(Open Graphics Library): 是一種圖形應(yīng)用程序編程接口(Application Programming Interface，API)。它是一種可以對圖形硬件設(shè)備特性進行訪問的軟件庫，OpenGL被設(shè)計為一個現(xiàn)代化的、硬件無關(guān)的接口，因此我們可以在不考慮計算機操作系統(tǒng)或窗口系統(tǒng)的前提下，在多種不同的圖形硬件系統(tǒng)上，完全通過軟件的方式實現(xiàn)OpenGL的接口。其特點是跨編程語言、跨平臺。

• OpenGL ES(OpenGL for Embedded Systems):是OpenGL的三維圖形API的子集，針對手機、pad和游戲主機等嵌入式設(shè)備而設(shè)計的，去除了一些不必要和性能低的API接口。

• DirectX:是由微軟公司創(chuàng)建的多媒體編程接口，是一種應(yīng)用程序接口。只能使用在windows系統(tǒng)中，并不跨平臺。按照性質(zhì)分類，可以分為四大部分，顯示部分、聲音部分、輸入部分和網(wǎng)絡(luò)部分。

• Metal:是由蘋果公司2014年推出的，提升了對3D圖像渲染性能，蘋果底層的渲染是由Metal來實現(xiàn)的。

使用場景：

• 在游戲開發(fā)中,對于游戲場景/游戲人物的渲染；
• 在?視頻開發(fā)中,對于視頻解碼后的數(shù)據(jù)渲染；
• 在地圖引擎,對于地圖上的數(shù)據(jù)渲染；
• 在動畫中,實現(xiàn)動畫的繪制；
• 在視頻處理中,對于視頻加上濾鏡效果。

本質(zhì)：利?GPU芯?高效渲染圖形圖像。

2.OpenGL中專業(yè)名詞解析

• 狀態(tài)機：狀態(tài)機是理論上的一種機器，描述了一個對象在其生命周期內(nèi)所經(jīng)歷的各種狀態(tài)，狀態(tài)間的轉(zhuǎn)變，發(fā)生轉(zhuǎn)變的動因，條件及轉(zhuǎn)變中所執(zhí)行的活動。具有以下特點：有記憶功能，能記住當(dāng)前的狀態(tài)；可以接收輸入，根據(jù)輸入的內(nèi)容和原先的狀態(tài)修改自己當(dāng)前的狀態(tài)，并且可以有對應(yīng)輸出；當(dāng)進入特殊狀態(tài)(停機狀態(tài))的時候，不再接收輸入，停止工作。

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

• OpenGL上下文(context):本身就是一個非常龐大的狀態(tài)機(State Machine)，其狀態(tài)通常被稱為OpenGL上下文(Context)。

  • 1.它里面保存了一系列的變量用來描述OpenGL此刻需要如何運行，比如拍照時候要開啟濾鏡功能等。
  • 2.OpenGL使用C語言編寫的，進而他的Api的封裝也都是面向過程的，其函數(shù)本質(zhì)上都是對OpenGL上下文狀態(tài)機中的某個狀態(tài)或者對象進行操作。
  • 3.應(yīng)用程序中可以創(chuàng)建多個不同的上下文，他們分別在各自的線程中使用。上下文之間共享紋理，緩沖區(qū)等資源，采用這種方案更為高效，因為它避免了反復(fù)切換上下文，或者大量修改渲染狀態(tài)所造成的較大的開銷。

• 渲染：將圖形\圖像數(shù)據(jù)轉(zhuǎn)換成3D空間的操作叫做渲染(Rendering)。

• 頂點數(shù)組(VertexArray)和頂點緩沖區(qū)(VertexBuffer)

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

• 管線：在OpenGL下渲染圖形，就會經(jīng)歷一個個節(jié)點，就像流水線一樣，可理解為渲染流水線。管線，實際上指的是一堆原始圖形數(shù)據(jù)途經(jīng)一個輸送管道，期間經(jīng)過各種變化處理最終出現(xiàn)在屏幕的過程的管理。圖形渲染管線可以被劃分為兩個主要部分：第一部分把你的3D坐標(biāo)轉(zhuǎn)換為2D坐標(biāo)，第二部分是把2D坐標(biāo)轉(zhuǎn)變?yōu)閷嶋H的有顏色的像素。管線可分為固定管線和可編程管線。

  • 固定管線：在早期的OpenGL版本，它封裝了很多種著色器程序塊，內(nèi)置了一段包含光照、坐標(biāo)轉(zhuǎn)換、裁剪等諸多功能的固定shader程序，來幫助開發(fā)者完成圖形的渲染。開發(fā)者只需要傳入相應(yīng)的參數(shù)，就能快速的完成圖形的渲染。類似于ios開發(fā)會封裝很多API，開發(fā)者只需要調(diào)用，不需要考慮底層的實現(xiàn)原理。
  • 可編程管線：但是由于OpenGL的場景非常豐富，固定管線無法完成每一個業(yè)務(wù)，這時將相關(guān)部分開放成可編程。
    舉例：假設(shè)是一家制造肥皂的工廠，如果是固定管線生產(chǎn)，我們投入肥皂水(頂點數(shù)據(jù)等)通過管線生產(chǎn)出來的可能是比較固化的肥皂,方的、圓的等等。自由性差了許多。
    而如果是可編程管線造肥皂，那我們可以在肥皂水倒入磨具過程中，通過程序修改它的造型。比如修改成桃心等。

• 著色器(Shader)：由于需要使用可編程管線，而著色器就是這些可編程的程序片段，用來替代原始管線的特定渲染階段。常見的著色器有頂點著色器(VertexShader)、片元著色器(FragmentShader)、幾何著色器(GeometryShader)、曲?細分著色器(TessellationShader)。前兩種是必須的，后面的是可選的。

  • 頂點著色器(VertexShader)：是OpenGL中用于計算頂點屬性的程序。需要計算的頂點屬性主要包括頂點坐標(biāo)變換(旋轉(zhuǎn)\平移\投影等)、頂點光照運算等。
  • 片元著色器：是OpenGL中用于計算片段(像素)顏色的程序。其特點是逐像素運算，也是并行的?？梢杂糜趶?fù)雜的混合算法。

• 光柵化(Rasterization)：光柵化就是把頂點數(shù)據(jù)轉(zhuǎn)換為片元的過程。具有將圖轉(zhuǎn)化為一個個柵格的作用，其特點是每個元素對應(yīng)幀緩沖區(qū)的一像素。本質(zhì)是將幾何圖元變?yōu)槎S圖像的過程。改過程分為兩部分工作。第一部分：決定窗口坐標(biāo)中的哪些整型柵格區(qū)域被基本圖元占用；第二部分：分配一個顏色值和深度值到各個區(qū)域。

• 紋理：可以理解為圖片。大家在渲染圖形時，為了使得場景更加逼真需要在其填充編碼時填充圖片。這里使用的圖片，就是常說的紋理。在OpenGL中，習(xí)慣叫紋理，而不是圖片。

• 混合：在測試階段之后，如果像素依然沒有被剔除，那么像素的顏色將會和幀緩沖區(qū)中顏色進行混合，混合的算法可以根據(jù)OpenGL的函數(shù)進行指定。但是OpenGL提供的混合算法是有限的，如果需要更加復(fù)雜的混合算法，一般可以通過片元著色器進行實現(xiàn)，當(dāng)然性能比原生的算法差一些。

3. OpenGL坐標(biāo)系解析

• 變換矩陣：用于圖形的平移、縮放、旋轉(zhuǎn)等變換。
• 投影矩陣：用于3D坐標(biāo)轉(zhuǎn)換為二維屏幕坐標(biāo)，線條也在二維坐標(biāo)下進行繪制。
• 坐標(biāo)系：OpenGL里每個頂點的z,y,z都應(yīng)該在?1到1之間，超出這個范圍的頂點將是不可見。頂點坐標(biāo)在轉(zhuǎn)換為屏幕坐標(biāo)之前會變換多個坐標(biāo)系統(tǒng)(Coordinate System)，之所以引入過渡坐標(biāo)系是為了更加方便操作和運算。共有5中比較重要的坐標(biāo)系系統(tǒng)：
  • 局部空間(Local Space)或者稱為物體空間(Object Space)
  • 世界空間(Word Space)
  • 觀察空間(View Space)或者稱為視覺空間(Eye Space)
  • 裁剪空間(Clip Space)
  • 屏幕空間(Screen Space)

將頂點從一個坐標(biāo)系轉(zhuǎn)換到另一個坐標(biāo)系需要用到幾個變換矩陣，其中幾個比較重要的是模型(Model)、觀察(View)、投影(Projection)三個矩陣。物體頂點的起始坐標(biāo)按序經(jīng)過上述5個坐標(biāo)系系統(tǒng)最終轉(zhuǎn)換為屏幕坐標(biāo)。頂點坐標(biāo)轉(zhuǎn)換的過程：物體頂點坐標(biāo)-->局部坐標(biāo)-->世界坐標(biāo)-->觀察坐標(biāo)-->裁剪坐標(biāo)-->屏幕坐標(biāo)。在3D圖形學(xué)中常用的坐標(biāo)系：

• 世界坐標(biāo)系：它是一個特殊的坐標(biāo)系，它建立了描述其他坐標(biāo)系所需要的參考系。也就是說，可以用世界坐標(biāo)系去描述其他所有坐標(biāo)系或者物體的位置。所以有很多人定義世界坐標(biāo)系是“我們所關(guān)心的最大坐標(biāo)系”，通過這個坐標(biāo)系可以去"描述和刻畫所有想刻畫的實體"。世界坐標(biāo)系始終是固定不變的。

• 物體坐標(biāo)系：物體坐標(biāo)系與特定的物體關(guān)聯(lián)，每個物體都有他們獨立的坐標(biāo)系。不同物體之間的坐標(biāo)系相互獨立，可以相同，可以不同，沒有任何聯(lián)系。同時，物體坐標(biāo)系與物體綁定，綁定的意思就是物體發(fā)生移動或者旋轉(zhuǎn)，物體坐標(biāo)系發(fā)生相同的平移或者旋轉(zhuǎn)，物體坐標(biāo)系和物體之間運動同步，相互綁定。
  舉例說明一下物體坐標(biāo)系：我們每個人都有自己的物體坐標(biāo)系，當(dāng)我們決定要往前走的時候，每個人實際前行的絕對方向都不一樣，可能是向北，也可能向南，或者其他方向。這里前后左右是物體坐標(biāo)系中的概念。當(dāng)告訴張三往前走，就是張三同學(xué)沿著自己物體坐標(biāo)系的前方運動。至于張三往前走是往東還是向北，這是張三的運動在世界坐標(biāo)系下的描述。
  

  物體坐標(biāo)系.png

• 攝像機坐標(biāo)系：攝像機坐標(biāo)系是和觀察者密切相關(guān)的坐標(biāo)系。攝像機坐標(biāo)系和屏幕坐標(biāo)系相似，差別在于攝像機坐標(biāo)系處于3D空間中，而屏幕坐標(biāo)系在2D平面。

  
  
  攝像機坐標(biāo)系.png

• 慣性坐標(biāo)系：慣性坐標(biāo)系是為了簡化世界坐標(biāo)系到慣性坐標(biāo)系的轉(zhuǎn)化而產(chǎn)生的。慣性坐標(biāo)系的原點與物體坐標(biāo)系的原點重合，慣性坐標(biāo)系的軸平行于世界坐標(biāo)系的軸。引入了慣性坐標(biāo)系之后，物體坐標(biāo)系轉(zhuǎn)換到慣性坐標(biāo)系只需旋轉(zhuǎn)，從慣性坐標(biāo)系轉(zhuǎn)換到世界坐標(biāo)系只需平移。
  

  慣性坐標(biāo)系的作用.png

• 模型變換：局部坐標(biāo)系(模型坐標(biāo)系)是為了方便構(gòu)造模型而設(shè)立的坐標(biāo)系，建立模型時我們無需關(guān)心最終對象顯示在屏幕哪個位置。模型變換的主要目的是通過變換使得頂點屬性定義或者3D建模軟件構(gòu)造的模型，能夠按照需要，通過縮小、平移等操作放置到場景中合適的位置。通過模型變換后，物體放置在一個全局的世界坐標(biāo)系中，世界坐標(biāo)系是所有物體交互的一個公共坐標(biāo)系。

• 視變換：視變換是為了方便觀察場景中物體而設(shè)立的坐標(biāo)系。

坐標(biāo)轉(zhuǎn)換過程

坐標(biāo)變換.png

用戶自定義變換和OpenGL變換

用戶和OpenGL變換.png

• 圖中左邊的過程包括模型變換、視變換，投影變換，這些變換可以由用戶根據(jù)需要自行指定，這些內(nèi)容在頂點著色器中完成；
• 圖中右邊的兩個步驟，包括透視除法、視口變換，是OpenGL自動執(zhí)行的，在頂點著色器處理后的階段完成。

4. 圖形\圖片從文件渲染到屏幕過程解析

OpenGL繪制過程：頂點著色器對頂點數(shù)據(jù)進行計算，再通過圖元裝配，將頂點轉(zhuǎn)換成圖元(點、線、三角形)，然后進行光柵化，把圖元這種矢量圖形，轉(zhuǎn)化為柵格化數(shù)據(jù)，最后將柵格化數(shù)據(jù)傳入片元著色器進行運算，片元著色器就會對柵格化中每個像素進行運算，并決定像素的顏色。頂點數(shù)據(jù)-->圖元-->柵格化數(shù)據(jù)-->片元-->像素顏色。

圖形渲染過程.png

• 初探OpenGL的Demo