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