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。
制服− 這些變量存儲輸入數據，很常見爲頂點和片段着色器，例如光位置，紋理座標和顏色。
變動充填− 這些變量用來從頂點着色到片段着色器傳遞數據。有了這麼多的基礎知識，現在我們將繼續前進，討論圖形管線。