文章目錄[隱藏]

書籍:WebGL編程指南

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

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

// javascript創(chuàng)建的三角形頂點坐標及顏色值數(shù)據(jù)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）]);

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

畫一個彩色三角形

WebGL應用繪制三角形的過程

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

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

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

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

光柵化

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

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

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

標簽：