类型化数组

JavaScript 的类型数组有以下这几种:它们是在底层向缓冲区存放二进制数据。JavaScript 与 WebGL 之间的数据通信必须是二进制的。 类型化数组是解决 JavaScript 与 WebGL 之间大量的、实时的数据交换的有效手段。

类型 每个元素所占字节数
BYTES_PER_ELEMENT
描述
Int8Array 1 8位整型数组
Uint8Array 1 8位无符号整型数组
Uint8ClampedArray 1 8位无符号整型固定数组
Int16Array 2 16位整型数组
Uint16Array 2 16位无符号整型数组
Int32Array 4 32位整型数组
Uint32Array 4 32位无符号整型数组
Float32Array 4 单精度32位浮点数
Float64Array 8 双精度64位浮点数

类型化数组有个属性 BYTES_PER_ELEMENT,它是数组中每个元素所占用的字节数,在 WebGL 创建缓冲区对象,对其写入数据时用到。
var verticsSize = new Float32Array([ 0.0, 0.5, 10.0, -0.5, -0.4, 20.0, 0.5, -0.4, 30.0]); var element_size = verticsSize.BYTES_PER_ELEMENT; gl.vertexAttribPointer( a_Position, 2, gl.FLOAT, false, element_size * 3, 0);

Three.js 在对 BufferGeometry 传顶点属性数据时,也是使用类型化数组, 数组是 BufferAttribute 里的参数。 var numPoints = 5; var positions = new Float32Array( numPoints * 3 ); geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

但类型化数组不像一般数组 Array 那样有 push()、 pop()、 splice() 等方法, 而是通过 set(array, offset) 来设置数值。 var uint8 = new Uint8Array( 8 ); uint8.set([1,2,3], 3); console.log(uint8); [ 0, 0, 0, 1, 2, 3, 0, 0 ]