Question

我一直在使用GPUComputationRenderer修改版this three.js example，它使用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不存在。< / p>

编辑：

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

//... 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 Read pixels from floating point render target

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

1 个答案: