前言:前面寫到了用 webgl繪制點(diǎn)的過程.在繪制多個的時候用了一個數(shù)組來保存點(diǎn)位信息,每次都循環(huán)該數(shù)組,并調(diào)用 gl.drawArrays()函數(shù)來繪制這個點(diǎn),顯然這種方式只能繪制點(diǎn),對應(yīng)圖形來說,它擁有多個頂點(diǎn),并且需要你一次性把所以的頂點(diǎn)傳入到著色器中,然后才能把圖形顯示出來.
webgl 提供了一個很方便的機(jī)制,即緩沖對象,他可以一次性的想著色器傳遞多個頂點(diǎn)的數(shù)據(jù).

緩沖對象

緩沖對象其實(shí)救贖 webgl 系統(tǒng)中開辟的一塊內(nèi)存區(qū)域,我們可以一次性的向這塊內(nèi)存區(qū)域填充大量的數(shù)據(jù),然后將這些數(shù)據(jù)保存其中,供頂點(diǎn)著色器使用.使用緩沖區(qū)對象向著色器傳入多個頂點(diǎn)的數(shù)據(jù)需要遵循以下五個步驟:

1. 創(chuàng)建緩沖區(qū)對象(gl.createBuffer)
2. 綁定緩沖對象(gl.bindBuffer)
3. 將數(shù)據(jù)寫入緩沖區(qū)對象(gl.bufferData)
4. 將緩沖區(qū)對象分配給一個 attribute 對象(gl.vertexAttribPointer)
5. 開啟 attribute 變量(gl.enableVertexAttribArray)

創(chuàng)建緩沖對象

var vertexBuffer = gl.createBuffer()

執(zhí)行完成之后,webgl 系統(tǒng)多一個新創(chuàng)建出來的緩沖區(qū)對象,創(chuàng)建出來的緩沖區(qū)對象也可以使用 gl.deleteBuffer函數(shù)來刪除這個緩沖區(qū)

image.png

綁定緩沖區(qū)對象

創(chuàng)建緩沖區(qū)對象之后將緩沖區(qū)對象綁定到 webgl 系統(tǒng)已經(jīng)存在的目標(biāo)上面.綁定函數(shù)為 bindBuffer
bindBuffer(target,buffer)
- target:參數(shù)可以是以下幾個 gl.ARRAY_BUFFER:表示對象中包含頂點(diǎn)數(shù)據(jù) gl.ELEMENT_ARRAY_BUFFER 表示緩沖區(qū)包含頂點(diǎn)的索引值
- buffer:指定指點(diǎn) createBuffer創(chuàng)建的 buffer

image.png

向緩沖區(qū)對象寫入數(shù)據(jù)

使用gl.bufferData將頂點(diǎn)數(shù)據(jù)寫入到開辟空間的緩沖區(qū)對象.

image.png

gl.bufferData(target,data,usage)

• target:gl.ARRAY_BUFFER或者 gl.ELEMENT_ARRAY_BUFFER
• data:寫入緩沖對象的數(shù)據(jù),類型是類型化數(shù)組
• usage:表示程序?qū)⑷绾问褂么鎯υ诰彌_區(qū)中的數(shù)據(jù).
  gl.STATIC_DRAW:只會向緩沖區(qū)對象寫入一次數(shù)據(jù)
  gl.STREAM_DRAW:只會向緩沖區(qū)寫入一次數(shù)據(jù),然后繪制若干次
  gl.DYNAMIC_DRAW:會向緩沖區(qū)多次寫入數(shù)據(jù),并繪制多次

類型化數(shù)組

webgl 通常需要處理大量的相同類型的數(shù)據(jù).為了性能,webgl 為每種基本數(shù)據(jù)類型引入了一種特殊的數(shù)據(jù)(類型化數(shù)組),瀏覽器事先知道數(shù)據(jù)的類型,處理起來更加的有效率
webgl 類型數(shù)組如下表所示

image.png

類型數(shù)組和 Array 數(shù)組相似,但是也有一些不同,類型數(shù)組不支持 push,pop.類型數(shù)組同樣擁有一些類的方法和屬性

image.png

緩沖區(qū)對象數(shù)據(jù)分配給 attribute 變量

gl.vertexAttribp[1234]f 只能一次給 attribute 變量分配一個值,為了解決這個問題,使用 gl.vertexAttribPointer()可以將整個緩沖區(qū)對象分配給 attribute 變量

gl.vertexAttribPointer(location,size,type,normalized,stride,offset)

• location:指定待分配 attribute 變量的存儲位置
• size:緩沖區(qū)給每個頂點(diǎn)分配的分量個數(shù)
• type:數(shù)據(jù)類型 gl.UNSIGNED_BYTE(Uint8Array),gl.SHORT(Int16Array),....
• steide:指定相鄰兩個頂點(diǎn)的字節(jié)數(shù)量
• offset:指定緩存的偏移量

開啟變量

為了使頂點(diǎn)著色器可以訪問緩沖區(qū)內(nèi)的數(shù)據(jù),需要使用 gl.enableVertexAttribArray()函數(shù)開啟 attribute 變量.同樣可以使用 disableVertexAttribArray()來關(guān)閉分配

gl.enableVertexAttribArray(locat)

• location:指定 attribute 變量的存儲地址