在 WebGL 中从 Float32Array 到 Uint16Array 的转换
Conversion from Float32Array to Uint16Array in WebGL
我有 Float32Array 纹理,可以通过 WebGL 正确显示。但是,当我尝试将它们转换为 Uint16Array 时,问题出现了。
这是我的转换部分。
var _floatToHalfFloat = function(input, offset) {
var largestHalf = Math.pow(2, 30-15) * (1 + 1023/1024);
var m = new ArrayBuffer(4);
var n = new Float32Array(m);
var o = new Uint32Array(m);
var f = 0.0;
for (var i = input.length - 1 - offset; i >= 0;i--) {
n[0] = input[i];
f = o[0];
// fast conversion of half
// ref : ftp://www.fox-toolkit.org/pub/fasthalffloatconversion.pdf
if (isNaN(input[i])) {
input[i] = 0x7fff;
} else if(n === Infinity || n > largestHalf) {
input[i] = 0x7c00;
} else if(n === -Infinity || n < -largestHalf) {
input[i] = 0xfc00;
} else if(n === 0) {
input[i] = 0;
} else {
input[i] = ((f>>16)&0x8000)|((((f&0x7f800000)-0x38000000)>>13)&0x7c00)|((f>>13)&0x03ff);
}
}
return new Uint16Array(input);
};
当原始图像达到黑色时,我们可以在转换后的图像中看到饱和色(全红、绿色 and/or 蓝色)。我认为该函数在 0 附近效果不佳。
我已经快速实现了wikipedia explanation of norm of the float 16 bits.
<html>
<head>
<script>
var _floatToHalfFloat = #### YOUR FUNCTION HERE CUT ####
var _halfFloatToFloat = function(hf) {
var m = new ArrayBuffer(2);
var n = new Uint16Array(m);
n[0] = hf;
var sign = n[0] & 0x8000;
var exp = (n[0] >> 10) & 0x1F;
var mant = n[0]& 0x03FF;
document.getElementById('sign').innerHTML += sign+" - ";
document.getElementById('exp').innerHTML += exp+" - ";
document.getElementById('mant').innerHTML += mant+" - ";
if (exp == 0x1F) {
return 1.0 * Math.pow(-1, sign) * Infinity;
} else if (exp == 0) {
return Math.pow(-1, sign) *
Math.pow(2, -14) *
(mant / Math.pow(2, 10));
} else {
return Math.pow(-1, sign) *
Math.pow(2, exp-15) *
(1+(mant / Math.pow(2, 10)));
}
};
document.addEventListener("DOMContentLoaded", function(event) {
var input = new Float32Array(8);
input[0] = 2.5;
input[1] = 0.25;
input[2] = 0.025;
input[3] = 0.025;
input[4] = 0.0025;
input[5] = 0.00025;
input[6] = 0.000025;
input[7] = 0.0;
var i, s = "Value before = ";
for (i = 0; i < input.length; i++)
s += input[i] + " - ";
document.getElementById('res1').innerHTML = s;
var output = _floatToHalfFloat(input, 0);
s = "Value after = ";
for (i = 0; i < output.length; i++)
s += _halfFloatToFloat(output[i]) + " - ";
document.getElementById('res2').innerHTML = s;
});
</script>
</head>
<body>
<span id="res1">result</span></br>
<span id="res2">result</span></br>
</br></br></br>
<span id="sign">signs =</span></br>
<span id="exp">exponents =</span></br>
<span id="mant">mantissas =</span></br>
</body>
</html>
测试结果如下:
Value before = 2.5 - 0.25 - 0.02500000037252903 - 0.02500000037252903 - 0.0024999999441206455 - 0.0002500000118743628 - 0.00002499999936844688 - 0 -
Value after = 2.5 - 0.25 - 0.024993896484375 - 0.024993896484375 - 0.002498626708984375 - 0.0002498626708984375 - Infinity - 2 -
signs =0 - 0 - 0 - 0 - 0 - 0 - 0 - 0 -
exponents =16 - 13 - 9 - 9 - 6 - 3 - 31 - 16 -
mantissas =256 - 0 - 614 - 614 - 286 - 24 - 653 - 0 -
这说明最后2条信息不连贯。 0.000025 转换为无穷大(而不是 0?),0 本身转换为 2。这似乎不正确。当你想编码一个零 "wikipedia says" 你的尾数和你的指数应该是零。在您提供的代码中,尾数为零,但指数为 16,这导致 2 (2^(16-15)).
稍微调整一下您的函数后,似乎所有情况都被视为正常情况。这是由于您的 if 语句中存在错误。所以而不是 :
} else if(n === 0) {
input[i] = 0;
}
你可能想做类似的事情:
} else if(n[0] === 0) {
input[i] = 0;
}
n
变量的所有使用都相同。但是你仍然有下溢 problem.So 也许你可以接受:
} else if(Math.abs(n[0]) < 0.0001) {
input[i] = 0;
}
我有 Float32Array 纹理,可以通过 WebGL 正确显示。但是,当我尝试将它们转换为 Uint16Array 时,问题出现了。
这是我的转换部分。
var _floatToHalfFloat = function(input, offset) {
var largestHalf = Math.pow(2, 30-15) * (1 + 1023/1024);
var m = new ArrayBuffer(4);
var n = new Float32Array(m);
var o = new Uint32Array(m);
var f = 0.0;
for (var i = input.length - 1 - offset; i >= 0;i--) {
n[0] = input[i];
f = o[0];
// fast conversion of half
// ref : ftp://www.fox-toolkit.org/pub/fasthalffloatconversion.pdf
if (isNaN(input[i])) {
input[i] = 0x7fff;
} else if(n === Infinity || n > largestHalf) {
input[i] = 0x7c00;
} else if(n === -Infinity || n < -largestHalf) {
input[i] = 0xfc00;
} else if(n === 0) {
input[i] = 0;
} else {
input[i] = ((f>>16)&0x8000)|((((f&0x7f800000)-0x38000000)>>13)&0x7c00)|((f>>13)&0x03ff);
}
}
return new Uint16Array(input);
};
当原始图像达到黑色时,我们可以在转换后的图像中看到饱和色(全红、绿色 and/or 蓝色)。我认为该函数在 0 附近效果不佳。
我已经快速实现了wikipedia explanation of norm of the float 16 bits.
<html>
<head>
<script>
var _floatToHalfFloat = #### YOUR FUNCTION HERE CUT ####
var _halfFloatToFloat = function(hf) {
var m = new ArrayBuffer(2);
var n = new Uint16Array(m);
n[0] = hf;
var sign = n[0] & 0x8000;
var exp = (n[0] >> 10) & 0x1F;
var mant = n[0]& 0x03FF;
document.getElementById('sign').innerHTML += sign+" - ";
document.getElementById('exp').innerHTML += exp+" - ";
document.getElementById('mant').innerHTML += mant+" - ";
if (exp == 0x1F) {
return 1.0 * Math.pow(-1, sign) * Infinity;
} else if (exp == 0) {
return Math.pow(-1, sign) *
Math.pow(2, -14) *
(mant / Math.pow(2, 10));
} else {
return Math.pow(-1, sign) *
Math.pow(2, exp-15) *
(1+(mant / Math.pow(2, 10)));
}
};
document.addEventListener("DOMContentLoaded", function(event) {
var input = new Float32Array(8);
input[0] = 2.5;
input[1] = 0.25;
input[2] = 0.025;
input[3] = 0.025;
input[4] = 0.0025;
input[5] = 0.00025;
input[6] = 0.000025;
input[7] = 0.0;
var i, s = "Value before = ";
for (i = 0; i < input.length; i++)
s += input[i] + " - ";
document.getElementById('res1').innerHTML = s;
var output = _floatToHalfFloat(input, 0);
s = "Value after = ";
for (i = 0; i < output.length; i++)
s += _halfFloatToFloat(output[i]) + " - ";
document.getElementById('res2').innerHTML = s;
});
</script>
</head>
<body>
<span id="res1">result</span></br>
<span id="res2">result</span></br>
</br></br></br>
<span id="sign">signs =</span></br>
<span id="exp">exponents =</span></br>
<span id="mant">mantissas =</span></br>
</body>
</html>
测试结果如下:
Value before = 2.5 - 0.25 - 0.02500000037252903 - 0.02500000037252903 - 0.0024999999441206455 - 0.0002500000118743628 - 0.00002499999936844688 - 0 -
Value after = 2.5 - 0.25 - 0.024993896484375 - 0.024993896484375 - 0.002498626708984375 - 0.0002498626708984375 - Infinity - 2 -
signs =0 - 0 - 0 - 0 - 0 - 0 - 0 - 0 -
exponents =16 - 13 - 9 - 9 - 6 - 3 - 31 - 16 -
mantissas =256 - 0 - 614 - 614 - 286 - 24 - 653 - 0 -
这说明最后2条信息不连贯。 0.000025 转换为无穷大(而不是 0?),0 本身转换为 2。这似乎不正确。当你想编码一个零 "wikipedia says" 你的尾数和你的指数应该是零。在您提供的代码中,尾数为零,但指数为 16,这导致 2 (2^(16-15)).
稍微调整一下您的函数后,似乎所有情况都被视为正常情况。这是由于您的 if 语句中存在错误。所以而不是 :
} else if(n === 0) {
input[i] = 0;
}
你可能想做类似的事情:
} else if(n[0] === 0) {
input[i] = 0;
}
n
变量的所有使用都相同。但是你仍然有下溢 problem.So 也许你可以接受:
} else if(Math.abs(n[0]) < 0.0001) {
input[i] = 0;
}