(JS) ArrayBuffer와 DataView - TypedArray

ArrayBuffer는 다음과 같은 상황에서 유용하다. 어떤 API가 커다란 사이즈의 Buffer를 통째로 받아야 해서, Buffer에 여러가지 정보를 담아서 넘겨야 한다. (예를 들어 WebGL. 여러가지 Instance의 정보를 한꺼번에 Buffer에 담아서 넘겨야 한 번에 Buffer를 보고 쭉 그릴 수 있다.)

C/C++라면 memcpy를 사용해도 되고 포인터를 이용해서 직접 써도 되지만, JS는 그렇지 않다.

그래서 ArrayBuffer를 이용해서 커다란 Buffer를 할당한 다음, (malloc)

Type, byteOffset, length를 지정해서 Buffer의 일부 영역을 Chunk로 반환 받을 수 있다. (포인터로 연결하는 것 같은 느낌)

Buffer

Chunk1 (Int32Array)
Chunk2 (Float32Array)
…
…

let buffer = new ArrayBuffer(1024);


let chunk1 = new Int32Array(buffer, 0, 128);    // buffer, offset, length
let chunk2 = new Float32Array(buffer, 4 \* 128, 128);

이 때 chunk를 반환 받는 것은 단순히 Buffer에 접근하는 포인터라고 할 수 있기 때문에, chunk를 겹치게 만드는 것도 가능하다.

// chunk1[127]과 chunk2[0]이 겹친다.
let chunk1 = new Int32Array(buffer, 0, 128);
   let chunk2 = new Float32Array(buffer, 4 \* 127, 128);

chunk1[127]과 chunk2[0]은 같은 데이터를 가리키므로 실제로 가지고 있는 데이터는 동일하지만, 타입이 다르기 때문에 어떻게 접근하느냐에 따라 다른 값으로 보인다. (DataView)

> chunk1[127] = 1
   1
   > chunk2[0]
   1.401298464324817e-45