THREE.js 从 GPUComputationRenderer 纹理读取像素 [英] THREE.js read pixels from GPUComputationRenderer texture
问题描述
我一直在这个three.js示例的修改版本上使用GPUComputationRenderer，它修改了使用 GPU 着色器保存、读取和操作 boid 位置和速度数据的交互 boid 的速度.
I have been playing with GPUComputationRenderer on a modified version of this three.js example which modifies the velocity of interacting boids using GPU shaders to hold, read and manipulate boid position and velocity data.
我已经到了可以使用着色器将 GPU 计算数据(预测碰撞时间)放入纹理缓冲区的阶段.但现在我想读取主要 javascript 动画脚本中的一些纹理数据(以找到最早的碰撞).
I have got to a stage where I can put GPU computed data (predicted collision times) into the texture buffer using the shader. But now I want to read some of that texture data inside the main javascript animation script (to find the earliest collision).
这里是render函数中的相关代码(在每次动画pass时调用)
Here is the relevant code in the render function (which is called on each animation pass)
//... 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 不存在.
As shown in the code I was "wanting" the gpuCompute renderer object to provide functions such as .getContext() or readRenderTargetPixels() but they do not exist for gpuCompute.
然后我尝试添加以下代码:-
Then I tried adding the following code:-
//... 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 仍然完全是零，而不是所需的位置坐标值.
This executes OK but pixelBuffer remains entirely full of zeroes instead of the desired position coordinate values.
请有人建议我如何将纹理数据读入像素缓冲区吗?(最好在 THREE.js/plain javascript 中，因为我对 WebGL 一无所知).
Please can anybody suggest how I might read the texture data into a pixel buffer? (preferably in THREE.js/plain javascript because I am ignorant of WebGL).
推荐答案
此答案已过时.见底部链接
简短的回答是这并不容易.在 WebGL 1.0 中，没有简单的方法可以从 GPUComputationRenderer 使用的浮点纹理中读取像素.
The short answer is it won't be easy. In WebGL 1.0 there is no easy way to read pixels from floating point textures which is what GPUComputationRenderer uses.
如果您真的想读回数据，您需要将 GPUComputationRenderer 浮点纹理渲染为 8 位 RGBA 纹理，并进行某种从 32 位浮点到 8 位纹理的编码.然后，您可以在 JavaScript 中读回它并查看值.
If you really want to read back the data you'll need to render the GPUComputationRenderer floating point texture into an 8bit RGBA texture doing some kind of encoding from 32bit floats to 8bit textures. You can then read that back in JavaScript and look at the values.
这篇关于THREE.js 从 GPUComputationRenderer 纹理读取像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
