FDNavigate back to the homepage

Generating a Flow Map from Blender to React Three Fiber

December 5th, 2021 · 2 min read

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:

Example of Flow Map Directions.

So for example if we have:

1const flow = vec2(1.0, 1.0)

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


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.

Blender Preferences, The Paint: Flow Map Painter

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

Blender Prefertexture paint flow tool

Attemp One:

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

  1. shift + a: create bezier curve

    Blender creating curve

  2. shift + a: create plane

    Blender creating plane

  3. scale Plane

    Blender 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

    Blender uv 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.

Foo bar'ed 1st attempt flow map

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.
    Knife project blender
  4. seperate by loose parts
  5. delete un wanted edges
    Knife project blender end shape
  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 🙂

More articles from theFrontDev

Instanced Grass onto a gltf Model at Certain Elevation

Instancing a blade of grass 30,000 times onto a gltf model and wind movement (modified from an existing jsfiddle to work with gltf to jsx package).

November 28th, 2021 · 1 min read

Ray Marching Over a React Three Fiber (R3F) Scene

Raymarching on top of a three.js or react-three-fiber scene, leading to more advanced effects.

November 14th, 2021 · 2 min read
© 2021–2024 theFrontDev
Link to $https://twitter.com/TheFrontDevLink to $https://github.com/Richard-ThompsonLink to $https://www.linkedin.com/in/richard-thompson-248ba3111/