OceanFog         Basic underwater "depth" effect using the Ocean Shader

## Ocean Fog

### What's the use?

This can be quite useful if you're doing any sort of oceanic scene - submarine combat, swimming underwater, etc. I got the idea from Protagonist on the forums when he was looking to have under-water "depth" between the surface of the ocean and under it. After a few revisions (and some help from Protagonist) I was able to come up with a decent solution.

### Modeling the SeaBox and Ocean surface

This is actually fairly simple and can be as complex as you'd like your sea-bed and walls to be. I'm just going to cover the basics as it's applied exactly the same way for a simple scene as a complex one.

#### SeaBox

This is your sea-floor and your walls. Here's where the complexity can come into play: you can design your sea-floors and walls however you want - caves, cliffs, whatever. You can also just keep it VERY simple and keep it as a box. Originally the "reverse-ocean" (we'll get to that shortly) and the sea-floors/walls were one piece and the shader figured out where the separation lied. Not bad, but it's overkill.

Here's the steps for your basic SeaBox:

1. Create a cube large enough to house the ocean you'd like to use.
2. Separate the top surface from the cube.
• Note: You can just delete the top surface and make a new plane where it was if your modeler is finicky about this.
3. Select all the faces and reverse the normals.
• Note: This is to flip the faces around so they point inwards. If this doesn't work for you, you'll need to add a line to your material with `cull_hardware anticlockwise`
4. Set up your UVs for what's left of your cube and texture it how you like.
5. Export it out of your modeler as `SeaBox.mesh`

And you're now done with your SeaBox!

#### Ocean Surface

Now that the SeaBox is done, we can move on to the fun parts. This piece of geometry will be used twice - once for the surface from above and once for below. The reason we use two instead of one piece and ignore the culling is because on the "reverse" piece, we'll set up override fog such that it blends in with the rest of the ocean bottom.

Here's the steps for creating the first piece of the Ocean Surface:

1. If you have the surface we stole from the cube earlier, use it. If not, create a plane in the EXACT spot and the exact size that the removed face of the cube was.
2. Subdivide it to your heart's content. This is the actual surface geometry for the ocean shader, so you want it to be well-divided so you can see the waves in a smooth surface. Don't make it TOO dense or else it'll be extremely slow.
3. Do a planar UV projection from above so the whole surface has UV coordinates.
4. Now for the tricky part: select the very outer edge vertices and use vertex painting (Maya has a direct color-application command) and set it to black.
5. Now select the next inner-ring of vertices and set them to a color slightly less than black, but on the grayscale (i.e. going from black to white).
6. Repeat until you've gotten a white color. You want a somewhat gradual movement to white from black, but it doesn't need to be extreme (i.e. you only need to do 3-4 rings of vertices in this way.)
7. Now select all the vertices that you haven't yet painted and paint them white.
8. Export this as `Ocean.mesh`

That should do it for that.

#### Reverse Ocean Surface

This piece runs directly underneath the "real" ocean surface in order to let you see below the surface looking upwards without it being really shiny and ugly. This piece is just a normal-reversal of the above piece.

How to create the Reverse Ocean Surface:

1. Duplicate the Ocean Surface we just made.
2. Reverse all the normals so they're facing down.
3. Export this to `ReverseOcean.mesh`

Now you're done with the geometry section, now we'll move onto the shader/materials.

### Materials and shaders

#### SeaBox Material and fog_override

Now that the geometry is created, we'll see why we did all of that painting. If you followed the steps you should now have 3 meshes:

1. SeaBox.mesh
2. Ocean.mesh
3. ReverseOcean.mesh

With the `SeaBox.mesh` you should already have a material file created - find it and open it up. If it seems hopelessly jumbled, open it in WordPad instead.

Under the section labeled `Pass` you'll want to add this line:
fog_override true exp 0 0.01 0.777 0.01 1 1000

Basically this gives you the ability to fog something without interfering with the main scene's fog. This also lets you use fog without having fog anywhere else (i.e. above the surface). Here's a link to the parameters in-depth: fog_override
The main parameters here are:
0 0.01 0.777 0.01
The first three dictate the RGB color (this is pretty blue) and the last is the density (how thick the fog is). This looks pretty good to me, but experiment with it. Also make sure you update any these wherever they are to match, otherwise your ocean will look a bit odd.

#### Ocean Surface Material

This is the easy one - you don't need to do anything! You already have the `Ocean2_HLSL_GLSL` material created for you, so you don't need to do anything to it.

#### Reverse Ocean Surface Material

A short lived reprieve, but it's time to get to work. Here's the edited material:

#### MyOcean.material

```vertex_program HLSL/MyOcean2VS hlsl
{
source MyOcean2HLSL_Cg.vert
entry_point main
target vs_1_1

default_params
{
param_named_auto WorldViewProj worldviewproj_matrix
param_named_auto eyePosition camera_position_object_space
}
}

material MyOcean
{
technique
{
pass
{
fog_override true exp 0 0.01 0.777 0.01 1 1000
vertex_program_ref HLSL/MyOcean2VS
{
param_named BumpScale float 0.2
param_named textureScale float2 25 26
param_named bumpSpeed float2 0.015 0.005
param_named_auto time time_0_x 100.0
param_named waveFreq float 0.028
param_named waveAmp float 10.8
}

fragment_program_ref HLSL/Ocean2FS
{
param_named deepColor float4 0 0.3 0.5 1.0
param_named shallowColor float4 0 1 1 1.0
param_named reflectionColor float4 0.95 1 1 1.0
param_named reflectionAmount float 1.0
param_named reflectionBlur float 0.0
param_named waterAmount float 0.3
param_named fresnelPower float 5.0
param_named fresnelBias float 0.328
param_named hdrMultiplier float 0.471
}

texture_unit
{
texture waves2.dds
tex_coord_set 0
filtering linear linear linear
}

texture_unit
{
cubic_texture morning.jpg combinedUVW
tex_address_mode clamp
filtering linear linear linear
tex_coord_set 1
}
}
}
}```

And here's the shader to go along with it:

#### MyOcean2HLSL_Cg.vert

```/*********************************************************************NVMH3****
Copyright NVIDIA Corporation 2003
TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, THIS SOFTWARE IS PROVIDED
*AS IS* AND NVIDIA AND ITS SUPPLIERS DISCLAIM ALL WARRANTIES, EITHER EXPRESS
OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS FOR A PARTICULAR PURPOSE.  IN NO EVENT SHALL NVIDIA OR ITS SUPPLIERS
BE LIABLE FOR ANY SPECIAL, INCIDENTAL, INDIRECT, OR CONSEQUENTIAL DAMAGES
WHATSOEVER (INCLUDING, WITHOUT LIMITATION, DAMAGES FOR LOSS OF BUSINESS PROFITS,
BUSINESS INTERRUPTION, LOSS OF BUSINESS INFORMATION, OR ANY OTHER PECUNIARY LOSS)
ARISING OUT OF THE USE OF OR INABILITY TO USE THIS SOFTWARE, EVEN IF NVIDIA HAS
BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

Comments:
Simple ocean shader with animated bump map and geometric waves
Based partly on "Effective Water Simulation From Physical Models", GPU Gems

11 Aug 05: heavily modified by Jeff Doyle (nfz) for Ogre

******************************************************************************/

struct a2v {
float4 Position : POSITION;   // in object space
float2 TexCoord : TEXCOORD0;
float4 fWaveBreak : COLOR; // <<<< Edited here
};

struct v2f {
float4 Position  : POSITION;  // in clip space
float3 rotMatrix1 : TEXCOORD0; // first row of the 3x3 transform from tangent to obj space
float3 rotMatrix2 : TEXCOORD1; // second row of the 3x3 transform from tangent to obj space
float3 rotMatrix3 : TEXCOORD2; // third row of the 3x3 transform from tangent to obj space

float2 bumpCoord0 : TEXCOORD3;
float2 bumpCoord1 : TEXCOORD4;
float2 bumpCoord2 : TEXCOORD5;

float3 eyeVector  : TEXCOORD6;
};

// wave functions

struct Wave {
float freq;  // 2*PI / wavelength
float amp;   // amplitude
float phase; // speed * 2*PI / wavelength
float2 dir;
};

v2f main(a2v IN,
uniform float4x4 WorldViewProj,
uniform float3 eyePosition,
uniform float BumpScale,
uniform float2 textureScale,
uniform float2 bumpSpeed,
uniform float time,
uniform float waveFreq,
uniform float waveAmp
)
{
v2f OUT;

#define NWAVES 2
Wave wave[NWAVES] = {
{ 1.0, 1.0, 0.5, float2(-1, 0) },
{ 2.0, 0.5, 1.7, float2(-0.7, 0.7) }
};

wave[0].freq = waveFreq * IN.fWaveBreak.r; // <<<< Edited here
wave[0].amp = waveAmp * IN.fWaveBreak.r; // <<<< Edited here

wave[1].freq = waveFreq * 3.0 * IN.fWaveBreak.r; // <<<< Edited here
wave[1].amp = waveAmp * 0.33 * IN.fWaveBreak.r; // <<<< Edited here

float4 P = IN.Position;

// sum waves
float ddx = 0.0, ddy = 0.0;
float deriv;
float angle;

// wave synthesis using two sine waves at different frequencies and phase shift
for(int i = 0; i<NWAVES; ++i)
{
angle = dot(wave[i].dir, P.xz) * wave[i].freq + time * wave[i].phase;
P.y += wave[i].amp * sin( angle );
// calculate derivate of wave function
deriv = wave[i].freq * wave[i].amp * cos(angle);
ddx -= deriv * wave[i].dir.x;
ddy -= deriv * wave[i].dir.y;
}

// compute the 3x3 tranform from tangent space to object space
// first rows are the tangent and binormal scaled by the bump scale

OUT.rotMatrix1.xyz = BumpScale * normalize(float3(1, ddy, 0)); // Binormal
OUT.rotMatrix2.xyz = BumpScale * normalize(float3(0, ddx, 1)); // Tangent
OUT.rotMatrix3.xyz = normalize(float3(ddx, 1, ddy)); // Normal

OUT.Position = mul(WorldViewProj, P);

// calculate texture coordinates for normal map lookup
OUT.bumpCoord0.xy = IN.TexCoord*textureScale + time * bumpSpeed;
OUT.bumpCoord1.xy = IN.TexCoord*textureScale * 2.0 + time * bumpSpeed * 4.0;
OUT.bumpCoord2.xy = IN.TexCoord*textureScale * 4.0 + time * bumpSpeed * 8.0;

OUT.eyeVector = P.xyz - eyePosition; // eye position in vertex space
return OUT;
}```

Save those both to wherever in the Ogre Media folders you like (materials\scripts\ are where the .material files usually are and materials\programs\ are where the shader files usually go).

### Applying the materials

All the hard work is done, now it's time to see the fruits of our labor!
Load up whatever project you wish to use these in and put in the following code:

#### Ogre code

```// I'm using the assumption of how the ExampleFramework is set up
// This is in my createScene() method
Entity* pSeaBox = mSceneMgr->createEntity("SeaBox","SeaBox.mesh");
// This material is already applied automatically

Entity* pOcean = mSceneMgr->createEntity("Ocean","Ocean.mesh");
pOcean->setMaterialName("Ocean2_HLSL_GLSL");

Entity* pReverseOcean = mSceneMgr->createEntity("RevOcean","ReverseOcean.mesh");
pReverseOcean->setMaterialName("MyOcean");

SceneNode* pNode = mSceneMgr->getRootSceneNode()->createChildSceneNode();
pNode->attachObject(pSeaBox);
pNode->attachObject(pOcean);
pNode->attachObject(pReverseOcean);```

That should do it! Compile and see how it turned out. You should be able to "swim" underwater and look up from inside your SeaBox mesh to see the underside of the ocean surface, but it shouldn't be shiny and reflective like Ocean2_HLSL_GLSL usually is, it should have a bluish coloring, just like the rest of the ocean. Now when you go above the water surface, you should see the typical Ocean2_HLSL_GLSL surface.

### Conclusions

The basic system is that you want a sea-floor background, like an under-sea SkyBox, that receives override fog the color of the ocean you want. The reason for the vertex-painting and shader edits were to keep the edges of the ocean from dipping into your SeaBox and looking VERY odd. Now it blends into it normally along with the Reverse Ocean Surface and looks quite normal.

It's a simple and cheap trick to achieve a nice underwater effect without going insane with volumetrics and such.

Good luck!

HexiDave 00:48, 17 June 2007 (BST)

9 online users