THREE.js GPUComputationRendererテクスチャからピクセルを読み込みます。

Question

GPUシェイダーを使用して相互作用するボイドの速度を変更して、ボイドの位置と速度のデータを保持、読み込み、操作するための修正バージョンthis three.js exampleでGPUComputationRendererを使用しています。

シェーダを使用して、GPUで計算されたデータ（予想される衝突時間）をテクスチャバッファに格納できる段階に達しました。しかし今、私はメインのJavaScriptスクリプト内でそのテクスチャデータの一部を読みたいと思います（最も早い衝突を見つけるために）。 Iは、.getContext()又は機能を提供するために、gpuComputeレンダラーオブジェクトを「欠けた」コードに示されているようにここ

は（各アニメーションパス上で呼び出された）レンダリング機能

//... 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! 

に関連するコードでありますreadRenderTargetPixels()ですが、gpuComputeでは存在しません。

---

EDIT：

は、その後、私は、次のコードを追加しようとした： -

//... 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はゼロの完全完全なままの代わりに所望の位置座標値。

---

テクスチャデータをどのようにピクセルバッファに読み込むかをお聞かせください。 （私はWebGLを知らないので、THREE.js /プレーンなjavascriptが望ましい）。

Answer 1

短い答えはです。簡単ではありません WebGL 1.0では、GPUComputationRendererが使用する浮動小数点テクスチャからピクセルを読み込む簡単な方法はありません。

実際にデータを読み込みたい場合は、32bit浮動小数点から8bitテクスチャに何らかの種類のエンコードを行う8bit RGBAテクスチャにGPUComputationRenderer浮動小数点テクスチャをレンダリングする必要があります。それをJavaScriptで読み込んで値を見ることができます。

は受け入れることは難しいでしょうWebGL Read pixels from floating point render target