WEBGL基礎知識介紹 1、場景（scene） 場景如其名，即顯示3D空間內物體的容器，就好比一個箱子是一個3D場景。 2、座標系： webgl使用笛卡爾座標系（寬度、高度和深度），我們也可以指定使用其它座標系統。 WEBGL與過去我所使用的flash3D座標系有一些區別，在flash3d中，螢幕的左上角為座標系原點，向下為Y軸正方向，向右為X軸正方向，而在webgl中，螢幕的中心點為原點。 但是在3D世界中還有第三個座標軸即Z軸，它表示場景的深度。 在webgl的世界中我們可以使用左手法則來輔助記憶三個軸的正方向，伸出左手，食指伸直保持水平，中指垂直向下，拇指指向自己，其餘手指收起，食指所指方向即x軸的正方向，中指所指方向即y軸正方向，拇指所指的方向即z軸的正方向。 3、投影的概念： 我們在螢幕上所看到的三維空間，並非是一個真實的3D空間，而是用數學演算法將模擬的三維空間投射到螢幕上的二維影象而已。投影就是將模擬的三維空間內的物體對映到螢幕上生成一個二維影象的過程。投影分為正交投影和透視投影，這也就是攝像機的實現原理。 4、攝像機： 攝像機是場景內的一個觀察者，人透過螢幕看到的畫面實際上是3D空間內的物體對映到攝像機內的畫面，這個畫面很可能並不是完整的，僅僅是攝像機當前可見範圍內的。這與攝像機的種類有關。 在three.js中有兩種，正交攝像機和透視攝像機。 正交攝像機的視野範圍就像一個正方體，正方體內的物體沿著正方體的邊緣投影到每個側面的物體大小都與立方體內的物體大小相同，所以使用正交攝像機投影到螢幕的畫面我們是無法分辨物體的遠近的，這種攝像機多用於在3D空間繪製2D圖形，如醫用檢查裝置，我們不使用。 透視攝像機就如一個頂部被削平的金字塔，金字塔頂部被削平的面可以理解為我們的螢幕，在金字塔內的物體沿著金字塔縱方向進行投影，並投射到頂部，假設有兩個大小形狀完全相同的物體分別位於金子塔內的不同高度，他們投影到頂部的影子的大小就會不同，這就是透視相機的。使用透視攝像機我們可以在平面內很容易分辨出3D空間內物體的遠近。現在把金字塔放倒，將削平的頂端對這你的眼睛，這樣就很容易理解在透視相機時計算機是如何渲染物體的了。 5、渲染： 渲染即執行程式碼在螢幕上繪製圖形的過程。渲染是實時執行的，就如一個播放的電影，由許多連續的幀組成，幀就好比一場電影中的一個瞬時的畫面。 6、點與向量 點是由三個值組成，x、y和z，每個點可以表示3D空間的一個唯一位置，每個點也可表示一個向量，也叫做三維向量，向量可以理解為指向場景中心的一個線段，我們知道點有三個值，這樣的向量叫做單位向量或標量，它僅僅表示向量的方向，不能表示向量的長度，現在我們給一個這個標量再增加一個值，第四個值表示向量的長度，這樣我們就有了一個既有長度又有方向的向量了，這樣的向量叫做四維向量。 7、面、頂點與三角形： 我們知道要確定一個唯一的平面我們至少需要三個點，將三個點用線連起來就形成了一個三角平面，我們稱這三個點為頂點，頂點就是圖形突起的部。 8、網格模型： 3D空間內任何形狀的物體都稱之為模型，無論是立體模型還是平面模型都由至少三個頂點組成，將這些頂點用線連線起來就組成了模型。還需要知道在現在計算機圖形學中，所有的模型，無論複雜程度，都是由多個三角形拼接而成的。我們常見的球體看起來很圓滑，其實是由很多個三角形繪製而成，由於密度很高肉眼很難察覺其邊緣的頂點。 由於這些模型都是使用線條連線而成，看起來就像一張捕魚的漁網被扭曲成各種形狀，我們稱這種沒有材質的模型叫做網格模型（它看起來是鏤空的）。 9、紋理貼圖以及材質 紋理就是一個平面化的圖形，它可以是純色填充的也可以是使用點陣圖填充的。 材質就是使用紋理構建的一種程式碼環境中的物件，我們將材質物件應用到模型網格上，使其更加逼真形象，達到預期設想的效果。 更加容易理解的方式：紋理好比一顆大樹，材質好比是用這顆大樹打造的一塊木板，我們可以將木板釘在一個立方體網格物件上，這樣我們就有了一個木箱。 10、矩陣和模型變換 如果向量是一個數組[x,y,z]，那麼矩陣就是一個二維陣列即， 矩陣程式碼 | x x x x | | | | y y y y | | | | z z z z | | | | 0 0 0 1 | 每一列表示一個四維向量，上面我們建立了一個4X4的矩陣，在webgl中我們常用的矩陣為4X4和3X3。 模型變換就是利用矩陣使得模型的大小、位移、旋轉等產生變化的過程，通常我們會使用模型的內建矩陣與變換矩陣相乘從而得到變換後的新矩陣並賦予模型。每個模型被建立後都會擁有自己的模型矩陣，我們無需關注模型矩陣是如何產生的，只需要知道對模型進行模型變換需要將模型矩陣與變換矩陣相乘。具體如何操作矩陣自行查詢相關資料，這裡不做贅述。 11、檢視變換 檢視變換就是不透過調整模型本身的引數，而是直接控制攝像機、場景的移動而產生的視覺變化，比如我們將攝像機像模型方向拉近，我們就會感覺模型在逐漸變大，我們將場景原點逐漸拉遠我們就會感覺模型在漸漸遠離我們。 13、著色器語言 1) 頂點著色器：頂點著色器是用來控制光照、顏色、位移等，假如我們要渲染一個三形，頂點著色器就將執行三次，它會為每個頂點都執行一次。注意在頂點著色器執行時我們還沒有透過螢幕看到繪製的圖形，頂點著色器是為後續的光柵化處理做鋪墊，它將為光柵化操作提供必要的資源，頂點著色器是光柵化處理的倉庫。 2) 片段著色器：瞭解片段著色器先要了解光柵化是什麼意思，光柵化就是繪製每兩個頂點之間的畫素並形成線段的過程，就好比我們要畫一個柵欄，我們要一根一根的畫。 片段著色器就是告訴GPU如何光柵化的語言，就如其名字，將光照、紋理、位移等沿著頂點之間的線段逐個畫素的渲染。 14、webgl中最流行的js庫three.js介紹： 首先最外層為場景，場景中包含一個或多個攝像機，場景中還可以包含模型、粒子等。 模型、粒子等也可包含在Object3D物件中。 建立一個模型的過程是： 1) 建立模型所需要的頂點 2) 建立一個幾何圖形物件，並將頂點傳遞給幾何圖形物件。 3) 建立模型的紋理物件即材質。 4) 建立網格物件，並將幾何圖形物件以及紋理物件傳遞給網格物件。 5) 將網格新增到可容納網格物件的容器內，如scene、Object3D等。 術語FAQ： 1、場景：Scene 2、位置：Position 3、投影：Projector 4、正交：Orthographic 5、透視：Perspective 6、攝像機：Camera 7、渲染：Render 8、向量：Vector 9、三維向量：Vector3 10、四維向量：Vector4 11、矩陣：Matrix 12、3行3列矩陣：Matrix3 13、4行4列矩陣：Matrix4 14、頂點：Vertex 15、頂點的複數形式：Vertices 16、幾何物件：Geometry 17、紋理：Texture 18、材質：Material 19、網格：Mesh 20、變換：Transform 21、檢視：View
WEBGL基礎知識介紹 1、場景（scene） 場景如其名，即顯示3D空間內物體的容器，就好比一個箱子是一個3D場景。 2、座標系： webgl使用笛卡爾座標系（寬度、高度和深度），我們也可以指定使用其它座標系統。 WEBGL與過去我所使用的flash3D座標系有一些區別，在flash3d中，螢幕的左上角為座標系原點，向下為Y軸正方向，向右為X軸正方向，而在webgl中，螢幕的中心點為原點。 但是在3D世界中還有第三個座標軸即Z軸，它表示場景的深度。 在webgl的世界中我們可以使用左手法則來輔助記憶三個軸的正方向，伸出左手，食指伸直保持水平，中指垂直向下，拇指指向自己，其餘手指收起，食指所指方向即x軸的正方向，中指所指方向即y軸正方向，拇指所指的方向即z軸的正方向。 3、投影的概念： 我們在螢幕上所看到的三維空間，並非是一個真實的3D空間，而是用數學演算法將模擬的三維空間投射到螢幕上的二維影象而已。投影就是將模擬的三維空間內的物體對映到螢幕上生成一個二維影象的過程。投影分為正交投影和透視投影，這也就是攝像機的實現原理。 4、攝像機： 攝像機是場景內的一個觀察者，人透過螢幕看到的畫面實際上是3D空間內的物體對映到攝像機內的畫面，這個畫面很可能並不是完整的，僅僅是攝像機當前可見範圍內的。這與攝像機的種類有關。 在three.js中有兩種，正交攝像機和透視攝像機。 正交攝像機的視野範圍就像一個正方體，正方體內的物體沿著正方體的邊緣投影到每個側面的物體大小都與立方體內的物體大小相同，所以使用正交攝像機投影到螢幕的畫面我們是無法分辨物體的遠近的，這種攝像機多用於在3D空間繪製2D圖形，如醫用檢查裝置，我們不使用。 透視攝像機就如一個頂部被削平的金字塔，金字塔頂部被削平的面可以理解為我們的螢幕，在金字塔內的物體沿著金字塔縱方向進行投影，並投射到頂部，假設有兩個大小形狀完全相同的物體分別位於金子塔內的不同高度，他們投影到頂部的影子的大小就會不同，這就是透視相機的。使用透視攝像機我們可以在平面內很容易分辨出3D空間內物體的遠近。現在把金字塔放倒，將削平的頂端對這你的眼睛，這樣就很容易理解在透視相機時計算機是如何渲染物體的了。 5、渲染： 渲染即執行程式碼在螢幕上繪製圖形的過程。渲染是實時執行的，就如一個播放的電影，由許多連續的幀組成，幀就好比一場電影中的一個瞬時的畫面。 6、點與向量 點是由三個值組成，x、y和z，每個點可以表示3D空間的一個唯一位置，每個點也可表示一個向量，也叫做三維向量，向量可以理解為指向場景中心的一個線段，我們知道點有三個值，這樣的向量叫做單位向量或標量，它僅僅表示向量的方向，不能表示向量的長度，現在我們給一個這個標量再增加一個值，第四個值表示向量的長度，這樣我們就有了一個既有長度又有方向的向量了，這樣的向量叫做四維向量。 7、面、頂點與三角形： 我們知道要確定一個唯一的平面我們至少需要三個點，將三個點用線連起來就形成了一個三角平面，我們稱這三個點為頂點，頂點就是圖形突起的部。 8、網格模型： 3D空間內任何形狀的物體都稱之為模型，無論是立體模型還是平面模型都由至少三個頂點組成，將這些頂點用線連線起來就組成了模型。還需要知道在現在計算機圖形學中，所有的模型，無論複雜程度，都是由多個三角形拼接而成的。我們常見的球體看起來很圓滑，其實是由很多個三角形繪製而成，由於密度很高肉眼很難察覺其邊緣的頂點。 由於這些模型都是使用線條連線而成，看起來就像一張捕魚的漁網被扭曲成各種形狀，我們稱這種沒有材質的模型叫做網格模型（它看起來是鏤空的）。 9、紋理貼圖以及材質 紋理就是一個平面化的圖形，它可以是純色填充的也可以是使用點陣圖填充的。 材質就是使用紋理構建的一種程式碼環境中的物件，我們將材質物件應用到模型網格上，使其更加逼真形象，達到預期設想的效果。 更加容易理解的方式：紋理好比一顆大樹，材質好比是用這顆大樹打造的一塊木板，我們可以將木板釘在一個立方體網格物件上，這樣我們就有了一個木箱。 10、矩陣和模型變換 如果向量是一個數組[x,y,z]，那麼矩陣就是一個二維陣列即， 矩陣程式碼 | x x x x | | | | y y y y | | | | z z z z | | | | 0 0 0 1 | 每一列表示一個四維向量，上面我們建立了一個4X4的矩陣，在webgl中我們常用的矩陣為4X4和3X3。 模型變換就是利用矩陣使得模型的大小、位移、旋轉等產生變化的過程，通常我們會使用模型的內建矩陣與變換矩陣相乘從而得到變換後的新矩陣並賦予模型。每個模型被建立後都會擁有自己的模型矩陣，我們無需關注模型矩陣是如何產生的，只需要知道對模型進行模型變換需要將模型矩陣與變換矩陣相乘。具體如何操作矩陣自行查詢相關資料，這裡不做贅述。 11、檢視變換 檢視變換就是不透過調整模型本身的引數，而是直接控制攝像機、場景的移動而產生的視覺變化，比如我們將攝像機像模型方向拉近，我們就會感覺模型在逐漸變大，我們將場景原點逐漸拉遠我們就會感覺模型在漸漸遠離我們。 13、著色器語言 1) 頂點著色器：頂點著色器是用來控制光照、顏色、位移等，假如我們要渲染一個三形，頂點著色器就將執行三次，它會為每個頂點都執行一次。注意在頂點著色器執行時我們還沒有透過螢幕看到繪製的圖形，頂點著色器是為後續的光柵化處理做鋪墊，它將為光柵化操作提供必要的資源，頂點著色器是光柵化處理的倉庫。 2) 片段著色器：瞭解片段著色器先要了解光柵化是什麼意思，光柵化就是繪製每兩個頂點之間的畫素並形成線段的過程，就好比我們要畫一個柵欄，我們要一根一根的畫。 片段著色器就是告訴GPU如何光柵化的語言，就如其名字，將光照、紋理、位移等沿著頂點之間的線段逐個畫素的渲染。 14、webgl中最流行的js庫three.js介紹： 首先最外層為場景，場景中包含一個或多個攝像機，場景中還可以包含模型、粒子等。 模型、粒子等也可包含在Object3D物件中。 建立一個模型的過程是： 1) 建立模型所需要的頂點 2) 建立一個幾何圖形物件，並將頂點傳遞給幾何圖形物件。 3) 建立模型的紋理物件即材質。 4) 建立網格物件，並將幾何圖形物件以及紋理物件傳遞給網格物件。 5) 將網格新增到可容納網格物件的容器內，如scene、Object3D等。 術語FAQ： 1、場景：Scene 2、位置：Position 3、投影：Projector 4、正交：Orthographic 5、透視：Perspective 6、攝像機：Camera 7、渲染：Render 8、向量：Vector 9、三維向量：Vector3 10、四維向量：Vector4 11、矩陣：Matrix 12、3行3列矩陣：Matrix3 13、4行4列矩陣：Matrix4 14、頂點：Vertex 15、頂點的複數形式：Vertices 16、幾何物件：Geometry 17、紋理：Texture 18、材質：Material 19、網格：Mesh 20、變換：Transform 21、檢視：View