Javascript高级编程学习笔记（95）—— WebGL(1) 类型化数组

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Javascript高级编程学习笔记（95）—— WebGL(1) 类型化数组，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2462字，纯文字阅读大概需要4分钟。

内容图文

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

内容总结

以上是互联网集市为您收集整理的Javascript高级编程学习笔记（95）—— WebGL(1) 类型化数组全部内容，希望文章能够帮你解决Javascript高级编程学习笔记（95）—— WebGL(1) 类型化数组所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---