WebGL 繪製和變換

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矩陣按例主序存儲在其中