Experimenting with the GPUComputationRenderer on a customized version of this three.js example, I have been working on adjusting boid interactions using GPU shaders to handle, retrieve, and manipulate boid position and velocity data.
I have reached a point where I can input GPU-computed data (such as predicted collision times) into the texture buffer using the shader. Now, my goal is to access some of that texture data within the main JavaScript animation script in order to identify the earliest collision.
Below is the relevant code snippet from the render function (which gets called during each animation loop):
//... Original THREE.js example GPU calculations
gpuCompute.compute(); //... gpuCompute represents the GPU computation renderer.
birdUniforms.texturePosition.value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
birdUniforms.textureVelocity.value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture;
var xTexture = birdUniforms.texturePosition.value; //... My custom variable.
//... Source: http://zhangwenli.com/blog/2015/06/20/read-from-shader-texture-with-threejs/
var pixelBuffer = new Uint8Array( WIDTH * WIDTH * 4); //... Fine for me.
//... Reference: http://stackoverflow.com/questions/13475209/three-js-get-data-from-three-webglrendertarget
gpuCompute.readRenderTargetPixels( xTexture, 0, 0, WIDTH, WIDTH, pixelBuffer ); //... Issue here!
In the provided code, I was hoping for the gpuCompute renderer object to offer functions like .getContext() or readRenderTargetPixels(), but unfortunately, they are not available for gpuCompute.
EDIT:
My troubleshooting involved including the following code snippet:
//... Incorporating WebGLRenderer code from THREE.js build
myWebglRenderer = new THREE.WebGLRenderer();
var myRenderTarget = gpuCompute.getCurrentRenderTarget(positionVariable);
myWebglRenderer.readRenderTargetPixels(
myRenderTarget, 0, 0, WIDTH, WIDTH, pixelBuffer);
This runs smoothly, however, the pixelBuffer still contains all zeros instead of the intended position coordinate values.
Could someone kindly suggest a method for reading the texture data into a pixel buffer? Ideally, utilizing THREE.js/plain JavaScript since I lack familiarity with WebGL technology.