How to make convincing top down 2D water / beaches

Comments

• Denzil

  8:15am 25 Jun 2018

  I've started working on the water. I've seen switched to a tile-based set-up instead of using meshes. Makes procedural gen a bit simpler for me. Still need to handle the edges of the water but I think I have an idea for that now. So far pretty happy with the progress of the water but there's still a few tricks I can try.
  
  If anyone has any shader suggestions here I'm all ears.
  
  

  

  

  grave-waves.gif

  678 x 455 - 757K

  Thanked by 3critic konman Jurgen
• roguecode

  11:18pm 25 Jun 2018

  That looks really cool! I think you could do some work on the colors, maybe changing color the closer it is to land.

  Thanked by 1Denzil
• Denzil

  7:46am 27 Jun 2018

  @roguecode Thanks! Trying that now, kinda struggling to get the waves to go towards land. I suppose I could just also add a static colour gradient based on "depth". I guess this is what you meant, but I also want to add some shading to the waves, but then the direction of the waves become extra important. It looks pretty stupid if the waves travel from the shore outwards into the ocean. I think I'll part this for now, but I'll definitely revisit your idea in the future.
  
  
  
  The last change I've added was to add some edges to the water that overlap onto the sand. Not 100% happy with it. Not sure if it looks better with or without it. Thinking of trying some different sprites that might look better than what I have now.

  

  

  wave3.gif

  792 x 509 - 7M
• John

  10:08am 7 Jul 2018 edited 10:41am 8 Jul 2018

  I've been working on a similar problem, using GLSL shaders.
  I came up with a solution that will auto-create ocean based on terrain colors.
  
  The beach and waves are calculated using statistics function that generates a bell curve:
  

  float NORMDIST(float x, float mean, float standard_dev)
  {
  	float fact = standard_dev * sqrt(2.0 * 3.1415);
  	float expo = (x - mean) * (x - mean) / (2.0 * standard_dev * standard_dev);	
  	return exp(-expo) / fact;
  }

  
  
  where x = the 'blueness' of the texture
  
  in GLSL:
  
  

  //satimage is the satellite image
  vec3 originalcolor = texture(satimage, fs_in.TexCoords * TexCoordScale).rgb;
  
  //oceanmaterial is a texture of ocean waves [img]http://ak3.picdn.net/shutterstock/videos/6235253/thumb/1.jpg?i10c=img.resize(height:32)[/img]
  //sample at different resolutions for mixing
  vec3 color2 = texture(oceanmaterial, fs_in.TexCoords * Tex2CoordScale * 50.15).rgb;
  vec3 color3 = texture(oceanmaterial, fs_in.TexCoords * Tex2CoordScale * 220.15 + sin(iTime*0.15)).rgb;
  
  //calculate blueness of the fragment on the satellite image
  float blueness = (originalcolor.b - originalcolor.r) + (originalcolor.b - originalcolor.g);
  
  //beach
  float f1 = NORMDIST(blueness, 0.1, 0.03 );
  color += f1 * 0.45;
  //major wave
  color += color2 * NORMDIST(blueness, pos, 0.06 + sin(iTime*0.5)*0.02) * 0.040;
  //foam
  color += color3 * NORMDIST(blueness, pos - 0.06, 0.01 + sin(iTime*0.5)*0.0001)*0.015 * FogMultiplier;
  //water
  color = mix(color,	color2, blueness);

  
  The transparency between wave and sand underneath is entirely an optical illusion generated by the lovely NORMDIST function.
  
  Here's a video of the (still not perfect, but getting there) result (colours exaggerated for effect):
  
  

  Thanked by 1Denzil
• Denzil

  7:26am 9 Jul 2018

  Thanks for sharing! Great work. I'll see if there's some ideas I can use here when I come back to this.