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

Question

我正在使用纹理预处理 gpu 上的一些位置数据以进行 spring 物理模拟。在节目中，观众可以点击一个由 springs 组成的软物体，它会消失，另一个 springy 物体会出现在它的位置。为了使对象消失并出现一个新对象，我需要在运行时访问包含预处理位置的纹理，更改其中的一部分，然后将其放回 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 );

three.js v80

Answer 1

可能您在每个通道上都有 8 位的 RGBA 纹理。由于位操作在 GLSL ES 2.0 中不可用，因此您 could pack float in 4 colors and unpack value after gl.readPixels. In three.js you could find packing code in packing.glsl ShaderChunk。

要在 WebGL 1.0 中渲染为浮点纹理，您需要 WEBGL_color_buffer_float extension enabled, but according to WebGLStats 此扩展并不普遍。

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

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

How to access the float position data stored in a texture?

textures

opengl-es

three.js