參考書籍：《WebGL編程指南》
隨著學(xué)習(xí)的逐步深入，對頂點(diǎn)著色器和片元著色器有了更進(jìn)一步的理解，之前的文章WebGL學(xué)習(xí)筆記--繪制三角形由于還沒有學(xué)習(xí)片元著色器的知識，因此直接忽略了片元著色器，本文仍以如何繪制三角形為例介紹頂點(diǎn)著色器、片元著色器的功能，以及它們?nèi)绾闻浜贤瓿扇切蔚睦L制。
目的
繪制一個彩色三角形，通過javascript代碼將三角形的三個頂點(diǎn)坐標(biāo)、以及頂點(diǎn)對應(yīng)的顏色數(shù)據(jù)（RGB）傳入到WebGL系統(tǒng)。
// javascript創(chuàng)建的三角形頂點(diǎn)坐標(biāo)及顏色值數(shù)據(jù)
var verticesColors = new Float32Array([
0.0, 0.5, 1.0, 0.0, 0.0, // 第一個點(diǎn)：坐標(biāo)+顏色（rgb）
-0.5, -0.5, 0.0, 1.0, 0.0, // 第二個點(diǎn)：坐標(biāo)+顏色（rgb）
0.5, -0.5, 0.0, 0.0, 1.0 // 第三個點(diǎn)：坐標(biāo)+顏色（rgb）
]);
最終，彩色三角形繪制的結(jié)果如下圖所示。
繪制的彩色三角形
繪制的彩色三角形
WebGL系統(tǒng)繪制流程
WebGL學(xué)習(xí)筆記——頂點(diǎn)著色器和片元著色器
WebGL應(yīng)用繪制三角形的流程
整體的繪制流程大致如上圖所示，類似的圖形我也經(jīng)常看到，但是以前總是不理解其中的含義，這里把自己對關(guān)鍵流程的理解記錄如下：
- 首先js通過WebGL提供的api創(chuàng)建緩沖區(qū)對象，并將必要的三角形坐標(biāo)及顏色信息傳入緩沖區(qū)，這里傳入的數(shù)據(jù)為三角形的三個頂點(diǎn)坐標(biāo)以及三個頂點(diǎn)對應(yīng)的顏色RGB分量值。
- 接著頂點(diǎn)著色器讀取緩沖區(qū)對象的數(shù)據(jù)，根據(jù)傳入的參數(shù)分別提取出頂點(diǎn)坐標(biāo)和三個頂點(diǎn)坐標(biāo)對應(yīng)的RGB顏色分量值。
這里要說明的是頂點(diǎn)著色器并不僅是表示坐標(biāo)數(shù)據(jù)，也同樣可以處理顏色數(shù)據(jù)，甚至任何你想要讓它處理的數(shù)據(jù)，之前我總是下意識的以為頂點(diǎn)著色器處理的是坐標(biāo)數(shù)據(jù)。
- 得到了三個頂點(diǎn)坐標(biāo)的數(shù)據(jù)之后，WebGL系統(tǒng)并不知道要繪制的是三個點(diǎn)還是一個三角形，我們通過gl.drawArrays方法中的gl.TRIANGLES參數(shù)（參數(shù)的具體含義參見WebGL學(xué)習(xí)筆記--繪制三角形）告知需要繪制一個三角形，通過這個步驟我們就可以由三個頂點(diǎn)來確定出要繪制的三角形了，這個從頂點(diǎn)確定圖形（三角形）的過程叫做圖形裝配。
- 確定了要繪制的三角形之后，計算機(jī)仍然不知道如何進(jìn)行繪制，因為顯示器是有一個個像素排列組成的（每個像素都有坐標(biāo)值），只有明確的發(fā)送“將(x,y)坐標(biāo)的像素填充顏色值為（r,g,b)”這樣的指令，計算機(jī)才能執(zhí)行。因此接下來的步驟顯然是將三角形覆蓋區(qū)域的內(nèi)的所有像素都轉(zhuǎn)換成這樣的指令，這個將圖形覆蓋的區(qū)域轉(zhuǎn)換成像素填充信息的過程叫做光柵化。光柵化處理涉及抗鋸齒、采樣算法等，這里不做介紹，僅當(dāng)作黑盒處理，詳情請查閱相關(guān)資料，只需知道經(jīng)過這個步驟WebGL系統(tǒng)會內(nèi)插出三角形內(nèi)的所有像素的顏色數(shù)據(jù)，由于提供了三個頂點(diǎn)顏色數(shù)據(jù)，最終算法會得出向三個頂點(diǎn)顏色平滑過渡的顏色，這也是為什么最終繪制出來的結(jié)果是彩色三角形的原因。
光柵化
- 一旦光柵化過程結(jié)束后，就會逐片元調(diào)用片元著色器，最終每個像素都被填充了光柵化處理后的顏色，并寫入顏色緩沖區(qū)（處理流程圖中未畫出顏色緩沖區(qū)），直到最后一個片元被處理完成，瀏覽器就會顯示出最終的彩色三角形。
