I want to make a similar water surface like in this picture:

enter image description here

I need the water surface in the same view than in the picture. Is it possible to work without shaders? I want to develop a little game for Xbox Live Indie Marketplace, Windows Phone and maybe later iPhone/iPad.

How should I make the water surface, so that it works on multiple platforms?

  • \$\begingroup\$ did you search the site for the questions asked before? they don't give you implementation details, but you can easily use their ideas for your own simulation \$\endgroup\$ – Ali1S232 Dec 16 '12 at 16:52
  • \$\begingroup\$ Is it easier to make a cell shading water surface? I like the Zelda Windwaker sea. How can I do something similar? zeldainformer.com/images/uploads/news/zeldatop10wiiu5.jpg \$\endgroup\$ – Johnny Dec 16 '12 at 18:54
  • \$\begingroup\$ I'm not sure, but probably Zelda Windwaker just use a plane with animated textures. or even, one plane for the blue, and several moving little planes textured with the waves. \$\endgroup\$ – Gustavo Maciel Dec 17 '12 at 0:18
  • \$\begingroup\$ Which effects work on Windows Phone and Xbox? I thought HLSL shaders or other shaders wouldn't work on windows phone. Is that true? \$\endgroup\$ – Johnny Dec 17 '12 at 14:56
  • \$\begingroup\$ Are you looking to do this in 2D or 3D? \$\endgroup\$ – Anko Oct 16 '15 at 13:01

There are several things going on in that picture. But it definitely needs a specialized shader if you want any kind of interactivity (such as looking at the water from various different angles).

  1. Animated Mesh (probably)
  2. Animated Surface Normals
  3. Blending Between the following colors:
  4. Reflection (Solid color or cubemap)
  5. Water Color (Possibly using refraction, depth fog, and other effects depending on complexity)

The most basic shader you could use for this would use a simplified 'Fresnel term' to blend between a reflection and the 'water color'. The water color could be a solid color. But for more realistic water you can change it depending on several different things.

For example, if there are objects that should be visible under the water, you can blend between their color and the water fog color, using a depth map of objects that are behind the water. If you don't mind some more complexity, you could use techniques like 'sub surface scattering' to simulate the effect of light shining through the waves.

The reflection can also be a solid color, but you probably want to sample a cubemap instead. For example, the cubemap that you might already be using for your skybox. That way you can see the sky reflected in the water.

Unfortunately it becomes a bit more complex when your water isn't a static mesh. You could either generate a new mesh on the CPU and send that to the GPU each frame, or you could use a Vertex Texture Fetch (VTF) in the vertex shader you use for the water surface. This might not be supported on all the platforms you want to target.

It's also worth noting that if your mesh is animated, you also need to update the normals of the mesh each frame, which can be quite expensive (not really a problem for desktop computers, but I wouldn't recommend it for the ipad).

You can learn more about most of what you need at this GPU Gems article about refraction.

A full simulation would probably be overkill, and my guess is that you're probably best off using the classic 'flat plane with animated normal map' approach. But I also wrote some words that you might find interesting about a Water Simulation I created with DirectX11 in Unity. My current version is cross platform, but only for desktop computers, and I haven't looked into creating versions that would work on the mobile devices.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.