Manipulate water forming it with landscape?

Questions
, , , ,
1

So I was wondering if there is a small example or someone could possibly make one of how to add / delete / move vertices on a water plane so I can form water plane to exact shape of trench I carved in landscape to place the water? If I didn’t explain well enough, please do let me know & I will do my best to explain more in-depth. Here are 2 examples : https://jsfiddle.net/prisoner849/snyqgmke/ & https://youtu.be/ao_PHrIpoEo?t=161

2

I can’t make you an example now, but I can give you a few pointers in the right directions:

  1. Use pixel raycasting on the terrain to get world positions of points. Examples (with source), THREE.Raycaster
  2. Populate a THREE.BufferGeometry with the points as you work.
  3. Visualize the BufferGeometry using THREE.Points.
  4. Use pixel raycasting on the points to be able to pick them, and use this to create triangles that are represented as triples of point indices in BufferGeometry.index.
  5. Make a THREE.Mesh with your geometry and a suitable material. You may have to move the mesh slightly underground so that the edges go below the terrain surface. This offset can be set with mesh.position.
  6. Render!

The procedure of drawing a river like this may be cumbersome. There are many other possible solutions that make the work faster, such as:

  1. Physical simulation (much harder to implement, and may require a lot of computing power).
  2. Very approximate physical simulation or analysis of the terrain, e.g. by dropping virtual particles (initially using raycasting from OrthographicCamera) that follow the landscape gradient and have some 2D momentum, and render them with additive blending and frame feedback to get a texture that holds information about the water “density” in one channel and water velocity in two other channels. Then analyse this texture to generate a geometry, or use it to blend in a water effect continuously in your terrain shader, after first using it to smooth out the terrain a bit where the water density is largest.
  3. Render a depth texture from above using an OrthographicCamera and use it to find depth positions of a fat line drawn from the same view. Then use a custom shader on the generated geometry.

I haven’t watched the video yet, though. So maybe I have missed something important… This is all original “research” from the top of my head.

3

Thank you @EliasHasle! I was actually thinking it would be better to modify the above fiddle example to work with a water plane instead of random generated vertices.

4

Yes, maybe you can adapt it, or use ideas from it. But rebuilding the entire geometry in every frame will not scale well. It should be possible to borrow code from the spline geometry class that is used, so that it reuses the same geometry and only updates the affected spline segments. And it should also be possible to extract the code for making only the end cap of the ExtrudedGeometry. And then project all vertices down on the terrain by querying and interpolating between the nearest terrain elevations (or, less efficient, cast one ray down from each vertex).

(@prisoner849)

5

No, I don’t want to rebuild the landscape geometry, I want to reposition & add / delete vertices of the water plane itself. I apologize for not explaining well enough. :confused:

That video shows well what I mean.

6

Only one of my approaches above would involve altering the landscape.

Anyway, if you would scrap some of my suggestions above:

  1. Make a THREE.PlaneBufferGeometry with n length segments and 2 width segments (or the other way around, as I do not remember the order of dimensions), where n is relatively coarse.
  2. Make a way to select desired end points and standard width of the river, to get it positioned approximately in the scene.
  3. Render the geometry as THREE.Points.
  4. Implement drag&drop (using raycasting etc.) on the points.
  5. Use the vertex index modulo 3 to decide drag&drop behavior. Edge points are moved independently, and center points move also the corresponding edge points.
  6. Make a much denser (in river length direction) PlaneBufferGeometry for the water mesh.
  7. Calculate edge positions in the new geometry using cubic splines with the edge points of the first geometry as control points, and calculate center curve positions as averages of corresponding edge curve positions. Use cubic splines in 2D, and project down to terrain afterwards, using interpolation between nearest vertices or lookup in an orthographic depth texture.
  8. Make a mesh, offset it very slightly to underground and render!