5魂奥、OpenGL初探之OpenGL渲染基礎(OpenGL圖元/固定管線下的著色器)

初識OpenGL的開發(fā)者需要先要學會固定管線的渲染流程和思路菠剩,為之后學習可編程管線以及編寫GLSL著色器程序打好基礎,固定管線和可編程管線的區(qū)別只在于著色器程序的區(qū)別耻煤,其他的業(yè)務邏輯基本一致具壮,好了,解釋完了哈蝇,開始上干貨概念部分

1、OpenGL固定管線下的多種存儲著色器介紹
2、OpenGL圖元
3验烧、OpenGL點/線/三角形
4向叉、OpenGL工具類GLBatch的使用

一、OpenGL固定管線的存儲著色器介紹


固定管線下吠勘,我們需要使用到一個類GLShaderManager(著色器管理者),下面我們來學習一下GLShaderManager的初始化

//定義全局變量
GLShaderManager shaderManager;

//在OpenGL環(huán)境配置完成后開始初始化
shaderManager.InitializeStockShaders();

介紹完GLShaderManager初始化之后性芬,我們來學習一下固定管線下的存儲著色器,使用固定管線下的存儲著色器的時候剧防,你不需要知道哪些工作是頂點著色器來完成批旺,哪些工作是由片元著色器完成,該使用哪個通道進行傳值诵姜,你只需要學會使用對應的API把需要的入參傳入進去就行了汽煮,剩下的交給它搏熄,它已經封裝好了這些功能。

先說明一下暇赤,在OpenGL里面我們使用任何固定管線心例,都是使用這一個函數(shù),不同的著色器類型鞋囊,僅僅是對應著色器的參數(shù)不相同而已

shaderManager.UseStockShader(<#GLT_STOCK_SHADER nShaderID, ...#>)

接下來我們開始著色器的學習:

1止后、單元著色器

使用場景:繪制默認OpenGL坐標系(-1,1)下的圖形溜腐,圖形的所有片段都會以一種顏色填充

API函數(shù):

GLShaderManager::UserStockShader(GLT_SHADER_IDENTITY,GLfloat vColor[4]);

參數(shù)1:存儲著色器種類-單元著色器GLT_SHADER_IDENTITY
參數(shù)2:一維顏色數(shù)組译株,下標分別對應RGBA

2、平面著色器

使用場景:在繪制圖形時挺益,可以應用變換歉糜,例如仿射變換(投影/模型)變化

API函數(shù):

GLShaderManager::UserStockShader(GLT_SHADER_FLAT,GLfloat mvp[16],GLfloat vColor[4]);

參數(shù)1:存儲著色器種類-平面著色器GLT_SHADER_FLAT
參數(shù)2:允許變化的4*4矩陣
參數(shù)3:一維顏色數(shù)組,下標分別對應RGBA

3望众、上色著色器

使用場景:在繪制圖形時匪补,可以應用變化(仿射變換,例如投影/模型變化)顏色將會平滑的插入到頂點之間稱為平滑著色.

API函數(shù):

GLShaderManager::UserStockShader(GLT_SHADER_SHADED,GLfloat mvp[16]);

參數(shù)1:存儲著色器種類-上色著色器GLT_SHADER_SHADED
參數(shù)2:允許變化的4*4矩陣

4、默認光源著色器

使用場景:在繪制圖形時烂翰,可以應用變化(仿射變換,例如投影/模型變化)這種著色器會使繪制的圖形產生陰影和光照效果(平行光)夯缺。

API函數(shù):

GLShaderManager::UserStockShader(GLT_SHADER_DEFAULT_LIGHT,GLfloat mvMatrix[16],GLfloat pMatrix[16],GLfloat vColor[4]);

參數(shù)1:存儲著色器種類-默認光源著色器GLT_SHADER_DEFAULT_LIGHT
參數(shù)2:模型4*4矩陣
參數(shù)3:投影4*4矩陣
參數(shù)4:顏色值(注意:繪制這個圖形的顏色,不是光的顏色)

5甘耿、點光源著色器

使用場景:在繪制圖形時踊兜,可以應用變化(仿射變換,例如投影/模型變化)這種著色器會使繪制的圖形產生陰影和光照效果(平行光)。它與默認光源著色器非常類似佳恬,區(qū)別只是光源的位置可能是特定的捏境。

API函數(shù):

GLShaderManager::UserStockShader(GLT_SHADER_POINT_LIGHT_DIEF,GLfloat mvMatrix[16],GLfloat pMatrix[16],GLfloat vLightPos[3],GLfloat vColor[4]);

參數(shù)1:存儲著色器種類-點光源著色器GLT_SHADER_POINT_LIGHT_DIEF
參數(shù)2:模型4*4矩陣
參數(shù)3:投影4*4矩陣
參數(shù)4:點光源的位置(x,y,z)因為光源不需要w(奇次坐標,通俗稱縮放因子)
參數(shù)5:漫反射顏色值

6殿怜、紋理替換矩陣著色器

使用場景:在繪制圖形時典蝌,可以應用變化(投影/模型變化)這種著色器通過給定的模型視圖投影矩陣.使用紋理單元來進行顏色填充,其中每一個像素點的顏色值是從紋理中獲取.

API函數(shù):

GLShaderManager::UserStockShader(GLT_SHADER_TEXTURE_REPLACE,GLfloat mvMatrix[16],GLint nTextureUnit);

參數(shù)1:存儲著色器種類-紋理替換矩陣著色器GLT_SHADER_TEXTURE_REPLACE
參數(shù)2:模型4*4矩陣
參數(shù)3:紋理單元

7头谜、紋理調整著色器

使用場景:在繪制圖形時骏掀,可以應用變化(投影/模型變化)這種著色器通過給定的模型視圖投影矩陣.著色器將一個基本色乘以一個取自紋理單元nTextureUnit的紋理,將顏色與紋理進行顏色混合后才填充到片段中.

API函數(shù):

GLShaderManager::UserStockShader(GLT_SHADER_TEXTURE_MODULATE,GLfloat mvMatrix[16],GLfloat vColor[4],GLint nTextureUnit);

參數(shù)1:存儲著色器種類-紋理調整著色器GLT_SHADER_TEXTURE_MODULATE
參數(shù)2:模型4*4矩陣
參數(shù)3:顏色值
參數(shù)4:紋理單元

8柱告、紋理光源著色器

使用場景:在繪制圖形時截驮,可以應用變化(投影/模型變化)這種著色器通過給定的模型視圖投影矩陣.著色器將一個紋理通過漫反射照明計算進行調整(相乘).

API函數(shù):

GLShaderManager::UserStockShader(GLT_SHADER_TEXTURE_POINT_LIGHT_DIEF,G Lfloat mvMatrix[16],GLfloat pMatrix[16],GLfloat vLightPos[3],GLfloat vBaseColor[4],GLint nTextureUnit);

參數(shù)1:存儲著色器種類-紋理光源著色器GLT_SHADER_TEXTURE_POINT_LIGHT_DIEF
參數(shù)2:模型4*4矩陣
參數(shù)3:投影4*4矩陣
參數(shù)4:點光源的位置
參數(shù)5:顏色值(幾何圖形的基本色)
參數(shù)6:紋理單元

二、OpenGL基本圖元


OpenGL常用的7種基本圖元及圖元描述分別如下表

OpenGL7種圖元.png

其中最受歡迎的是三角形GL_TRIANGLES际度,因為三角形理論上是可以繪制任何圖形的葵袭。

下面是這6種的示例圖(備注:GL_POINTS點的就不畫了)

OpenGL圖元圖示.png

三、OpenGL點/線/三角形及三角形的環(huán)繞方式


1乖菱、最簡單也是最常用的方法glPointSize

glPointSize(<#GLfloat size#>);

參數(shù)1:表示點的大小

例如:
glPointSize(4.0f);

2坡锡、設置點的大小范圍和點與點之間的間隔,獲取點大小范圍和最小步長

GLfloat sizes[2] = {2.0f, 8.0f};
GLfloat step = 1.0f;
    
glGetFloatv(GL_POINT_SIZE_RANGE, sizes);
glGetFloatv(GL_POINT_SIZE_GRANULARITY, &step);

3蓬网、通過使用程序點大小模式來設置點的大小,這種模式下允許我們通過編程在頂點著色器或者幾何著色器中設置點的大小鹉勒。著色器內建變量gl_PointSize帆锋,并且可以在著色器源碼中直接寫.

glEnable(GL_PROGRAM_POINT_SIZE);

gl_PointSize = 5.0

4、設置線段寬度

glLineWidth(<#GLfloat width#>)

參數(shù)1:線段寬度

例如:
glLineWidth(3.f);

5禽额、對于OpenGL光柵化最受歡迎的就是三角形锯厢,3個頂點就能構成一個三角形,三角形的類型(形狀)取決于3個頂點的連接方式和頂點坐標脯倒,例如并不是所有的三角形都是正三角形实辑,三角形的連接方式是GL_TRIANGLES,可以參考圖元那張圖中的GL_TRIANGLES

6藻丢、三角形的環(huán)繞方式

參考上面OpenGL圖元那張圖中的GL_TRIANGLES

在繪制第一個三?角形時剪撬,線條是按照從A0->A1->A2->A0連接起來的,形成一個閉合三角形郁岩。 三角形A0A1A2這個是沿著頂點逆時針方向婿奔,而三角形A3A4A5這個三角形是顏色頂點順時針方向的缺狠。這種順序與方向結合來指定頂點的?式稱為環(huán)繞问慎。

默認情況下,OpenGL認為具有逆時針方向環(huán)繞的多邊形為正面.這就意味著三角形A0A1A2是正面挤茄,而三角形A3A4A5這個是反面.

7如叼、三角形帶及三角形帶的優(yōu)點

對于很多表面或者形狀而言,我們會需要繪制幾個相連的三角形. 這時我們可以使用GL_TRIANGLE_STRIP 圖元繪制?串串相連的三角形,從而節(jié)省大量的時間.如上面OpenGL圖元圖片中的GL_TRIANGLE_STRIP

三角形帶的優(yōu)點:

三角形帶的優(yōu)點:

1、用前3個頂點指定第1個三角形之后穷劈,對于接下來的每一個三角形笼恰,只需要再指定1個頂點。需要繪制?量的三角形時歇终,采用這種?法可以節(jié)省大量的程序代碼和數(shù)據(jù)存儲空間

2社证、提供運算性能和節(jié)省帶寬。更少的頂點意味著數(shù)據(jù)從內存?zhèn)鬏數(shù)綀D形卡的速度更快评凝,并且頂點著色器需要處理的次數(shù)也更少了追葡。

8、三角形扇

對于很多表?或者形狀而言,我們會需要繪制幾個相連的三?形. 這時我們可以使?GL_TRIANGLE_FAN 圖元繪制?組圍繞?個中心點相連的三角形奕短,如上面OpenGL圖元圖片中的GL_TRIANGLE_FAN

四宜肉、OpenGL工具類GLBatch的常用API的使用


GLBatch 俗稱批次類,是在GLTools中包含的一個簡單的容器類.常用的API如下:

1翎碑、設置圖元谬返,頂點數(shù)和紋理坐標(紋理坐標可選)

void GLBatch::Begain(GLeunm primitive,GLuint nVerts,GLuint nTexttureUnints = 0);

參數(shù)1:圖元
參數(shù)2:頂點數(shù)
參數(shù)3:一組或者兩組紋理坐標(可選參數(shù))

2、復制頂點數(shù)據(jù)(一個由3分量x,y,z頂點組成的一維數(shù)組)

void GLBatch::CopyVerterxData3f(GLfloat *vVerts);

參數(shù)1:3分量頂點數(shù)組日杈,代表(x,y,z)

3遣铝、復制表面法線數(shù)據(jù)

void GLBatch::CopyNormalDataf(GLfloat *vNorms);

參數(shù)1:法線

4佑刷、復制顏色數(shù)據(jù)

void GLBatch::CopyColorData4f(GLfloat *vColors);

參數(shù)1:RGBA顏色值數(shù)組

5、復制紋理坐標數(shù)據(jù)

void GLBatch::CopyTexCoordData2f(GLFloat *vTextCoords, GLuint uiTextureLayer);

6酿炸、結束數(shù)據(jù)復制

void GLBatch::End(void);

7项乒、繪制圖形

void GLBatch::Draw(void);

下一節(jié),我們會使用固定存儲著色器做一下多種圖元組合實現(xiàn)梁沧,今天就到這里啦~

溪浣雙鯉的技術摸爬滾打之路

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末檀何,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子廷支,更是在濱河造成了極大的恐慌频鉴,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,198評論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件恋拍,死亡現(xiàn)場離奇詭異垛孔,居然都是意外死亡,警方通過查閱死者的電腦和手機施敢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評論 3 398
  • 文/潘曉璐 我一進店門周荐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人僵娃,你說我怎么就攤上這事概作。” “怎么了默怨?”我有些...
    開封第一講書人閱讀 167,643評論 0 360
  • 文/不壞的土叔 我叫張陵讯榕,是天一觀的道長。 經常有香客問我匙睹,道長愚屁,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,495評論 1 296
  • 正文 為了忘掉前任痕檬,我火速辦了婚禮霎槐,結果婚禮上,老公的妹妹穿的比我還像新娘梦谜。我一直安慰自己丘跌,他們只是感情好,可當我...
    茶點故事閱讀 68,502評論 6 397
  • 文/花漫 我一把揭開白布改淑。 她就那樣靜靜地躺著碍岔,像睡著了一般。 火紅的嫁衣襯著肌膚如雪朵夏。 梳的紋絲不亂的頭發(fā)上蔼啦,一...
    開封第一講書人閱讀 52,156評論 1 308
  • 那天,我揣著相機與錄音仰猖,去河邊找鬼捏肢。 笑死奈籽,一個胖子當著我的面吹牛,可吹牛的內容都是我干的鸵赫。 我是一名探鬼主播衣屏,決...
    沈念sama閱讀 40,743評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼辩棒!你這毒婦竟也來了狼忱?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,659評論 0 276
  • 序言:老撾萬榮一對情侶失蹤一睁,失蹤者是張志新(化名)和其女友劉穎钻弄,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體者吁,經...
    沈念sama閱讀 46,200評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡窘俺,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,282評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了复凳。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瘤泪。...
    茶點故事閱讀 40,424評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖育八,靈堂內的尸體忽然破棺而出对途,到底是詐尸還是另有隱情,我是刑警寧澤单鹿,帶...
    沈念sama閱讀 36,107評論 5 349
  • 正文 年R本政府宣布掀宋,位于F島的核電站深纲,受9級特大地震影響仲锄,放射性物質發(fā)生泄漏。R本人自食惡果不足惜湃鹊,卻給世界環(huán)境...
    茶點故事閱讀 41,789評論 3 333
  • 文/蒙蒙 一儒喊、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧币呵,春花似錦怀愧、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至妻柒,卻和暖如春扛拨,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背举塔。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評論 1 271
  • 我被黑心中介騙來泰國打工绑警, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留求泰,地道東北人。 一個月前我還...
    沈念sama閱讀 48,798評論 3 376
  • 正文 我出身青樓计盒,卻偏偏與公主長得像渴频,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子北启,可洞房花燭夜當晚...
    茶點故事閱讀 45,435評論 2 359

推薦閱讀更多精彩內容