我們通常使用三角形來構(gòu)建網(wǎng)格。因為WebGL使用GPU加速計算，有關(guān)這些三角形中的信息一般從CPU傳送到GPU，這需要大量的通信開銷。
WebGL提供了一個解決方案以降低通信開銷。由于它使用ES SL(嵌入式系統(tǒng)著色語言)在GPU上運(yùn)行，我們編寫所有程序需要使用著色器程序的客戶端系統(tǒng)上的圖形元素(這是我們使用OpenGL ES著色語言/GLSL來寫程序)。
這些著色器是GPU和用于編寫著色器程序的程序語言是GLSL。在這些著色器，我們定義確切的頂點，轉(zhuǎn)換，材質(zhì)，光源，和攝像機(jī)使用彼此交互以創(chuàng)建具體圖像。
總之，這是一個實現(xiàn)的算法來獲得像素一個網(wǎng)狀片段。在后面的章節(jié)我們將討論更多關(guān)于著色器。有兩種類型的著色器- 頂點著色器和片段著色器。
頂點著色器
頂點著色器是所謂的在每個頂點的程序代碼。它被用于轉(zhuǎn)化(移動)的幾何形狀(例如：三角形)從一個地方到另一個地方。它處理每個頂點的數(shù)據(jù)(每個頂點的數(shù)據(jù))，例如頂點坐標(biāo)，法線，色彩，和紋理坐標(biāo)。
在頂點著色器的ES GL代碼，程序員必須定義的屬性來處理數(shù)據(jù)。這些屬性指向一個頂點緩沖區(qū)對象是用JavaScript編寫的。
下面的任務(wù)可以使用頂點著色器來進(jìn)行 -
-
頂點變換
-
正常轉(zhuǎn)化和正?；?/div>
-
紋理坐標(biāo)生成
-
紋理坐標(biāo)變換
-
燈光/光線
-
顏色材料應(yīng)用
片段著色器(像素著色器)
網(wǎng)狀由多個三角形形成，并且每一個三角形的表面被稱為一個片段。片段著色器是對每一個片段的所有像素上運(yùn)行的代碼。這是寫計算以填補(bǔ)單個像素的顏色。
下面的任務(wù)可以使用片段著色器來進(jìn)行 -
-
插值操作
-
紋理訪問
-
紋理應(yīng)用
-
灰蒙/霧
-
顏色總和
OpenGL ES SL 變量
OpenGL ES的SL完整形式是 OpenGL 的嵌入式系統(tǒng)著色語言。為了處理著色器程序中的數(shù)據(jù)，ES SL提供了三種類型的變量。它們?nèi)缦?nbsp;-
-
屬性− 這些變量保存頂點著色器程序的輸入值。屬性指向包含每個頂點數(shù)據(jù)的頂點緩沖對象。頂點著色器被調(diào)用的時候，這個屬性指向不同的頂點的VBO。
-
制服− 這些變量存儲輸入數(shù)據(jù)，很常見為頂點和片段著色器，例如光位置，紋理坐標(biāo)和顏色。
-
變動充填− 這些變量用來從頂點著色到片段著色器傳遞數(shù)據(jù)。有了這么多的基礎(chǔ)知識，現(xiàn)在我們將繼續(xù)前進(jìn)，討論圖形管線。
