Rain Drops Shader - UE4 Materials 101 - Episode 14

[@emiliaparedes4900]

Hey :) this is a great tutorial, I am actually implementing it in glsl in my own framework and I think I understand why your mask still has this gray part. after the color.a * 2 -1 we have it in a range of -1 to 1 with the multiplication of -1 you still have colors between -1 and 1 but inverted, lightish gray is new darker gray and vice-versa, this could be easily corrected by doing a floor or ceiling, depending on implementation in order to make either black or white. Hope it helps to someone :)

[@guinea_piggg3930]

Amazing tutorial! I looked at issue with drops inverting and equation (X * 2 - 1) *(-1). Probably the explanation is that result of operation with gray color depends on its value - whether it is greater or less than 0.5 (or equal)? If gray color was taken as 0.5 exactly then ,since (0.5 * 2 - 1) * (-1) = 0, we would get black color. If gray value is greater than 0.5 (but less than 1, obviously), then result is less than 0 so it will be clamped to black as well. However, if color in texture was less than 0.5 then it would be less than 1 after doubling, so after subtracting 1 we get value less than 0 which, if multiplied by -1, becomes positive, so does not correspond to black color. And it seems that the last case is true, so when we raise resulted value to some high power (like 10 in the video), it approaches 0 and becomes closer to black... To fix the problem, if just transform Alpha-channel using 1-x node and then truncate, then too many values would be left out, but it worked to me if use 1-x, then add some small value like 0.2 and then truncate.

[@BenCloward]

Thanks for putting thought into that!

[@MrLyonliang]

I agree with you, the gray value is not just happen to be 0.5, so after translated to [-1, 1], its value maybe greater than 0.

[@tonykim8244]

I did a comparision with the texture and a scalar node of '0.5' with 'if' node and it turned out that the texture's grey area is about 0.41 or a bit higher.

[@vubangers]

I ended up using "trunc" math operator to convert the greyscale value to a 0 value then multiplying by -1 to convert the small black dots to white. and everything else is black.

[@Blackn0m]

Amazing!!! It actually looks real wet!! Regarding the question at 9:50, my guess would be that some grey scale values were *between [-1,0]* after multiplying by -1 switched sides to [0,1]. There is a node called *"Step"* that turns anything below a chosen threshold to 0 anything above to 1. I used this when learning from this tutorial instead of the *power node* . Connected the result from *Multiply by -1* to *Step X* and chose a threshold of *0.7* in *Step Y* and it did the trick for me. I think it's a bit cheaper than the *power node* . Edit: After playing a bit with the *Step node* and putting the threshold as 0, I still get some results (the basic color doesn't go completely white as it should), so I think unreal actually *remaps [-1,1] space to [0,1]* when plugged into the *basic color pin* .

[@KostasOreopoulos]

Thank you so much for these tutorials. I really loved this technique that you used to basically create multiple 0-1 timers over the texture. I would have never thought of it (probably) but when you know it, it looks so elegant and simple solution!

[@lotusbolt2218]

Hi, thank you for your tutorials! It helped me a lot in my development projects. Regarding the weird result for the *2 - 1, in my case it was the compression mode. The default compression mode makes the colours non-linear. I tried several values, for example a blank 50L greyscale texture was converted to 0.2 instead of 0.5 when value debugged. It works fine after changing the compression mode to HDR (linear), it is also visible in the sample type settings of the texture node (linear color instead of color). I saw other comments mentioning similar things (regarding srgb to rgb), thought I should also contribute my findings. Cheers!

[@TheBugB]

Thanks Ben! I’m slowly making my way through the series!

[@samanatrian]

About masking those small droplets, assuming x as input values of the texture. then you want x=0 become y=1 and x=!0 become y=0. There are two ways for doing: 1) as you already did, you created y=2x-1, but for this problem, we have to first invert x to -x. then multiply it by 2 and subtract 1. so we have y=-2x-1. what you did by multiplying 2x-1 by -1, came up with this equation: y=-2+1. so first add -2 then saturate it. 2) since there are quantized values in the texture, we can use if function. for x=0, y=1, for x>1 and x

[@mafiousmarques]

Alternative explanation about the troubleshooting: Hi Ben. Noob brazilian (english might not be so good) here so that might be wrong but I think I have a good explanation for why your grays are being converted to gray and no to black. It may be about the value of gray in the image. Let's go through. When you take the value (let's call it x) of a pixel in your image and do the operations you did, you get a final value (y) that obeys the following equation: y = (x*2 - 1)*(-1) or written more simply: y = 1 - 2*x Note that, in this equation, values of x smalle than 0.5 will generate values of y greater than 0. Therefore, if your grayscale values are less than 0.5, the result of your expresion will be a gray value. Values of x above 0.5 will result in negative y (black) and a x = 0 will generate a y = 1 (white). As an example, suppose x you start with a grayscale value of 0.4 multiply by 2 node gives you 0.8 then subtract 1 node will give you -0.2 and finally the multiply by -1 node will return 0.2 (gray) I made a video with a simple float4 parameter plug into your setup for the base color and created a material instance to show that. kzbin.info/www/bejne/m5rHaKOBZdSfnNk Note that, while the color has R, G and B less than 0.5, tha material is gray. In the moment R, G and B go above 0.5, the material becomes completely black. Of course, I made the assumption that the grayvalue you used is less than 0.5. Forgive me if that is a bunch of bullshit, I'm still quite new to the unreal engine and to computer graphics in general. Also, I'm very sleepy after have binged your videos wall night. Awesome stuff. Thank you very much. Learning a lot with you. Hope I helped.

[@kenalpha3]

Wow, thanks for this and providing the texture. Tip when using Multiply node: just click it and set the value for B at the Left panel, instead of adding a 1 scalar. Good for speed coding or making while listening.

[@AndrewByrnes1]

How on earth you discovered a power node solves that weird issue is beyond me. Well done.

[@stephenfalk8854]

Power node is really just a way to increase contrast so I think that's what he was shooting for

[@michaelrucker1228]

Here is a solution to the inverting drops issue. Alpha channel --> add(0.25) --> multiply(2) --> subtract(1) --> multiply(-1) --> ceil --> root node. I would love to hear if you see any issues with this solution. I'm a new Unreal user, and I absolutely love your tutorials! Thank you for sharing your expertise!! edit: After finishing the shader, this solution doesn't allow for the animated mask to fully "evaporate".

[@fracturedfantasy]

Thanks again. Excited to see how it all comes together over the next few videos!

[@jacksonrae2785]

Years later, my solution to the mask color trouble was adding another "-0.5" after the multiply, to shift the range down another bit. Dunno why it worked but it did.

[@JL-dq1xh]

Thank you very much for recording such a good tutorial

[@controllerfreak3596]

I would correct the masking issue by changing the order of operation and using clamping. If you do your subtract first of your mid value. your mid value becomes 0, throw a clamp on the end of that then when you multiply by 2 you just get your bright colors. obviously invert as needed before or after.

[@zero-g-racer]

nice tutorial, thx for sharing your skills

[@BIGTTSNORLAX]

Really fantastic stuff! Thanks again for this content.

[@Ki7suneGF]

Top notch! Thank you so much!

[@KRYPTIK]

This is phenomenal work!

[@mehranvaysee]

Thanks for the tutorial

[@Admojoe]

thank you for making this tutorial... now I have raindrops shader :)

[@speedfreakpsycho]

Interviewer: Hey Ben, what's your IQ? Ben: Yes!

[@KRGraphicsCG]

This is another great tutorial and now I feel like I am getting the hang on creating different materials for my projects. I was able to recreate this graph in Unity and it nearly matches 1:1. I'm using Amplify Shader Editor and at the part where you use the Power Node to created the static Raindrops, instead of setting it to 10 (the drops don't fade), I set the exp to 1 and checked safe, and the drops now look correct like your example. Also, I found a quicker way to make the raindrop texture in Substance Designer using a bell shape node, and using a tile sampler for most of the smaller drops, and hand placing the bigger drops.

[@rubenpinedanavarrete1389]

In order to calculate more accurate normals, you should compute the blue channel instead of wiring a 1. You could do as follows: sqrt(1 - saturate(dot(N.r, N.g))) Obviously this is more expensive than just plugging a 1, but also more accurate. Also, I think your issue with the mask it's due to Linear vs Gamma space. As always, nice tutorial!

[@BenCloward]

Yep, generally I would do that, but since it's just for rain drops, accuracy isn't important. IMO performance is more important here since this effect is going to be applied to a lot of things in the world, but also be very small - it needs to run as fast as possible.

[@KhayyamNaghiyev]

Hey, love your tutorials! I recreated the map in substance designer and I got dark background. So as i read the comments answer is yes, gray in alpha channel is not 0.5 or (127) depending where you making it.

[@SenEmChannel]

This is what i need, i will try it tomorrow and tell you guy a result

[@earth2ru121]

9:54 Alpha multiply by 2 and subtract by 0.5 (not by 1) and after you can multiply by constant -1. (A*2-0.5)*(-1)

[@gormdenorm678]

Wow that works. Thanks :)

[@nfrancisj2122]

If your gray is less than .5, it returns a positive number. Try the very fancy Clamp node, with a low Max. This will turn any values not 0 to 1, then you can invert.

[@artourprice2435]

Amazing! Thanks for this content.

[@666nevermore]

Answering to your question at min 10, i guess that's happening because the greyscale is in range of 0 to 1, you cant just *-1 to obtain black. What i did was using the multiply node of the alpha channel into an alpha of a lerp, with range between 1 in a and -1 in b. I still dont properly understand why but i think it's depending on the numbers in the gray scale which are neither 1 or -1. Anyway just that lerp between 1 and -1 gives the result you want. A little more easy to read, if you leerp it from -1 to 1 using that multiply as alpha, you can just than multiply by -1 to obtain the result you wanted to do, but if you lerp opposite way (1 to -1) you dont need to multiply. I hope i'm clear, still quite confused

[@Teleport30206]

this is amazing!

[@borzonstudios8638]

Thanks, looks amazing!

[@malindurashmika8386]

Great tutorial

[@alexanderalikin1210]

Troubleshooting: Just an assumption (I might be wrong). Since base color input takes a value between 0 to 1 and you passing there a value in range between -1 and 1 I'm assuming that Unreal actually remaps this range to zero-to-one range. So, passing -1 turns it into 0, passing 0 turns it into 0.5 etc. Let's test it. white (1): (1 * 2 - 1) * -1 = -1 // should become black grey (0.5): (0.5 * 2 - 1) * -1 = 0 // should become black black (0): (0 * 2 - 1) * -1 = 1 // should become white Remapping this range to zero-to-one makes it like so: -1 becomes 0 (black stays black) 0 becomes 0.5 (black becomes grey) 1 becomes 1 (white stays white) This is exactly what you're seeing in the result. So, in order to solve this you should probably cut everything below zero before plugging it into the color input.

[@BenCloward]

Wow - so you're saying that Unreal looks at the range that I give it and remaps that whole range to the zero to one range? My assumption was that it would just clamp it between zero and one, not actually adjust the range. Very interesting! Thank you for doing that bit of sleuthing for me!

[@alexanderalikin1210]

@@BenCloward They're officially claiming that the base color input clamps values from 0 to 1: docs.unrealengine.com/en-US/Resources/ContentExamples/MaterialNodes/1_1/index.html But apparently, that's not true. Maybe things have changed. Maybe it was a mistake from the beginning in the documentation. Or maybe I'm wrong and there's another reason for the issue.

[@KostasOreopoulos]

Actually this is not true. Adding a clamp or a saturate node after the -1 multiplication does not change anything. That middle gray which is 0 after subtracting -1 should be clamped at 0. Not shown as a 0.5 middle gray

[@lukepawelek799]

So Good! Thank you!

[@seansopata5121]

The weird issue you were having, if you pass it through a Round node rather than a power, it seems to give a good result. Just not sure about the performance difference between the two nodes. Either than, or pass the multiple -1 into a cheap contrast node with a constant 1 as the contrast.

[@BenCloward]

Thank you very much for that suggestion!

[@unreal_engine_az]

thank you very much. Great job

[@易水-w8s]

amazing!

[@alexanderalikin1210]

Would be great if you could share the texture if there're no copyright restrictions of course.

[@BenCloward]

Shared. Link in the description. :)

[@alexanderalikin1210]

​@@BenCloward thank you!

[@doughbrie]

I managed to get the small droplets with a Mul(,-2.5)->Add(,1) straight out of the alpha channel. Should be better than a power, I think. As to the why... Something about alpha being handled differently? It seems really weird. Great video, but this is going to haunt me until I figure it out lol.

[@sensitivemarce]

Superb work and tutorial, followed and get your resouls, so thank you very much. Now; can you explain how to make a particle emitter from this rain drops? would be mcuh apreciated!

[@KostasOreopoulos]

The problem is the gray color. I am not sure if there is any shifting of the gray midpoint color because of the sRGB. Here is what I did to trouble shoot. 1. Added after the Subtract node, and If Node and passed into A the value after Subtract -1 2. Set 0 as B and told to have for A

[@mikkelbugge7299]

Could the problem with the mask be due to noise in the image? I tried two things irt the small raindrop mask, Texture_Alpha->Ceil->Multiply(input ,-1)->Add(input,1). Texture_Alpha->if(input, 0.1, 0, 0, 1) I really like the result of the if-statement, the edges smoothen with a padded threshold such as 0.1, and the ceiling method seems to remove the smallest raindrops, probably because the values are a little above 0. I am really not sure if a boolean node is more efficient than the power node, I've never done shader-stuff before, and profiling is probably required. But from a programming viewpoint I actually imagine the if-statement being quite efficient.

[@MaximeRaynal]

Genial !

[@akianchainey-raymond8570]

Hello all! From what I've tested, doing a simple subtract 0.5 instead of Power 10 seems to do the trick just fine. I'd like to hear your opinions as I don't have that much experience yet

[@turalmemmedov3648]

Another amazing tutorial. Thank you again )) I have a question. When you used power node for the roughness, the smooth falloff became sharp. What could we do about it?

[@BenCloward]

I noticed that as well, but only after I went back and watched the video. I didn't catch it when I was recording. I think it could be reduced by using a lower exponent value for the power. The roughness bit at the end was just for show anyway since I'm going to be replacing it with the wetness shader that I created last week. Once I get done explaining all of the individual effects, I'm going to show how they all fit together. Each of the effects creates a mask and then the mask goes into the wetness shader and that will handle the roughness.

[@LoopSkaify]

Does anyone else have the problem that the mask goes from completely white to completely black? I found out that I have to disable all mip maps on the drop texture, the problem only occured when the mip maps kicked in.

[@Winged4Ever]

@Ben Cloward - The reason why inverting your static raindrops mask does not work correctly is because you got your texture set to sRGB, and you want it to be in linear space, at least for this mask. What you can do is use "LinearTosRGB" node in the first place, just then continue with multiplying and subtracting it. The downside of this is the fact that this conversion node takes more shader instructions than using "Power" node. PS: Seeing that you used two channels to create a normal map inspired me to read more about normal maps in general and I was surprised that there are more types of normal maps used in graphics like Mikk Tangent Space, Bent Normal Maps, and so on. I am wondering If you could make a video explaining these terms more technically while showing some usages in Unreal Engine.

[@KarelChytilArt]

Thanks 😉

[@abilalp9104]

thanks

[@NickJGraves]

Hey Ben, I'm incredibly late to this tutorial. But on the topic of the Power node optimization, would it be more optimal to use a Round node in order to isolate the inverted drops? I would subtract from the inverted drops to get the grey below 0.5 and then use Round and it would smush everything to 0 or 1. You've got some lovely information here, thanks.

[@BenCloward]

That’s a good idea. I’ll test it and see.

[@AkinKumarR]

I figured out the error at 9:45 its because even after everything the grey value still remains more than 0 hence still showing it as grey. So if you use truncate a function that removes decimals instead of power node you should get the same result

[@aliahmed7618]

Nice job! But the last result is a kind of animated chemical reaction rather than a water drop. And I added animation movement to it and it looks weird.

[@iajhy]

Hey Ben, thank you so much for this tutorial! Would you know how can I do this effect on the camera lens, working as a "screen" blend effect?

[@elliotfreestylebeats3973]

we can use if node instead of power

[@breadroll10]

Hello Ben, thank you so much for all the tutorials. Learn a lot. I tried to follow and understand the process of create a rain drop texture, however i stuck at blue channel (temporal offset map). I tried various combination of filter gallery like cutout in photoshop, but does not get the clean result like you have. What method do you use to create the blue channel? Thank you so much.

[@BenCloward]

You can draw a circle selection around each drop and fill it with a different shade of gray. Try to make it as random as you can and use a balanced assortment of bright and dark grays.

[@breadroll10]

@@BenCloward got it, thank you!!

[@marloweghost5097]

In my case it looks like i'm pooring a bucket of drops (most drops are appearing and disappearing at the same time). Can you give me some advice, please?

[@petermu2105]

same problem，up！

[@thomashoys]

Same problem here. Drops are fluctuating, appearing in the same time.

[@thomasrobertson6388]

I came across a similar issue and finally figured it out. You want to make sure that the compression settings for the image are set to "Masks (no sRGB)" and then reimport the image texture into the node editor. Hope this helps!

[@cablekingtv6557]

Hey Ben @10:08 not sure if its a 4.25 issue, as I am working on 4.26 I didn't have to use the power node. Hope that helps!!

[@MushoFutbol]

Hi Ben. Thank you for this tutorials. Can i use this one to make a character crying or there is a better way?

[@BenCloward]

Yes, you could use this technique for that. You would need to adjust the texture of course - but I think this would work fine for crying.

[@MushoFutbol]

@@BenCloward Thank you very much!!! There is no other tutorial for making cry a character in UE4. Your rain tutorials are the best ones. Regards!

[@denkozlov4220]

yes i have a quesiton, how to make translucent shadows from animated raindrops?

[@craftmaster343]

Mine has a strange pulse effect. like it rains for 2 seconds then speeds up for a half second then slows back to normal

[@Kennyshin]

Hi ! I finished all the rain system videos, and it was really very well explained, I learned a lot, thank you very much! Unfortunately I have a problem with the Drop Shader (I think) because up close it works well, but as soon as the camera moves away, there is some shiny waves in the distance. I searched for hours but no way to find a fix and I have triple checked every video > < If someone had this problem before and found a solution, I am very interested ;)

[@BenCloward]

It works best if you fade the effect out at a distance. I should have included that in the video - but there were a lot of other details and so I didn't mention it. If you blend between the model's original normal and the drop normal using a CameraDepthFade node as the Lerp Alpha, that will solve it for you. You'll need to do the same with the wetness. Let me know if you need more help than that, and I'll send you a screen shot of how it could work.

[@Kennyshin]

@@BenCloward Oh thanks for the fast answer ! There's so many nodes and situations, it's hard to create a tuto that covers every little thing. I believe that I have that problem because I'm doing a Top Down Game and my camera is pretty far away. I've tweaked some values in the drop shader and I managed to make the effect disappear if it was too far away, but I lost a lot of details on the drops so I'll definetely try your solution soon :)

[@ElShotte]

@@BenCloward Oh this just had me, and I can't believe I didn't think of the CameraDepthFade solution...

[@Daniel-qt5ib]

@@Kennyshin (6 months later) So I've found that I have a similar issue as the one you described with the shiny waves, and I've been trying to implement the CameraDepthFade solution but haven't had much luck so far (I'm still pretty new to shaders & materials). If you found a way to make it work, would you mind sharing with me how you did it?

[@Kennyshin]

@@Daniel-qt5ib No I didn't find the solution, but the CameraDepthFade seems to be the key to handle it. Maybe you can ask Ben to share a screenshot of the implementation.

[@shakaama]

5:26 did you need that const, couldn't you just put 0.7 in the multiply node?

[@TheSuddipta]

Hello Mr. Ben Cloward, Can you Share your texture creation technique. It'll be helpful for people like me who is not experienced to create texture like you created to get the effect. Thanks.

[@BenCloward]

Here's a video tutorial that shows how to make the rain drop normal map. The only thing this video doesn't show is making the alpha channel where every drop gets its own unique shade of gray for the temporal offset. I just did that by hand. kzbin.info/www/bejne/j5PMiWV8ndKfl7c

[@TheSuddipta]

@@BenCloward Thanks a lot.

[@matiasbloisi3102]

Hi there! Do you know how to make a windshield wiper out of this material? I've read that it could be with a progress bar, but I don't know how to do it, do you? Thanks for your tutorials

[@thibautm624]

Hello Ben, I've been following your tutorials to make rain but I'm kind of stuck here. I've tried to make the texture myself , exported in tiff and lookin it in unreal, every channels seems setup just like you. But I run into 2 issues here, first one is that my normals look inverted, might be something I can fix with some tweaks in the calculs. Second is that when plugging my whole node that makes animated drops, it doesn't animate when plugged into normals but it does when plugged in base color. Do you have any idea what might cause that? Also I've been trying to download your texture to figure out what I did wrong (because I suspect it comes from how I imported or exported my texture from photoshop. ) but your download link seems dead. Thank you, your tutorials have been great so far !

[@BenCloward]

Right click on the texture link and choose "Save link as..." If it tells you it can't do it securely, click on the up arrow and choose "Keep" If you'd like me to troubleshoot potential issues with your graph layout, send me a screen shot at [e-mail]

[@thibautm624]

@@BenCloward Thank you for your quick answer ! I actually managed few hours ago to fix my material. I reworked my texture and found a stupid mistake I made not setting a component mask correctly that was causing the issue with the node linked to the normal not animating. Went on to following the rest of the tutorials and everything been going smooth since then. Keep up the great work !!

[@LANA-xm5fg]

Can i use clamp instead saturate or frac.....because all of them do the same job as i see

[@BenCloward]

Yes - but be aware that Clamp is more expensive. Saturate is essentially free, but Clamp has a cost - so you should only use Clamp if you are clamping to a range other than 0-1.

[@LANA-xm5fg]

@BenCloward thanks for the useful advise ♥️♥️♥️♥️

[@ShaderGhost]

For the Raindrop Texture, What compression setting did you use in UE4? Using the Normal map in R and G channel and using a mask in the B channel is a neat trick since the Blue channel is plain. I should start doing that but I'm just curious whether or not you're using the Normal Map texture compression or if its some other texture compression?

[@BenCloward]

I'm using the UserInterface2d (RGBA) setting for that texture. That means it's uncompressed. In order to get that to fit in memory better, I have a LOD Bias setting of 2 - meaning the first 2 mips are skipped and the max resolution is 512. That's an important setting since the raw file is 2048, and that's WAY too big for an uncompressed texture. I only use uncompressed texture settings on textures that are small and that I know will be shared across a lot of meshes in my project. This one has the potential to be used on everything - so it's OK to use a bit more texture memory for it. If it's a texture that's just going to be applied to a single model, you probably shouldn't use uncompressed. Also be sure to turn off sRGB.

[@ShaderGhost]

@@BenCloward Ah I see. So what's the optimum texture compression for a single model while retaining the Normal map settings? I'm thinking of channel packing my masks/emissive maps in the B channel from now on when I don't have a free channel in my RMA Texture. I could use the alpha channel of the RMA texture but I was told that the alpha channel practically doubles file size as opposed to RGB textures.

[@plasid2]

Can you make from this dew effect on grass when is sunny morning and water drops reflection Sun and bloom? or How add texture leaf and drops on it?

[@BenCloward]

Yes, you could use a similar technique to make dew drops on leaves. You would need to remove the animated portion of the shader and just make the drops stay still. And I recommend using UV space to project the drops in stead of world space as I'm doing here.

[@plasid2]

@@BenCloward Thx but honnesty I am noob and try 2h and effect is terrible ;) Pls make some day video doing this right, I am sure many people like this

[@ВладимирСергеевич-е7з]

Hello Ben, is it worth using the SINE node instead of the FRAC node and will it affect the use of resources?

[@BenCloward]

SINE will give you a different behavior that FRAC. SINE gives you a smooth wave while FRAC gives you a saw tooth shape. It might work, but it depends on what you're going for I guess. I don't know which is cheaper, but I don't think there's that much difference in terms of cost.

[@ВладимирСергеевич-е7з]

@@BenCloward Thank you, indeed, I have already noticed the difference in the result

[@macoveialex6823]

I found the textures on google and I see that you have the Green channel upside down (the darker side is on top). does this impact the lighing? Should I also change it?

[@BenCloward]

Dark side up in the green channel is the standard format for Unreal Engine tangent space normal maps - so yes, any normal map you make for Unreal should be that way. Otherwise the drops will be shaped incorrectly.

[@t.884]

Could u please provide the "yellow Picture" i allready got the normal Map u used but it will be easyer for me to follow this

[@BenCloward]

Shared. Link in the description. :)

[@tbunreall]

Hi, as a shader artist at a game studio, are you expected to make these texture masks yourself, are does an texture artist make them and supply them to you to work on? It would be nice to have some info on how you make them! Thanks.

[@BenCloward]

Great question! This depends on a lot of things. It depends on how skilled the shader artist is at creating textures, what type of relationship the shader artist has with the other artists on the team, etc. Some shader artists are better at heavy math and some art better at art. In this particular case, I will say that these rain drop masks where created by the shader artists. Most frequently, textures like these that are very specialized and specific to the shader are created by shader artists. Whereas, more general textures like base color, smoothness, normal map, etc, are created by the character artists and environment artists.

[@tbunreall]

@@BenCloward Thank you! Your channel has really inspired me to become a shader artist as a hobby, but who knows, if it ever lead to more I would like to be prepared and know what is involved / expected in a professional setting.

[@TheDevBlock]

Hello Ben! You rain drop texture is it cc0 license?

[@JeremyWade3D]

Anyone know how to correct the pulsating effect of the drops creation? They all appear very quickly near the same time and are not evenly spaced out.

[@BenCloward]

The blue channel of the texture has the values in it that control when each of the drops appear. You could try editing that to try to space the drops apart in time more evenly.

[@JeremyWade3D]

@@BenCloward Thanks! I actually ended up just making a whole new custom image and yep, I had to mess with the brightness/contrast until the timing was more even.

[@BenCloward]

@@JeremyWade3D Nice! Glad to hear you got what you were looking for.

[@tsp706]

Thought I'd put this here for anyone else struggling with this: You should be able to fix this by clicking on the texture sample in the material editor and in the details panel on the left there's a section called Material Expression Texture Base. If you change the sampler type from "Color" to "Linear Color" that should fix the pulsating effect.

[@timo1234331]

Do you have a video or know of a video that explains how you made that rain texture in photoshop? thanks

[@BenCloward]

Here's one: kzbin.info/www/bejne/j5PMiWV8ndKfl7c

[@AImagery4444]

Hi Ben, Could we use the "RemapValueRange" to avoid the issue at 10:17?

[@thegreatSalu]

Hi Ben I created my own Rain with Naigara particle effects, will this material work with my project? I've got a person standing in the rain so that I need this material for that

[@BenCloward]

Yes, this is a nice compliment to particle rain. It’s the surface response to the rain particles.

[@thegreatSalu]

@@BenCloward Right, I came back this tutorial again..The problem that I have now is I have applied this material to character, but how do I apply the textures that I have created for the character?

[@1_Man_Media]

This tutorial has been a big stumbling block for me. My art / Photoshop skills are tragically super poor and trying to make this texture has really stalled me out. I am just a coder trying to learn shaders I basically had to bookmark this tutorial and start watching Photoshop tutorials to try and make a texture that sadly looks way off from yours :P Is there any way you can put your texture up for download on drop box or purchasable for a reasonable price on gumroad or something else so I can mimic your results more closely?

[@BenCloward]

My original intention was to not share my textures. I had intended my channel to be about teaching people how to do things, and not just giving away free stuff. But in most of my videos I don't spend enough time going through the process of explaining how the textures are made - so I understand that they're tricky to reproduce - especially for someone who isn't familiar with photo editing software. So - for all of my videos that use textures that don't ship with Unreal, I have now posted links in the description for where to download them.

[@1_Man_Media]

@@BenCloward that is truly fantastic Ben thank you so much. I know it seems weird that this part is confusing for people like me but honestly my talent lies in coding game mechanics and deep game systems. I want to make games solo and have been working hard to learn how to model using blender from many udeemy classes and youtube tuts. Next I have been training with mixer / substance for texturing models and then shader stuff to make use of those created textures but nowhere along that path have I done any texture creation. Especially with the huge amount of free textures that exist I just haven't had to learn that aspect yet, I only looked into mixing metallic / roughness / ao / displacement maps into 1 texture for performance. At the end of the day I want to learn this aspect as well especially as I see you creating custom masks for stuff such as your tree branch, I thought the effect you created was quite realistic. I generally just use a simple grass wind and call it done, but I do want to get to know all sides of texturing, masking, and shading to create amazing effects. I really appreciate the texture upload in the meantime though this allows me to follow your work much closer and helps me get back on track with your tutorials( I have had this page open since this morning while trying to learn to make or find similar textures online). So thank you very much.

[@paracelsus_rose6934]

@@BenCloward Start up a patreon, I would gladly contribute.

[@hammertl2673]

Maybe a dumb question, but confused why have to unpack the animated mask from alpha channel? The range of alpha channel is 0-1, why convert it to (-1,1) and then clamp it back to (0,1). And What is the grey part of animated mask working for?

[@BenCloward]

The alpha channel has two masks packed into it - both static and animated drop masks. When packed, the range of the static drops mask is 0.5 to 0 where 0.5 is "off" and 0 is "on". The range of the animated drops mask is 0.5 to 1 where 0.5 is "off" and 1 is "on." So for both masks, grey is the "off" state. We want to adjust the ranges of both masks so that they go from 0 to 1 where 0 is off and 1 is on. So to do that, we multiply both by 2 and then subtract 1. Now the animated mask goes from 0 to 1 - but it still has the extra data that's less than one, so we use the saturate node to get rid of everything outside the 0 to 1 range. For the static map, it's range is now 0 to -1 so we have to multiply it by negative 1 to flip the sign. I hope this helps. Let me know if there are things you still need help with.

[@hammertl2673]

@@BenCloward Really Thanks! I am your super fan now!

[@psy237]

anyone got any great free or perpetually available software that allows for EASY channel management of images, so you can say what mask or image-data belongs to what color-channel (rgba)? edit: well just did it easily with substance designer^^

[@jasmdc]

Thank you so much for this tutorial! I have one question, everything works fine except a part of the drops appear at the same time in a pulsing manner, instead of appearing and disappearing in separate times. I have followed the tutorial twice now but I seem to get the same result, any idea where I should be looking to fix this? It makes the rain drops very unnatural unfortunately..

[@BenCloward]

I don't have your results or your graph, so I can't tell you exactly what's wrong with what you did. However, the part that offsets the timing for each of the drops is the mask found in the blue channel of the texture. I explain that part of the shader starting at 5:27. Go from there until 7:28. If you make the graph shown at 7:28 - do you get the same result with the drops blinking at different times, or are they all in sync?

[@funkyskunk2]

@@BenCloward I have the same issue as JD. At 7:28 they arent random, most hit at the same time then a small smattering trails off. Its a pulsing effect like he said. If I go into photoshop and edit the blue channel I can improve the randomness by going to image>adjustments>curves and applying a violent up and down curve to try and randomize the shades of grey(which are of course the blue channel). The blue channel in your vid looks identical to the one i downloaded so i don't understand why it is pulsing, everything else in the video works perfectly!

[@funkyskunk2]

changing the texture compression settings to masks fixed it, thanks to P. Jan Krojcer's comment down below

[@Spamap]

The animated raindrops on mine are all animating in sync, so it doesn't look right, any ideas as to what I can do to fix this?

[@BenCloward]

The offset for the timing of the drops comes from the alpha channel of the drop texture. Si be sure that the alpha data is there in the texture and that the texture format is set to allow the alpha to be used.

[@marcusrivers5669]

Hi, Ive tried to follow this 3 times now, and used the provided texture, but my rain animates all at once (like someone threw a bucket) rather than uniformly distributed over time. I've tried everything - my nodes are exactly the same! What is likely to be happening?

[@marcusrivers5669]

Well, a few of the drops appear over time so in theory itsa working, but most appear in one group and spoil the effect, is this just a`n inherent problem with the texture?

[@marcusrivers5669]

So I made my own texture which I know has even distribution in the temporal channel for the time component and IS evenly distributed so there is a problem with the supplied texture. But anyway, Fantastic set of tutorials!

[@marcusrivers5669]

Well to finally ram home my stupidity - I read below and find its all because I did not set the compression and sampler type to mask!

[@BenCloward]

So you got it all working? Hope so. A lot of people have been getting tripped up by that texture setting. I should have been more clear about that.

[@marcusrivers5669]

@@BenCloward Yes thankyou, its working great and I've already programmed totally different ideas using this temporal technique: But on with the tutorials -- Some of the best ive seen.

[@haozhao1493]

Hi Ben, may I ask what is the license of these texture you shared? Thank you

[@BenCloward]

I give you permission to use them for whatever you like.

[@haozhao1493]

@@BenCloward Would you mind adding some unrestricted license like Creative Commons Zero for those resources? That will be very helpful for the community as well. Thank you.

[@BenCloward]

How do you want me to add that? I don’t have a lot of patience for lawyer stuff.

[@FischersFritze12]

The Link to Assets u are use isbroken

[@nodelayfordays8083]

How to make the texture/normal map?

[@BenCloward]

Here's a tutorial that shows how to create the rain drop normal map. kzbin.info/www/bejne/j5PMiWV8ndKfl7c

[@azhariqbal12345]

Material function ?

[@BenCloward]

If you look at the description for episode 18, I've linked a screen shot there that show what the material function looks like: kzbin.info/www/bejne/qobInn2CiMZ5rtk

[@azhariqbal12345]

@@BenCloward Thanks 🙏 Your tutorials are making my life easy as new 🐝 in unreal world 😎

[@waltage]

drops make shadows. so this way isn't realistic(((

[@BenCloward]

The method that you chose for the drops depends a lot on the camera distance and scale that you're going to use. If you're planning on zooming in so that the whole screen is filled with just the drops, you'd probably want to use a different technique. This technique is designed to work well from the perspective and distance of a third person game camera - and to use as little texture memory and rendering resources as possible. If you'd like to share another method, I'd love to see it!

[@PasswordRejected]

Texture link doesn't work

[@BenCloward]

Right click on the link and select "save target as..." or the equivalent for your browser.

[@llllIIIIlllIIIlll]

@@BenCloward wow!!! Thanks~!!!!

[@ashy49592]

@BenCloward how to change the color of the droplet ? . let's say red for blood or brown for dirty water

[@skysun-s5f]

Would be great if you could share the texture if there're no copyright restrictions of course

[@BenCloward]

The texture is linked in the description - but here it is again, just for you! www.bencloward.com/youtube/rain_drops.tga