How To Shader (Fast) - using Godot Engine
Vložit
- čas přidán 23. 04. 2022
- Shaders have always scared or confused you? I get it. And I'm here to help you write them. This is an introduction where I show you the basic concepts of 2D and 3D shaders and what effects you can do with them. Examples are done using Godot Engine, but can be applied to Unity or Unreal as well.
We made part 2! • How To Shader. (using ...
Playlist with all our VFX videos: • Godot VFX Tutorials
Blackhole tutorial where we use screen reading + distortion: • EASY Black Hole (also ...
Resources used:
trixelized.itch.io/starstring...
luizmelo.itch.io/fantasy-warrior
--
Wishlist our action roguelite Furcifer's Fungeon: store.steampowered.com/app/17...
Join our discord server: / discord
Follow us on twitter to stay updated on Furcifer news and tutorials:
/ tweetfurcifer
![[柴犬ASMR]曼玉Manyu&小白Bai 毛发护理Spa asmr](http://i.ytimg.com/vi/0TsXQ7z2Dh4/mqdefault.jpg)
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!
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'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!
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
After like a year of not understanding shaders this tutorial made it easy for me. thank you sooo muchhh
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.
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.
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?
Love the way you broken down shaders, quick and simple!
THIS IS SO GOOD! You explained so much, in so little time, and so easy to understand!
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!
So much information in so little time, yet well explained and easy enough to understand. Great stuff!
This is excellent. Just seeing all the different things you can do very simply (and why that works) was a great overview!
Thanks! :)
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.
Such a helpful video. The last part about converting shaders helped me so much! Thanks for these videos!
This is the single most helpful video I have ever watched in helping understand shaders. This is incredible
Amazing! Thanks :)
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.
Ok, i never thought shaders were this cool. Amazing video gives the basics to build on.
Always hyped to see a new video from this channel! I always learn so much, thanks for sharing 😁
Thanks for watching :)
Amazing amount of content in a clear video. Shaders just became much clearer to me - thanks!
Great to hear!
This is so dense with good hints! Great video tutorial!
Thank you! :)
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!
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!
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 :)
3 seconds in and it's already awesome!
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!
wow. This is... really good, thank you!
Thank you so much for making videos about Godot especially about the Shaders!
:)
Great video, I thought I'd never try shaders out but it made me get started!
Thats amazing!
These tips are great will be using them all!
Amazing, Thank you! :D
Wow i did not know about the screen texture. This makes it so much easier! Thank you :D
It makes the coolest stuff possible :)
I have no programming knowledge, but this actually helped me understand nodes in blender a lot better.
Brilliant stuff! thanks for sharing this 👊
ima have to watch this like 34k more times to even expand 1 pixel of my brain enough to understand
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.😅
Love your vids dude, super interested in 2d shaders right now and this was awesome
:)
Thank you!. And please more videos like this!!!!
PART 2! WE NEED A PART 2!!!
Coming up today :)
BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU
Really nice explanation, subbed!
Thanks :)
Part 2 will be great! , thanks this is great!
Glad you liked it :)
Good stuff thanks
working on this for our game so good to see more stuff on it
Great video. Waiting for part 2.
Man, this was cool. Thank you, great video!
Thank you very much :)
Genuinely informative. Thx!
This was incredibly helpful, thank you!
:)
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 🙂
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!
That must be the best shader tutorial there is
Have you used shaders? What's your experience?
Edit: Part 2 is up now! czcams.com/video/KVTa2xkly1g/video.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.
Awesome! Part 2 ASAP! kkkk Thanks for the video!
Working on it :)
Thankyou for your video
circle Distortion 5:05
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!
Beautifully explained in 7 mins
Thank you! :D
Thanks for the video, now I have to play around with shaders
Really nicely explained, thanks!
:)
also interesting for the 3D folks... ah, ich seh gerade ein bissel 3d ist auch dabei :) Gute Arbeit btw!
Danke :D
Amazing! Thank you so much!
The best vidos I've seen bro ??
This helped a lot, thanks for this!
Glad it helped!
Great info, thanks for sharing!
Thanks for watching!
explaint very clear. Thank you very much
Glad it was helpful! :)
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 :)
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 :)
One of the simplest and easiest explanations of shaders that I have ever seen. thank you!
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!
Thank you very much!
Very Thank you.
I heard "part two" I click like.
Thats the spirit!
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?
Liked and subscribed! Thanks for video.
Thank you! :)
Me acabo de encontrar un canal que vale oro puro 🎉🎉🎉
Einfach so gut erklärt, perfekt!
Danke! :)
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.
this is exactly the video i hoped it would be when i clicked on it
this is a great crash course!
(also hey i think i know you from dm's streams!)
Thank you :)
Who is dm tho?
Yes Part 2!
Part 2 let's go! Also where is your fish mic?
Didn't have the camera set up, but it was in use :)
Shader is pretty cool, actually.
And this guy is turning me into Godot user.
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
Hey thank you for hte video. I have a question. If I have multiple textures in a scene and I want the shader to effect all those textures is there a way to pass those all into the shader as a single texture? Kind of like a texture render
youtube suggested the perfect video for me
Amazing!
Very helpful
:)
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
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)
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!
thats a very good code
:)
5:22 So this is basically how the art style of 11-11 Memories Retold was made
i recommend freya's course on her channel even if its for unity! shes really good
Ive been loving every moment of learning shaders. Thanks for this video. I didnt know exactly how to achieve grayscaling. I still dont fully understand how to smoothly blend between 2 colors. Think of a terrain where the grassy planes transition to snowy mountains. How would I smoothly blend between the 2? 🤔
idk
Thankyou!
You're welcome, hope it helps :)
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?
at the 5 minute mark, you show the images you used for the distortion. Where can i download those? :)
Great videos as always!
Won't making a shader local to scene cause every sprite that uses that material to have a separate draw call? Or can godot batch sprites that use the same material even if that material is local to the scene?
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.
I'd like to see a part dedicated to compute shaders.
My head does hurt a little but I get what they are vaguely doing now at least
Great Success!