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.

three.js水面跟随物体

1 个答案: