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