1.使用緩衝區物件向頂點著色器傳入多個頂點的資料，需要遵循以下五個步驟：
1.1 建立緩衝區物件（gl.createbuffer()）。
1.2 繫結緩衝區物件（gl.bindbuffer()）。
1.3 將資料寫入緩衝區物件（gl.bufferdata()）。
1.4 將緩衝區物件分配給乙個attribute變數（gl.vertexattribpointer()）。
1.5 開啟attribute變數（gl.enablevertexattribarray()）。
2.建立緩衝區物件（gl.createbuffer()）
在使用webgl時，需要呼叫gl.createbuffer()方法來建立緩衝區物件。下面的圖上部分是執行前的狀態，下部分是執行後的狀態。
對應createbuffer的是gl.deletebuffer(buffer)函式，用來刪除建立的緩衝區物件。buffer表示帶刪除的緩衝區物件。
3.繫結緩衝區（gl.bindbuffer(target, buffer)）
將緩衝區物件繫結到webgl系統中已經存在的「目標」（target）上。引數：
target:繫結的目標。可以使以下中的乙個：gl.array_buffer,表示緩衝區物件中包含了頂點的資料;gl.element_,表示緩衝區物件中包含了頂點的索引值。
buffer：指定之前由gl.createbuffer()返回的帶繫結的緩衝區物件。
執行繫結後，webgl系統內部狀態發生變化。如圖所示：
4.向緩衝區物件中寫入資料（gl.bufferdata(target, data, usage)）
開闢儲存空間，想繫結在target上的緩衝區物件總寫入資料data。引數：
target:gl.array_buffer或gl.element_array_buffer。
data:寫入緩衝區物件的資料。
usage: 表示程式將如何使用儲存在緩衝區物件中的資料。引數值包括：gl.static_draw,只會向緩衝區物件中寫入一次資料，但需要繪製很多次；gl.stream_draw,只會向緩衝區物件中寫入一次資料，然後繪製若干次;gl.dynamic_draw,會想緩衝區物件中多次寫入資料，並繪製很多次。
5.型別化陣列
webgl使用的各種型別化陣列包括：
陣列型別/每個元素所占用位元組數/描述（c語言總的資料型別）
int8array/1/8位整形數(signed char)
uint8array/1/8位無符號整形數(unsigned char)
int16/2/16位整形數（signed short）
uint16array/2/16位無符號整形數(unsigned short)
int32array/4/32位整形數（signed int）
uint32array/4/32位無符號整形數(unsigned int)
float32array/4/單精度32位浮點數（float）
float64array/8/雙精度64位浮點數（double）
6.型別化陣列的方法、屬性和常量
方法、屬性和常量/描述
get(index)/獲取第index個元素值
set(index, offset)/設定第index個元素的值為value
set(array, offset)/從第offset個元素開始講陣列array中的值填充進去
length/陣列長度
bytes_per_element/陣列中每個元素所佔位元組數
7.將緩衝區物件分配給attribute變數（gl.vertexattribpointer(location, size, type, normalized, stride, offset)）
將繫結到gl.array_buffer的緩衝區物件分配給有location指定的attribute變數。引數：
location:指定帶分配attribute變數的儲存位置。
size:指定緩衝區中每個頂點的分量個數（1到4）。若size比attribute變數書序的分量數小，確實分量將按照與gl.vertexattrib[1234]f()相同的規則補全。
type:使用一下型別之一來指定資料格式：gl.unsigned_byte,無符號位元組，uint8array;gl.short，短整形，int16array;gl.unsigned_short,無符號短整形，uint16array;gl.int,整形，int32array;gl.unsigned_int, 無符號整形，uint32array;gl.float,浮點型，float32array。
normalize:傳入true或false，標明是否將非浮點型的資料歸納化到[0,1]或[-1,1]區間。
stride:指定相鄰兩個頂點間的位元組數，預設為0。
offset：指定緩衝區物件中的偏移量以位元組為單位。如果是起始位置，則offset為0。
8.開啟attribute變數（gl.enablevertexattribarray(location)）
為了使定點著色器能夠訪問緩衝區內的資料，需要使用gl.enablevertexattribarray()方法開啟attribute變數。
9.將矩陣傳遞給物件緩衝區（gl.uniformmatrix4fv(location, transpore, array)
將array表示的4*4矩陣分配給有location指定的uniform變數。引數：
location:uniform變數的儲存位置
transpose:在webgl中必須指定為false
array:帶傳輸的型別化陣列，4*4矩陣按例主序儲存在其中
《WebGL程式設計指南》學習 繪製和變換三角形
webgl程式設計指南 的第三章用了兩天看完，現將看完之後的總結和心得寫下來！一 繪製多個點 webgl提供了 緩衝區物件 buffer object 可以一次性的向緩衝區內傳入多個頂點資料。例如下面在同時繪製三個點的時候，就用到了緩衝區物件。function main function initv...
一 WebGL 著色器和繪製
var vshader source void main 型別和變數名字 var fshader source void main param mode 繪製模式 gl.points,gl.lines,gl.line strip,gl.line loop param first 從哪個點開始繪製 p...
WebGL 示例 繪製圓形點
之前繪製的點都是正方形的，類似乙個畫素點，那怎麼才能把方點繪製成圓點，頂點著色器和片元著色器之間發生了光柵化過程，乙個頂點被光柵化為了多個片元，每乙個片元都會經過片元著色器處理，直接繪製就是方形的點，要繪製圓形的點就需要把多餘的片元給削去 將矩形削成圓形需要知道每個片元在光柵化過程中的座標，在片元著...