開始使用 webgl

WebGL 是一種光柵化 API，通常在你的 GPU 上執行，使你能夠快速繪製 2D 和 3D 圖形。WebGL 還可用於對資料陣列進行計算。

WebGL 是一個非常低階的 API。在基礎級別，WebGL 是一個在 GPU 上執行 2 個使用者提供的功能的引擎。一個函式稱為頂點著色器。頂點著色器的工作是計算頂點位置。根據函式輸出 WebGL 的位置，然後可以柵格化各種基元，包括點，線或三角形。當柵格化這些基元時，它呼叫第二個使用者提供的函式，稱為片段著色器。片段著色器的工作是為當前正在繪製的圖元的每個畫素計算顏色。

這些函式是用一種名為 GLSL 的語言編寫的，它有點像 C / C++並且是嚴格型別的。

由程式設計師提供這些功能，使 WebGL 繪製 2d，3d 或計算某些東西。幾乎每一個 WebGL 都是關於設定這兩個函式然後向它們提供資料。

資料可以從 4 個來源提供。

• 制服

制服是著色器函式的輸入，非常類似於函式引數或全域性變數。它們在著色器執行之前設定一次，並在執行期間保持不變

• 屬性

屬性僅向頂點著色器提供資料。屬性定義瞭如何從緩衝區中提取資料。例如，你可以將位置，法線和紋理座標放入緩衝區。通過屬性，你可以告訴 WebGL 如何從緩衝區中提取資料並將其提供給頂點著色器。通過呼叫 gl.drawArrays 或 gl.drawElements 並指定計數，頂點著色器被稱為使用者指定的次數。每次呼叫當前頂點著色器時，下一組資料將從使用者指定的緩衝區中提取並放入屬性中

• 紋理

紋理是 4 個通道的 2D 資料陣列。最常見的是，這 4 個通道是影象中的紅色，綠色，藍色和 alpha。WebGL 並不關心資料是什麼。與屬性和緩衝區不同，著色器可以通過隨機訪問從紋理中讀取值。

• Varyings

變數是頂點著色器將資料傳遞到片段著色器的一種方式。當使用片段著色器對基元進行光柵化時，在頂點著色器輸出的值之間插入變數