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

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

我已经到了可以使用着色器将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一无所知）。

来源

2016-09-28 steveOw

那将是难以接受的，但是...你不能读回在OpenGL系统内存规则纹理像素，仅从帧缓冲区对象（FBO）或渲染。为了达到这个目的，你必须使用别的东西，然后使用'THREE.WebGLRenderTarget'作为渲染目标。在这种情况下，我不知道three.js中的内容会对你有帮助，但你一定需要修改'gpuCompute'代码。 – nekavally

@VallyN感谢您的解释和建议。修改'gpuCompute'已经超出了我目前的技能。 – steveOw

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

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

见WebGL Read pixels from floating point render target

来源

2016-09-29 03:12:03 gman

非常感谢指导和链接。我的WebGL是不存在的，所以在我可以进一步深入研究之前可能需要很长时间。 – steveOw

那么，如果你是新来的webgl我建议http://webglfundamentals.org – gman

这看起来像一个非常有用的资源，谢谢。 – steveOw

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

回答

相关问题