UDK Ocean Shader with Stylized Waves

seenooh

Final Update:

[ame="http://www.youtube.com/watch?v=1O6DWcvvo8s&feature=player_embedded"]UDK Ocean Test - YouTube[/ame]

That vid shows using the ocean shader that I made in a WIP level for my game demo project. You will be able to see some of game stylization that is going on, and thus why I went for that wave shape from day 1.

Now there is a single problem in that demonstration, which have been pointed out by UDK's community, is that the sun specular is almost non-existant. So I fixed that [ame="http://www.youtube.com/watch?v=bF6QspwokRw&feature=player_embedded"]here[/ame] if you'd like to see it. This link is kind of irrelevant, as I'm showing my latest programming updates, but you get to see the ocean with the fix in the begining and in the end of it.

So the shader is pretty much wrapped up in terms of main features, I'm at 245 instruction count. I have more ideas, but that will contribute in making it more expensive so I was like just ok I'll go with this and it'll suffice.

Hope you like it.

Update 3:

[ame="http://www.youtube.com/watch?v=VRGflRxuPuQ&feature=player_embedded"]UDK Ocean with stylized waves [WIP 3] - YouTube[/ame]


Update 2:

[ame="http://www.youtube.com/watch?v=Y_Mqng6OeKw"]UDK Ocean with stylized waves [WIP 2] - YouTube[/ame]

Original Post:

Hey guys!

I've been working on an ocean shader which will be part of my portfolio project. I'm not done with it yet, but I wanted to hear some thoughts from you guys. Any crits are welcomed.

[ame="http://www.youtube.com/watch?v=iZfnPKxHuIg"]UDK Ocean with stylized waves [WIP] - YouTube[/ame]

And of course, it is better viewed in HD.

Best Regards,

Hamad Al-Hasan
Gameplay Programmer & Technical Artist

Eric Chadwick

Well, you say it's stylized, but what's the aim of the stylization? Do you have reference of what you're going towards?

Stylized often means the artist just doesn't want to spend the time and effort to make realistic waves. If you're going for a particular graphic style, show your references.

Also would help to talk about what layers you have so far, what you've put into it.

BARDLER

I don't see the style in it. It just looks like a fairly basic water shader that would be in a tropical area or mountain lake. Good examples of stylized water are Nintendo's games.

seenooh

Hey guys,

The demo I'm working on has a cartoonic feel to it. The shape of the waves do not look realistic which helps what I'm going for. My goal is to have things somewhat stylized in shape only, but the shading however is realistic.

What I have there are 4 layers of displacement maps that get converted to a single normal map which adds alot of variation. Each displacement is actually a single channel in a texture. So, I have an RGBA texture and each channel has a variation of wave displacement. So instead of blending 4 normal maps, I can just have one texture and create 4 variations out of it.

Another texture has in its RGB, foam, sparkles and a variation mask. The third and last is render-to-texture to be used for real-time reflections. There are no diffuse maps, all colors are procedurally generated based on a wave gradient. You can manually paint shallow areas, like where the camera is on in the video.

That's pretty much where I'm at now. I will add some vertex displacement and few tweaks to wrap it up.

seenooh

Oh I forgot to add my main reference for the idea: http://www.muharraqi-studios.com/muharraqi_gallery.php?cat=SCENES&id=108

You can see that shapes are stylized, but the materials and lighting are kind of realistic. I'm aiming for something like that.

Eric Chadwick

Ah, OK. Cool style for the city. I really like the cloud treatment in the bottom shot, because it echoes the curves in the architecture. Maybe you could introduce some of this into the water, maybe as coral formations underneath, or as semi-circular wave patterns.

seenooh

Hey Eric,

That city is just a reference, what my team is currently working on is an italian village which will be stylized in a similar manner. We just finished blocking out the environment. I went ahead and worked on this ocean shader to use it in the environment. I will probably make another thread on that once it reaches a presentable stage.

Thanks for your input, I'll do my best.

seenooh

Latest update on the shader.

Eric Chadwick

Looks nice. I think the sun reflection needs to be stronger, hotter. It could use a fresnel term on the reflection. And the water color might need to be adjusted more towards a greenish-blue, or a deeper teal.

Some ideas:
https://www.google.com/search?q=ocean+shader&tbm=isch

seenooh

Eric Chadwick wrote: »

Looks nice. I think the sun reflection needs to be stronger, hotter. It could use a fresnel term on the reflection. And the water color might need to be adjusted more towards a greenish-blue, or a deeper teal.

Some ideas:
https://www.google.com/search?q=ocean+shader&tbm=isch

Hey Eric, thanks for your input. Actually there is a frensel term, I just as you said need to pump up the reflection strength. As for the colors, I honestly didn't spend quality time on tweaking them, however that is on my list and also will use different settings (day / sunset / night) in order to make it as flexible as possible.

Thanks alot, I'll do my best in the next update.

seenooh

Bump. Added update number 3. I improved the reflections and added wave foam. In my next update I'm going to tackle the shore. Hope you guys like it.

Eric Chadwick

Coming along well!

The bump texture is looking a bit too billowy, a bit more like mud than like water. Ocean water usually has sharper peaks and rounded valleys. Here's an example from Dreamscape, an old plugin for 3ds Max. It is getting closer to water, but still looks a bit rubbery. Maybe you can adjust your input noise patterns?
http://ericchadwick.com/examples/movies/waterbump_128x128_60frames.MOV

seenooh

Hey Eric!

Very useful reference, much appreciated. You are right, the bump texture does not look like actual waves, what I was going for really is getting the bumps to look stylized while keeping the shading/motion realistic as much as possible. However, once my work is completed I'm definately going to test out a proper bump texture to try to get realistic results, though I'm not going to use it for my demo project, just out of curiosity.

Worth to mention that shader is further optimized and it's at 176 of instruction count.

Thanks again for your support and glad you liked it so far.

seenooh

Bump - Updated first post.

Hope you guys like.

DashXero

I don't understand. It looks like an ocean. With waves. My eyes are pretty untrained - mainly because I don't live near oceans, but it looks like a regular old ocean. Well done, but a regular old ocean...

When I hear the words "Stylized Waves" I automatically think of this or this.

seenooh

Hey there!

It's just a small touch of stylization where the wave normals are not 100% realistic. That's it. If you look at the level too, you will see assets being somewhat "wonky", while using realistic textures (photo sourced). So it's just a touch of stylization, and that's it.

Thanks for the feedback.

Eric Chadwick

Looking great!

One thing that bugs me, the scrolling speed is very fast for the scale of the scene. It looks more like a fast-running river. The speed could change to 1/2 or 1/3.

Also perhaps the scale of the wave pattern could be smaller, to match the scale of the docks and people. It kind of makes the scene look like a miniature set.

seenooh

Hey Eric! Glad you liked it!

Thanks for the feedback on the scale and wave speed. Consider it done!