WebGL坐標(biāo)系
就像任何其他的3D系統(tǒng)，在WebGL中Z軸表示深x，y和z軸。在WebGL的坐標(biāo)被限制為(1,1,1)和(-1，-1，- 1)。它意味著- 如果你考慮該屏幕上投影的WebGL圖形為立方體，則立方體的一個(gè)角將是(1,1,1)和相對(duì)的角為(-1，-1，-1)。 WebGL將不繪制顯示任何超越這些界限。
下圖描述了WebGL的坐標(biāo)系。 z軸表示深度。 z與正值表示該對(duì)象是在屏幕/觀眾近，而z的負(fù)值表示該對(duì)象遠(yuǎn)離屏幕。同樣地，x的正值表示該對(duì)象是到屏幕右側(cè)的和負(fù)值表示目的是左側(cè)。同樣地，y的正和負(fù)數(shù)值表示對(duì)象是否是在頂部或在屏幕的底部。
WebGL基礎(chǔ)知識(shí)
獲得畫布對(duì)象的WebGL的上下文后，就可以開始使用 JavaScript 中 WebGL的API 繪制圖形元素。
下面是在開始使用WebGL之前你需要知道的一些基本術(shù)語(yǔ)。
頂點(diǎn)
通常繪制對(duì)象，如多邊形，我們?cè)陲w機(jī)上點(diǎn)和加入其中以形成所需多邊形。頂點(diǎn)是點(diǎn)定義一個(gè)3D對(duì)象的邊緣的結(jié)合使用。它是由每一個(gè)表示 x，y和z。分別軸3浮點(diǎn)值來表示。
示例
在下面的例子中，我們繪制具有以下頂點(diǎn)的三角形 − (0.5, 0.5), (-0.5, 0.5), (-0.5, -0.5)。
注意 - 我們要存儲(chǔ)這些頂點(diǎn)手動(dòng)使用 JavaScript 數(shù)組，并將其傳遞到 WebGL 使用頂點(diǎn)緩沖渲染管線。
索引
在WebGL數(shù)值被用來識(shí)別的頂點(diǎn)。這些數(shù)值被稱為索引。這些指數(shù)被用來繪制網(wǎng)格 WebGL。
注 - 就像頂點(diǎn)，我們存儲(chǔ)索引，使用JavaScript數(shù)組，并將其傳遞到 WebGL 使用索引緩沖區(qū)渲染管線。
數(shù)組
不像OpenGL和JOGL，有在 WebGL 沒有預(yù)定義的方法來直接呈現(xiàn)的頂點(diǎn)。我們必須將它們存儲(chǔ)手動(dòng)使用 JavaScript 數(shù)組。
示例
var vertices = [ 0.5, 0.5, 0.1,-0.5, 0.5,-0.5]
緩沖區(qū)
緩沖區(qū)是 WebGL 保存數(shù)據(jù)的存儲(chǔ)器區(qū)域。有多種緩沖液即，繪圖緩沖器，幀緩沖器，vetex 緩沖器，和索引緩沖器。頂點(diǎn)緩沖器和索引緩沖器被用來描述和處理模型的幾何形狀。
-
頂點(diǎn)緩沖區(qū)對(duì)象 − 這對(duì)應(yīng)于每個(gè)頂點(diǎn)的數(shù)據(jù)存儲(chǔ)(每頂點(diǎn)數(shù)據(jù))
-
索引緩沖區(qū)對(duì)象 - 本存儲(chǔ)有關(guān)的指標(biāo)數(shù)據(jù)
-
幀緩沖區(qū)的圖形內(nèi)存持有的場(chǎng)景數(shù)據(jù)的一部分，這個(gè)緩沖區(qū)包含細(xì)節(jié)如寬度和表面的高度(以像素為單位)，每個(gè)像素與它們的深度的顏色。
存儲(chǔ)到頂點(diǎn)數(shù)組后，我們將它們傳遞到使用這些緩沖區(qū)對(duì)象 WegGL 圖形流水線。
網(wǎng)格
要繪制2D或3D對(duì)象，WebGL的API提供了兩種方法，即drawArrays()和drawElements()。這兩種方法接受一個(gè)使用它用戶可以選擇想要拉攏的對(duì)象稱為模式參數(shù)。通過字段提供的選項(xiàng)被限制為點(diǎn)，線和三角形。
要使用這兩種方法繪制3D對(duì)象，我們必須構(gòu)造采用點(diǎn)，線，或者三角形的一個(gè)或多個(gè)原始的多邊形。然后使用這些基本多邊形，就能形成一個(gè)網(wǎng)格。使用基本多邊形繪制的3D對(duì)象被稱為一個(gè)網(wǎng)格。 WebGL提供了幾種方法來繪制3D圖形對(duì)象，但用戶通常更喜歡畫一個(gè)網(wǎng)格。
示例
在下面的例子中，可以觀察到，我們已經(jīng)繪制使用兩個(gè)三角形的正方形 → {1, 2, 3} and {4, 1, 3}.
