03 septiembre 2011

Ocean Shader 2.0. Radial Fourier waves with 3 axis transformation

Everything can be improved, so here is a much better Uber Ocean Shader for Unreal (Still in progress). Runs in dx9.
The pixel shader is quite trivial. Each color layer is controled with the distance between each pixel and the pixel behind. Currently im wondering the posibility of adding fog instead using z_Depth, as i did in the lighthouse. Reflections and other color controls are controled by a fresnel term. Specular uses the beckman distribution for atenuation, also using a Schlick's term and some other functions with the half vector.
There is also a chromatic aberration effect and a simple foam layer.

What i need now is better artwork :D

Many people ask me how in the hell i got those waves. Lets explain it:
The vertex shader is using what i call 'Radial Fourier waves with 3D transformation'. Signed, a freak xD
Currently, the waves are not just a modification in the vertical axis, but a modification in x, y, z to give them a real wave shape. At first, the movement didnt have in mind the world x, y position of each vertex, so all the waves peaks were going in the same direction. Now having in mind x and y in world space, my peaks are radial too. What about the implementation? Hehe, try it.
Published controls for the waves are: global amplitude, frecuency, world space 'scale' and 'real wave factor' which is in charge of making the nike logo, hehe. Also, the center of the radial wave.
There are also internal amplitudes and phases, but those are inside the Fourier serie definition.

Lets show the process by steps:

Radial Fourier waves with 3 axis transformation.

1. Get a Fourier serie working:

The first shape is just an example. Im using the triangle function for the final shader.

2. Radial movement:

Do you remember Mr Pitagoras? Use his law to make it moving radial

Sexy, eh.

3. The 'Nike' Shape:

Now im going to use the triangle wave. Gives the result im looking for.
The nike shape is just a modification of the Fourier serie. Then i got x, y, z. Remember you need to have into account the world position sign for each vertex. You dont want to apply the same transformation at every xy quadrant.
The separation you see at the center axis are due to the position correction. Maybe there is a solution for that. Its still a wip.

Good luck! :D

Future work:

  • Shore detection for uv's deformation. Useful for beach waves SOLVED
  • Foam layer at waves peaks SOLVED
  • Aditional variations of waves SOLVED
  • Static reflections to increase performance SOLVED
 Future research:
  • Normal maps interpolation in accordance with wave shape. SOLVED
  • No camera-dependet fog SOLVED
  • Shore waves attenuation. z-Depth not available for vertex shader. Solved by vertex colors

5 comentarios:

  1. May you please make a more detailed tutorial for begginers or medium users? I'll be very thankful.

  2. Hello,
    Can you tell me how you did this in UDK?

  3. Wow dude very nice work!!! Big Fan! been trying to do something similar but your work is much superior. It would be nice to see a tutorial someday.
    Keep up the good work!

  4. Could you share that code, please?