javascript - JavaScript转换为Float32Array并返回WebGL readPixels

我将id（这是一个24位范围内的值）存储到Float32Array(3)中，以便以后在WebGL中进行检索：

var r = 0,
    g = 0,
    b = id;
if (b >= 65536) {
    r = ~~(b / 65536);
    b -= r * 65536;
}
if (b >= 256) {
    g = ~~(b / 256);
    b -= g * 256;
}
var fa = new Float32Array([r/255, g/255, b/255]);

为了完整起见，这就是我使用该值的方式：

gl.uniform3fv(uniforms['u_id'], fa);

...这就是我从id取回WebGLRenderingContext.readPixels()的方式：

var result = new Uint8Array(4);
gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, result);
var id = result[0] << 16 | result[1] << 8 | result[2];

将该值拆分为我的Float32Array的正确方法是什么？我坚信可以以一种更高效，更优雅的方式来完成此类任务（实际上，我正在做的事情正在起作用，但确实伤害了我的眼睛）。

最佳答案

id具有这样的形式：

0000 0000 rrrr rrrr gggg gggg bbbb bbbb

可以通过将一部分（r，g或b）放入最低字节并将其余部分屏蔽掉来提取该部分。有时这些步骤之一是不必要的。所以：

b = id & 255  // b is already in the low byte, so no shift
g = (id >> 8) & 255
r = id >> 16  // no mask because there is nothing "above" r

可以将其与除法运算放在一起，并放入数组中：

[(id >> 16) / 255, ((id >> 8) & 255) / 255, (id & 255) / 255]

关于javascript - JavaScript转换为Float32Array并返回WebGL readPixels，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47216851/