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

Question

我正在使用纹理来预处理 gpu 上的一些位置数据，以进行弹簧物理模拟。在程序中，观众可以点击一个由弹簧组成的软物体，它会消失，另一个有弹性的物体会出现在它的位置。为了使对象消失并出现一个新对象，我需要在运行时访问保存预处理位置的纹理，更改其中的一部分，然后将其放回 gl 上下文中。

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

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 );

三个.js v80

Answer 1

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

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

另外，如果所有计算都在顶点着色器中完成，另一种选择是使用 WEBGL_depth_texture 扩展名将浮点数编码为深度。它可以为您提供 16 位浮点数（或更多）。