The Legend of Zelda: Wind waker styled water

[Kazen]

Hello, new to the forums here.
I would like to know, if it’s possible to create a water similar to the one in The Legend of Zelda:Wind Waker, working in unity free and on mobile. I think it’s a shader question, but maybe it could be moved to the right place if I’m wrong.

If it is possible, how would it work? I’ve researched it a bit and according to http://www.polycount.com/forum/showthread.php?t=98578 (Image heavy) they’re using an alpha-mask for the white edges, which they move at a certain speed along the edge. It would be great if this was dynamic, so if there’s an obstacle or something placed inside the plane, that one would produce those white edges too. I also think that they use some kind of flowmap to make the water travel around obstacles (when it’s a river), or maybe they’re just UV-scrolling in some awesome way?

Any help is appreciated. I’ve tried searching for adding textures on edges but didn’t come up with anything.

And here’s someone that attempted the same (and maybe succeeded, but I don’t know)

Also, the polycount-forum also contains a nice gif of a waterfall that must be doing something similiar (Image heavy) http://www.polycount.com/forum/showthread.php?t=98578

Edit: Also, I haven’t really worked with shaders before.

[Foestar]

Here you go mate. This guy not only did this, but put it on his site for free.
His YOUTUBE video. Just follow the link in his description to find and dl it. Then just drag and drop it in. Pretty easy enough.
Or you can just click HERE to view his portfolio. He’s done some pretty awesome stuff.

[Kazen]

Hey, thanks so much for the link. The .zip-file doesn’t seem to work though, did it work for you? “Couldn’t open as a zip-file”. If it works for you, could you maybe repackage it or tell me what I’m doing wrong? Also, it doesn’t look like there’s some sort of texture for edges, which I would also like to have/do, so I would need some sort of information on how to place textures along edges (and scroll/“animate” the texture along the edge). It’s definitely a good start if I could download it correctly

[aubergine]

Its a simple texture and vertex manipulation shader, the shores can be done with either hand painted or mathematically calculated alpha maps. The latter is tricky but can be done with unity free as well, but the proper way of doing it is via depthmap support which you dont have access with unity free.

EDIT: Search the unity blog, i think unity people shared some code on how to effectively do the depth intersection somewhere.

[varfare]

It is possible in Unity Free but you probably won’t be able to do water intersection (the part where water touches dry land). The best (and probably the only) way of doing this is to perform depth check, the same way particles with Soft Particles Factor do. You are basically checking if distance from water pixel to the nearest depth pixel is smaller than the factor. If it is then you can use this information to show additional texture. The code snippet:

Vertex program part

o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.projPos = ComputeScreenPos (o.vertex);
COMPUTE_EYEDEPTH(o.projPos.z);

Fragment program part

float sceneZ = LinearEyeDepth (SAMPLE_DEPTH_TEXTURE_PROJ(_CameraDepthTexture,UNITY_PROJ_COORD(i.projPos)));
float partZ = i.projPos.z;
float fade = saturate (_DepthFactor * (sceneZ-partZ));
myWaterIntersectionTexture.a *= abs(1 - fade);

But getting depth map is probably unity-pro only feature so this part can/have to be skipped.

As it goes for water texture with this “distorted look” it is totally doable. You will need

• tiled water texture like this http://answers.unity3d.com/storage/temp/8104-imagescak1mb7g.jpg
• tiled noise texture https://www.filterforge.com/filters/231.jpg
• a shader which does the following

1. Has water texture and noise texture input
2. Noise texture UV is panning over time
3. Noise texture color values are multiplied or added to the water texture UV
4. The resoult will be a distorted water texture with this wobbly look

[Kazen]

Alright, thank you, I’ll see what I can do with this information, and thanks for sharing the info when using Unity Pro too, I might purchase that if I feel that I can’t get the water to look good without it.

Thanks again, really appreciate it.

[Foestar]

To get the file of Kaisirak’s to work in unity you simply download it, extract the files to a folder. Then go into unity to
“Assets/Import Package/Custom Package” and find the “windwalkertest.unitypackage”.

Now create a flat plane by going to “Game Object/3D Object/Plane”.
Under the “Project” tab where you can see a list of all your folders and project items there is a search bar in the top right. Type “waterZelda” and you will see both the texture and material. Drag and drop the Material onto your flat plane.
At this point you just need to adjust the sliders while in game to get the desired look you want for your water.

[Lars-Kristian]

This seems like an interesting effect to recreate.

The way I think it can be done.

1. Generate static meshes at the water edge.
2. Use a transparent cutout shader.
3. Animate UV scale and offset from a script.

For added effect you could use textures with a blurred alpha channel and animate the alpha cutoff value.

The first minutes of this video is great for reference.

- YouTube

I made a river prototype and this is my progress so far.

[Lars-Kristian]

This is the result I got from using the method I posted above.
The colors and textures are not quite the same as in game but the effect is there I guess.

River:

Pond:

[kebrus]

thats pretty damn close, how are you generating the shore mesh?

[Lars-Kristian]

It is done by using an array of Vector3. Then generate some guideline vectors and build polygons between every array element. The uv coordinates are adjusted accordingly. I can change width, make it pointing inwards or outwards, and switch uv direction.

My plan was to later on do some mesh / plane intersection detection. Then generate an array of Vector3 and send it to the mesh builder.

[kebrus]

Thats pretty clever, it should be easy to do the plane intersection.

good job

[kyleyoungblom]

That looks really great, @Lars-Kristian . I’d be really interested in reading a bit more about how you accomplished it if you ever feel like writing up a quick summary.

[Kazen]

Oh I thought I wrote this on answers, so I totally missed these posts. Lars-Kristian, those are very cool effects and sounds (and looks) like a good way to try and recreate the effect. Maybe I could try and replicate you way of doing it. A plane/mesh-intersection sounds like a smart way to generate the vectors too! Really nice.

[picobots]

Amazing work @Lars-Kristian , that’s really cool. Does anyone have any idea how a similar shoreline effect can be created on a water plane that has changing/dynamic vertices (on the y-axis, to create a wave effect)?

I’m thinking specifically of this type of water in Monument Valley (starting at 0:14), which has a similar flat look to Wind Waker. That shoreline effect is amazing! The waves and spray are simple enough—the waves can be achieved with code like this, and the spray is just a particle system. But how did they achieve that morphing/wobbling white band that dynamically hugs the shoreline (and moves and changes as the water level lowers and more land becomes visible)? Any ideas?

[kyleyoungblom]

@picobots

Amazing work @Lars-Kristian , that’s really cool. Does anyone have any idea how a similar shoreline effect can be created on a water plane that has changing/dynamic vertices (on the y-axis, to create a wave effect)?

I’m thinking specifically of this type of water in Monument Valley (starting at 0:14), which has a similar flat look to Wind Waker. That shoreline effect is amazing! The waves and spray are simple enough—the waves can be achieved with code like this, and the spray is just a particle system. But how did they achieve that morphing/wobbling white band that dynamically hugs the shoreline (and moves and changes as the water level lowers and more land becomes visible)? Any ideas?

I’ve been looking for a way to accomplish the same thing, with no luck. The closest solutions I’ve found rely on using depth information to render light-colored dropoff beneath the water, rather than on the surface. If anyone has any suggestions I’d love to hear them as well!

[INedelcu]

You can check my shore foam sample that I’ve posted on this thread: water foam/shoreline shader? - Unity Engine - Unity Discussions
It’s based on the existing standard assets for water rendering.

[kyleyoungblom]

That solution looks great for more photorealistic water, but I think what @picobots and I are looking for is a solution that behaves more like the image on the right, rather than the depth-based one on the left:

Where the effect is applied along the surface of the water, creating a uniform “stroke” along the intersecting points. Lars-Kristian seems to have accomplished exactly that, but I haven’t been able to find any examples of how to achieve it. Sorry for my super non-technical explanation

[INedelcu]

The solution I used there is depth-based and because of this will create foam around any geometry intersecting the water dynamically but yes you’ll have that issue. You should access the height map of the terrain during water shading to achieve the effect from the right image but I don’t know if it’s possible right now. There’s no built-in variable for that at least.

[serious]

@kyleyoungblom

That solution looks great for more photorealistic water, but I think what @picobots and I are looking for is a solution that behaves more like the image on the right, rather than the depth-based one on the left:

Where the effect is applied along the surface of the water, creating a uniform “stroke” along the intersecting points. Lars-Kristian seems to have accomplished exactly that, but I haven’t been able to find any examples of how to achieve it. Sorry for my super non-technical explanation

since this post was from August I’m wondering if you ever did find a solution to this. the uniform “stroke” running along the shore line is an incredible look.