如何從三個js中的計算紋理中獲取像素？

Question

我需要計算一個多維數據數組，我認為 GPUComputationRenderer 是一個很好的解決方案。

我從一個示例項目開始，並被困在這個：

var gpuCompute = new GPUComputationRenderer( 100, 100, this.renderer );

var dtPosition = gpuCompute.createTexture();
var dtVelocity = gpuCompute.createTexture();

var velocityVariable = gpuCompute.addVariable( 
   "textureVelocity", 
   this.compFragmentShader(), 
   dtVelocity 
);
var positionVariable = gpuCompute.addVariable( 
   "texturePosition", 
   this.compVertexShader(),   
   dtPosition 
);

gpuCompute.setVariableDependencies( 
   velocityVariable, 
   [ positionVariable, velocityVariable ] 
);
gpuCompute.setVariableDependencies( 
   positionVariable, 
   [ positionVariable, velocityVariable ] 
);

gpuCompute.init();

gpuCompute.compute();

//TODO: Get pixels from resulting texture

我在 three.js 上閱讀了一些示例：

• https://threejs.org/examples/?q=water#webgl_gpgpu_water
• https://threejs.org/examples/?q=gp#webgl_gpgpu_birds
• https://github.com/mrdoob/three.js/blob/master/examples/jsm/misc/GPUComputationRenderer.js

另外，我已經閱讀了這個堆棧溢出THREE.js 從 GPUComputationRenderer 紋理讀取像素，但沒有解決方案，只有指向 webGL 的鏈接。

我錯過了什么嗎？ 請提供一個例子或描述我做錯了什么

Answer 1

你不必取回它。

WebGLRenderer.readRenderTargetPixels 不起作用，因為 GPUComputationRenderer 不會呈現給 WebGLRenderer 本身。 它使用 WebGLRenderTargets（類似於屏幕外的“不可見”畫布）。

您指向的堆棧溢出線程說明了一切； 這是不可能的。 除非您進行一些奇怪的數學運算並將浮動紋理轉換/打包為 integer 紋理。因此，一旦將數據傳輸到 gpu/glsl 端，幾乎不可能將其返回到 cpu/javascript 端。

就像我說的，你不必把它拿回來。 我相信我在您的代碼中看到您熟悉頂點/片段着色器？ 我以前用點雲做過這個。

您可以將 dtPositions（或 dtPositions.texture）作為制服傳遞到“顯示”網格上的着色器材質中，並使用着色器將 position 移出紋理並將頂點移動到該 position。