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