WebGL - 圖形管線

為了渲染 3D 圖形，我們必須遵循一系列步驟。這些步驟被稱為圖形管線或渲染管線。下圖描述了 WebGL 圖形管線。

在接下來的章節中，我們將逐一討論管線中每個步驟的作用。

JavaScript

在開發 WebGL 應用程式時，我們編寫著色器語言程式碼來與 GPU 通訊。JavaScript 用於編寫程式的控制程式碼，其中包括以下操作：

• 初始化 WebGL - JavaScript 用於初始化 WebGL 上下文。

• 建立陣列 - 我們建立 JavaScript 陣列來儲存幾何體的資料。

• 緩衝區物件 - 我們透過傳遞陣列作為引數來建立緩衝區物件（頂點和索引）。

• 著色器 - 我們使用 JavaScript 建立、編譯和連結著色器。

• 屬性 - 我們可以使用 JavaScript 建立屬性、啟用它們並將它們與緩衝區物件關聯。

• 統一變數 - 我們也可以使用 JavaScript 關聯統一變數。

• 變換矩陣 - 使用 JavaScript，我們可以建立變換矩陣。

最初，我們為所需的幾何體建立資料，並以緩衝區形式將它們傳遞到著色器。著色器語言的屬性變數指向緩衝區物件，這些物件作為輸入傳遞給頂點著色器。

頂點著色器

當我們透過呼叫drawElements()和drawArray()方法啟動渲染過程時，頂點著色器會為頂點緩衝區物件中提供的每個頂點執行。它計算每個圖元多邊形頂點的位置，並將其儲存在變化的gl_position中。它還會計算其他屬性，例如顏色、紋理座標和頂點，這些屬性通常與頂點相關聯。

圖元組裝

計算每個頂點的位置和其他細節後，下一階段是圖元組裝階段。在此，三角形被組裝並傳遞給光柵化器。

光柵化

在光柵化步驟中，確定圖元最終影像中的畫素。它有兩個步驟：

• 剔除 - 最初確定多邊形的定向（它是正面還是背面？）。所有那些在視角區域內不可見的、方向不正確的三角形都會被丟棄。此過程稱為剔除。

• 裁剪 - 如果三角形部分位於視角區域之外，則將視角區域之外的部分移除。此過程稱為裁剪。

片段著色器

片段著色器獲取

• 來自頂點著色器中變化變數的資料，
• 來自光柵化階段的圖元，然後
• 計算頂點之間每個畫素的顏色值。

片段著色器將每個片段中每個畫素的顏色值儲存起來。這些顏色值可以在片段操作期間訪問，我們將在接下來討論。

片段操作

確定圖元中每個畫素的顏色後，將執行片段操作。這些片段操作可能包括：

• 深度
• 顏色緩衝區混合
• 抖動

一旦所有片段都處理完畢，就會形成一個 2D 影像並顯示在螢幕上。幀緩衝區是渲染管線的最終目標。

幀緩衝區

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