Leni's Godot School: Shaders for Beginners

Hello everybody welcome to the new talks and today we are here with Gustavo and we will be talking about and what channels specifically and Godot is a free game engine right open source to the community so everybody can can use it for free and also contributing to its development um since this month is is Game Dev one actually here in Leno and Leno and this is a pretty important topic because we will be learning one of the pillars in game development to make horror games look cooler than we can make them look in just 20 48 hours so this is a key feature that we actually maybe are going to use in the in the following games so thank you and you can continue [Music] great thanks everybody good morning good evening good afternoon whatever whatever you are I'm Gustavo the python developer social media almost basically my first anniversary here at the company it's very exciting and cool I love being here since the first day so today uh I'm gonna talk about shaders and using with DOTA I know you guys basically asked me about some tutorials that would go to beginners but yeah I had this crazy idea in mind that maybe we just start like familiarizing with the UI and we've got the engine so it's I think it's a pretty good start just to be able to to see Changers with Europe and it for me was basically the my like a topic a hard a difficult topic on the first time I I heard of shaders um and yeah well I'm gonna try to at least give you some idea of what changes so what to expect in this stock um well Traders for first of all shakers with some massive subject so it's it's really best in the sense of information that you can basically refine a lot a lot of information out there so today we just scratch the surface a little bit with with shaders I promise just to keep things simple as possible just we'll use to understand some of the key aspects of the shaders and go to it and yeah one of our main goals here is just to give you a little taste of the basics and shaders and the fundamentals of shaders so and how can easily you you can code them and using DOTA okay so and maybe you use um use them game engine I don't know the games you you will be new developing and yeah start yet like you will start experimenting on your own and and yeah I'm just trying to to use that as your personal playground as your personal playground of Chambers and yeah so and let's tell you a story of background I I can't remember some years ago when I was like um more active really development games with unity and I I wasn't on a dead group on a chat bedroom I think it was Discord yes it wasn't on now this question yeah the guys there really talk about different topics level design coding optimization sort of that the topics that were discussed there but yeah there was was this guy always mentioned hey you should use shaders so shaders oh but that sounds interesting okay gonna take a look so yeah the first time okay I open up my my I put it up my workspace and open up unity and yeah I was like hmm okay shaders we have some information here there some like like exchange like terminology okay we have color vector Cube something like oh is it like okay exactly I guess I have no idea what what I was doing and I felt overwhelmed by the a lot of quantity of stuff that Unity has behind the shaders so it basically discouraged me to even consider the first place to use them on my games I was just at the time more focused um this was a little game I was developing at the time and obviously at least I was just struggling yeah just to make the animation uh enter the right and the right frame when you jump the maximum when you get the maximum height of the the Sheep In this case yeah I was just struggling with that and and shaders was out of the question in this day but yeah it's not obviously unity's fault because basically I I needed like the basic understanding the basic theory about shaders because it's related to graphics and computer graphics theory and mostly the that that how do I say this is a broad terminal like like a category of computer Graphics so I I need that that theory first so I need to study so it wasn't just like like two or three years ago that oh I started looking on Godot and and I obviously know a little bit more so the the thing the first thing that you might want to know is what a shadow is yeah so the base like the the most Broad concept or you know how what it means to be like what this means a Shader is that's what a Shader is cheers can be a lot of things so because they are very like I said it's a broker category on computer graphic techniques because they can use to achieve a lot a lot of a wide range of visual effects so what what which visual effects do you as well it it's basically all all the effects uh you you have Light Shadows um diffuse specular lightning Reflections refractions texturing effects post-processing effects uh so depth of fields when you have the like the sort of camera effects that the feel from the camera the angles uh water simulation fog so you you know it's everywhere maybe it's a so uh yep it's it's a vastly subject obviously but yeah the only thing that maybe is the where should where should we use it yeah everybody we we're using everywhere shaders on on the game engine um but okay I just tell you what our shaders are but but they used when we use the cheaters about what what is a Shader a Shader it's still the question that that drive scared types it here um trailer is a special kind of program so that runs on the GPU and the computer graphics card in the case of Goro or any other engine that you might be using basically you can use them to control how the the engine draws the geometry and and the colors of the pixels on the screen that's just the basic like the the definition of shape model Shader means yeah so the and obviously they allow us to achieve all kind of visual effects um because of this not like kind of make sure that they put on the graphics card they have like two important Keys aspects of the in this case the change what the changes are because they are all executed all at once yes and on every pixel and on every or every vertex of the object that is drawing directly on the screen yes so more of these in a few minutes and because of this parallel in nature obviously they don't process information this the way as the normal program typically is do you cannot store data between frames and it's kind of stateless in that sense because you you can access the frame before or the frame after it's just like you have this input okay and you will be having the this output the specific output so um you need to like code like things differently from what are typical programs or procedural pronouns as we know it so but the other key aspect is the Traders are not your normal programs but that's for sure so let's see an example you have here so the base so in another situation let's say you have a grid maybe a HTML grid obviously if you guys know CSS you could just say a selector a selector and yeah obviously from there you could okay start from live obviously with CSS selector right away they'll like change the code but let's say you have to change that color procedurally with a with code so yeah you have a grid of squares maybe they are like this already green color they are the color but we not to set it with purple color right so well the normal approach there will be will make a a nested for Loop or a for each Loop and Traverse all around or all around every single Grid or every single square and set the color for that or obviously all the squares right and that's the like the normal situation but what happens on shaders it's like kind of difference imagine that now we don't have the Grid or the with the rock like the squares but pixels no you have you have to think in pixels of on on the of the objects right so like I said this is a snippet from of a Shader how our Shader looks and it's basically that for Loop that we saw before this this part of the the code is on the side of the second formula is like implicit on the on the shape so this will run basically on all pixels on the object that you are trying to to change or trying to modify so this is the keyboard equivalent code or the shield and more of this I will be talking about the fragment function a little bit so but are basically doing this here okay just set the color I like declare like a vector object and in every single coordinate I I said that the right amount of RGB in this case the red the red channel the green channel the blue Channel and the alpha channel in this case but I just change the the color of description so yeah that's basically what we and like the how the Traders are and go cheers always usually are a little bit easier to manipulate because they provide a simplified changing language based on popular opengl sharing language in this case so you you can go here for example and see on the documentation okay the shading language is similar to the DSL sls3 you have most type data types and functions that are supported or early on the normal on a normal program you have Bulls you have like floats you have other other types of obviously like mathematics stuff you have vectors you have like [Music] matrices all of that you have same plus Samplers is my kind of uh like a special kind of like their type that basically just related to the textures to the image so it will be helpful to just to obviously to to draw the like the Shader on the screen you have obviously like some some like features have arrays you have all of them so you have basically most of the types that you are familiar to this but in a little bit you will see that there are some variables that are almost our rideable and others are not like non-viables just read only and and that would have helped you to do like okay construct a Shader business but yeah that's basically what you want to do okay we're showing you see this [Music] the syntax the shaders on the bottom this is very similar to C you see syntax it doesn't is obviously your exercise based on this opengl shading language and it's pretty good so it is um yes so shaders and goto are like we have like five types different types of shakers we have canvas item spatial um campus item is mostly for Judy to the you know so 3D objects spatial obviously for 3D objects particle is like those familiar with particle missions on engines it's obviously related to to those the skies generation obviously in the environment around maybe a 3D environment with sky and thought yes and obviously every kind of type of Serial type doesn't have all the access for all the processor function we see here on the left so yes obviously just the two like the two the first two campaigning spatial have access to these three vertex brand new line and obviously particles are not can access Liberties and fragment is different kind of of obviously geometry involved and logic so that they don't obviously have access to all of the perception function and in this talk obviously I won't focus on this for basically because yeah it's it's mostly if you can guys like Master this basic vertex and fragment processor functions and and the variables that you obviously gonna use here you will be understanding all like 90 of the Checkers in this case so that's why those videos will be focusing on this for record and yeah let's start with vertex vertex is obviously the processing functional skull once every vertex in the spatial and canvas item shaders right so let's say you have uh like a cube yes so you have a cube a mesh Cube you have the mesh and the mesh obviously has eight I take vertices and you know like image like the image obviously you have only four for vertices in this case and yeah all that you built here inside the brackets function and it will be like doing in every that we will run every single in every single practice at once that's that's for sure and here we're gonna introduce these friends we have vertex that like like the built-in variable on go to time and sine and cosine functions just to do some some stuff and yeah let's open it up first thing well if you have already seen in this this so like a stable Edition you can go with just in here yesterday and if you up and got up [Music] will you prompted with this project manager right here and yeah you can always obviously you can use a new project you can set up the name of that but I already have a foreign so let's say about to edit it just to start now represented with the 3D by default environment start looking at the tree first it's easier so the first like how so what what do I do to start reducing shaders look um when you open up the door and Godot provides you with like this PNG by default you can use that just to start working on shaders if you drag on the scene you will see that you have a workout you know icon with the mascot the god of mascot and yeah obviously it's a Sprite that other fields in and we have here that this is right by node has a text right foreign but from here you will be going to this like section on the canvas item right on the specter tab you go to material then you set it up some activities so you happen to like do basic type of materials you have a canvaside material it's a normal camera sign that you set up on most objects but we have this right here can you guys see that this is a little bit short but I don't even see if the phone looks okay [Music] so when you click there okay you add some materials okay that's nothing happening so because you need to open like this here oh you will be like a show more options right from here you can always like be like seeing this Shader and the slots here and you go here in add a new shape like this and obviously nothing happened yet but okay but okay I don't so I I have all the material and the Shader but okay it doesn't happen it's because you need to click right here and you will be [Music] show this slide text editor right here this is where we start coding Shapers right so the first thing that Builder shows is that hey it's an error which we need expected Shader type remember the genotypes I talk about earlier we need to set or establish or like declare what type of chair are we gonna write in this case we just write Shader type like this start with canvas because we were working in the 2D so this is the types of one yeah that's this is the first line you always have to write on the shaver code yes I'm good so from here okay now set up the campus item not error whatsoever but um the thing is that okay I would want to like use the vertex function so you declare like this boy called vertices like this from here there is basically however we need to to write like to to set up all the code that you need to run on every vertex so the first thing that we're gonna use is the vertex built impact they're built in environment right we're gonna manipulate the direct experiment so let's say I want to maybe let's say I want to like move the of offset the texture a little bit in this case that the the two the four vertices like offset a little bit to the right so we use a vector2 like this and move through let's say I don't know like 15 on the right on the x-axis and 15 on the y-axis let's see and semicolon see we are basically just overwriting the vertex like just to maybe moving like apart 15 pixels away from the ordering in this case like in in 15 units so that's basically what we call it what we're doing right now so we can just like okay maybe you know I want to move it like 15 on the right okay we have live practice remember that this is happening with all the vertices the all four vertices of the texture in this case of the of the object on the picture biscuits that's why we you need you you see that every the image is moving away this kind of this amount of units in the stocks and you have Maybe here maybe it's already yeah that's basically what are we usually well let's say I want to like add more like dynamism make our life this Shader right that's when time variable and sine and cosine enters and you could just overwrite like the way Changers are like moving good use for example let's say I want to just move the X the x axis like this and we want to basically move it under the time like this so it's a little bit like you see it's like a slow you see a little bit just a little bit it's like a movie we could just like multiply this like two let's see okay so the smoking a little bit let's say I have to change the file okay something like navigated somewhere it's moving you know like this cyclic moving off the cosine function in nature so if you want to like okay I need to speed up this a little bit so oh we just multiply here by factor of three okay okay it's it's kind of so yeah that's that's the basic idea of the vertex in this case we are just manipulating or modifying the x axis of the of the vertices in this case and yeah because you just in a base of the this amount of time multiplied by three the factor three and obviously on the factor of the amplitude of 5. let's say I want to add for example the the y-axis okay we just foreign [Music] [Music] if I want to like move it in circles we just kind of change here like cosine by sine yep and what we're basically doing is moving every vertices in a circle motion so that's why we see that all the the object is moving in a circumvision and from here you can like trying to experiment with with some basic knowledge and things app or you could use what will happen if I multiply this like the same ground like Square oh you have to it's like this motion with motion here oh really maybe they have to I I need to just modify a little bit here like this oh so from here you can but it's like basically your sandbox of like using the it's basically which somewhat or experiments just to be able to move the way you want yeah okay but it's a little bit okay now annoying to trying to change every time this like hand okay I need to obviously need a little bit more customization [Music] from the development side so we we can like user export variable just to be accessed able to see or to manipulate it from the UI so this we have we have here the uniform so uniform is away as saying they go okay we expose this to the UI so that I will be able to manipulate it basically that's just one with suit and we use nuclear uploads let's say okay let's say like let's call it speed let's set it up to three yep by different oh the semicolonism so when you have here okay now we can use this variable and let me set up here here thank you so oh okay but where do I set up this build okay you go to basically the inspector I put four and you see now on the Shader option you have this Shader parent chat thank you so from here you can just adjust the speed as you want so you want to 40. obviously you said this video the the object giggling all over the place the yeah you can just tweak it as you can assume and this you can this approach you can do it with colors because you can use the plugs with booleans so that way you you you you can save this Shader like we use them in another resource it's a Time save for just to be able to to tweak and experiment with different kind of effects so for example I need to maybe the amplitude let's say that within two uniform this loads you have to just about this oh let me save this is the scene that I'm having seven resolution so oh is it going yes speaking of them and yeah that's what you can do obviously if you want to maybe have a like a slider on on the UI maybe here okay you have you can set up but it's not ideal we have this I mean you want a slider from the range setup range you can use this I think the Skype like heat range I would basically do is okay you have a minimum value a maximum value and the step if you don't want to step if you want a smooth like step you just get rid of this coordinate and yeah you can set up okay I want to start from one and to speak to from one to five [Music] so if you see here on the Dora on the Specter now we have a slide like this so it's basically one way to manipulate a way faster the variants and just to play videos so let's say I want to save this chamber oh it's ugly you go here on the Specter and save the currents we saw that as a resource it would save you could save it as this it's just text but it's obviously the extension which we see the Shader and yeah you can problem like a folder dedicated to all the shaders you can save it now here like this and you can okay I will just set up those ones with say in some time [Music] yeah that way you you can oh I need to just modify this a little bit you can use another Shader and apply it to the other objects and yeah that's kind of stuff and can you use this on a normal spatial pretty pretty yes but not obviously not the type the type of big change a little bit because now we're this is just use for 2D objects but you need to do here is just change the sheet or type like to spatial so um let's say you have seen I just see this time I'll be using a 3D scene so let's start with on alarm image instance in this case okay obviously nothing happens because you need to go here on the inspector and set up the mesh you have all the Primitives like every other engine every other 3D like modeling software and we'll just add a cube material we have spatial material and said sugar level classification exchange material so from here and receiver S as useless the first line you need to type is Shader type station in this case because why because this is a 3D node so that's why we need to set it up a solution but you have access as I said you have access to the same processor function and yeah you can use to manipulate the say I want to uh like like do that they're there just to swing back and forth on the x-axis the vertices so let's say that vertex dot y and that depends something because um time multiplied by multiply up here button yes let's keep it that way you see honestly the emergency x-axis always like this [Music] but yeah I have I was prepared and they have this like we was a cube before but you can always change the mesh in this case um for example yeah I have an example here but you can always set like menu Cube that's this so how how the chair looks is obviously about this I love it yeah I just added a little bit more like say yes variability just added this the vertices X on the cosine function and multiply by one but yeah I will just tweak it here the movement is just like they're smoking those vertices but what if the the mesh has more vertices no it's just obviously you can modify them here you can go into the mesh and subdivide a little bit more if you still divide you you're basically adding more vertices on the object so see we can see that it's like a lot of smoother on the environment so it's like like a snake or something like that swimming yeah or something so yeah that's basically what we want to how you manipulate our 3D and yeah you can always as I said you you can save the Shader and using it in another like mesh oh and I have a mesh that is not a cube okay maybe I I guess this oh no maybe I need to use the and you know like a sphere which I said obviously here the the object is like like a lot of smaller because it's it has more subdivisions on the mesh so that's basically why why is it looks that way and you can always manipulate them as I should wish but yeah that's basically it about vertex Chambers and in this case deposition function now we're gonna see that the other one that this fragment recommend Shader the processing function is used to set up obviously if vertex like applied the effect on every vertices and this in this case the fragment Shader applies it to every pixel on the object right so the we have new friends here you have color like the built-in variable that we're gonna basically uh modify it as the output of the object you will see that in a minute you have UV UV is like that like the parameter that allows you to obviously they access the the proportional matter the texture or the pixels in the region also the texture obviously you have texture in this case it's just an image and and for 3D Albedo if you guys are familiar with pretty software obviously I'll be using the material that you will always use like um in previous material budget so now we're gonna use have the sale one two now I will just hide this and say I want to use this as a Sprite no obviously no let's make a new scene because it's hidden there no thank you it looks a little bit darker it's just because of the in this case the the image imported but yeah the industration you just set material you got here you set shade material and then set up the new shape version the first thing you'd like to do is Shader type this discusses combustion so now we're gonna use fragment in discuss okay processor function like this so let's make the most boring Shader in this case and we just gonna set all the pixels for one color just set up like this I call it Vector four and yeah we'll let's say what we want to change those all the pixels to one single color obviously remember this is a obviously the red Channel the alpha Channel and the channel the green Channel blue Channel and the alpha channel is last month yeah in this case you were just overwriting all the Escape the the pixels on the objects on the texture to just one single like color in the script and yeah you can always like manipulate the the way if you want to uh no but I want to like change or have a reference of the actual texture and from there just to be able to tweet some some things yeah you can do that of course you can do that by accessing the the actual like the current state of the texture in this case you can use as sorted colors of a single Pixel that you have original [Music] on the strike you can just locate the simpler come back to four like this and yeah you can use like obviously um let's say pixel so and from there we just get this function the texture is this basically is a function like we need to understand a bit more but you obviously what it does is just sample the image like like right here from the actual texture this case the robot access the laptop decibel has the the Sprite in this case the Delaney right here and the UV yeah okay okay now now you have the colors of every single Pixel in the screen you can just okay verify yours override them like this obviously this if you have this obviously doesn't do much because you are obviously like overwriting the colors not really colors on on the same color of the output it just doesn't change anything but let's say I want to just change for example the red with the red like this see with the red chart oh that is something what about if we just add the the green samples like this the green Channel so and if we add just the blue Channel you have them so so you can override only the green Channel with yourself flow maybe one point four and you can always trying to change the color of that like in this case the texture so basically you can have fun with Traders at a long time but you just wanted to show you some other sample that I made for you for example let's see here um let's say uh but might have a sheeter but we can just write that let's go to the Sprite and yeah good news like the globe another that'll be very scale like this but this is just a trailer that makes everything great scale you can use to see the code like this but by basically doing is just like making a calculator average calculation of the every single Pixel divided by three and just add them on the vector like this that's all what I'm saying and you can always have another length type of Shader uh say we want to be glow maybe you guys exhalation for example you have pixelation effect like this which is a combat Shader yeah basically you is just modifying the color as this and and the UV has to do see right here because like kind of you know accessing the UV and modifying so but you you see okay you have the amount and based on this amount you can just try to tweak it like this yeah and obviously this these parameters that are exposed in the serial band are accessible like on with the script so if you have like the game when you need to make a transition you just like manipulate like this in animation and obviously with the engine will apply the effect on them so uh I have a little more time but we should have one more time but yeah that's basically what what shaders are included fundamentally shaders are responsible for calculating the vertex colors uh I used to see those far and the possibilities are endless obviously this hour doesn't cut up to to show you all the great stuff that you might want to see but you can always find inspiration help design from this like I could recommend more than this URLs like this import hyperlinks now requested here so yeah you could do a lot more so that's basically what I wanted to join because and thank you and have fun so questions thank you for the for the talk and it was very interesting so I I think that we what we're going to agree is that one I mean summarizing right one of these shaders is to be able to change position of the particles and things and the other one is to make Corrections on the color right so you have the yes you can say that the position space and the color space excellent yeah that's basically yeah that's basically the kind of thing obviously when you have to to set up maybe an a whole object mode to the other side it's very just to use transition of the engine not moving the position but if you want to tweak like the pixels or the back the vertices on the mesh right so that's why that's where shaders are are very useful so to have the limitation of the engine like look at the rightly all object but for with shaders you might just want to tweak a little bit more further so that's why chainers are flexible distance amazing um if you can share those things and maybe we can share them those in in Office later yes of course I will is pushed I I was thinking there's questions like a repo just to make your experiment with those and yeah you can pull this on them amazing um okay guys and do you any of you have any questions how are the The Talk you can oh maybe I have close to the people to open the mic yeah it was blocked because we were having a lot of people joining with the microphone okay if anybody has any question I am without you you have something to show us a little surprise of a game maybe oh yes well I was working I will like for time or sometimes at least like side project they have [Music] uh yeah I have this like a project a little bit project but it's just basically a kind of endless Runner like the dino Chrome like we see on the on the Chrome application so here basically you just wanted to to do I like old school Runner with with learning on this case I wanted to make just to to be able to let's see if I have obviously we have here like and say yeah let's see if I can yes [Music] it's amazing I used like shaders in this case some like that that affected the way we see the screen basically this is a light like this kind of like Shader that adds to it like a filter on the screen that seems like like a scan lines from all the TV obviously you can use tweak with them but here on the Shader you can add more scan lines or less yes and you you will can kind of see different kind of effects uh there is solution is we create were created by you uh did you find them no online no that's the neat part you you don't always have to code this you have all because there's a lot of information out there and obviously this this like Traders power like this shaders you can find a lot of children like stuff Snippets and all of that you can find this this is the one I used in this case you see it's like at this like kind of effect of an old TV you can tweak it like this for example you have like these in this case you can pick it the opacity of the scan lines that we have the resolution that you have you want to pixelate or not like the the noise maybe the static that we need to add like a static like this so it's basically what I'm doing so I have as added this intro it's just a little bit you can try maybe before that or the Game Boy in this case it's like this oh that's crazy is this [Laughter] you can always yeah this is all made with cheaters and lightning effects so you basically do is like seeing the animation player here you can see here you can click the velocity so you see and face all that with the Traders instead and that makes me remember to flash an action script right exactly yes those kind of layers and you can animate those things yeah exactly yeah since this kind of the same so it's the ones if you guys have experience with flash this with a lot of easier to implement those items but yeah that's basically what I wanted to show you guys I hope you liked it um when are we going to have this deployed online so so we can play and try yes yes basic score very soon we could just add some like Spore system like that leaderboard system and yeah we could just deploy it with HTML and set up a link to for the events you guys played amazing yeah nice okay guys any more questions Sandy was saying that he thought the same thing I would flash yeah I had some experience on on like working and animating with flash so it made me like nostalgic from those times like the the timeline the the all the the screening and stuff we have some rough edges obviously but yeah maybe it's so powerful that you might be the possibilities like Atlas in this case you you can tweak the the easy you can tweak the time like the frame so yeah difference you have on your skin everything guys you can ask don't be shy okay if there are no more questions um we will invite you again I believe it's the next week right or maybe in two weeks um let me check the dates actually yeah essentially next week we are going to be participating in the lower elementary so anybody can join and you know how to be an expert in shaders like hotel and you just need to have the the will to come and and learn actually and we learn a lot in those uh for the doors to be able to create our games uh there are a lot of changes and even though if you don't know how to call or how to design there are some other aspects of game creation that can actually be we for everyone and maybe maybe you you know how to go but you don't want because it's a you have a lot of weight or whatever you can come showing nuts and just chat and maybe throw some ideas for us to code so yeah and also test the games right that's a big part exactly yes this is the first one of the many talks that you can give about the energy right excellent yes yes now now for now on I guess if you guys now want to like make love I'll organize some Workshop sessions with the road yeah okay you organize it amazing thanks everybody and see you in two weeks because next week is going to be a happy hour so see you in two weeks and if you want to to join the the lower game Channel please join us in the game devil community in the at the game the channel and yeah we can we can add you to the group and you can participate with us thank you excellent thank you guys take care have a good one

Channel: Leniolabs

Views: 1,589

Keywords:

Id: OVHcgkV8IUE

Length: 59min 20sec (3560 seconds)

Published: Thu Jan 19 2023