JavaScript转换为Float32Array并返回WebGL readPixels

时间:2017-11-10 06:28:57

标签: javascript bit-manipulation bit-shift typed-arrays

我将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的正确方法是什么?我坚信这样的任务可以以更有效和更优雅的方式完成(实际上,我正在做的是工作,但真的伤害了我的眼睛)。

1 个答案:

答案 0 :(得分:1)

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]