Generating a Flow Map from Blender to React Three Fiber

Here is alittle sandbox with the final code in:

First off your thinking how can an image store vectors in?

Well this image basically highlights which colors represent which vectors:

So for example if we have:

Copy 
1const flow = vec2(1.0, 1.0)

We can access this is two ways which highlights the two things this vec2 represents:

Copy 
1flow.rg
2
3or/
4
5flow.xy

All the data for the flow is stored in the rg or xy components of this vector.

Flow Map in Blender

I see you thinking, jesus christ… I have to some home make this by hand!

No no no…

Blender to the rescue 😎

The Paint: Flow Map Painter addon is exactly what we need.

Go to preferences in blender and install the downloaded package from above and tick the box in the search area.

Once installed you can check the texture paint tab, press n and checkout the bottom of the tool tab and you should see this:

Attemp One:

So my initial thoughts in createing a river type plane is:

1. shift + a: create bezier curve

   

2. shift + a: create plane

   

3. scale Plane

   

4. use an array modifier with fixed count

5. use a curve modified to link the planes to the curve

6. convert planes to mesh and merge

7. go into uv editing, press tab to enter edit mode, press a to select all verticies and unwrap

   

8. press n and go to flow map painter

9. start painting in UV space (making sure you set the brush settings to the right settings for your model)

10. export texture and gltf file

11. consume in code in R3F (Going to go through)

However after all this there are horrendous seams and the flows were completely fucked.

Back to the drawing board.

I know the code works as i produced this on a simple square gltf model:

So I know for a fact when dealing with curves you have to be super careful when exporting to gltf files as it can seriously affect things, giving unexpected results.

The next attempt I thought instead of curve/array modifies with curves and planes in blender, then merging. I would just use one plane and cut this up into a river like shape, and tbh this isnt too much effort.

Some googleing later and you can project curves onto meshes in blender and cut into multiple meshes.

Attempt 2:

1. create plane
2. create simple bezier curve and scale to either side of the plane.
3. select both plane and curve and select knife project.
   
4. seperate by loose parts
5. delete un wanted edges
   
6. paint flow map
7. use in code

And the final result is this:

This is the website I got the cycling through textures code. Inspect the code in the sources tab.

The swell/waves in my codesandbox came out of this website.

My waves are shit as i Didnt really split the mesh into loads of verticies.

Fianl Thoughts:

This is a quick tour of how to get a flow map from blender into a react three fiber setting.

Theres loads you could do with this, find a better implementation of waves, change the color of the mesh the higher the Y value to simulate foam. You could do water falls and all sorts of other stuff.

You could even use this for clouds with some serious modifications!

Hopefully you found this useful and see you next time 🙂