How to correctly read binary floating-point data using XMLHttpRequest?

Question

I'm trying to read a binary file of floating-point values into an array in JavaScript. Currently I'm doing so by:

var mRequest = new XMLHttpRequest();
mRequest.open('GET', 'res/binary_float_data.bin');
mRequest.responseType = 'arraybuffer';

mRequest.onreadystatechange = function () {
    if (mRequest.readyState === 4) {

        // Get bytes
        var buffer = mRequest.response;
        var dataview = new DataView(buffer);

        // Create buffer (4 bytes / float)
        var mFloatArray = new Float32Array(buffer.byteLength / 4);

        // Copy floats
        for (var i = 0; i < mFloatArray.length; i++) 
        {
            mFloatArray[i] = dataview.getFloat32(i * 4); // At every 4th byte
        }

        console.log("Loaded "+mFloatArray.length+" floats");

        // Do something with mFloatArray
    }
};

mRequest.send();

However, when I look at the minimum, maximum, and average values of the resulting array (mFloatArray), they are not correct. They should be:

min: -0.0094
max: 0.0081
avg: 1.3196e-04

Instead I am getting:

min: -3.3985008792505584e+38
max: 0
avg: NaN

I am certain the binary file is correct, am I correctly parsing the XMLHttpRequest?

EDIT: Adding a small part of the binary file, in hex view:

0002980: 0000 0000 0000 0000 0000 0000 0000 0000  ................
0002990: 0000 0000 0000 0000 0000 0000 55df 11bc  ............U...
00029a0: afc5 13bc c0b2 15bc 4205 17bc a094 17bc  ........B.......
00029b0: e3d4 17bc cb41 18bc f2e6 18bc 464d 19bc  .....A......FM..
00029c0: bb94 18bc f6ca 16bc 29a5 14bc 0000 0000  ........).......
00029d0: 0000 0000 0000 0000 0000 0000 0000 0000  ................

EDIT 2: I made the binary file using matlab and the "fwrite" command, with precision 'float32'. http://www.mathworks.com/help/matlab/ref/fwrite.html

If you console.log(mFloatArray) do you get the values you want? Out of curiosity, what does binary_float_data.bin look like? — gen_Eric
– gen_Eric, Commented Jun 25, 2013 at 17:42
The values in console.log(mFloatArray) are not right, in fact they're all of huge magnitude, both positive and negative. Also, there are no NaN's in the data. binary_float_data.bin in this case is velocities from a hydro simulation, data should look more like "0.0065 0.0071 0.0002 0.0002 0.0001" — Alfredo Gimenez
– Alfredo Gimenez, Commented Jun 25, 2013 at 17:49
Is that actually a binary file, or just a text file? Maybe JavaScript is reading is reading ASCII codes of the characters, instead of "binary" data? — gen_Eric
– gen_Eric, Commented Jun 25, 2013 at 17:51
I added the hex view of the binary file. I made it in matlab using fwrite(vars,'float32') which is a straightforward binary output. Is it possible they are using different floating point formats/representations? — Alfredo Gimenez
– Alfredo Gimenez, Commented Jun 25, 2013 at 17:54
It seems to me that it has to do with endianness. Also, those zeros at the start of the file are suspicious, if I recall correctly, no floating point number translates into zeroed bytes — Ast Derek
– Ast Derek, Commented Jun 25, 2013 at 18:05

Community · Accepted Answer · 2017-05-23 12:28:58Z

3

Endianness of your data is important: Javascript Typed Arrays and Endianness

You'd need to detect endianness and extract the number byte per byte, or create two different versions of the file, detect endianness and retrieve the correct one for the current browser.

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Jun 25, 2013 at 18:08

Ast Derek

2,7291 gold badge20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alfredo Gimenez Over a year ago

I answered above, but both the default for Matlab's fwrite function and the default for getFloat32 are little endian, and I added the optional arguments to ensure it as well. As far as the matlab documents go, each element is a 32-bit floating point number in little endian. Still no luck...

Alfredo Gimenez Over a year ago

Oops! today is opposite day. The default for getFloat32 is Big endian, I changed it by using getFloat32(... , true) and the data looks better, but still not right...

Alfredo Gimenez Over a year ago

Accepted because that was definitely an issue, but the data still isn't exactly correct

Ast Derek Over a year ago

Can you post these new numbers? Try generating a file with numbers with a well defined pattern and compare those.

Alfredo Gimenez Over a year ago

The last problem was a dumb error in processing the values, once that was fixed, everything looks good! Thanks for your help!

Collectives™ on Stack Overflow

How to correctly read binary floating-point data using XMLHttpRequest?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related