THREE.js 从 GPUComputationRenderer 纹理读取像素

Question

我一直在玩 GPUComputationRenderer 在这个 Three.js 示例的修改版本上，该示例使用 GPU 着色器来修改交互 boid 的速度，以保存、读取和操作 boid 位置和速度数据。

我已经到了可以使用着色器将 GPU 计算数据（预测碰撞时间）放入纹理缓冲区的阶段。但是现在我想在主要的 javascript 动画脚本中读取一些纹理数据（以找到最早的碰撞）。

这是渲染函数中的相关代码（在每个动画传递中调用）

//... GPU calculations as per original THREE.js example
gpuCompute.compute();   //... gpuCompute is the gpu computation renderer.           
birdUniforms.texturePosition.value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
birdUniforms.textureVelocity.value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture;

var xTexture = birdUniforms.texturePosition.value;//... my variable, OK.

//... From http://zhangwenli.com/blog/2015/06/20/read-from-shader-texture-with-threejs/
//... but note that this reads from the main THREE.js renderer NOT from the gpuCompute renderer.
//var pixelBuffer = new Uint8Array(canvas.width * canvas.height * 4);               
//var gl = renderer.getContext();
//gl.readPixels(0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, pixelBuffer);

var pixelBuffer = new Uint8Array( WIDTH * WIDTH * 4);   //... OK.

//var gl = gpuCompute.getContext();//... no getContext function!!!

//... from Nick Whaley here: http://stackoverflow.com/questions/13475209/three-js-get-data-from-three-webglrendertarget
//WebGLRenderer.readRenderTargetPixels ( renderTarget, x, y, width, height, buffer )

gpuCompute.readRenderTargetPixels ( xTexture, 0, 0, WIDTH, WIDTH, pixelBuffer ); //... readRenderTargetPixels is not a function!

如代码所示，我“希望”gpuCompute渲染器对象提供诸如.getContext()或之类的功能，readRenderTargetPixels()但它们不存在于gpuCompute.

---

编辑：

然后我尝试添加以下代码：-

//... the WebGLRenderer code is included in THREE.js build
myWebglRenderer = new THREE.WebGLRenderer();                            
var myRenderTarget = gpuCompute.getCurrentRenderTarget( positionVariable );             
myWebglRenderer.readRenderTargetPixels ( 
        myRenderTarget,  0, 0, WIDTH, WIDTH, pixelBuffer );

这会执行 OK，但 pixelBuffer 仍然完全是零，而不是所需的位置坐标值。

---

请有人建议我如何将纹理数据读入像素缓冲区？（最好在 THREE.js/plain javascript 中，因为我对 WebGL 一无所知）。

Answer 1

这个答案已经过时了。见底部链接

简短的回答是这并不容易。在 WebGL 1.0 中，没有一种简单的方法可以从浮点纹理中读取像素，而这正是GPUComputationRenderer使用的方法。

如果您真的想读回数据，您需要将 GPUComputationRenderer 浮点纹理渲染为 8 位 RGBA 纹理，并进行某种从 32 位浮点到 8 位纹理的编码。然后您可以在 JavaScript 中读回它并查看值。

请参阅WebGL 从浮点渲染目标读取像素