Water material looks different in material editor preview than in game

I’m trying to create a water material. These are my material inputs and the material editor preview:

water_material_nodes.png water_material_editor_preview.png

Note that in the material editor preview, I get these nice glimmering highlights on the water surface. With the same mesh and material in the editor viewport, I get this:

The highlighs are gone, and the surface does not look very reflective any more. Why does the material look different?
Curiously, if I disable the “Realtime” option in the editor viewport, the highlighs appear:

I get the feeling that there is something I’m doing wrong. Enabling/disabling the “Realtime” option should not change the appearance of the material.

I have a feeling it’s to do with the reflection of the sky, as it’s black in the material editor, I could be completely wrong though …

Highlights that produce blooming gets smoothed by Temporal antialiasing.
Change the AA type to FXAA in the misc section of your postprocess volume, it’s under the advanced options of that section.
In any case you would probably want temporal AA because of quality, so try to increase the size of your highlight breakups so that temporal AA will not smooth those out

I might be wrong but sometimes baking your lightning fixes some shading issues both on dynamic and static stuff. You should check your lightning and postprocess setup.
BTW, how does your material network looks like?

1 Like

Thanks, disabling temporal AA fixed this issue.

I don’t know what highlight breakups are or how I could increase the size. Could you explain? Is it some setting in the material or the light?

I’m currently working on the vertex displacement of the water material. In my screenshots there is only one calculated vertex wave. The small waves are actually the T_Detail_Rocky_N normal map from the starter content which I added to make it look more like water. This is only temporary, in the final version of the material the small waves will be derived from equations as well.

I will publish the water material once I have finished a first version.

By highlight breakups he means the highlights on the water - in this case the white specks where light is reflected the most on your water surface and shines so bright it causes the bloom effect.
Since they’re only in groups of a couple pixel at most, the temporal anti aliasing smooths them out so your only solution to both have the highlights and the anti aliasing is to increase their size.

You can increase their size by either increasing the roughness slightly or using normals with softer edges or bigger shapes. Since your material is water the roughness option kinda drops out.

Another question: Is there a way to make sure that I calculate the normals correctly? Here is a screenshot where I combine world displacement and normals of multiple waves. Can I visualize the normals in the editor viewport as lines? I just want to see if the normals are actually normal to the mesh, is there an easy way to see that? In Blender I would just turn on the “show normals” option.

I’m worried about these dark areas, I have marked one of them in red. I can’t decide if these dark areas are supposed to be there, or if it is some error in my material, most probably in the calculation of the normals.
If you look carefully, you can see that the screen space reflection of the rock is not present in one of the dark areas. That can’t be correct, can it?

What method are you using to calculate the waves? Is this done with displacement maps or mathematically (Gerstner or FFT)?

There is no way to view the normals outside of the static mesh editor (that I know of), but the normals can be calculated depending which approach you took.

Also, check that you are not using a value of 0 for roughness, I use 0.05, going too much lower can create this effect in SSR. Also are you using a custom reflection input into the material? or just a fresnel?

You can PM me if you want, I have a material that will be released soon to the community, let me know if I can help (I used Gerstner waves). :slight_smile:

I’m also using Gerstner waves. I have derived equations for the displacement and for the normals. I know that the normals can’t be completely wrong, otherwise the screen space reflections wouldn’t work.
I’m beginning to suspect that the dark areas are just the areas where other wave peaks are reflected instead of the sun/sky. My roughness is set to 0.1. Do you get a similar effect with your water material?

I believe I did have a similar effect back when my material was Opaque, however I have since changed it over to translucent and no longer get the same look. But from what I recall it does look very similar to my original material. Adding in panning normal maps with small ripples will help disguise this, and will make the waves look much more realistic.

Some other points to consider:

  • Use a fresnel hooked up to the alpha of a lerp, with a dark & light base color input into A & B, input the result of your normals into the Normal slot of the fresnel, and use a scalar parameter to adjust the Exponent
  • Play around with the specular and metallic levels as well, these can increase the reflection on the waves
  • Try adding a movable skylight if you are using dynamic lighting, it can also add to the reflections
  • Try changing the time of day to see if the dark spots change location, also go into your PP and make sure the SSR settings are 100% quality, defaults to 50%

I have 3 videos of my ocean on the link to my WIP thread below, the dark spots aren’t really noticeable, but I believe this is mainly due to the surface being rippled by the normal maps, hiding the effect. I they don’t go away after adding in the ripples, then there may be an issue in the calculation, but I wouldn’t worry too much right now.

By the way, if you are planning to make your material translucent, be sure to have a look at THIS Thread there are some issues with translucency currently.

Thanks for all your hints. From your experience, what are the advantages/disadvantages of making the material translucent? Translucency is needed for coastlines, but I think screen space reflections are impossible with translucency, is this still true?
My first application of the water material will be an ocean scene at night with a prominent reflection of the moon, so translucency is not a priority for me at the moment.

Here is a preview video of my material. I have put all my work in getting a realistic motion of the vertices, so please ignore that the surface still looks a bit like jelly on close inspection.

Edit: Here is a download link for a high quality 1080p version of the video (66 MB): MEGA

Yeah the SSR + translucency doesn’t work, it’s one on a list of many issues. To be honest, if you don’t need translucency I would stick to the opaque surface, it is a much simpler and more performant way of creating water. So long as your scenes don’t require it, I would avoid it altogether, there are so many little issues to deal with using the deferred renderer as it stands. If Epic adds in a forward rendering solution for translucency and implements the planar reflections for surfaces, then for sure give it a try, but it has been nothing but trouble for me so far.

Looks pretty good so far! It might be moving a little to fast, but the motion is there. :slight_smile:

If you haven’t already, the one thing that has helped me the most is to use a ton of scalar/vector parameters for almost everything, then playing with the sliders and values in a material instance. Having to compile shaders every time you want to make any changes can take forever, so even though it is a lot of work to set up, being able to fine tune values in an instance will be a huge help for you as you adjust the look, and it will update live in the viewport. You can always change them back to being constants later once you are happy with the results.

Here is another preview video with a slightly improved version of the water material: