Flow Map generator for water effect in three.js

Questions
1

I am developing a project on three.js. I need to realize the effect of water flow; for this, I want to use Flow Map. Can you please tell me what generators are used to create such maps so that I can use them (i.e., a Flow Maps) in three.js?

Here is an example of the effect three.js - water flow map.

This example uses a flow map like this (colors indicate directions of water flow):

This is the kind of map I want to create (with my own water directions, of course).

For example, there is an addon for Blender called Flow Map Painter. It takes into account the speed of the cursor when drawing, adds the appropriate color and immediately shows the result - how the water will flow. This is the convenience of such a generator, as opposed to just drawing in Photoshop or wherever. But where to draw such a map for use in three.js?

It’s hard to draw such a thing in Photoshop, since you have to mix colors properly to indicate speed and direction.

I’ve duplicated this question on stackoverflow:

2

Is possible to export the result as an image file? If it is possible, then make your waterflow map in Blender.

3

It seems to me that the OP is talking about creating a map on the fly, just like in this plugin, with the difference that via Three.js.

4

https://teckartist.com/?page_id=107

5

@PavelBoytchev, You can export it, but it is inconvenient to use this addon itself. And the result of drawing is shown in real time, but this is implemented by a blender, and I need to see this result in three.js .

But in general, thank you all for your attention to my question, I decided to use the Flow Map Painter v0.9.2 editor (the one that @Chaser_Code suggested). It was quite suitable for creating these maps. But it is a pity that its author abandoned its development.

6

If you use the custom flow map in Three.js it should show the water flow according to this map, shouldn’t it?

7

I think some one can add stuff for painting flow map into three.js scene. Its not hard is like liquid examples where drawing vector of normal, but we must draw it into 2d canvas to save it after all.

1 Like
8

I adapted the sample and made a simple flowmap painter:

https://manthrax.github.io/flowmap-paint/

edit: did pretty much exactly what you described, @Chaser_Code :slight_smile:

edit2:
The source for anyone interested… It could probably be done way more efficiently with a gradient + vector color, rather than rebuilding the brush each frame… but it seems to sorta work.

7 Likes
9

I thought each engine interprets this map differently, and three.js I thought would be different from blender in this.

For now, I’m adapting this example webgl_water_flowmap, in three.js, for my map.
I’m just starting to figure out water animation in three.js and I’m doing it with this example.

10

Thank you very much. In the addon, the speed of the flow is indicated with the cursor movement speed. And the base picture does not have flow over the whole area. In your example, I understand, the speed is always the same, although if you spend several times in the same place, the speed will increase, but to a small limit.
I wanted to use this map to indicate waterfalls as well, as the addon allows you to do so.

11

If anything, I apologize for my English.

12

This is quite possible.