当前位置：首页 > news >正文

webgl知识点---类型化数组

news 来源：原创 2025/6/16 6:52:21

为什么用类型化数组

与 GPU 直接交互

WebGL 操作的是 GPU而不是 CPU, webgl很吃显卡性能

GPU 需要直接读取二进制数据，而不是普通的 JavaScript 数组。

类型化数组提供内存中的原始二进制数据，GPU可以高效地读取。

节省内存

普通 JavaScript 数组存储的是对象，会有额外的元数据和指针，效率低。

类型化数组使用定长的二进制数据，内存占用小。

数据格式匹配

WebGL 使用 GLSL（OpenGL Shading Language）编写的着色器需要特定的数据格式。

性能优化

类型化数组直接映射到内存中的数据块，支持快速的读取和写入。

WebGL 的方法如 gl.bufferData() 需要类型化数组作为参数，传输数据快。

和普通数组的区别

内存管理方面
类型化数组直接在一个连续的内存块上操作。这意味着所有的数据都紧密地存储在一个固定大小类型化数组:的缓冲区中，数据访问和修改非常高效，因为它们不需要像普通数组那样进行额外的内存引用或分配。
普通数组:普通数组是动态的，可以容纳不同类型的数据。这使得它们非常灵活，但由于需要动态调整大小和存储多种类型的数据，它们的内存管理和访问速度比类型化数组要慢。

数据类型方面

类型化数组:类型化数组是强类型的，数组中的每个元素都必须是特定类型的值(如 Int8、Uint8、Float32等)。这种类型的严格性确保了数据的一致性和高效的内存使用。
普通数组:普通数组是弱类型的，可以包含任意类型的值(如数字、字符串、对象等)。这种灵活性虽然方便，但会导致在进行大量数据处理时效率较低。

操作方法方面

类型化数组:类型化数组支持一组专门的方法，用于在二进制数据块上进行高效操作。它们不继承自Array.prototype，因此不具备一些普通数组的方法(如push、pop、splice 等)。
普通数组:普通数组继承自 Array.prototype拥有丰富的数组操作方法，可以灵活地添加、删除、修改和遍历数组元素。

类型化数组有哪些

Int8Array:8位有符号整数，每个元素占1字节
Uint8Array:8位无符号整数, 每个元素占一个字节
Uint8ClampedArray:8位无符号整数(固定值, 溢出时值被截断), 每个元素占一个字节
Int16Array :16 位有符号整数，每个元素占 2 字节
Uint16Array :16 位无符号整数，每个元素占 2 字节
Int32Array :32 位有符号整数，每个元素占4字节。
Uint32Array :32 位无符号整数，每个元素占4字节。
Float32Array :32 位 IEEE 754 浮点数，每个元素占 4 字节
Float64Array:64 位 IEEE 754 浮点数，每个元素占 8 字节,

有符号整数和无符号整数是在计算机中存储整数数据时使用的两种表示方式，它们的区别在于如何解释存储在内存种的二进制数据的最高位。(通俗讲就是是否可为负数)
32位有符号整数:

最高位可以为0或者1，为0则表示非负数，为1则表示负数
范围:-2^31到2^31 -1
示例:例如 01111111 11111111 11111111 11111111 表示的是最大的正数, 而 10000000 00000000 00000000 0000000 表示的是最小的负数。
32位有符号整数:
始终表示一个非负整数
范围:0到2^32-1
示例:例如 11111111 11111111 11111111 11111111 表示的是最大的无符号整数

创建跟使用类型化数组

要创建类型化数组实例就需要使用 new 操作符实例化构造函数

<script>
    // 不同类型的, 数值, 字符串, 对象等 这是javascript的灵活性 但是因为动态调整大小和存储多种数据类型的特性, 导致内存管理跟访问速度方面变慢
     
    // const arr =[1, 2, '你好', {}]
    // 声明arr, 并不是把数组作为值给arr, 而是把地址给了arr, arr是引用了他的地址</body>
    // 二进制操作是直接在内存上进行操作 
    // Int8Array这些都是构造函数 
    // 如果想要创建一个类型化数组对象 要先进行实例化
    const int8 = new Int8Array(8)//length:8 
    console.log(int8);
  
   const int16 = new Int16Array(8)
   console.log(int16);//bytelength:16
  //在 Int8Array 和 Int16Array 中，8 和 16 表示每个元素所占的位数（bit）, 一个字节是8位
  //整数里面有整数类型跟浮点数类型
  //整数里面有有符号整数跟无符号整数
  //有符号代表可以有负数、零、正数
  //无符号 不能表示负数

  
  // 有符号整数 : 最高位是符号位, 1开头是负数, 0开头是正数 
  //最大跟最小值
  //对于8位
  //0 1 1 1 1 1 1 1
  //8*2^7+1*2^6 +1*2^5 + 1*2^4 + 1*2^3 + 1*2^2 + 1*2^1 + 1*2^8
  //0+64+32+16+8+4+2+1=127
  //最小1 0 0 0 0 0 0 0
  //1*2 ^ 7 + 0*2^6+....
  //为-128
  
  
</script>