WebGL - 基礎

---

---

WebGL 主要是一個低階光柵化 API，而不是一個 3D API。要使用 WebGL 繪製圖像，您必須傳遞一個表示影像的向量。然後，它使用 OpenGL SL 將給定的向量轉換為畫素格式，並在螢幕上顯示影像。編寫 WebGL 應用程式涉及一系列步驟，我們將在本章中解釋這些步驟。

WebGL - 座標系

就像任何其他 3D 系統一樣，您將在 WebGL 中擁有 x、y 和 z 軸，其中 z 軸表示深度。WebGL 中的座標限制在 (1, 1, 1) 和 (-1, -1, - 1)。這意味著 - 如果您將螢幕投影 WebGL 圖形視為一個立方體，則立方體的一個角將是 (1, 1, 1)，而相對的角將是 (-1, -1, -1)。WebGL 不會顯示繪製在這些邊界之外的任何內容。

下圖描繪了 WebGL 座標系。z 軸表示深度。z 的正值表示物件靠近螢幕/觀察者，而 z 的負值表示物件遠離螢幕。同樣，x 的正值表示物件位於螢幕右側，而負值表示物件位於左側。類似地，y 的正值和負值表示物件位於螢幕的頂部還是底部。

WebGL 圖形

獲取畫布物件的 WebGL 上下文後，您可以使用 JavaScript 中的 WebGL API 開始繪製圖形元素。

在開始使用 WebGL 之前，您需要了解一些基本術語。

頂點

通常，要繪製諸如多邊形之類的物件，我們會在平面上標記點並將它們連線起來以形成所需的多邊形。頂點是一個點，它定義了 3D 物件邊緣的連線。它由三個浮點值表示，每個值分別表示 x、y、z 軸。

示例

在以下示例中，我們正在繪製一個具有以下頂點的三角形： (0.5, 0.5)、(-0.5, 0.5)、(-0.5, -0.5)。

注意 - 我們必須使用 JavaScript 陣列手動儲存這些頂點，並將它們傳遞給使用頂點緩衝區的 WebGL 渲染管道。

索引

在 WebGL 中，數值用於標識頂點。這些數值稱為索引。這些索引用於在 WebGL 中繪製網格。

注意 - 就像頂點一樣，我們使用 JavaScript 陣列儲存索引，並將它們傳遞給使用索引緩衝區的 WebGL 渲染管道。

陣列

與 OpenGL 和 JoGL 不同，WebGL 中沒有預定義的方法可以直接渲染頂點。我們必須使用 JavaScript 陣列手動儲存它們。

示例

var vertices = [ 0.5, 0.5, 0.1,-0.5, 0.5,-0.5] 

緩衝區

緩衝區是 WebGL 的記憶體區域，用於儲存資料。有各種緩衝區，例如繪製緩衝區、幀緩衝區、頂點緩衝區和索引緩衝區。頂點緩衝區和索引緩衝區用於描述和處理模型的幾何體。

頂點緩衝區物件儲存有關頂點的資料，而索引緩衝區物件儲存有關索引的資料。將頂點儲存到陣列後，我們使用這些緩衝區物件將它們傳遞給 WegGL 圖形管道。

幀緩衝區是圖形記憶體的一部分，用於儲存場景資料。此緩衝區包含諸如表面的寬度和高度（以畫素為單位）、每個畫素的顏色、深度和模板緩衝區等詳細資訊。

網格

要繪製 2D 或 3D 物件，WebGL API 提供了兩種方法，即drawArrays() 和drawElements()。這兩種方法都接受一個名為mode的引數，您可以使用該引數選擇要繪製的物件。此欄位提供的選項僅限於點、線和三角形。

要使用這兩種方法繪製 3D 物件，我們必須使用點、線或三角形構造一個或多個基本多邊形。此後，使用這些基本多邊形，我們可以形成一個網格。

使用基本多邊形繪製的 3D 物件稱為網格。WebGL 提供了幾種繪製 3D 圖形物件的方法，但是使用者通常更喜歡繪製網格。

示例

在以下示例中，您可以觀察到我們使用兩個三角形繪製了一個正方形→ {1, 2, 3} 和 {4, 1, 3}。

著色器程式

我們通常使用三角形來構造網格。由於 WebGL 使用 GPU 加速計算，因此有關這些三角形的資訊應從 CPU 傳輸到 GPU，這需要大量的通訊開銷。

WebGL 提供了一種減少通訊開銷的解決方案。由於它使用在 GPU 上執行的 ES SL（嵌入式系統著色語言），因此我們編寫所有所需的程式以使用著色器程式（我們使用 OpenGL ES 著色語言/GLSL 編寫的程式）在客戶端系統上繪製圖形元素。

這些著色器是 GPU 的程式，用於編寫著色器程式的語言是 GLSL。在這些著色器中，我們精確定義了頂點、變換、材質、燈光和相機如何相互互動以建立特定影像。

簡而言之，它是一個實現演算法以獲取網格畫素的程式碼片段。我們將在後面的章節中詳細討論著色器。著色器有兩種型別：頂點著色器和片段著色器。

頂點著色器

Vertext 著色器是在每個頂點上呼叫的程式程式碼。它用於將幾何體（例如三角形）從一個位置變換（移動）到另一個位置。它處理每個頂點的資料（每個頂點資料），例如頂點座標、法線、顏色和紋理座標。

在頂點著色器的ES GL 程式碼中，程式設計師必須定義屬性來處理資料。這些屬性指向用 JavaScript 編寫的頂點緩衝區物件。

可以使用頂點著色器執行以下任務：

• 頂點變換
• 法線變換和歸一化
• 紋理座標生成
• 紋理座標變換
• 燈光
• 顏色材質應用

片段著色器（畫素著色器）

網格由多個三角形組成，每個三角形的表面稱為片段。片段著色器是在每個片段的所有畫素上執行的程式碼。它被編寫用於計算和填充單個畫素上的顏色。

可以使用片段著色器執行以下任務：

• 插值值上的運算
• 紋理訪問
• 紋理應用
• 霧
• 顏色求和

OpenGL ES SL 變數

OpenGL ES SL 的全稱是 OpenGL 嵌入式系統著色語言。為了處理著色器程式中的資料，ES SL 提供了三種類型的變數。如下所示：

• 屬性 - 這些變數儲存頂點著色器程式的輸入值。屬性指向包含每個頂點資料的頂點緩衝區物件。每次呼叫頂點著色器時，屬性都會指向不同頂點的 VBO。

• 統一變數 - 這些變數儲存頂點和片段著色器共有的輸入資料，例如燈光位置、紋理座標和顏色。

• 變化量 - 這些變數用於將資料從頂點著色器傳遞到片段著色器。

有了這些基礎知識，我們現在將繼續討論圖形流水線。