Quick note on grayscaling: averaging the three color channels does not result in an "accurate" grayscaled image. Because humans see some colors more intensely than others, we have to multiply the color channels by different weights to get an image that is truer to the original. For RGBA (which Godot uses), it's 0.299 * R + 0.587 * G + 0.114 * B.
fun fact, this is equivelent to a dot product operation, meaning you can do dot(colour.rgb, vec3(0.299, 0.587, 0.114)) making it easier to swap out different blending amounts/source colour mixtures
just an update for the people who will be using Godot4 in the future and see this video: "hint_color" was renamed to "source_color" so if you have problems with this don't worry.
The most difficult thing about shaders is, that it is most often not straightforward to understand what action will have what effect (and vice-versa what effect needs what code) until you have played around enough to have a perfect feeling about it. For example I would have no idea how to implement a swirly distortion effect, though I know it's possible. Shaders are so powerful (and performant as they use the GPU) but so intimidating at the same time. At least I managed to write my own dissolve shader without sneak peeking the solution. What I did not get at all in the very beginning but I think is crucial to understand right away: The keywords (TEXTURE, ALBEDO, etc.) and the functions (fragment, vertex, etc.) are pre-defined. E.g. The fragment function is calculated for every pixel and the keywords provide the respective data about this particular pixel. When I was looking at other people's shaders to learn about the topic I was utterly confused, why were there variables written or read that were not defined etc.? How are these executed in the first place? One of your older videos was the one that gave me the final click in my head and now I'm trying my own stuff. Think I will rewatch the particle playlist once more.
Absolutely agree, it's a different mindset than the usual imperative programming. You may try the texture-based distortion shader we show in the video. Congrats! :) Yup, good point!
Indeed, I have a hard time 'thinking' in shader from scratch. I need a cookbook of shader solutions that I can then tweak. If the Furcifer team ever wanted to make a Godot specific version of that, I would be a happy coder.
Amazing work on this video! I'm getting pretty good at godot, but shaders are for me still super strange and a total different way of programming. Most turorials do only pure code or pure theoretical stuff, i like how you combined the two and show how the principles are actually applied. Please make a part two, i think you're doing amazing work and helping lots of starting developers!
This is the best shader examples video I've found. Thank you so much! I found I can compare different aspects and build a working knowledge by stepping back through the video to any part I'm unclear on since you have established context for each example so well. That's a very good way to teach. It's also rapid-fire enough to not bog down in details that can distract or confuse. It's important to learn fundamentals, and you have them in here in the most succinct fashion imaginable. I love that there's NO wasted time in this video at all. This one is getting added to my bookmarked links for sure.
If following along in Godot v4 (version 4) the mirror option has been moved from the import to the inspector under Texture -> Repeat -> enabled in the CanvasItem section. I think it actually makes a lot more sense to have it there that the import stage, so that's likely why it was moved.
You two have unique gift and talent. İn such a short time, you give all the idea and knowledge which increases the curiosity and courage. When the video finished, i was sad about where is more. Hope you continue to give efforts and time in order to publish New ones. İ believe i will be no disappointed for those. No correct words to explain. Simply Thank you 😄
You are my absolute hero. Bare minimum I saw ways to do cool screen transitions and whatnot when loading menus, caves, indoor/outdoors, and battle scenes. Thanks!
Yes! Please do a part 2 (and 3... and 4...). Can you talk about how to apply shaders to things in 2D that are not bitmap images? Things like Godot's Polygon2D, Line2D etc? And also how to apply a shader to a whole Godot scene which could be composed of multiple different parts - Polygon2Ds / UI Control nodes / bitmaps etc? Thanks, and keep up the great work!
Thank you! This was the most helpful tutorial on writing and using shaders I have ever seen. Several things that weren't clear to me clicked into place nicely.
Funny videos, your accent does the trick haha! I follow your channel for a long time, it even inspired me to create a Godot shader course on my own, keep it up!
Shaders are super useful but it's intimidating. I usually go around and copy-paste what I see online without understanding so I never learn. Nice overview, I enjoyed it and it got me interested in understanding it more so I can use it more efficiently!
I was unfortunately never able to fully wrap my head around shaders and how to achieve the effects I want.... especially since I find them hard to debug (I usually use way to many print statements, which I can't do for shaders) and my math is sometimes a little bit off, let's put it that way. Coincidentally, I resently stumbled upon a video by Indigo Quilez - he "paints" beautiful images, just using math. He has great tutorials on that, and I found that trying to understand and replicate some of that helped me a ton with the math you need for shaders. I think this video is amazing for people who start out using shaders and I'd love to see a part two!
What surprises me the most is how easy it is to do that with Godot compared to Unity, plus the shader fields you can provide: generated textures, curves, wow it's the future xD Even gradients are not supported in Unity!
Oh man, I actually feel like shaders maybe arent so scary.. been avoiding them for a long time but you've made me feel like it's not as intense as it seems... Thanks :)
This video was great. I used the first shader to make my player and enemies flash when taking damage. The second shader was amazing because I previously didn't know how to make a shader that affects the whole screen or part of the screen. I'm working with a limited color palette in my game and I used the shader to make a color replacer which scans all the colors on the screen and changes them to a hue of your choice but only uses exact colors from the palette. I cant really explain it properly but it ends up being like gameboy color where you can choose between a bunch of color palettes.
I've always had problems understanding shaders and how to actually program them. This simple video feels like its made me understand so many things that didn't quite click when I was last playing around with them. Might have to give it another chance now!
Great question! Basically, the texture gets streched to the same size. A UV of (0,0) is always the top left, and (1,1) is always the bottom right. If you reduce the texture resoltution, it will look more pixelated. So the fragment function runs for each screen pixel, and can sample texture pixel multiple times or not at all.
interesting what can be donde with few lines of code, at least in godot. And these look amazing. And the 3D version: just wow! makes me want to try it.
Thanks to you I made my first steps into shaders. How I can apply a shader to a scene transition? this is something that I cannot find it yet. Thanks for your great videos
Grayscale is not an average btw. grayscale = dot(COLOR, vec3(0.21,0.67,0.12)); is more accurate, as the human eye responds differently to red, green and blue in terms of perceived brightness/value/luma.
It really depends on what you want to do with it. We use it to index a gradient later in the video, where averaging makes more sense imo. ALL versions of calculating greyscale on RGB are inaccurate. RGB itself is a rough approximation and there is not *the* human eye we all have to share fortunately. The RGB-weights are WILDLY different if you use your grayscale to simulate an old camera for example. Just use the one fitting to what you want to achieve, there is no single *right* one. And you multiply a vec4 with a vec3.
Having coding experience helps a lot. Apart from that: Mostly looking at breakdowns of specific effects. (We have a bunch of those on the channel) Shaders are weird but once you get used to them its not that hard.
Quick note on grayscaling: averaging the three color channels does not result in an "accurate" grayscaled image. Because humans see some colors more intensely than others, we have to multiply the color channels by different weights to get an image that is truer to the original. For RGBA (which Godot uses), it's 0.299 * R + 0.587 * G + 0.114 * B.
fun fact, this is equivelent to a dot product operation, meaning you can do dot(colour.rgb, vec3(0.299, 0.587, 0.114))
making it easier to swap out different blending amounts/source colour mixtures
Get to Heaven is so dope!
@@bonniefinleyanimation lol i literally had the same thought ! best rock album i've ever bought hahah
@@iidoyila are you both spammers or is this some reference I'm not getting?
@@foobars3816 Eli's Profile pic is the album cover for Everything Everything's - Get to Heaven (2015)
For people who are using the latest versions of Godot (idk the exact time this was changed):
*hint_color* has been renamed to *source_colour*
Thank you!
i've always been confused with shaders. now this video's got me hyped 👀
Go make pretty stuff!
just an update for the people who will be using Godot4 in the future and see this video: "hint_color" was renamed to "source_color" so if you have problems with this don't worry.
With almost every tutorial I find myself searching through the comments for the updated names . . . . Thanks!
The most difficult thing about shaders is, that it is most often not straightforward to understand what action will have what effect (and vice-versa what effect needs what code) until you have played around enough to have a perfect feeling about it. For example I would have no idea how to implement a swirly distortion effect, though I know it's possible. Shaders are so powerful (and performant as they use the GPU) but so intimidating at the same time.
At least I managed to write my own dissolve shader without sneak peeking the solution.
What I did not get at all in the very beginning but I think is crucial to understand right away:
The keywords (TEXTURE, ALBEDO, etc.) and the functions (fragment, vertex, etc.) are pre-defined. E.g. The fragment function is calculated for every pixel and the keywords provide the respective data about this particular pixel.
When I was looking at other people's shaders to learn about the topic I was utterly confused, why were there variables written or read that were not defined etc.? How are these executed in the first place? One of your older videos was the one that gave me the final click in my head and now I'm trying my own stuff. Think I will rewatch the particle playlist once more.
Absolutely agree, it's a different mindset than the usual imperative programming.
You may try the texture-based distortion shader we show in the video.
Congrats! :)
Yup, good point!
Indeed, I have a hard time 'thinking' in shader from scratch. I need a cookbook of shader solutions that I can then tweak. If the Furcifer team ever wanted to make a Godot specific version of that, I would be a happy coder.
I always wanted to get into shaders but never did. This might be it, this made me motivated.
Yeah, at first.. and second sight it looks hard. D: But when you wrap your head around it, it's so worth it! Fun and powerful at the same time
Totally agree with you Jakub :)
@@PlayWithFurcifer Sphere Matchers genre (like Luxor, Pirate Poppers...) with Godot please
1. Getting Started
2. Create Background
3. Create Sphere
4. Path Vertices, Map
5. Tracing and Making Paths (Basic)
6. Powerups (Reverse, Slow, Stop, Pointer, Multi Color, Color Bomb)
7. Level Switch
8. Tracing & Making Paths with Tunnels (Advanced)
9. Double Path Levels
10. Level Speed Variables
11. Music and Sound Effects
I‘m overwhelmed as I have no clue what most words mean but I finally understand why shaders are ‚a thing‘
I count that as a win!
Do you have any specific questions?
Amazing work on this video! I'm getting pretty good at godot, but shaders are for me still super strange and a total different way of programming. Most turorials do only pure code or pure theoretical stuff, i like how you combined the two and show how the principles are actually applied. Please make a part two, i think you're doing amazing work and helping lots of starting developers!
Shaders are just *weird*, but you get used to it eventually. Thank you! We will start preparing part 2 :)
This is the best shader examples video I've found. Thank you so much! I found I can compare different aspects and build a working knowledge by stepping back through the video to any part I'm unclear on since you have established context for each example so well. That's a very good way to teach. It's also rapid-fire enough to not bog down in details that can distract or confuse. It's important to learn fundamentals, and you have them in here in the most succinct fashion imaginable. I love that there's NO wasted time in this video at all. This one is getting added to my bookmarked links for sure.
This is the single most helpful video I have ever watched in helping understand shaders. This is incredible
Amazing! Thanks :)
If following along in Godot v4 (version 4) the mirror option has been moved from the import to the inspector under Texture -> Repeat -> enabled in the CanvasItem section. I think it actually makes a lot more sense to have it there that the import stage, so that's likely why it was moved.
i didn't understand half of this, as i'm completely new to coding, but it was really entertaining.
That's good :D
Don't worry, shaders are kinda advanced
I've actually got a really good idea gor a top down 2d survival game, somewhat simmilar to Astroneer. This knowlege is gonna be usefull.😅
You two have unique gift and talent. İn such a short time, you give all the idea and knowledge which increases the curiosity and courage. When the video finished, i was sad about where is more. Hope you continue to give efforts and time in order to publish New ones. İ believe i will be no disappointed for those. No correct words to explain. Simply Thank you 😄
Aww, thats so nice!
You are my absolute hero. Bare minimum I saw ways to do cool screen transitions and whatnot when loading menus, caves, indoor/outdoors, and battle scenes. Thanks!
This is excellent. Just seeing all the different things you can do very simply (and why that works) was a great overview!
Thanks! :)
Always hyped to see a new video from this channel! I always learn so much, thanks for sharing 😁
Thanks for watching :)
Yes! Please do a part 2 (and 3... and 4...). Can you talk about how to apply shaders to things in 2D that are not bitmap images? Things like Godot's Polygon2D, Line2D etc? And also how to apply a shader to a whole Godot scene which could be composed of multiple different parts - Polygon2Ds / UI Control nodes / bitmaps etc? Thanks, and keep up the great work!
Such a helpful video. The last part about converting shaders helped me so much! Thanks for these videos!
ima have to watch this like 34k more times to even expand 1 pixel of my brain enough to understand
THIS IS SO GOOD! You explained so much, in so little time, and so easy to understand!
I have no programming knowledge, but this actually helped me understand nodes in blender a lot better.
Love your vids dude, super interested in 2d shaders right now and this was awesome
:)
Thank you! This was the most helpful tutorial on writing and using shaders I have ever seen. Several things that weren't clear to me clicked into place nicely.
Have you used shaders? What's your experience?
Edit: Part 2 is up now! ruclips.net/video/KVTa2xkly1g/видео.html
I've used shaders together with particles - you should definitely make a video on that topic!
First pain..
Then joy, eternal
My experience is: copy, pasting, hoping it works... And if it does, I animate it via the animation player.
Never have but now I will. Thanks for the video
I have been using shaders for years now, and all I can say is that they are very fun and powerful.
Funny videos, your accent does the trick haha! I follow your channel for a long time, it even inspired me to create a Godot shader course on my own, keep it up!
Amazing amount of content in a clear video. Shaders just became much clearer to me - thanks!
Great to hear!
Thank you so much for making videos about Godot especially about the Shaders!
:)
Ok, i never thought shaders were this cool. Amazing video gives the basics to build on.
Whaaat 😮 My mind is blown, can't wait to play with this when I get home from work! Thank you!
So much information in so little time, yet well explained and easy enough to understand. Great stuff!
Shaders are super useful but it's intimidating. I usually go around and copy-paste what I see online without understanding so I never learn.
Nice overview, I enjoyed it and it got me interested in understanding it more so I can use it more efficiently!
Love the way you broken down shaders, quick and simple!
This is so dense with good hints! Great video tutorial!
Thank you! :)
3 seconds in and it's already awesome!
Beautifully explained in 7 mins
Thank you! :D
PART 2! WE NEED A PART 2!!!
Coming up today :)
Wow i did not know about the screen texture. This makes it so much easier! Thank you :D
It makes the coolest stuff possible :)
That must be the best shader tutorial there is
Really nice explanation, subbed!
Thanks :)
I was unfortunately never able to fully wrap my head around shaders and how to achieve the effects I want.... especially since I find them hard to debug (I usually use way to many print statements, which I can't do for shaders) and my math is sometimes a little bit off, let's put it that way.
Coincidentally, I resently stumbled upon a video by Indigo Quilez - he "paints" beautiful images, just using math. He has great tutorials on that, and I found that trying to understand and replicate some of that helped me a ton with the math you need for shaders.
I think this video is amazing for people who start out using shaders and I'd love to see a part two!
Great video, I thought I'd never try shaders out but it made me get started!
Thats amazing!
What surprises me the most is how easy it is to do that with Godot compared to Unity, plus the shader fields you can provide: generated textures, curves, wow it's the future xD Even gradients are not supported in Unity!
Man, this was cool. Thank you, great video!
Thank you very much :)
These tips are great will be using them all!
Amazing, Thank you! :D
Man, this is *information dense* but as they say, it helps you understand what is available... I now know I need to do more research on shaders 🙂
Part 2 will be great! , thanks this is great!
Glad you liked it :)
I'm fairly new to coding my own shaders so I didn't know how those distortion effects were made. Very neat! Thanks for this.
this is a great crash course!
(also hey i think i know you from dm's streams!)
Thank you :)
Who is dm tho?
I don't do any of this stuff but i am still entertained by this for some reason.
Thats cool, just look at the flickering lights and listen to the german guy :)
Awesome! Part 2 ASAP! kkkk Thanks for the video!
Working on it :)
Oh man, I actually feel like shaders maybe arent so scary.. been avoiding them for a long time but you've made me feel like it's not as intense as it seems... Thanks :)
This is interesting. I would like to see a part 2
After like a year of not understanding shaders this tutorial made it easy for me. thank you sooo muchhh
Thanks for the video, now I have to play around with shaders
Thank you!. And please more videos like this!!!!
Brilliant stuff! thanks for sharing this 👊
BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU
wow. This is... really good, thank you!
This video was great. I used the first shader to make my player and enemies flash when taking damage. The second shader was amazing because I previously didn't know how to make a shader that affects the whole screen or part of the screen. I'm working with a limited color palette in my game and I used the shader to make a color replacer which scans all the colors on the screen and changes them to a hue of your choice but only uses exact colors from the palette. I cant really explain it properly but it ends up being like gameboy color where you can choose between a bunch of color palettes.
Kind of like Downwell?
Great video. Waiting for part 2.
Thankyou for your video
circle Distortion 5:05
I've always had problems understanding shaders and how to actually program them. This simple video feels like its made me understand so many things that didn't quite click when I was last playing around with them. Might have to give it another chance now!
One of the simplest and easiest explanations of shaders that I have ever seen. thank you!
This was incredibly helpful, thank you!
:)
This helped a lot, thanks for this!
Glad it helped!
Jesus H Christ this is beautiful!!
You got yourself a subscriber!
Good stuff thanks
working on this for our game so good to see more stuff on it
I heard "part two" I click like.
Thats the spirit!
this is exactly the video i hoped it would be when i clicked on it
Really nicely explained, thanks!
:)
Genuinely informative. Thx!
also interesting for the 3D folks... ah, ich seh gerade ein bissel 3d ist auch dabei :) Gute Arbeit btw!
Danke :D
You guys covered so much in 7mins!! Love your work!
Also, I think you guys forgot to link the video from 5:26
Thank you!
You are correct x)
Great info, thanks for sharing!
Thanks for watching!
explaint very clear. Thank you very much
Glad it was helpful! :)
Einfach so gut erklärt, perfekt!
Danke! :)
Shader is pretty cool, actually.
And this guy is turning me into Godot user.
Part 2 let's go! Also where is your fish mic?
Didn't have the camera set up, but it was in use :)
Yes Part 2!
This was 2 years ago and you're still the goat, King Him 👑
Amazing! Thank you so much!
youtube suggested the perfect video for me
Amazing!
What I'm a bit confused about is how the texture resolution matters. Does the fragment run for every pixel in the texture or every screen pixel?
Great question! Basically, the texture gets streched to the same size. A UV of (0,0) is always the top left, and (1,1) is always the bottom right. If you reduce the texture resoltution, it will look more pixelated.
So the fragment function runs for each screen pixel, and can sample texture pixel multiple times or not at all.
interesting what can be donde with few lines of code, at least in godot. And these look amazing. And the 3D version: just wow! makes me want to try it.
Liked and subscribed! Thanks for video.
Thank you! :)
Me acabo de encontrar un canal que vale oro puro 🎉🎉🎉
this made shaders a lot less intimidating! :D
Great! :)
Thanks to you I made my first steps into shaders. How I can apply a shader to a scene transition? this is something that I cannot find it yet. Thanks for your great videos
i recommend freya's course on her channel even if its for unity! shes really good
I've seen UVs outside of [0; 1], for instance when a texture is repeated or in townscaper, where the integer part describes the color of the building
Very Thank you.
Grayscale is not an average btw. grayscale = dot(COLOR, vec3(0.21,0.67,0.12)); is more accurate, as the human eye responds differently to red, green and blue in terms of perceived brightness/value/luma.
It really depends on what you want to do with it. We use it to index a gradient later in the video, where averaging makes more sense imo.
ALL versions of calculating greyscale on RGB are inaccurate. RGB itself is a rough approximation and there is not *the* human eye we all have to share fortunately.
The RGB-weights are WILDLY different if you use your grayscale to simulate an old camera for example. Just use the one fitting to what you want to achieve, there is no single *right* one.
And you multiply a vec4 with a vec3.
I'd like to see a part dedicated to compute shaders.
You are awesome. Can i ask where did u learn all this? I am a beginner in such things
Having coding experience helps a lot. Apart from that: Mostly looking at breakdowns of specific effects. (We have a bunch of those on the channel)
Shaders are weird but once you get used to them its not that hard.
5:22 So this is basically how the art style of 11-11 Memories Retold was made
Thank you very much!
Very helpful
:)
What about classic 2D effects like older games had? The simple waving effects.
thats a very good code
:)
Hi ! Love your tutorials btw.
I'm a newbie in Godot
I want to know, are there any tutorials about creating shader that outline all objects in screen?