Post Process Ocean

[Gandi]

I just created an ocean which doesnt need any vertices.. it's all computed as a post process..

 

for the wave generation i use a heightmap (which still needs some work)

 

Here you can see my first attemts to rendering some kind of specular color from the sun ( needs a lot of tweaking)

If you directly look down the water you can see the refracted part + some caustics

The shore gets some foam and some blending. furthermore the parts very close to the water get some highlighting ( i dont know if i maybe should remove that)

Also high waves get some foam on top of them

 

For reflection i currently only use the sky, but it shouldnt be a problem to reflect the whole scene ( i just dont think its worth it)

 

I'm still working on it and its far from being perfect..

[AggrorJorn]

its looking realy nice Gandi, Did you write a new shader for this? How high do you think you can make the waves?

[dreamhead]

looks very beautiful,will you give it free or just for private use,but great work mate

[Pixel Perfect]

It does look promising! What's the heightmap actually used to manipulate then if there are no vertices?

[Sooshi]

that looks good man, a texture for the sand will top it off...

[Gandi]

its looking realy nice Gandi, Did you write a new shader for this? How high do you think you can make the waves?

Y.. i wrote a new shader for it..

atm it works this way:

render world/reflection

render lights

render ocean

render postprocess

 

theoretically i guess you can make them any height, but atm it just works if you stand above watersurface+waveheight.

 

looks very beautiful,will you give it free or just for private use,but great work mate

 

dont know that yet, but im creating this mainly for a game im working on

 

It does look promising! What's the heightmap actually used to manipulate then if there are no vertices?

 

well i somehow have to create the waves ^^ its just a rgba image which holds the normals and the height of the waves.

I'd prefere the wave generation with FFT but 1) i think im too stupid for it ^^ 2) i think its to much maths to do for every pixel which could be under the watersurface...

[klepto2]

WOW, looks really nice. Nice to know what you needed the shader pix to worldpos code for

 

Some questions

 

How will physics work together with this?

Did you think about to use some region mapping eg a modified heightmap/alphamap where you can setup lakes in different heights?

[L B]

Nice work. The foam is brilliantly added, although you need much more turbulence, and maybe some more "transparency". I don't know, doesn't look like much of a fluid to me.

[Qbound]

Hey Gandi,

 

nice work man... Does this work with meshes aswell? (bridges and so on?)

 

cu

Oliver

[Pixel Perfect]

well i somehow have to create the waves ^^ its just a rgba image which holds the normals and the height of the waves.

I'd prefere the wave generation with FFT but 1) i think im too stupid for it ^^ 2) i think its to much maths to do for every pixel which could be under the watersurface...

Cool ... so this is done with a frag shader then. Certainly the static pics show nice looking waves although it's a bit hard to get a feel for how good the effect is without seeing some video. Looking forward to seeing more!

[Sooshi]

Yea man I wna see a video, show muah

[Rick]

Wow. See this is what I'm talking about. Freaking shaders. I really don't want to learn you!

[Rekindled Phoenix]

This is awesome. Foam and caustics are a nice touch. I sure hope this will be released for the LE community!

[Gandi]

ok.. i made some changes on it..

 

 

now i just got the problem.. i wanna transform the normals into tangent space..

therefor i have to compute the tangentspace from: Normal, View-vector, UV

 

i got this formula:

 

float3x3 compute_tangent_frame(float3 Normal, float3 View, float2 UV)
{
 float3 dp1 = ddx(View);
 float3 dp2 = ddy(View);
 float2 duv1 = ddx(UV);
 float2 duv2 = ddy(UV);

 float3x3 M = float3x3(dp1, dp2, cross(dp1, dp2));
 float2x3 inverseM = float2x3(cross(M[1], M[2]), cross(M[2], M[0]));
 float3 Tangent = mul(float2(duv1.x, duv2.x), inverseM);
 float3 Binormal = mul(float2(duv1.y, duv2.y), inverseM);

 return float3x3(normalize(Tangent), normalize(Binormal), Normal);
}

(this is hlsl :-/

 

but i just dont get it to run properly..

[Guest Red Ocktober]

ooooo... ooo, oooo!!!!

 

 

verrrrry nice stuff G.... real waves.... yess...

 

 

--Mike

[macklebee]

looks nice gandi...

 

what kind of fps hit are you getting with this? meaning whats your fps without the water and whats your fps with the water?

[Gandi]

Got 70 frames with or without the ocean... (guess vsync is on)

 

€: If anyone got an idea how i could add the normals from the normalmap, just tell me

 

I compute the main normal from the heightmap, and i got a normalmap with the finer normals which don't really affect the "geometry"

[macklebee]

you have probably already done this... but have you looked at the terrain shaders?

 

sorry.. not much help on shader coding...

[Gandi]

at the terrain shader there is the T B N matrix for the transformation from the vertex stage

 

normal = T * bumpnormal.x + B * bumpnormal.y + N * bumpnormal.z;

 

i tried to create this matrix, but i failed :-/

[Josh]

The edges look like Crysis water. I don't know why, but I could just never get ocean water quite right. If you can find a good-looking surface pattern to add all over the surface, it will make the deep-water areas look a lot better.

 

Are you trying to write the normals out to the screen? Why not just use the normal map and calculate the dot product of the normal and the directional light vector, and write out the brightness? I assume you are rendering this after the main lighting pass.

[Gandi]

y.. i render it like a post process...

i need to compute the right normals, thats the problem.. atm i only got the normals computed from the height, but i wanna add some detail normals from a normalmap to them (just like bumpmaps on the terrain), so i have to align the deatil normals to the computed ones.. thats where im stuck..

 

i need the normals for calculating refraction/reflection and for the specular from the sun

[Josh]

I am not sure exactly what you are doing, but let's say you have a heightmap. It's easy to make a normal map out of that, and read that texture for the normal, instead of calculating it in the shader from the height. Now you have a normal, let's say it is 0,0,1. Okay, let's just swap the y and z axes, and now you have your world normal, 0,1,0. You can add in another high-frequency normal map lookup to get some more detail if you want.

 

Then take your directional light direction in world space. You can calculate this and upload the vec3 to the shader each frame. The world space vector of the light direction would equal TFormVector(Vec3(0,0,1),light,Null).

 

Now take the dot product of the light direction in world space and the water surface normal in world space, and that tells you how "lit" the pixel is. This can be used with a specular equation to calculate specular reflection.

[Gandi]

ok.. ill try to explain it better ^^

 

I have the heightmap (i know i could make a normalmap out of it, but the calculation kinda worked nicer)

now i have the normals of the waves..

if i now just add the detail normals the result doesnt look very nice, so i want to kinda adjust the detail normals to the waves.

 

you can think of that like a blanket. you take the blanket and lay it above some rough underground. you will see, the blanket will fit the undeground and wont lie down flat.

thats exactly what i want to do with my detail normals. lets say i got this raw undergrund by sampling the heightmap. now i want to take the detail normals and just put them above the waves.. then i dont have a "flat" normalmap anymore but the normals will fit the waves..

 

if i just add the detail normals they will always point into the same direction..

i hope you understand now what i want to do (if not i think a picture is my last chance of eyplaning it ^^)

 

€: Ok.. i made an image right away ^^

 

Red: The normal from the heightmap.

Green: The normal from the detail map.

Grey: is just a helper to see what ive donw

 

in the top half of the picture you see the way (i think) that you explained..

in the bottom half you see it the way i mean it. as you can see the detail normal aligns to the wave normal..

the gray line should now pe normal to the wave-normal

[Marleys Ghost]

Well so far it looks great Gandi, very nice work

[Josh]

That problem is pretty much identical to regular old bumpmapping. You will need the binormal/tangent, somehow.