three.js поверхность воды следующий с объектом

Question

Я использую "threejs-examples-webgl-gpgpu_water" и хотел бы поместить объект на поверхность после этой поверхности, что означает синхронизацию с перемещением вершин в точке, где находится объект.

Я не могу узнать, как получить текущую высоту координат x, y на поверхности воды. Я думаю, что изображение вычисляется в шейдере, и нет доступа к промежуточному значению деформированной поверхности воды. Может кто-нибудь помочь?

Answer 1

Значения высоты воды хранятся в текстуре, которая является частью цели рендеринга, поэтому вы можете использовать renderer.readRenderTargetPixels (renderTarget, x, y, width, height, buffer), чтобы вытащить высоту воды в определенной точке.

К сожалению, эта текстура является текстурой с плавающей точкой, и нет возможности напрямую читать текстуру с плавающей точкой в ​​WebGL в JavaScript.

Что нужно сделать, это визуализировать эту текстуру с плавающей точкой в ​​текстуре RGBA 8 бит с неплавающей точкой, а затем квантовать ее на другое представление, используя некоторый код, связанный с 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.