THREE.js从GPUComputationRenderer纹理中读取像素

Question

我一直在使用GPUComputationRenderer修改版本this three.js example，它修改了使用GPU着色器保存，读取和操作boid位置和速度数据的交互boids的速度。

我已经到了可以使用着色器将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); 

此执行正常，但仍然pixelBuffer完全充满零，而不是期望的位置坐标值。

---

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

Answer 1

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

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

见WebGL Read pixels from floating point render target