The Atomics.store/load methods (and others? didn't look) do not support Float32Array.
I read that this is to be consistent with the fact that it also doesn't support Float64Array for compatibility reasons (some computers don't support it).
Aside from the fact that I think this is stupid, does this also mean I must cast every float I want to use into an unsigned int?
Not only will this result in ugly code, it will also make it slower.
E.g.:
let a = new Float32Array(1); // Want the result here
Atomics.store(a, 0, 0.5); // Oops, can't use Float32Array
let b = new Float32Array(1); // Want the result here
let uint = new Uint32Array(1);
let float = new Float32Array(uint.buffer);
float[0] = 0.5;
Atomics.store(b, 0, uint[0]);
As you discovered, the Atomics methods doesn't support floating point values as argument:
Atomics.store(typedArray, index, value)
typedArray
A shared integer typed array. One of Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array,
or Uint32Array.
You can can read the IEEE754 representation as integer from the underlying buffer as you do in the example code you posted
var buffer = new ArrayBuffer(4); // common buffer
var float32 = new Float32Array(buffer); // floating point
var uint32 = new Uint32Array(buffer); // IEEE754 representation
float32[0] = 0.5;
console.log("0x" + uint32[0].toString(16));
uint32[0] = 0x3f000000; /// IEEE754 32-bit representation of 0.5
console.log(float32[0]);
or you can use fixed numbers if the accuracy isn't important. The accuracy is of course determined by the magnitude.
Scale up when storing:
Atomics.store(a, 0, Math.round(0.5 * 100)); // 0.5 -> 50 (max two decimals with 100)
read back and scale down:
value = Atomics.load(a, 0) * 0.01; // 50 -> 0.5
The other answer didn't help me much and it took awhile for me to figure out a solution, but here's how I solved the same issue:
var data = new SharedArrayBuffer(LEN * 8);
var data_float = new Float32Array(data);
var data_int = new Uint32Array(data);
data_float[0] = 2.3; //some pre-existing data
var tmp = new ArrayBuffer(8);
var tmp_float = new Float32Array(tmp);
var tmp_int = new Uint32Array(tmp);
tmp_int[0] = Atomics.load(data_int, 0);
tmp_float[0] += 1.1; //some math
Atomics.store(data_int, 0, tmp_int[0]);
console.log(data_float[0]);
Related
I am making a Three.js application that needs to download some depth data. The data consist of 512x256 depth entries, stored in a compressed binary format with the precision of two bytes each. The data must be readable from the CPU, so I cannot store the data in a texture. Floating point textures is not supported on many browsers anyway, such as Safari on iOS.
I have this working in Unity, but I am not sure how to go about downloading compressed depth like this using javascript / three.js. I am new to javascript, but seems it has limited support for binary data handling and compression.
I was thinking of switching to a textformat, but then memory footprint and download size is a concern. The user could potentially have to load hundreds of these depth buffers.
Is there a better way to download a readable depth buffer?
You can download a file as binary data with fetch and async/await
async function doIt() {
const response = await fetch('https://webglfundamentals.org/webgl/resources/eye-icon.png');
const arrayBuffer = await response.arrayBuffer();
// the data is now in arrayBuffer
}
doIt();
After that you can make TypedArray views to view the data.
async function doIt() {
const response = await fetch('https://webglfundamentals.org/webgl/resources/eye-icon.png');
const arrayBuffer = await response.arrayBuffer();
console.log('num bytes:', arrayBuffer.byteLength);
// arrayBuffer is now the binary data. To access it make one or more views
const bytes = new Uint8Array(arrayBuffer);
console.log('first 4 bytes:', bytes[0], bytes[1], bytes[2], bytes[3]);
const decoder = new TextDecoder();
console.log('bytes 1-3 as unicode:', decoder.decode(bytes.slice(1, 4)));
}
doIt();
As for a format for depth data that's really up to you. Assuming your format was just 16bit values representing ranges of depths from min to max
uint32 width
uint32 height
float min
float max
uint16 data[width * height]
Then after you've loaded the data you can use either muliplte array views.
const uint32s = new Uint32Array(arrayBuffer);
const floats = new Float32Array(arrayBuffer, 8); // skip first 8 bytes
const uint16s = new Uint16Array(arrayBuffer, 16); // skip first 16 bytes
const width = uint32s[0];
const height = uint32s[1];
const min = floats[0];
const max = floats[1];
const range = max - min;
const depthData = new Float32Array(width * height);
for (let i = 0; i < uint16s.length; ++i) {
depthData[i] = uint16s[i] / 0xFFFF * range + min;
}
If you care about endianness for some future world where there are any browsers running on big endian hardware, then you either write your own functions to read bytes and generate those values or you can use a DataView.
Assuming you know the data is in little endian format
const data = new DataView(arrayBuffer);
const width = data.getUint32(0, true);
const height = data.getUint32(4, true);
const min = data.getFloat32(8, true);
const max = data.getFloat32(12, true);
const range = max - min;
const depthData = new Float32Array(width * height);
for (let i = 0; i < uint16s.length; ++i) {
depthData[i] = data.getUint16(i * 2 + 16, true) / 0xFFFF * range + min;
}
Of you want more complex compression like a inflate/deflate file you'll need a library or to write your own.
What's the difference between this:
var buffer = new ArrayBuffer(4);
var view = new Float32Array(buffer);
view[0] = 1;
and this
var buffer = new ArrayBuffer(4);
var view = new Int32Array(buffer);
view[0] = 1;
I'm wondering about the difference between Float32Array and Int32Array. Do they translate 1 differently into binary representation?
Yes they do. Assuming little-endianness, the binary representation of an element of Int32Array set to the value 1 will have 31 zero bits followed by 1 one bit.
Whereas the corresponding element of a Float32Array has the bit pattern 00111111100000000000000000000000. (The first bit is the sign, the following 8 the exponent and the final bits are the significand).
A Float32Array represents the values as 32-bit float numbers (that is, decimal numbers), while Int32Array represents them as 32-bit signed integers.
This example demostrates the differences:
const floatArray = new Float32Array(1);
const intArray = new Int32Array(1);
floatArray[0] = 1.5;
intArray[0] = 1.5;
console.log(floatArray[0]); // = 1.5
console.log(intArray[0]); // = 1
Hi there I need function to calculate unique integer number from number (real number double precision) and integer.
Try explain I am developing GIS application in javascript and I am working with complex vector object like polygon (array of points object with two coordinate in ring) and lines array of points. I need fast algorithm to recognize that element has been changed it must be really fast because my vector object is collection of thousand points . In C# I am calculating hash code from coordinate using bitwise operation XOR.
But javascript convert all operands in bitwise operation to integer but i need convert double precision to integer before apply bitwise in c# way (binnary). In reflector i see this that c# calculate hash code fro double like this and I need this function in javascript as fast as can be.
public override unsafe int GetHashCode() //from System.Double
{
double num = this;
if (num == 0.0)
{
return 0;
}
long num2 = *((long*) &num);
return (((int) num2) ^ ((int) (num2 >> 32)));
}
Example:
var rotation = function (n) {
n = (n >> 1) | ((n & 0x001) << 31);
return n;
}
var x: number = 1;
var y: number = 5;
var hash = x ^ rotation(y); // result is -2147483645
var x1: number = 1.1;
var y1: number = 5;
var hash1 = x1 ^ rotation(y1); // result is -2147483645
Example result is not correct hash == hash1
Example 2: Using to string there is correct result but calculate Hash from string is to complicate and I thing is not fast enough.
var rotation = function (n) {
n = (n >> 1) | ((n & 0x001) << 31);
return n;
}
var GetHashCodeString = function(str: string): number {
var hash = 0, i, l, ch;
if (str.length == 0) return hash;
for (i = 0, l = str.length; i < l; i++) {
ch = str.charCodeAt(i);
hash = ((hash << 5) - hash) + ch;
hash |= 0; // Convert to 32bit integer
}
return hash;
}
var x: number = 1;
var y: number = 5;
var hash = GetHashCodeString(x.toString()) ^ rotation(GetHashCodeString(y.toString()));
//result is -2147483605
var x1: number = 1.1;
var y1: number = 5;
var hash1 = GetHashCodeString(x1.toString()) ^ rotation(GetHashCodeString(y1.toString()));
//result is -2147435090
Example2 result is correct hash != hash1
Is there some faster way than converting number to string than calculate hash from each character? Because my object is very large and it will take lot of time and operation in this way ...
I try do it using TypedArrays but yet I am not successful.
Thanks very much for your help
Hi there I tried use TypedArrays to calculate Hash code from number and the result is interesting. In IE the performance 4x better in Chrome 2x in FireFox this approach is equal to string version ...
var GetHashCodeNumber = function (n: number): number {
//create 8 byte array buffer number in js is 64bit
var arr = new ArrayBuffer(8);
//create view to array buffer
var dv = new DataView(arr);
//set number to buffer as 64 bit float
dv.setFloat64(0, n);
//now get first 32 bit from array and convert it to integer
// from offset 0
var c = dv.getInt32(0);
//now get next 32 bit from array and convert it to integer
//from offset 4
var d = dv.getInt32(4);
//XOR first end second integer numbers
return c ^ d;
}
I think this can be useful for someone
EDIT: using one buffer and DataView is faster !
Here is a faster way to do this in JavaScript.
const kBuf = new ArrayBuffer(8);
const kBufAsF64 = new Float64Array(kBuf);
const kBufAsI32 = new Int32Array(kBuf);
function hashNumber(n) {
// Remove this `if` if you want 0 and -0 to hash to different values.
if (~~n === n) {
return ~~n;
}
kBufAsF64[0] = n;
return kBufAsI32[0] ^ kBufAsI32[1];
}
It's 250x faster than the DataView approach: see benchmark.
I looked up some hashing libraries to see how they did it: xxhashjs, jshashes, etc.
Most seem to take a string or an ArrayBuffer, and also depend on UINT32-like functionality. This is equivalent to you needing a binary representation of the double (from your C# example). Notably I did not find any solution that included more-strange types, other than in another (unanswered) question.
His solution uses a method proposed here, which converts it to various typed arrays. This is most likely what you want, and the fastest accurate solution (I think).
I highly recommend that you structure your code to traverse objects/arrays as desired, and also benchmark the solution to see how comparable it is to your existing methods (the non-working one and the string one).
I have a BGRA array and need to draw it to a canvas.
Currently i was doing it like this:
var aVal = returnedFromChromeWorker;
var can = doc.createElementNS(NS_HTML, 'canvas');
can.width = aVal.width;
can.height = aVal.height;
var ctx = can.getContext('2d');
ctx.putImageData(aVal, 0, 0);
doc.documentElement.appendChild(can);
Is there some way to get a BGRA array onto the canvas? I was exploring: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/imgIEncoder
I can't re-order the array because my goal is to take screenshots and for large screens even just 1280x1024, it takes 2.3s to go through and re-order it all.
I tried re-ordering on the ctypes side but it's giving me quirky issues: 0, making the whole image invisible >_< lol BITMAPV5HEADER getting RGBA keep A at 255
How to put BGRA array into canvas without re-ordering
There is none.
Reorganize the byte-order is necessary as canvas can only hold data in RGBA format (little-endian, ie. ABGR in the buffer). Here is one way to do this:
You could add an extra step for your worker to deal with the reordering. Create a DataView for the raw byte buffer (ArrayBuffer), then iterate each Uint32 value.
Below a Uint32 is read as little-endian. This is because in this case that format is easier to swap around as we only need to right-shift BGR and put A back in front. If your original buffer is in big-endian you will of course need to read it as big-endian and set back as little-endian (getUint32(pos, false)):
Example
var uint32 = new Uint32Array(1), pos = 0; // create some dummy data
var view = new DataView(uint32.buffer); // create DataView for byte-buffer
var pos = 0; // byte-position (we'll skip 4 bytes each time)
// dummy data in BGRA format
uint32[0] = 0x7722ddff; // magenta-ish in BGRA format
document.write("BGRA: 0x" + (uint32[0]).toString(16) + "<br>");
// --- Iterate buffer, for each: ---
var v = view.getUint32(pos, true); // BGRA -> RGBA, read as little-endian
var n = (v >>> 8) | (v << 24); // rotate - move A from last to first position
view.setUint32(pos, n, true); // set back
pos += 4; // do this when inside the loop
// result
document.write("ABGR: 0x" + (uint32[0]>>>0).toString(16));
Update If the byte-order (endian-wise) is the same in both end you can skip the DataView and use Uint32Array directly which will speed things up a tad as well:
var uint32 = new Uint32Array(1), pos = 0; // create some dummy data
// inside loop:
var v = uint32[pos];
uint32[pos++] = (v >>> 8) | (v << 24); // pos index is now per uint32
I'm looking to convert a Float32Array into an Int16Array.
Here's what I have (i'm not providing data).
var data = ...; /*new Float32Array();*/
var dataAsInt16Array = new Int16Array(data.length);
for(var i=0; i<data.length; i++){
dataAsInt16Array[i] = parseInt(data[i]*32767,10);
}
I'm not convinced that I'm doing it correctly and looking for some direction.
You can do it directly from the ArrayBuffer
var dataAsInt16Array = new Int16Array(data.buffer);
var f32 = new Float32Array(4);
f32[0] = 0.1, f32[1] = 0.2, f32[2] = 0.3, f32[3] = 0.4;
// [0.10000000149011612, 0.20000000298023224, 0.30000001192092896, 0.4000000059604645]
var i16 = new Int16Array(f32.buffer);
// [-13107, 15820, -13107, 15948, -26214, 16025, -13107, 16076]
// and back again
new Float32Array(i16.buffer);
// [0.10000000149011612, 0.20000000298023224, 0.30000001192092896, 0.4000000059604645]
If you're after converting the raw underlying data you can use the approach Paul S. is describing in his answer.
But be aware of that you will not get the same numbers as you are dealing with 32-bit IEEE 754 representation of the number in the case of Float32. When a new view such as Int16 is used you are looking at the binary representation of that, not the original number.
If you are after the number you will have to convert manually, just modify your code to:
var data = ...; /*new Float32Array();*/
var len = data.length, i = 0;
var dataAsInt16Array = new Int16Array(len);
while(i < len)
dataAsInt16Array[i] = convert(data[i++]);
function convert(n) {
var v = n < 0 ? n * 32768 : n * 32767; // convert in range [-32768, 32767]
return Math.max(-32768, Math.min(32768, v)); // clamp
}
var floatbuffer = audioProcEvent.inputBuffer.getChannelData(0);
var int16Buffer = new Int16Array(floatbuffer.length);
for (var i = 0, len = floatbuffer.length; i < len; i++) {
if (floatbuffer[i] < 0) {
int16Buffer[i] = 0x8000 * floatbuffer[i];
} else {
int16Buffer[i] = 0x7FFF * floatbuffer[i];
}
}
ECMAScript 2015 and onwards has TypedArray.from which converts any typed array (and indeed, any iterable) to the specified typed array format.
So converting a Float32Array to a Uint8Array is now as easy as:
const floatArray = new Float32Array()
const intArray = Int16Array.from(floatArray)
...albeit with truncation.
Combining answers from robjtede and StuS here is one for conversion and scaling of an Float32Array to Int16Array. The scaling is range 1 to -1 in Float32Array becomes 32767 and -32768 in Int16Array:
myF32Array=Float32Array.from([1,0.5,0.75,-0.5,-1])
myI16Array=Int16Array.from(myF32Array.map(x => (x>0 ? x*0x7FFF : x*0x8000)))
myNewF32Array=Float32Array.from(Float32Array.from(myI16Array).map(x=>x/0x8000))
console.log(myF32Array)
console.log(myI16Array)
console.log(myNewF32Array)
//output
> Float32Array [1, 0.5, 0.75, -0.5, -1]
> Int16Array [32767, 16383, 24575, -16384, -32768]
> Float32Array [0.999969482421875, 0.499969482421875, 0.749969482421875, -0.5, -1]
It seems that you are trying not only to convert data format, but to process original data and store it in different format.
The direct way of converting Float32Array to Int16Array is as simple as
var a = new Int16Array(myFloat32Array);
For processing data you can use the approach that you provided in the question. I'm not sure if there's a need to call parseInt.