文章目錄[隱藏]

書籍:WebGL編程指南

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

畫一個(gè)彩色的三角形，通過(guò)javascript代碼將三角形的三個(gè)頂點(diǎn)的坐標(biāo)和頂點(diǎn)對(duì)應(yīng)的顏色數(shù)據(jù)(RGB)傳遞給WebGL系統(tǒng)。

// javascript創(chuàng)建的三角形頂點(diǎn)坐標(biāo)及顏色值數(shù)據(jù)varverticesColors=newFloat32Array([0.0,0.5,0,0.0,0.0,//第一個(gè)點(diǎn)：坐標(biāo) 顏色（rgb）-0.5,-0.5,0.0,0,0.0,//第二個(gè)點(diǎn)：坐標(biāo) 顏色（rgb）0.5,-0.5,0.0,0.0,0//第三個(gè)點(diǎn)：坐標(biāo) 顏色（rgb）]);

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

畫一個(gè)彩色三角形

WebGL應(yīng)用繪制三角形的過(guò)程

整體繪制過(guò)程大致如上圖所示。我經(jīng)?？吹筋愃频臄?shù)字，但我以前從未理解過(guò)它們的含義。在這里，我把我對(duì)關(guān)鍵流程的理解記錄如下:

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

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

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

光柵化

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

目前上述的內(nèi)容應(yīng)該能夠?yàn)榇蠹医獯鸪龃蠹覍?duì)于webgl是什么(gl的中文)的疑惑了，所以如果大家還想要了解更多的知識(shí)內(nèi)容，也可以關(guān)注本站其他文章進(jìn)行了解哦。

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

標(biāo)簽：