javascript - THREE.js 从 GPUComputationRenderer 纹理读取像素

Question

我一直在 this three.js example 的修改版本上玩 GPUComputationRenderer|它使用 GPU 着色器修改交互机器人的速度，以保存、读取和操作机器人的位置和速度数据。

我已经到了可以使用着色器将 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 位 float 到 8 位纹理的编码。然后，您可以用 JavaScript 读回它并查看值。

参见 WebGL Read pixels from floating point render target