Byte count mismatch when re-interpreting float32 array as uint8 array

Question

We intend to change the JavaScript representation of an array of float32 values to an array of uint8 bytes. It's implied that doing so might help us more efficiently transfer the data over HTTP requests.

To do so, we have tried:

var vertexBuffer = ...; // Float32Array
console.log('vertex buffer =', vertexBuffer);
console.log('vertex buffer byte length = ', vertexBuffer.byteLength)
var arr = new Uint8Array(vertexBuffer);
console.log('converted to Uint8Array: ', arr);
console.log('Byte length = ', arr.byteLength);
console.log('Byte length / 4 = ', arr.byteLength / 4);

The logs are:

Implication

The Size of Float32Array is 84942 and that's the same for the resulted Uint8Array!

Meaning each float32 value is converted to a single uint8! Which is not what we intend to do! Right?

We intend to interpret each float32 as four uint8 values. How can we do so in the most efficient way? The change of interpretation shouldn't require any computation, right?

Answer 1

It's implied that doing so might help us more efficiently transfer the data over HTTP requests.

That's not the case unless you really do wish to truncate the precision of the floating-point values to 8-bit integers. Simply send the vertexArray.buffer (an ArrayBuffer), the "raw data" of the array, over by any method you like. (Of course you can compress the data before sending it, if that's your jam.)

You can then reconstruct a Float32Array of an ArrayBuffer you receive by passing it to the Float32Array constructor.

To demonstrate these conversions:

> arr = new Float32Array([Math.sqrt(2), Math.sqrt(3)])
// An array of 2 floats, 4 bytes each
Float32Array(2) [1.4142135381698608, 1.7320507764816284, buffer: ArrayBuffer(8), byteLength: 8, byteOffset: 0, length: 2]

> bytes = new Uint8Array(arr.buffer)
// The same floats but interpreted as 8-bit values (8 integers, 1 byte each)
Uint8Array(8) [243, 4, 181, 63, 215, 179, 221, 63, buffer: ArrayBuffer(8), byteLength: 8, byteOffset: 0, length: 8]

> bytes[1] = 123
// Modifying the byte array 
// (since an ArrayBuffer is just opaque memory, it can't be modified,
//  but we can modify the byte interpretation of it)
123

> new Float32Array(bytes.buffer)
// (this step is not strictly necessary; 
//  modifying `bytes` will have changed the underlying buffer
//  used by the original `Float32Array` since we didn't copy it)
// Reinterpreting the modified bytes as floats 
// (see how the first value has slightly changed)
Float32Array(2) [1.4178451299667358, 1.7320507764816284, buffer: ArrayBuffer(8), byteLength: 8, byteOffset: 0, length: 2]