Question

我正在使用纹理来预处理gpu上的一些位置数据以进行弹簧物理模拟。在程序中，观察者可以单击由弹簧组成的软对象，它将消失，并且在其位置将出现不同的弹性对象。为了使对象消失并出现一个新对象，我需要在运行时访问包含预处理位置的纹理，更改其中的一部分，并将其放回gl上下文。

现在我正在使用gl.readPixels读出位置纹理，但是我没有看到存储的位置浮点值，而是看到各种rgba值，范围从0到255。如何访问我在此缓冲区中存储的浮点值？

var pixels = new Uint8Array(width * height * 4);

var gl = renderer.context;
gl.bindFramebuffer(gl.FRAMEBUFFER, gpuCompute.getCurrentRenderTarget( positionVariable ).texture.__webglFramebuffer);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

上面的代码生成一个RGBA 0-255值的数组 - 如何在我存储在此纹理中的位置浮点数时访问这些值？

我也写了这个替代版本，但我不确定如何在gl上下文中引用纹理（**参见已加星标的评论）：

var pixels = new ArrayBuffer(width * height * 4);
var internalFormat;
var gl = renderer.context;
gl.bindTexture(gl.TEXTURE_2D, **how do I know my texture ID?** );
gl.getTexLevelParameteriv(gl.TEXTURE_2D, 0, gl.TEXTURE_COMPONENTS, internalFormat); // get internal format type of GL texture

gl.getTexImage( gl.TEXTURE_2D, 0, internalFormat, gl.UNSIGNED_BYTE, pixels );

three.js v80

Answer 1

可能你有RGBA纹理，每个通道有8位。由于GLSL ES 2.0中的位操作不可用could pack float in 4 colors并且在gl.readPixels之后解压缩值。在three.js中，您可以在packing.glsl ShaderChunk中找到打包代码。

要在WebGL 1.0中渲染浮点纹理，您需要启用WEBGL_color_buffer_float扩展名，但根据WebGLStats此扩展名并不普及。

此外，如果所有计算都在顶点着色器中完成，则另一个选项是使用WEBGL_depth_texture扩展名将浮动编码为深度。它可以给你16位浮点数（或更多）。

如何访问存储在纹理中的浮点位置数据？

1 个答案: