three.js Wasseroberfläche folgt mit Objekt

Question

Ich benutze "threejs-examples-webgl-gpgpu_water" und möchte ein Objekt auf der Oberfläche nach dieser Oberfläche, die mit der Vertex Verschiebung an dem Punkt, wo das Objekt ist synchronisiert ist.

Ich kann nicht herausfinden, wie man die aktuelle Höhe der Koordinaten x, y in der Wasseroberfläche bekommt. Ich denke, das Bild wird im Shader berechnet und es gibt keinen Zugang zum Zwischenwert der verformten Wasseroberfläche. Kann jemand helfen?

Answer 1

Die Höhenwerte des Wassers werden in einer Textur gespeichert, die Teil eines Renderziels ist, sodass Sie renderer.readRenderTargetPixels (renderTarget, x, y, width, height, buffer) verwenden können, um die Höhe des Wassers an einem bestimmten Punkt herauszuziehen.

Leider ist diese Textur eine Fließkomma-Textur und es gibt keine Möglichkeit, eine Fließkomma-Textur in WebGL direkt in JavaScript zu lesen.

Was Sie tun müssten, ist das Rendern dieser Fließkomma-Textur in ein RGBA 8bit-Textur/Render-Ziel mit nicht-Fließkomma-Punkt und Quantisieren in eine andere Darstellung mit einem Code, der sich auf this bezieht.

In Pseudo-Code

// at init time 

.. make rendertarget with RGBA,UNSIGNED_BYTE texture 

// at render time 

.. render `gpuCompute.getCurrentRenderTarget(heightmapVariable).texture;` 
.. into your render target using a shader that converts the 
.. floating point height values in RGBA like the example above 

// read out a pixel from your render target 
var heightData = new Uint8Array(4); 
var x = ... // compute which pixel you need to read 
var y = ... // to get the height you want 
var width = 1 
var height = 1; 
renderer.readRenderTargetPixels (renderTarget, x, y, width, height, heightData); 

.. convert heightData back into a height value.