WebGL着色器程序

我們通常使用三角形來構建網格。因爲WebGL使用GPU加速計算,有關這些三角形中的信息一般從CPU傳送到GPU,這需要大量的通信開銷。

WebGL提供了一個解決方案以降低通信開銷。由於它使用ES SL(嵌入式系統着色語言)在GPU上運行,我們編寫所有程序需要使用着色器程序的客戶端系統上的圖形元素(這是我們使用OpenGL ES着色語言/GLSL來寫程序)。

這些着色器是GPU和用於編寫着色器程序的程序語言是GLSL。在這些着色器,我們定義確切的頂點,轉換,材質,光源,和攝像機使用彼此交互以創建具體圖像。

總之,這是一個實現的算法來獲得像素一個網狀片段。在後面的章節我們將討論更多關於着色器。有兩種類型的着色器- 頂點着色器和片段着色器。

頂點着色器

頂點着色器是所謂的在每個頂點的程序代碼。它被用於轉化(移動)的幾何形狀(例如:三角形)從一個地方到另一個地方。它處理每個頂點的數據(每個頂點的數據),例如頂點座標,法線,色彩,和紋理座標。

在頂點着色器的ES GL代碼,程序員必須定義的屬性來處理數據。這些屬性指向一個頂點緩衝區對象是用JavaScript編寫的。

下面的任務可以使用頂點着色器來進行 -

  • 頂點變換

  • 正常轉化和正常化

  • 紋理座標生成

  • 紋理座標變換

  • 燈光/光線

  • 顏色材料應用

片段着色器(像素着色器)

網狀由多個三角形形成,並且每一個三角形的表面被稱爲一個片段。片段着色器是對每一個片段的所有像素上運行的代碼。這是寫計算以填補單個像素的顏色。

下面的任務可以使用片段着色器來進行 -

  • 插值操作

  • 紋理訪問

  • 紋理應用

  • 灰濛/霧

  • 顏色總和

OpenGL ES SL 變量

OpenGL ES的SL完整形式是 OpenGL 的嵌入式系統着色語言。爲了處理着色器程序中的數據,ES SL提供了三種類型的變量。它們如下 -

  • 屬性− 這些變量保存頂點着色器程序的輸入值。屬性指向包含每個頂點數據的頂點緩衝對象。頂點着色器被調用的時候,這個屬性指向不同的頂點的VBO。

  • 制服− 這些變量存儲輸入數據,很常見爲頂點和片段着色器,例如光位置,紋理座標和顏色。

  • 變動充填− 這些變量用來從頂點着色到片段着色器傳遞數據。有了這麼多的基礎知識,現在我們將繼續前進,討論圖形管線。