文章目錄[隱藏]

書籍:WebGL編程指南

隨著學習的逐漸深入，我們對頂點著色器和片段著色器有了進一步的了解。上一篇文章《WebGL學習筆記——畫三角形》直接忽略了片段著色器，因為我們沒有學過片段著色器的知識。本文仍然以如何繪制三角形為例，介紹頂點著色器和片段著色器的作用，以及它們如何協(xié)作完成三角形的繪制。

畫一個彩色的三角形，通過javascript代碼將三角形的三個頂點的坐標和頂點對應的顏色數據(RGB)傳遞給WebGL系統(tǒng)。

// javascript創(chuàng)建的三角形頂點坐標及顏色值數據varverticesColors=newFloat32Array([0.0,0.5,0,0.0,0.0,//第一個點：坐標 顏色（rgb）-0.5,-0.5,0.0,0,0.0,//第二個點：坐標 顏色（rgb）0.5,-0.5,0.0,0.0,0//第三個點：坐標 顏色（rgb）]);

最后，彩色三角形繪制的結果如下圖所示。

畫一個彩色三角形

WebGL應用繪制三角形的過程

整體繪制過程大致如上圖所示。我經常看到類似的數字，但我以前從未理解過它們的含義。在這里，我把我對關鍵流程的理解記錄如下:

首先js通過WebGL提供的api創(chuàng)建緩沖區(qū)對象，并將必要的三角形坐標及顏色信息傳入緩沖區(qū)，這里傳入的數據為三角形的三個頂點坐標以及三個頂點對應的顏色RGB分量值。接著頂點著色器讀取緩沖區(qū)對象的數據，根據傳入的參數分別提取出頂點坐標和三個頂點坐標對應的RGB顏色分量值。

這里我想說明的是，頂點著色器不僅可以表示坐標數據，還可以處理顏色數據，甚至是任何你希望它處理的數據。之前我一直下意識的認為頂點著色器處理的是坐標數據。

得到了三個頂點坐標的數據之后，WebGL系統(tǒng)并不知道要繪制的是三個點還是一個三角形，我們通過gl.drawArrays方法中的gl.TRIANGLES參數（參數的具體含義參見WebGL學習筆記--繪制三角形）告知需要繪制一個三角形，通過這個步驟我們就可以由三個頂點來確定出要繪制的三角形了，這個從頂點確定圖形（三角形）的過程叫做圖形裝配。確定了要繪制的三角形之后，計算機仍然不知道如何進行繪制，因為顯示器是有一個個像素排列組成的（每個像素都有坐標值），只有明確的發(fā)送“將(x,y)坐標的像素填充顏色值為（r,g,b)”這樣的指令，計算機才能執(zhí)行。因此接下來的步驟顯然是將三角形覆蓋區(qū)域的內的所有像素都轉換成這樣的指令，這個將圖形覆蓋的區(qū)域轉換成像素填充信息的過程叫做光柵化。光柵化處理涉及抗鋸齒、采樣算法等，這里不做介紹，僅當作黑盒處理，詳情請查閱相關資料，只需知道經過這個步驟WebGL系統(tǒng)會內插出三角形內的所有像素的顏色數據，由于提供了三個頂點顏色數據，最終算法會得出向三個頂點顏色平滑過渡的顏色，這也是為什么最終繪制出來的結果是彩色三角形的原因。

光柵化

一旦光柵化過程結束后，就會逐片元調用片元著色器，最終每個像素都被填充了光柵化處理后的顏色，并寫入顏色緩沖區(qū)（處理流程圖中未畫出顏色緩沖區(qū)），直到最后一個片元被處理完成，瀏覽器就會顯示出最終的彩色三角形。

目前上述的內容應該能夠為大家解答出大家對于webgl是什么(gl的中文)的疑惑了，所以如果大家還想要了解更多的知識內容，也可以關注本站其他文章進行了解哦。

版權說明：本文由用戶上傳，如有侵權請聯(lián)系刪除！

標簽：