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紋理中讀取像素

回答

相關問題