How to use Noise Textures and create simple Shaders in Godot

hey and welcome back today i want to talk about noise textures why i find them so useful how to write some simple shaders and how to generate them in the first place so before we jump in i want to let you know that all the files in this video are in github so you can download everything there if you want to look at it at your own pace i want to start by showing you some example uses for a noise texture inside a shader so let's create a new shader and set the shader type to canvas item because we are going to make a 2d shader i'll set up a new uniform using a sampler 2d type and call it noise image i set up the fragment function of the shader and when i create shaders i always try to build them bottom up so my first step is now to assign the new texture to the color of the shader you will see a white sprite that is because we didn't yet assign a texture to the uniform we created by doing that you can see the texture you may think now what is this colorful mess this is because each color channel of the texture has a different noise to it by adding dot r.g or dot b inside the shader we can have a look at the different channels separately it's maybe a bit confusing in the beginning the first time you use a texture like this but in the end it's very practical and saves some space i'll enable all color channels again by adding dot rgb let's see what we can do with this kind of texture my next step is to use the original sprites textures alpha channel inside my shader to do that i write color dot a equals texture and inside there i write texture in capital letters and this will take the sprite's texture another dot a and you can see the edges use the original icon.png alpha channel now i want to animate the noise texture to do so first i need to set up a vector2 variable called uv and i use the original uvs of the sprite i'll use this newly created variable down at the color rgb assignment and replace the original uv values you will see that nothing changes and that is a good sign so nothing broke to animate this now we add plus time to the uvx value of the variable now you can see it looks a bit strange so we have to enable repeat and ta-da the texture is moving my next step is to separate each channel of the image and have it move into a different direction to do that i create a new variable called new color and combine noise r noise g and noise b which will be variables i'll set up in a second i set up the first new variable as a float type and call it noise underscore r so let's write texture use the noise image that we assigned in the inspector and use the uv variable from above and only use the r channel by writing dot r now let's copy this over two times and change it to the green and to the blue channel again everything works and nothing changes so it's a good sign and we can replace the color dot rgb with the new color variable and everything seems to work now let's copy over the uv variable two times and let's make things a bit more interesting by subtracting time here and moving this over to the y-coordinate we still have to rename the variables to be unique and change the shader code below to use the new variables and now you'll see that each color channel moves into a different direction i want to be able to control the speed of the shader so let's set up a new uniform float called speed i'll assign a value of 1 as a default value now let's multiply time by speed in each of those variables after doing so we can control the speed of the animation with the property inside the inspector of the shader parameters it starts to look really trippy so let's make this useful let's add a new variable type float called new alpha and now i just multiply all the different noise variables to make the next steps better to see i'll comment out the color.rtb line and i'll be using the new alpha variable as the colors alpha now you can see where this is heading i still want to use my original sprite texture's alpha channel so i multiply it with the new alpha variable as you can see above we have back the edges of the original texture's alpha in the next step i want to get back my original sprites texture's color and to do so i'll just add color.rgb and use the original texture you can now see that the effect is very weak so let's multiply our alpha variable by let's say 10 now the effect is much more visible we can try to go for 100 and you can see a little problem if the shader's alpha value is over 1 you will get some artifacts so we can easily fix that by adding a clamp and limit it to one like this we can safely play around with the value create some interesting effects and not get any artifacts in the next step i want to be able to set up my fox color in the inspector to do so i add a new uniform with the vector4 type and add colon hint color to the end of it and now i can select my color in the inspector right now it doesn't have any effect because i don't use the variable let's do so and edit below here don't forget the semicolon as always inside the shader and also add the dot rgb to get it working now let's reduce the speed some more and you'll see it already looks pretty cool now i want to replace the original texture of the sprite with something a bit more interesting like this light texture you can grab this textures and many more from another demo project i'll have on my github i'll put a link in the description now it looks much more interesting and by playing around with the colors especially by using hdr values you can get some really cool effects going with a simple shader and a simple texture now i want to show you some more example things we can do with such a shader i duplicate the scene and make all the resources unique let's revert the texture change and go back to our trusty godot icon that we all love i also don't want this shader to use the alpha channel of the texture so i remove this bit inside the shader let's add a new uniform sampler to called gradient texture now in a new slot in the inspector select the gradient texture but wait a second did you just see what i saw you can also select the noise texture here so why didn't i do this let me explain why so i quickly set up the noise texture and made some little changes inside the shader and while it perfectly works you can observe overlapping and repeating patterns inside the shader this is because it only uses one texture while it's super practical to be able to change the noise's parameters i would skip this technique because you have to use three textures to get the same effect as before and that is not very performant so let's go back to our gradient texture and to our original plan i set up a new variable to use the gradient texture from the uniform don't forget that a float is only one value and to make this work we have to select one channel of the gradient let's go with red my favorite color to make use of the new variable multiply it with the alpha value and we'll have a nice gradient inside the shader by modifying the gradient inside the inspector now you can change the appearance of the shader quick and easy to rotate the gradient by 90 degrees i'll change the uv up here to a vector2 variable and i switch the x and y channel of the uv like this it is rotated now by simply changing the color and the grade in a little bit it already looks pretty interesting you can also change the direction of the movement by changing the values here and like this you'll get an upward movement which looks a bit like fire or something going upward you can also make the different channels scroll at a different speed which also makes an interesting effect or you can change the scale of the uv itself to have different sizes of noises by multiplying certain channels more than once you can also make the shader more interesting sometimes you also want a minimum value inside the shader's effect to do so you can just add a value to the alpha in this case i use the gradient and multiply it by a smaller number to make it a little bit more obvious now with these small use case examples out of the way let's move on to noise generation to generate seamless noise textures i set up a simple scene which i often use the scene has a little script that just snapshots the viewport and inside the viewport is the noise this noise gets modified with sliders so i can play around and have a preview and when i'm happy i can press the save button and the texture gets saved to its destination by the way you can use this script to make screenshots of your game or screenshots of certain objects this is very practical after running the scene i can play around with the sliders until i'm happy with the result different textures give completely different effects when used inside a shader so i try to play around sometimes it can be really interesting to add different kind of noises to one shader or one texture when i'm happy with the current settings i can press save change the seat a little bit press save again change the seat press save again and like this i'm having three textures saved now load the three textures inside your favorite image editing program like photoshop or krita and combine those three textures inside the color channels of one of those textures so i can just copy and paste over the textures into the green and blue channel and then i'm ready to use this texture for my shader thanks for watching if you enjoyed this video and maybe learned something you can subscribe to my channel and stay up to date with new tutorials if you're interested to talk to really nice people you can join my discord server it's still a small community but some great people there let's have a nice hot cup of chocolate talk about some good stuff talk about your games it's really nice so make sure to check out the link in the description and join it if you like so that's it for today back to your project rock some code show it and share it with us on the discord and see you the next time bye

Channel: picster

Views: 7,767

Keywords: godot, game development, shader, shaders, code, tutorial, how to, godot engine, engine, game dev, development, game, effect, easy, 2d

Id: IvOfx-kbqac

Length: 12min 42sec (762 seconds)

Published: Fri Feb 26 2021

Reddit Comments

[u/golddotasksquestions]

This is really well explained. I love how you go through the development of the shader as if you would just come up with it, rather than go through the finished result line by line!

Also there are some really nifty tricks in there I had never considered using, thanks so much for sharing!

[u/RPicster]

Hey everyone! Another week, another tutorial. Slowly I get a bit faster at making them, but it still takes a whole evening.

​

Anyway, I love to be able (or at least try) to give something back!

​

I also put the whole example scene on GitHub, you'll find the link in the description.

I hope it helps a bit for some people to also have a small peek inside shaders, it took a while until I got a basic understanding about it, so this may be a good way of starting out.

​

If you have questions or feedback, please let me know! I always try to improve my content!

If you are interesting in sharing your projects, work in progress stuff or talk about general Godot / Game / Art stuff, feel invited to my small Discord Community!

https://discord.com/invite/JU3y5WkQ4g

[u/pend00]

That was very useful! Thanks for sharing! Would be really nice if it was possible to choose a multi-channel noise texture directly from the Godot Resource picker.

[u/Zalmerogo]

Great tutorial, thanks for sharing! Your games are awesome.