How To Shader (Fast) - using Godot Engine

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

[@Blockmaster987]

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.

[@coyo_t]

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

[@bonniefinleyanimation]

Get to Heaven is so dope!

[@iidoyila]

@@bonniefinleyanimation lol i literally had the same thought ! best rock album i've ever bought hahah

[@foobars3816]

@@iidoyila are you both spammers or is this some reference I'm not getting?

[@bonniefinleyanimation]

@@foobars3816 Eli's Profile pic is the album cover for Everything Everything's - Get to Heaven (2015)

[@FadedPatchwork]

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*

[@nicolasmosko7579]

Thank you!

[@mahyellaw]

i've always been confused with shaders. now this video's got me hyped 👀

[@PlayWithFurcifer]

Go make pretty stuff!

[@suicraft8395]

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.

[@woodenfences]

With almost every tutorial I find myself searching through the comments for the updated names . . . . Thanks!

[@nauthic3p0]

I‘m overwhelmed as I have no clue what most words mean but I finally understand why shaders are ‚a thing‘

[@PlayWithFurcifer]

I count that as a win! Do you have any specific questions?

[@lorgarmor5886]

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.

[@PlayWithFurcifer]

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!

[@toddzircher6168]

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.

[@asdaaaaaaaaaaaaaasd]

I always wanted to get into shaders but never did. This might be it, this made me motivated.

[@Jakub_13]

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

[@PlayWithFurcifer]

Totally agree with you Jakub :)

[@plantsvs.zombies-gameplay4812]

@@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

[@foobars3816]

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.

[@keithwinget3450]

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.

[@SwagGaming87]

After like a year of not understanding shaders this tutorial made it easy for me. thank you sooo muchhh

[@eboatwright_]

THIS IS SO GOOD! You explained so much, in so little time, and so easy to understand!

[@KillerGameDev]

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!

[@KyleMendes0]

This is excellent. Just seeing all the different things you can do very simply (and why that works) was a great overview!

[@PlayWithFurcifer]

Thanks! :)

[@jex8885]

So much information in so little time, yet well explained and easy enough to understand. Great stuff!

[@AlexandraErin]

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.

[@timberjustinlake]

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!

[@tristanvandansik8889]

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!

[@PlayWithFurcifer]

Shaders are just *weird*, but you get used to it eventually. Thank you! We will start preparing part 2 :)

[@FelskiTV]

Such a helpful video. The last part about converting shaders helped me so much! Thanks for these videos!

[@benjaminswee-shaders]

Love the way you broken down shaders, quick and simple!

[@saultoons]

Always hyped to see a new video from this channel! I always learn so much, thanks for sharing 😁

[@PlayWithFurcifer]

Thanks for watching :)

[@judsonhester1407]

This is the single most helpful video I have ever watched in helping understand shaders. This is incredible

[@PlayWithFurcifer]

Amazing! Thanks :)

[@mvolkankarakas]

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 😄

[@PlayWithFurcifer]

Aww, thats so nice!

[@PlayWithFurcifer]

Have you used shaders? What's your experience? Edit: Part 2 is up now! kzbin.info/www/bejne/gYe3kmWuoNGsZ8k

[@Relivino]

I've used shaders together with particles - you should definitely make a video on that topic!

[@Jakub_13]

First pain.. Then joy, eternal

[@AV-qr4kl]

My experience is: copy, pasting, hoping it works... And if it does, I animate it via the animation player.

[@Byron_Vega]

Never have but now I will. Thanks for the video

[@centdemeern1]

I have been using shaders for years now, and all I can say is that they are very fun and powerful.

[@RialuCaos]

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.

[@Malcx1]

Amazing amount of content in a clear video. Shaders just became much clearer to me - thanks!

[@PlayWithFurcifer]

Great to hear!

[@collin2401]

Whaaat 😮 My mind is blown, can't wait to play with this when I get home from work! Thank you!

[@vidvad]

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!

[@V8sim]

This is so dense with good hints! Great video tutorial!

[@PlayWithFurcifer]

Thank you! :)

[@ruix]

Ok, i never thought shaders were this cool. Amazing video gives the basics to build on.

[@mediopalodev]

Brilliant stuff! thanks for sharing this 👊

[@LongestYardstick]

Love your vids dude, super interested in 2d shaders right now and this was awesome

[@PlayWithFurcifer]

:)

[@godotShaderBoy]

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!

[@soleypas]

Really nice explanation, subbed!

[@PlayWithFurcifer]

Thanks :)

[@WMIIIProduktions]

Wow i did not know about the screen texture. This makes it so much easier! Thank you :D

[@PlayWithFurcifer]

It makes the coolest stuff possible :)

[@Uns1gnedINT]

3 seconds in and it's already awesome!

[@xyour_momx391]

The best vidos I've seen bro ??

[@ItzNero69]

Great video, I thought I'd never try shaders out but it made me get started!

[@PlayWithFurcifer]

Thats amazing!

[@ukrsolid]

Part 2 will be great! , thanks this is great!

[@PlayWithFurcifer]

Glad you liked it :)

[@MRxRadex]

Thank you so much for making videos about Godot especially about the Shaders!

[@PlayWithFurcifer]

:)

[@SuperQuwertz]

Man, this was cool. Thank you, great video!

[@PlayWithFurcifer]

Thank you very much :)

[@cloudwolf3972]

Great video. Waiting for part 2.

[@myjourneyhaartransplantati1589]

BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU

[@HyperEpicGames]

Genuinely informative. Thx!

[@StanleyKubick1]

I have no programming knowledge, but this actually helped me understand nodes in blender a lot better.

[@SetimoRei]

Awesome! Part 2 ASAP! kkkk Thanks for the video!

[@PlayWithFurcifer]

Working on it :)

[@TheRobertoCarbonell]

Thank you!. And please more videos like this!!!!

[@affensind]

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!

[@tonybrownlowe2272]

These tips are great will be using them all!

[@PlayWithFurcifer]

Amazing, Thank you! :D

[@TuncTurel]

Amazing! Thank you so much!

[@Noita_]

ima have to watch this like 34k more times to even expand 1 pixel of my brain enough to understand

[@AdredenGaming]

Good stuff thanks working on this for our game so good to see more stuff on it

[@Magnogen]

This was incredibly helpful, thank you!

[@PlayWithFurcifer]

:)

[@sheepcommander_]

wow. This is... really good, thank you!

[@mikecu2249]

That must be the best shader tutorial there is

[@Pierogo]

Really nicely explained, thanks!

[@PlayWithFurcifer]

:)

[@bencepaul3497]

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 🙂

[@cvillian098]

This helped a lot, thanks for this!

[@PlayWithFurcifer]

Glad it helped!

[@jacksontriffon5064]

Beautifully explained in 7 mins

[@PlayWithFurcifer]

Thank you! :D

[@shadamethyst1258]

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

[@jsn4591]

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 :)

[@yell9140]

Thanks for the video, now I have to play around with shaders

[@ukrsolid]

Great info, thanks for sharing!

[@PlayWithFurcifer]

Thanks for watching!

[@cholasimmons]

Jesus H Christ this is beautiful!! You got yourself a subscriber!

[@brunch1572]

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.

[@SheepUndefined]

Kind of like Downwell?

[@toatrika2443]

this is a great crash course! (also hey i think i know you from dm's streams!)

[@PlayWithFurcifer]

Thank you :) Who is dm tho?

[@VoyivodaFTW1]

PART 2! WE NEED A PART 2!!!

[@PlayWithFurcifer]

Coming up today :)

[@ngoctamnguyen2580]

explaint very clear. Thank you very much

[@PlayWithFurcifer]

Glad it was helpful! :)

[@thomlaurent]

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!

[@brandonjacksoon]

Liked and subscribed! Thanks for video.

[@PlayWithFurcifer]

Thank you! :)

[@tralchee0354]

I don't do any of this stuff but i am still entertained by this for some reason.

[@PlayWithFurcifer]

Thats cool, just look at the flickering lights and listen to the german guy :)

[@alvarorodriguez1592]

Thank you very much!

[@user-un4ks9dy9l]

Thankyou for your video circle Distortion 5:05

[@diegofelipere]

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

[@alperg1142]

Very Thank you.

[@everybodyants]

i didn't understand half of this, as i'm completely new to coding, but it was really entertaining.

[@PlayWithFurcifer]

That's good :D Don't worry, shaders are kinda advanced

[@everybodyants]

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.😅

[@KekLuck]

Einfach so gut erklärt, perfekt!

[@PlayWithFurcifer]

Danke! :)

[@orkmaedchen]

also interesting for the 3D folks... ah, ich seh gerade ein bissel 3d ist auch dabei :) Gute Arbeit btw!

[@PlayWithFurcifer]

Danke :D

[@Chevifier]

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? 🤔

[@realn8zone]

idk

[@ReflectiveLayerFilm]

Yes Part 2!

[@IvarDaigon]

One of the simplest and easiest explanations of shaders that I have ever seen. thank you!

[@MilMike]

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.

[@dayw81]

I heard "part two" I click like.

[@PlayWithFurcifer]

Thats the spirit!

[@NPCsz]

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?

[@francomasip]

Me acabo de encontrar un canal que vale oro puro 🎉🎉🎉

[@frogman1]

this is exactly the video i hoped it would be when i clicked on it

[@hidemat5141]

Part 2 let's go! Also where is your fish mic?

[@PlayWithFurcifer]

Didn't have the camera set up, but it was in use :)

[@alecburmeister8884]

at the 5 minute mark, you show the images you used for the distortion. Where can i download those? :) Great videos as always!

[@SW-vy4he]

Very helpful

[@PlayWithFurcifer]

:)

[@thanatosor]

Shader is pretty cool, actually. And this guy is turning me into Godot user.

[@NekotoArts]

You guys covered so much in 7mins!! Love your work! Also, I think you guys forgot to link the video from 5:26

[@PlayWithFurcifer]

Thank you! You are correct x)

[@osx8227]

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

[@thomasmarkle8480]

thats a very good code

[@PlayWithFurcifer]

:)

[@codenottaken]

You are awesome. Can i ask where did u learn all this? I am a beginner in such things

[@PlayWithFurcifer]

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.

[@BlendFin]

Thankyou!

[@PlayWithFurcifer]

You're welcome, hope it helps :)

[@martinl6790]

this made shaders a lot less intimidating! :D

[@PlayWithFurcifer]

Great! :)

[@iridelombardi]

i recommend freya's course on her channel even if its for unity! shes really good

[@iR0CKt]

I'd like to see a part dedicated to compute shaders.

[@jlewwis1995]

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?

[@C_Corpze]

I love shaders, however I’m still looking for good and simple HLSL documentation as I need it for Unreal Engine.

[@bitbraindev]

I