一、WebGL編程指南筆記——本身總結

一、參考書目：

OpenGL

《OpenGL 着色語言》（一般也稱做「橘皮書」）

經典紅寶書

《Computer Graphics: Principles and Practice》第 3 版， John F. Hughes 等著（ AddisonWesley， 2013）

《3D Computer Graphics》， Andrew S. Glassner 著（The Lyons Press， 1994）

《OpenGL Reference Manual》

 

二、內置變量：

gl_Position

gl_PointSize

gl_FragColor

gl_FragCoord vec4 該內置變量的前兩個參數表示片元在< canvas >座標系統（窗口座標系統）中的座標值。

 

gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);//向變量賦值

gl.vertexAttrib4fv（a_Position，positions）；將一個個數據改爲了向量。

var vertexBuffer = gl.createBuffer(); 使用緩衝區 批量輸入

 

gl.uniform4f(u_FragColor, rgba[0], rgba[1], rgba[2], rgba[3]);//單個輸入

gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);//矩陣數組輸入

 

// Unbind the buffer object

gl.(gl.ARRAY_BUFFER, null); 記得給緩衝區解綁

 

三、js要作的是向頂點着色器和片源着色器中傳入 處理後的 最終的頂點、顏色、矩陣、法向量等基本信息；而後在着色器代碼中，也便是字符串代碼中進行乘數運算，固然了，提早在着色器中命名好 attribute、 uniform、 varying 等變量，在js的初始化代碼中進行變量地址獲取，傳入數值等操做。

 

四、WebGL中矩陣的存儲是以列主序存儲： 列主序+行主序；

着色器的代碼就是簡單的字符串，能夠直接在javascript內部定義字符串。

 

五、矩陣變換的時候獲得的乘數矩陣和變換順序是相反的：仔細想一想矩陣的變換的前後順序就知道了，由於都是左乘！

 

六、「 根據自定義的觀察者狀態，繪製觀察者看到的景象 」 與 「 使用默認的觀察狀態，可是對三維對象進行平移、旋轉等變換、再繪製觀察者看到的景象 」，這兩種行爲是等價的。

 

七、視圖矩陣（觀察者的狀態信息：視點+觀察點+上方向）

模型矩陣（平移、縮放、旋轉的混合矩陣）

投影矩陣（正射投影矩陣+透視投影矩陣）

 

模型視圖矩陣 = 視圖矩陣 x 模型矩陣

模型視圖投影矩陣 = 投影矩陣 x 視圖矩陣 x 模型矩陣

 

八、在任何三維場景中，都應該開啓隱藏面消除，並在適當的時刻清空深度緩衝區（一般是在繪製每一幀以前）。不過須要注意的是，隱藏面的消除的前提是正確設置可視空間，不然則肯產生錯誤，不論是盒裝的正射投影空間，仍是金字塔狀的透視投影空間，必須使用一個。

 

九、gl.drawElements（）會索引到存在的每一個buffer，好比建立的頂點buffer和顏色buffer。都會索引到，而後提取裏面的值。

 

十、光照使得場景更具備層次感

// Create a cube

// v6----- v5

// /| /|

// v1------v0|

// | | | |

// | |v7---|-|v4

// |/ |/

// v2------v3

' vec4 vertexPosition = u_ModelMatrix * a_Position;\n' +

// Calculate the light direction and make it 1.0 in length

' vec3 lightDirection = normalize(u_LightPosition - vec3(vertexPosition));\n' +

 

十一、光照的邏輯處理在頂點着色器和片元着色器中存在區別：將頂點着色器中的邏輯所有移動到片元着色器中，對於varying變量仍然只須要 color這一個，其他仍然保持爲與着色器無關的 uniform 變量。在頂點着色器中算好 中的三個變量： （頂點） + （基底色）+ （法向量） 在變換以後的新信息便可，而後傳入到片元着色器中。

' gl_Position = u_MvpMatrix * a_Position;\n' +

// Calculate the vertex position in the world coordinate

' v_Position = vec3(u_ModelMatrix * a_Position);\n' +

' v_Normal = normalize(vec3(u_NormalMatrix * a_Normal));\n' +

' v_Color = a_Color;\n'

 

'uniform vec3 u_LightColor;\n' + // Light color

'uniform vec3 u_LightPosition;\n' + // Position of the light source

'uniform vec3 u_AmbientLight;\n' + // Ambient light color

後面三個變量直接命名在片元着色器中了。

 

具體參考筆記 頂點處理 VS 片元處理

 

 

座標變換

不管用DirectX仍是OpenGL，最終都須要將三維的情報向二維進行變換。就像剛開始說的那樣，最終的圖像都是由二維顯示器來顯示的。這時候，座標變換就是必須的了。座標變換大體能夠分爲三種，將這些正確的組合在一塊兒，最終決定顯示器上的位置。用身邊的東西舉例說明的話，三維向二維轉換的例子就是照相機。照片和圖像，經過照相機已經所有變爲了二維，最終，輸出成了照片和動畫。

 

模型變換

三種座標變換中的第一個，是模型變換。在OpenGL的處理中雖然通常叫作模型變換，可是在DirectX中被叫作世界變換。模型變換，是指爲了定義參照物在三維空間的什麼位置而進行的座標變換。和現實的世界不一樣，程序中的三維空間裏定義了世界的中心的基準點，就是原點。從這個原點出發，爲了知道參照物的相對位置，就須要進行必要的座標變換。假設，虛擬的三維空間裏有一個蘋果，那麼爲了表示這個蘋果在什麼位置，就須要進行相應的模型變換了。

 

視圖變換

三種座標變換的第二個，是視圖變換。視圖變換，定義了鏡頭的實際位置以及鏡頭的方向。拿剛剛舉例的蘋果來講，即便三維空間中有一個蘋果，若是鏡頭的方向不對着蘋果的話，一樣也是看不到這個蘋果的。並且，若是將鏡頭大幅度遠離蘋果，那麼也有可能看不到蘋果了。爲了決定鏡頭的位置和角度所進行的座標變換就叫作視圖變換。

 

投影變換

三種座標變換中的最後一個，是投影變換。這個變換，定義了三維空間的攝影區域。好比，是橫向攝影，仍是縱向攝影，最遠拍攝多遠距離等。通常的照相機，直接拍攝鏡頭前的全部圖像，最遠拍攝多遠也基本上沒什麼意識。可是，程序是沒法模擬無限大的空間的，因此，從哪裏開始拍攝，拍攝到哪裏，必須有一個明確的範圍。投影變幻，經過遠近法則，能夠將近處的物體描畫的比較大，遠處的物體描畫的比較小。

 

多邊形在內側仍是外側的判斷（經過連接順序肯定向量的朝向能夠進行遮擋剔除）

經過頂點的鏈接順序爲判斷基準的。順時針鏈接頂點的多邊形是在外側，而逆時針鏈接的多邊形在內側。因此，在定義頂點情報的時候，要特別注意。若是設定了遮擋剔除，原本應該在某個位置有個多邊形，可是根本就不會進行繪製。

 

var gl = c.getContext('webgl') || c.getContext('experimental-webgl');

 

GLSL（OpenGL Shading Language）

WebGL是沒法利用固定渲染管線的，這個在以前的文章（四，渲染準備）裏已經簡單的說明過了。因此，代替它的是可編輯渲染管線中的一種着色語言，叫作GLSL（OpenGL Shading Language）。

頂點着色器處理頂點信息，片源着色器處理顏色信息。

 

修飾符

attribute修飾符

attribute修飾符是用來接收不一樣頂點傳來的不一樣信息。若是存在不少個頂點的話，這些頂點的位置是不一樣的吧。用來接收這些不一樣頂點的不一樣信息的機制，用attribute修飾符來定義變量。

uniform修飾符

修飾符是uniform。使用uniform修飾符的話，能夠傳遞對於全部頂點一致的處理的信息。

varying修飾符

GLSL裏面還有一個特別重要的修飾符，就是varying修飾符。這個varying修飾符，是頂點着色器和片斷着色器之間的橋樑。

 

着色器

頂點着色器和片斷着色器，均可以經過GLSL來書寫，基本上它們算是一個組合。着色器的內部，必需要定義一個main函數，在這個函數裏面添加本身的處理。並且，要從WebGL一側向着色器傳遞數據的時候，須要用到一些特殊的修飾符所定義的變量。

 

頂點緩存

頂點緩存的做用，不光是保存頂點的位置，位置之外跟頂點相關的信息均可以用頂點緩存來保存。

好比，頂點的法線，顏色，文理座標等全部跟頂點相關的信息均可以用頂點緩存來保存和管理。可是須要注意一點的是，向頂點信息中追加信息的時候，須要使用相應的VBO。

 

WebGL的程序中，先把頂點的信息保存到VBO中，接着，通知着色器哪一個VBO和哪一個attribute變量相關，而後頂點着色器就能夠正確的處理這些頂點了。

根據前面的內容，頂點緩存相關的處理的具體流程以下：

・頂點的各類信息保存到數組裏

・使用WebGL的方法生成VBO

・使用WebGL的方法將數組中的信息傳給VBO

・頂點着色器中的attribute函數和VBO結合