“remap” just takes a value from [-1,1] and maps it to the [0,1] range. The minimum intersection threshold value used for transparency when intersecting with other objects. And I know it looks weird and complicated but trust me, there’s some “logic” behind all of this. The texture to use for the displacement when sampling the other textures. That’s why I’m not just calculating the offset once and applying it to all the positions. In lines 96-101 I declare the “Input” struct, to which I made some additions: first I added a field to store the vertex color, and then some fields to store the world position and the screen position. There’s a lot of effects with shaders that can be quite tough to approach, mostly because you don’t even really know where to start. As UVs I use the x and z components of the world space position multiplied by the scaling from “_FoamTexture_ST”. Wind Waker Water Shader. More info See in Glossary examples on this page show you how to use the built-in lighting models. Before using “LinearEyeDepth”on it, in line line 178 I calculate the linear depth going from 0 to 1 (with “Linear01Depth) and use it on a smoothstep to smoothly clamp it based on “_ShoreColorThreshold”. Here’s the assets and values that I mostly used for my water: Forgot to mention that probably the best way to create gradient map textures for this shader is using a tool like the gradient map tool I showed in a previous tutorial, especially since it allows previewing in real time. so by just having the surface normals animate even a little bit can give a huge impact for the presentation of water. You can also set the direction of water movement (for example, synchronize the direction of water with the direction of the Wind Zone). quick start guide about how you can begin using E-Cycles for architecture, Blender 2.9 for architecture: Modeling and rendering with Eevee and Cycles, Blender 2.8 parametric modeling: Drivers, Custom Properties, and Shape Keys for 3D modeling, Blender Eevee: The guide to real-time rendering with Blender 2.8, Downloadable tutorials (MP4|PDF) and assets (Furniture). Do you want to try that shader yourself? Make the shader work on a plane out of the box, with no other setup. These posts will never go behind a paywall. Do you want to use Blender for architecture or render your projects using Cycles or Eevee? Set a texture for the surface foam. The method uses “tex2Dlod” to sample the texture, as this will be called in the vertex shader and as UVs it uses the sampling position multiplied by the given scale, and to that I’m adding the displacement value and the value of time multiplied by its speed as specified by the properties vector. Just keep in mind that the lower this is, the better the detail of the normals, but it can introduce some flickering. Firstly, in lines 46-48 we take care of the transparency stuff. There are definitely better ways to deal with the lighting, like a custom lighting model using SSS (like I showed in the previous tutorial), but this is a simple enough for various effects. The value is a variable because depending on the scale of the object more or less detail might be needed. As you can see from the video below, it offers some fast render speeds and also reasonable visuals. Water depth fog, refraction and object interaction foam is then calculated by sampling the depth texture and comparing it to the pixel depth. The fragment shader uses the fresnel and reflection vectors to draw, shade, and reflect the surface. In lines 115-121 I have the “noiseOffset” method which takes care of calculating the displacement and sampling both noise textures using “sampleNoiseTexture”. You could actually have a “_VectorLengthMax” and a “_VectorLengthMin” value and interpolate between the two based on camera distance. In line 186 I perform the necessary calculations for the sand wetness effect. Toon water is one of my fav kind of shaders to make, so thought it would be a nice topic to write a tutorial on. Then add displacement to make the wave uneven. This method is pretty boilerplate and you can find more about it and other tessellation methods from Unity’s official docs. Nevertheless, it’s a fun thing to experiment with, and there are some nice takeaways, like the normal recalculation and all the depth stuff. The standard_surface shader is a physically-based shader capable of producing many types of materials. A shader is a program or set of instructions used in 3D computer graphics to determine the final surface properties of an object or image. Also, in line 46 I added two more tags: one for ignoring projectors (so if I were to add a projector for caustics for example, the water wouldn’t be affected), and one for disabling batching. It’s the same thing I’m doing in the “noiseOffset” method. Take your game to the next level of style and beauty with this awesome water surface featuring: Actors Buoyancy according to waves height and orientation, Stylized Foam flow, Reflection, Translucency and refraction, Detailed ripples, SurfaceOutput basically describes properties Consider it a freebie, even though I neglected to cover it in this post. These tend to be more connected to physical effects, which is precisely what makes them hard to approach. Advanced water shader for architecture with E-Cycles If you are working on a project featuring a swimming pool or any other large water surface, you will probably try to get a realistic material to render water. About. Lines 169-170 is a pretty standard way to calculate the displacement, like we’re used to. That’s 12 times. Do note that the effect won’t work in any SRP though. Packages 0. In lines 154-156 I actually add the result of the “noiseOffset” method to the y component of each of the 3 positions I got in lines 142-144. “smootherstep” takes a float and maps it to Ken Perlin’s “smootherstep” curve. In this shader we would be passing index of water image in u_texture and displacement image in u_texture_displacement (to randomize the movement of water surface). Seamless transitions between all sea states and wind directions are possible.The wave parameters of Physical Water surface were carefully derived using the JONSWAP … The “foam” value is then added on top of all that, after it’s being multiplied by “sandWetness”, so that we don’t have any foam on top of the wet sand effect. Furthermore, in line 94 I declare the “_CameraDepthTexture” to use for the depth operations. These are Shaders that do lighting calculations for you, and you only need to write code – remember, a Shader is a program – to handle other surface properties, like color and texture. The whole caustics technique was very much inspired by this tweet by FLOG. A 4D vector containing settings for the foam that’s, A 4D vector handling the properties of the foam. I still hope it can be useful. He is using E-Cycles to render a water surface, and the results are quite impressive. You’ll figure out what that is in the conclusion section. For the first time, I think I’m going to use a table for this one. The result is then blended with 1.0 using the inverted value of “shoreDiff”, so that the water is opaque when it’s further away, but transparent close to the shore. stonemcyoutube. This is the best shader, but my rain/snowfall is invisible, only looking into the water surface i can see the rain, there is a way to fix this? One of these effects is a shader for w… The helper functions help with that too. Initially, in line 185 I get the foam on the shore by using the “foamTex” from line 173 and using the intersection value of the foam (“foamDiff”) with the “_FoamIntersectionProperties” to determine the amount of the foam that will appear on the edge of the intersections. To simulate water we would move pixels in texture in sine wave form. Make the shader easy and straightforward enough to make a tutorial on it. This works for water or other liquids that are very murky, or are covered with a layer of debris, foam, plants, or something else that blocks light. Displacement values are generated using a combination of sine waves and Gerstner waves(here's a good overview from Karman Interactive). And it’s not as large as one would think. But if you really really super enjoyed this post, consider buying me a coffee, or becoming my patron to get exciting benefits! vertex:vert is to declare that we’ll be using a vertex shader named “vert”, tessellate:tessDistance is to declare that there will be a method called “tessDistance” used for tessellation, alpha:fade is needed along with the transparency stuff to let the shader know that it’ll use the alpha channel for transparency fade, addshadow is to change the shadow that the water casts after its vertices are modified, Displace the vertices according to the provided noise textures, Recalculate the normal vector for each displaced vertex, Calculate where the object intersects with other objects so that it can reduce the vertex displacement there, Pass the vertex displacement to the vertex colors so that it can be used in the “surf” function, The gradient map which gets mapped based on the vertex displacement, The shore color which is based on the linear depth, The gradient map is being sampled using the vertex color, The shore color is being calculated by lerping between black and “_ShoreColor” using the sand wetness value as the lerping factor, The shore color and the gradient map colors are blended using “shoreDepth” as the lerping factor. An artist called Johannes Wide shared an advanced water shader with caustics that is perfect for such projects on his Twitter account. In lines 146-148 I calculate the intersection of the water object with other objects so that I get a float value from 0 to 1 representing the area of the object that is intersecting. This will also provide the basis for refracting everything underneath the water and really sell the look. Just to show you how many times you can fiddle and experiment with a shader like that, every time I was changing something in the shader *while* writing this post, I increased the counter above. First of all, in lines 103-107 there’s the aforementioned “tessDistance” method that’s used to define the tessellation that will occur on the object. Thin Walled – This property sets the volumetric effects of the surface. The left-most value corresponds to the deeper parts, while the right-most to the highest parts. You can use the scripts and the shaders in this project as you like. To that I add the displacement value and the time in a sine function multiplied by the texture’s speed in both axes. Jun 28, 2020 - Explore Ben Cloward's board "Shaders Water" on Pinterest. The surface is colorized based upon the overall displacement of the geometry - a value recieved from the displacement shader. Watch the Trailer. fills in output structure SurfaceOutput. In line 174 I use the vertex color to take the vertex displacement value and use it with a smoothstep using the z and w components of the “_FoamProperties” property. If you play around with these numbers, their purpose will be more apparent. Used when recalculating the normals so I won’t go into too much detail now as to what it does. The result is then adjusted based on the contrast value and then multiplied by its contribution before it’s returned. It was originally written for an introduction to shader programming course that I taught to 2nd year Game Programming students. For examples on how to implement custom lighting models, see Surface Shader Lighting Examples.. There’s a lot of effects with shaders that can be quite tough to approach, mostly because you don’t even really know where to start. We recently posted a quick start guide about how you can begin using E-Cycles for architecture. You can use different ones for each use case if you want. The Surface Shaders Unity’s code generation approach that makes it much easier to write lit shaders than using low level vertex/pixel shader programs. It uses the same parameters. This is to ensure that the displacement occurs in world space, so different “water tiles” can be placed next to each other and work seamlessly. I made a reaaaaaaaally quick scene to demonstrate how I’ve set up my water and you can use it as a playground to familiarize yourselves with the properties and whatnot: Google drive link for the zipped unity package. See more ideas about Water, Unreal engine, Flow map. This was designed to give us some nice color transitions and allow for more control over the color of the water based on depth. This value determines the minimum percentage of vertex offset the water can have when intersecting. An HDR color property that’s multiplied with the rest of the color. The results of both calls are then multiplied with each other between returning. There are some methods besides the vertex shader and the “surf” function that are provide some specific functionality or are made for ease of use. It’s used for both of the noise textures and as parameters it gets the sampling position, the noise texture, the properties of the noise texture, its scale and the displacement value (so that it won’t have to be calculated more than once). This site uses Akismet to reduce spam. Water surface ripple effect for Unity Resources. In line 53 I add some more stuff after the “surface” pragma. License. One of these effects is a shader for water, which for a lot of people, myself including, is one of the holy grails of shaders, as it’s something a lot of people would need in their game, but the degree of complexity in it’s approach can be quite daunting. Does it work with regular Cycles? The threshold for the shore coloring based on linear depth. What I ended up with and what I’m showing in the tutorial is by no means accurate and you can find plenty of different and smarter ways to do what I did. In lines 142-144 I declare some local vectors and to them I store the object space position of the current vertex, the object space position displaced by “_VectorLength” along the vertex’ tangent vector and the object space position displaced by “_VectorLength” along the vertex’ bitangent vector. The Water Surface Shadow shader is the shadow version of the WaterSurface shader. This just means that the water shader is only applied to the surface of the object, instead of the entire volume of the object. My journey through video game development. It’s basically a global controller for the vertex offset. The water effects that we have created thus far are fully opaque. Do note that here I’m passing the world space position of the vertex (by multiplying the object space position with “unity_ObjectToWorld”) to the “noiseOffset” method. The displacement image is just a texture with random noise in it. The maximum intersection threshold value used for transparency when intersecting with other objects. Physical Water Surface simulates different sea states for wind speeds from 1 m/s to 35 m/s and fetch lengths from 50 km to 1500 km. Let’s go through it step by step. I usually have it be 1.0, cause water tends to be s m o o t h. This is a gradient texture that’s used to color the major part of the water based on its displacement height. As you can imagine, more than 50% of the magic happens right here, in the vertex shader. In lines 158-159 the actual normal recalculation and assignment happens. As mentioned, the smaller “_VectorLength” is, the more detail the normals will have. This shader is a surface shader that once again uses that depth difference technique to calculate the intersection at three levels: the shoreline, the in-between intersection and the deep-water fog. You can use the same materials and settings from Cycles in E-Cycles and vice-versa. The glossiness value of the water. What is E-Cycles? The distortion slider will distort the foam. Sorry to bother you, just wanted to let you know that this site uses cookies: the gradient map tool I showed in a previous tutorial, Protected: My take on shaders: Sky shader, My take on shaders: Stylized water shader. How to install datLax’ OnlyWater shaders That value is 0 when it’s closer to the object that it’s intersecting and 1 as it gets further away. In the package you’ll also find another shader that adds caustics based on world-space height. 2D Water surface with reflection 17 October 2016 I am not good with shaders. The result: I made an easy-to-use unity package if you’d like to use it … Readme Releases No releases published. In lines 177-182 there’s the calculations needed for everything that has to do with depth and intersection. In the movie below, a surface shader is used to colorize the water geometry. From up close though, it doesn’t look great. Sea State Transitions. No packages published . The vertex shader accesses the resulting height and normal data to compute fresnel and reflection vectors. Learn how your comment data is processed. Unity introduces yet another kind of Shader, a Surface Shader. Finally, in line 188 I add the final shore foam to the previous foam, to add it all together in the next section. Since we have the original position, the position offset along the tangent vector and the position offset along the bitangent vector, we can get the tangent and bitangent vectors and the new normal will be the cross product of the two. The process of getting the intersection value is pretty standard (we’ve also seen it with soft blending in the vfx master shader). Also useful to adjust the vertex offset when scaling up the water mesh, as that will exaggerate the vertex displacement. This is basically the key to recalculating the normals. If you are working on a project featuring a swimming pool or any other large water surface, you will probably try to get a realistic material to render water. Sildur’s Shaders for Minecraft are made in such a way that they provide various … This is where the rest of the magic happens. I would recommend using Photo Shop, Paint Shop or Gimp to create a proper metallic that embeds roughness. This can include arbitrarily complex descriptions of light absorption and diffusion, texture mapping, reflection and refraction, shadowing, surface displacement and post-processing effects. Firstly, in line 177 I just calculate the depth using the _CameraDepthTexture. The color blend slider will control how the surface foam color blends with the water color. As I mentioned, we don’t want to completely turn the vertex displacement off, so in line 149 I use “max” to clamp the intersection value between “_MinOffset” and 1. The actual vertex displacement is being calculated in lines 152-156. The only thing worth noting here is that I use “smootherstep” on the result for a nicer blending, and that in line 182 I don’t use a single intersection threshold value, but rather lerp between ” _TransparencyIntersectionThresholdMin ” and ” _TransparencyIntersectionThresholdMax ” based on a value that ping-pongs between 0 and 1 using a sine function. HQ video 1 | HQ video 2 | HQ video 3. The alpha of the water is also calculated with a kinda weird way. I also use a sin(_Time.y) here to have a bobbing motion to seem like the foam is going towards the shore and while leaving, it leaves the wet sand behind it. It can be used to boost the colors of the water a bit, but it’s not really necessary. It will return the program handle for the currently active water surface, spray, or wake spray shaders. An artist called Johannes Wide shared an advanced water shader with caustics that is perfect for such projects on his Twitter account. In lines 173-174 I just sample the foam texture using all the stuff we got from its properties. When looking at water from above, the surface's transparency and reflectivity changes according to the viewing angle. This article will outline techniques to render the most common components of a water shader: shoreline foam, depth-based coloring and surface waves. I've got a Twitter too where I post random stuff I do. Make a water shader than can look somewhat good from different distances. But for a 2D prototype I wanted to have a nice water effect. But clear water is transparent, which requires a transparent shader. Be sure to set your uniforms on both programs. There’s a lot of decisions to take when making a shader like this, and a bunch of different approaches. The reason for that is to give the impression of the sand-wetness effect, as it fades in and out over time. As the water plane intersects with other objects, like the terrain, it will have a different, lighter color which is determined by this property. You can use the cutoff value to control how much foam will be shown. In lines 191-192, I handle the overall coloring of the water. In the second pass, the compute shader calculates water surface normals at each point via gradients, and updates the resulting data. I usually leave this at 1 because it looks nicer. It’s not perfect, but it helps with blending the water with the land a bit better. Much of the render speed is due to the use of E-Cycles for rendering, which offers some impressive speed gains over regular Cycles. Finally there are 2 more smaller methods: “smootherstep” and “remap”. Let's make some simple cartoon water!82% OFF for Web Hosting and FREE Domain included! RealWater is a photo-realistic water shader for Cycles that packs the power of advanced volumetric shading and improved refraction into one easy-to-use package.. RealWater is engineered to reflect large bodies of water, such as oceans, lakes, rivers, and ponds, but it can be used for much more.That includes Jell-O, fogged glass, and slime! Same as “_NoiseAProperties”, but for the second noise. They cover the use of Blender for producing architectural content and also all information you need to render projects in real-time: You can get them in both digital and paperback formats. in your map, and in its "Water" variable, point to a water surface Blueprint instance. The tessellation used here is distance-based, so vertices that are further away from the camera won’t be as tessellated, which helps with performance and visual clarity sometimes. Keep in mind, that this and all other textures are all sampled “biplanarly” in world space, to keep the whole thing tiling and to keep it consistent with the world space sampled height textures used for the vertex displacement. But let’s just say that this is for just the shore for now, it makes more sense that way. In real time graphics we don’t always have the luxury of accurate simulations, so we try to approximate an effect as well as we can by using different tricks and hacks, so the degree of fidelity can vary in all the different implementations. It includes a diffuse layer, a specular layer with complex Fresnel for metals, specular transmission for glass, subsurface scattering for skin, thin scattering for water and ice, a secondary specular coat, and light emission. The first noise texture to use for the vertex displacement. It covers a lot of ground, but hopefully provides a lot of useful info and techniques. The whole line was a product of trial and error, hence the magic numbers there. This is actually a neat format, I think I’ll keep it for next tutorials too. EDIT: Forgot to mention that while having a small “_VectorLength” value introduces some flickering, if viewed from somewhat far away it actually looks crunchy and somewhat nice (at least for my taste). Afterwards, in lines 109-113 there’s the “sampleNoiseTexture” method. This is what happens in line 158, and in line 159 it’s assigned to “v.normal” after it’s normalized. It looks a lot right now, but most of it is the properties and fields and we’ll examine the rest together. In line 179 I use “LinearEyeDepth” on the original depth and then use the modified “depth” variable to calculate the intersections in lines 180-182. This is a value going from 0 to 1 that defines the amount of vertex offset happening on the object for both noise textures. Note there are two different programs for the water surface: WATER_SURFACE is used when the camera is high above the water, and WATER_SURFACE_PATCH is used when the camera is near the surface. I had to extract that code because I have some sin calls which needed remapping and didn’t want to have a lot of “(x + 1.0) / 2.0” everywhere. In real time graphics we don’t always have the luxury of accurate simulations, so we try to approximate an effect as well as we can by using different tricks and hacks, so the degree of fidelity can vary in all the different implementations. The smoothness value is assigned in line 195 where I use the “_Smoothness” value multiplied by “shoreDiff” to not make the foam and sand wetness as smooth as the rest of the water. A 4D vector containing properties of the noise texture: The second noise texture to use for the vertex displacement. Over time I fiddled a lot with different implementations, including simple normal map panning, gerstner waves etc, but I ended up getting the results that I liked most just by using two noise textures and vertex displacement. Methods: “ smootherstep ” and a bunch of different approaches surfaceoutput basically describes properties Set a texture the... I calculate the displacement when sampling the other textures got a Twitter too I... Look a little bit can give a huge impact for the foam texture using all the.... Different distances datLax ‘ OnlyWater shader has virtually no effect on performance vertex handles. Color transitions and allow for more control over the color as to what it does of... And other tessellation methods from Unity ’ s a lot of ground, but hopefully provides a of! What it does be used to boost the colors of the sand-wetness effect, it... Foam color blends with the shoreFoam so that the effect won ’ t work in SRP! The fragment shader uses the fresnel and reflection vectors lot of useful info and.... More than 50 % of the water a bit, but most of it is the Shadow of! Enjoyed this post water, Unreal engine, Flow map is actually a neat format, I think ’... That this is for just the clamped intersection value multiplied by “ _OffsetAmount ” left-most value to... What is underwater and coloration, Flow map noise textures Flow map that it ’ s lot. Package you ’ ll figure out what that is to give the of! Surface Shadow shader is a physically-based shader capable of producing many types of materials ]... I add the displacement image is just a texture with random noise in.., which is precisely what makes them hard to approach between the two on... 94 I declare the “ sampleNoiseTexture ” method the presentation of water on his Twitter.! M going to use for the depth using the _CameraDepthTexture so if anyone has any feedback let me know the. Movement changes in a circle you can use the scripts and the terrain, we want.: tessDistance alpha: fade addshadow has virtually no effect on performance vert tessellate: alpha... Changes in a circle waves and for the displacement shader render speed is due to the [ 0,1 ].! Know it looks nicer | HQ video 3 producing many types of materials completely! They transform water, making it as realistic as possible for such projects on Twitter... Surface waves this one worked for what I wanted, but hopefully provides a lot decisions... Foam for both the top of the foam is not added to that mask... Interactive ) on this page show you how to use for the vertex offset the a! Line 150 I calculate the displacement, like we ’ ll examine the rest of the surface colorized! Of both calls are then multiplied with each other between returning image effect that distorts rendered. Render the most common components of the magic happens - Explore Ben Cloward 's board `` shaders ''.: “ smootherstep ” takes a value going from 0 to 1 that defines amount... Mimic surface foam recalculating the normals will have 's board `` shaders water '' on.... Out what that is perfect for such projects on his Twitter account the fresnel and reflection to! Space position multiplied by “ _OffsetAmount ” stuff I do on his Twitter account much detail now as what... And the terrain, we probably want the waves and Gerstner waves ( here 's a overview... It does info see in Glossary examples on this page show you to. Three books available water surface shader could help you concept is that I add some more stuff after the “ ”...