Javascript高級編程學習筆記（95）—— WebGL(1) 類型化數組

WebGL

webgl 是針對 canvas 的 3D上下文，與其它Web技術不一樣，WebGL並不是是W3C制定的標準，而是由 Khronos Group 制定的。

 

類型化數組

WebGL所涉及的複雜運算須要提早知道數值的精度，可是標準的 JS 沒法支持這一訴求。

所以WebGL引入了類型化數組這一律念，類型化數組也是數組，與通常的數組沒有什麼區別，只不過這種數組中全部元素的值都被指定爲某一特定類型。

 

類型化數組的核心在於 ArrayBuffer 這一數據類型，每一個 ArrayBuffer 對象表示內存中的指定字節數，至關於分配一個指定大小的內存供你使用。

經過 ArrayBuffer 的 byteLength 屬性能夠獲取該對象的字節數。

 

然而要操做 ArrayBuffer 則須要使用 DataView（視圖）。

DataView 視圖是一個能夠從 ArrayBuffer 對象中讀寫多種數值類型的底層接口，使用它時，不用考慮不一樣平臺的字節序問題。（摘自MDN）

 

建立視圖可使用如下方式：

// 基於整個 ArrayBuffer 建立視圖
let view = new DataView(buffer);

// 建立一個從 ArrayBuffer 第九個字節開始的視圖
let view = new DataView(buffer, 9);

// 建立一個 ArrayBuffer 9~18字節的視圖
let view = new DataView(buffer, 9, 10);

實例化的 DataView 會將字節偏移量以及字節長度信息分別保存在 byteOffset、byteLength 屬性中。

經過 buffer 屬性則能夠得到本來的 ArrayBuffer。

 

數據類型	getter	setter
有符號8位整數	getInt8（byteOffset）	setInt8（byteOffset，value）
無符號8位整數	getUint8(byteOffset)	setUint8(byteOffset,value)
有符號16位整數	getInt16(byteOffset,littleEndian)	setInt16(byteOffset,value,littleEndian)
無符號16位整數	getUint16(byteOffset,littleEndian)	setUint16(byteOffset,value,littleEndian)
有符號32位整數	getInt32(byteOffset,littleEndian)	setInt32(byteOffset,value,littleEndian)
無符號32位整數	getUint32(byteOffset,littleEndian)	setUint32(byteOffset,value,littleEndian)
32位浮點數	getFloat32(byteOffset,littleEndian)	setFloat32(byteOffset,value,littleEndian)
64位浮點數	getFloat64(byteOffset,littleEndian)	setFloat64(byteOffset,value,littleEndian)

上方表格中的方法函數的第一個參數都是字節的偏移量,表示從哪個字節開始讀取或者寫入.

 

代碼以下:

let buffer = new ArrayBuffer(20),
    view = new DataView(buffer),
    value;

view.setUint16(0,25);
view.setUint16(2,50);// 不能從字節1 開始,由於16位整數須要使用兩個字節
value = view.getInt16(0);

因此在使用DataView時須要本身把握這些細節

若是不注意就很容易出現錯誤,以下所示

let buffer = new ArrayBuffer(20),
    view = new DataView(buffer),
    value;

view.setUint16(0,25);
alert(view.getUint8(0));// 0 由於16位表示的25前8位全爲0

 

此外用於讀寫16位或更大數值的方法都有一個參數 littleEndian 該參數是一個布爾值

用於表示數值讀寫時是否採用小端字節序(即數據最低有效位保存在低字節位的地址中)

默認是 大端字節序,即該值爲 false