Author Topic: TUTORIAL - Creating FlowMaps  (Read 14402 times)

Chingwa

  • Administrator
  • Hero Member
  • *****
  • Posts: 1596
    • View Profile
    • Tanuki Digital
TUTORIAL - Creating FlowMaps
« on: October 09, 2012, 10:52:31 PM »
This will be a quick tutorial on how to create a flowmap for use with the wave_overlay component in Suimono.  In this tutorial I'm using Adobe Photoshop, and in fact for other Photoshop users I'm including an action that will greatly simplify this step.  However the general basics are the same with any image editing software.

DOWNLOAD PHOTOSHOP ACTION
DOWNLOAD EXAMPLE FLOWMAP (psd)

-------
CREATING FLOWMAP TEXTURES for SUIMONO



Step 1.  This is my basic example scene.  I've already imported the Suimono water system and scaled and positioned the water plane exactly where I want it to be.  the first step is going to be to orient the entire scene from a top down perspective and to make sure that all sides of the water plane are in my view.  I've also edited the water shader to be nice and blue to make the water stand out from the terrain.



Now I'm going to take a screenshot of the screen to use as the basis of my flowap texture.  For mac users you can press command-3, for windows users you can simply press the PrtScr button.



Step 2.  I'm going to bring my screenshot into Photoshop and crop in so that I have a square image that is just the size of the water plane in my image.  Now with the magic wand tool in Photoshop I'm going to select the blue of my water in order to isolate it from the terrain.  If it doesn't select everything in one click, hold down shift and keep clicking different parts of the water until everything is selected.  You can also change the Tolerance attribute on the top tool window to make this selection easier.




Step 3. PHOTOSHOP USERS ONLY If you are using Photoshop, then you're in luck, the Photoshop Action mentioned above will automate the rest of the steps for you.

While you still have your selection from step 2 active, open up the Actions Palette (WINDOW/ACTIONS... ) then select the Suimono_AutoWaveMap action and press play.  The action will run and you will end up with a strangely colored image.  Simply save this image into your Project folder and jump down to Step 5.




Step 4.  For those not using the included Photoshop Action you'll have to setup the rest of the image manually.  I'll describe how to do this process in Photoshop, and you can use it as a general guide for other image editing programs.

4a.  With the selection from step 3 still active we first want to reverse it by going to Select / Inverse. Now we want to expand the selection a little bit...  in photoshop you do this by going to Select / Modify / Expand... and giving it a value of 4 pixels or so.




4b. now we want to create a new layer above our base layer and fill our selection on this layer with pure red (rgb 255,0,0).  Before we drop the selection, we want to do this step again, create another new layer above our red filled layer and now fill our selection on this layer with pure yellow (rgb 255,255,0).




4c. Now we can drop our selection... Select / Deselect...

4d. Now that we have our layers set up we want to rotate our image 180 degrees.  This is because default orientation in the Unity editor where we grabbed our image from is actually backwards from the texture UVs.  In photoshop go to Image /Image Rotation / 180...

4d. Next we want to blur and offset each of these color layers from step 5b.  Select the red layer and go to Filter / Blue / Gaussian Blur and give it a value of 5.0.  Do the exact same thing for the yellow layer.  Now select the move tool from the Tools palette and offset the red layer a few pixels to the left, and offset the yellow layer a few pixels to the right.




4e. Finally we want to fill the original underlying layer with 100% black.  Now save the image into your project folder.





Step 5.  Now back in unity we want to drag our new texture into the Flow Map slot in the wave_overlay object.  hopefully you should now see something similar to this.




Step 6. This is an ok result but by tweaking a few settings we can make it look pretty great.  First I'm going to list my preferred Texture Import settings....



Wrap Mode - Because our flowmap is positioned across our entire surface we do not need it to repeat.  Set this to Clamp.

Filter Mode - Point mode will give bad pixel effects on our waves.  We want to set this to either Bilinear or Trilinear.  There isn't much difference between these two as far as our flowmap is concerned.

Max Size - Because of the filter mode above, we can actually get away with using a smaller texture size than our original image.  Set this as low as you like, but it will start affecting the quality of the waves if you go to low.  I set my flowmaps to be about 256.

Format - We want to make sure that we are not compressing the image, as that leaves us with some block pixel effects in our waves.  Set the Texture Format to be Truecolor.

Make sure to hit the apply button after making these changes!

Now in the shader you can tweak color and alpha settings, texture UV tiling and the FlowMap Scale attribute until you get a result that you're happy with!

Now you should be left with something pretty closely approximating "waves".




Now that you have the basic flowmap setup, you can go back and tweak it by over-painting the places you don't want to have waves with black. 
-------

That wraps up this basic tutorial.  I hope it was easy to follow and gives you a jump start on flowmaps for your own projects.  If you have any questions feel free to start a new thread below and I'll answer as soon as I can.




« Last Edit: May 23, 2013, 08:20:58 PM by Chingwa »

RonHiler

  • Newbie
  • *
  • Posts: 5
    • View Profile
Re: TUTORIAL - Creating FlowMaps
« Reply #1 on: May 22, 2013, 03:32:20 PM »
Hey Chingwa,

Great tutorial, it works for all my odd shaped bodies of water :)

I think, though, you are missing a step somewhere between 2 and 4. After selecting all the water, you need to invert the selection (Select->Inverse) in order to get the proper selection that you show in step 4 (prior to expanding the selection).

I'm not sure if you need to put this before or after your step 3 (your script may do that already, or it may not, I didn't try it).

Otherwise it works awesomely! Thanks for the instructions.

Chingwa

  • Administrator
  • Hero Member
  • *****
  • Posts: 1596
    • View Profile
    • Tanuki Digital
Re: TUTORIAL - Creating FlowMaps
« Reply #2 on: May 23, 2013, 08:23:12 PM »
Thanks Ron.  You're right, I forgot to mention reversing the selection... the Photoshop Action already includes this step, but for those who aren't using the action they will need to do this before expanding the selection.  I've updated Step 4a in the tutorial to reflect this, THANKS!

DonGray

  • Newbie
  • *
  • Posts: 2
    • View Profile
Re: TUTORIAL - Creating FlowMaps
« Reply #3 on: August 06, 2014, 11:30:08 PM »
Was just going to ask about this when I found this tutorial.
The Photoshop example page is 404-not found.
http://www.tanukidigital.com/suimono/misc_files/suimono_flowmap_example.zip
The PS action downloaded correctly.

Chingwa

  • Administrator
  • Hero Member
  • *****
  • Posts: 1596
    • View Profile
    • Tanuki Digital
Re: TUTORIAL - Creating FlowMaps
« Reply #4 on: August 07, 2014, 07:09:43 AM »
Thanks for letting me know Don, I just fixed the link!

monks

  • Jr. Member
  • **
  • Posts: 62
    • View Profile
Re: TUTORIAL - Creating FlowMaps
« Reply #5 on: October 28, 2014, 07:36:42 AM »
Hi, this is really helpful. The Action worked great. I'm using the latest beta for 2.0. What's the simplest shader to use with the flowmap to get a quick rough demo?
 I'm trying ot get this to work with a suimono surface and custom mesh. I have the surface in place ok I think on the mesh. I've chosen mat_waves as the material in the Siomono module but there is no water_wave_overlay shader in Suimono 2.0 folder. What do we use now?

 
 
monks
« Last Edit: October 28, 2014, 08:53:35 AM by monks »

Chingwa

  • Administrator
  • Hero Member
  • *****
  • Posts: 1596
    • View Profile
    • Tanuki Digital
Re: TUTORIAL - Creating FlowMaps
« Reply #6 on: October 30, 2014, 09:14:59 AM »
RIGHT....  this wave/flowmap setup, as you've noticed, is for Suimono version 1.x only.  There is an auto shoremap function in version 2.0 which attempts to do all this automatically based on the depth of your scene....

check out the "Suimono_shorelineObject" game object that lives under your Suimono_Surface object. this controls the map generation on the object when you press start (it doesn't work in editor mode).  I recommend playing the scene first and seeing how it generates.  To get waves to show up make sure you adjust the following settings...

under "Foam and Edge" turn the "shallow foam" setting all the way up.
under "3d wave settings" turn the "shallow wave speed" all the way up and then adjust the "shallow wave scale" setting until you get a wave pattern you like.

At this point you can save a new preset so you don't have to dial in these settings all the time.  You can further change the "wave range" on the shorelineObject in order to adjust the depth sensitivity of the shoreline map... this will in affect bring the generated waves closer or further away from the shoreline.  When you adjust this you need to press the "generate map" toggle to recalculate.

There is also a resolution setting on this object, and also a "auto generate fps" setting... when this is more than 0 it will constantly recalculate the generated map at the FPS you set.  It works, but it will slow your scene down.

This probably seems like a lot of settings, but I wanted to make sure things were flexible enough for a variety of different scenes and setups.  Once you play with it a bit I'm sure It'll make a lot more sense than reading this post :D