three.js水面跟随物体

Question

我使用的是"threejs-examples-webgl-gpgpu_water"，并且希望在物体表面上放置一个物体，这意味着物体与顶点位移同步。

我无法找到如何获取水面坐标x，y的当前高度。我猜想图像是在着色器中计算的，并且没有访问变形水面的中间值。有人可以帮忙吗？

Answer 1

水的高度值存储在作为渲染目标的一部分的纹理中，因此您可以使用renderer.readRenderTargetPixels (renderTarget, x, y, width, height, buffer)来拉出特定点处的水的高度。

不幸的是，纹理是一个浮点纹理，没有办法直接读取WebGL中的浮点纹理到JavaScript中。

您需要做的是将该浮点纹理渲染为非浮点RGBA 8位纹理/ rendertarget，同时使用与this相关的一些代码将其量化为其他表示。

在伪代码

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