JavaScript 为 WebGL readPixels 转换为 Float32Array 并返回
JavaScript conversion to Float32Array and back for 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);
...这就是我从 WebGLRenderingContext.readPixels()
取回 id
的方式:
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]
我正在将 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);
...这就是我从 WebGLRenderingContext.readPixels()
取回 id
的方式:
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]