Shader Tutorial for GameMaker 01 - Introduction to GLSL Part 1

[Music] hi I'm Reverend Greg and I welcome you to this tutorial series about GLSL shaders for hobby programmers in game maker studio this first video is an introduction to GLSL and we'll explain how GLSL works it does not show how to implant implement a shader in game maker studio it will take some time to explain all the basics so this video is probably going to be quite long but I think it's extremely important to know those basics before we start to code some shaders disclaimer I'm quite new to shaders myself and programming and math stuff is not what I learned professionally so I'm actually not super qualified to do a series and shaders but I failed finding a good introduction series suitable for how we programmers and that spent a lot of time watching videos and reading stuff which usually explained only the first few steps over quickly getting too complicated for me so I also tested and experimented a lot and would like to share what I learned so far in a more guided way in the description below I linked to some sites and videos that helped me learn and might help you two one is TM Wolf's introduction to shaders which is a really good introduction really and one is source tutorial blog which is great really but might go into death too quickly for us on people and another great tutorial is Matt de lluvias GLSL tutorials on github and I also watched vertuous to do 3d shader dev tutorial series on YouTube although they got too complicated quite quickly at least for me and then of course there's Sean Spaulding's YouTube tutorials he has an nice short introduction and an actually a really cool outline shader and I also learned from a library by chance a core kensic and github and sometimes also asked for and got help on the game makers forums really thanks to flying saucer invasion and fell 666 for their help on shade related problems their target audience are people who know at least a little bit about programming in game maker studio and feel like they're missing basic knowledge about shaders autumn only focusing on stuff for 2d games since that's the strength of team s and frankly I don't know anything about 3d games in EMS anyways and since I want to target on different platforms I will only discuss open GLSL shaders but as far as I can tell what you learn in GLSL will help in hlsl as well to follow this tutorial series you need some basic understanding of GMS and its scripting language I will be using TM as tier with all the shader code and nearly all TMS code will work in gaming studio 1.2 or new as well it will help quite a bit if you try to understand a few shaders already but it's ok if you failed so far hopefully this tutorial series will help you with that however you don't need any knowledge of GLSL and you don't need to be a maths crack because I sure ain't anyways everyone who knows a lot about shaders will most likely be bored because after this primer video will progress quite slowly and exercising with several simple shaders before moving on to the next level and everyone who's good at maths will probably either laugh or cry sometimes watching this series because you might encounter a situation with situations where you see a better mathematical solution than me but that said if you notice something I'd tell is wrong or if you have a good idea on how to improve what I'll show then please tell me in the comments if there's enough input I'll add a video to show those Corrections and improvements for all views to learn from my mistakes most of these shaders will be post-processing shaders meaning they make most sense to apply to the whole application surface however some are or can be used as effects on single sprites or smaller surface now about Jadis shader programs running on the graphics card or GPU and determine how 3d objects are drawn to render targets those render targets are actually tryst surfaces like an example the application surface eventually somewhere at the end of each frame TMS will send the application surface to the GPU again but this time the GPU will draw the application surface to the screen instead of another surface since we can program a shade and that's how everything is drawn we can use that to create effects changing colors or the position of each pixel be drawn now you wonder why 3d objects didn't you just claim this series is about 2d games well when it comes to shaders as sprite is basically a 3d model of two triangles forming a rectangle with this write as a text trick glued to it so to understand this we need to understand a little bit about 3d models and textures a 3d model on a basic level is made of points in space connected with lines those points are called vertex or vertices in plural and together they give shape to the model vertices don't just contain positional information however they can also have a color and the scholar eyes the model to make that color look more interesting an image can be glued to the surface of the model those images are called textures and the main purpose of a texture is just that coloring the model but additional textures can also be used as instructions to change the color of the base texture in example a bump texture also called a bump map is used to change the behavior of light on the surface of the model and that makes the surface look like it had earlier one thing textures will also be very important sprites are stored on a texture page GMs automatically creates enough texture pages to have every sprite somewhere on one of those under options windows graphics you can actually get a preview of how the texture page is currently look here you can see a sprite and the texture page it is on you can tell to you must have put a sprite on its own texture page but the default is that GMS tries to put as many sprites on one texture page as possible and that makes sense because swapping a texture page on the graphics card takes time and if many sprites are drawn on the same texture page then the graphic card doesn't need to load new textures as often as if every spot was on its own texture page so that's texture pages as just said Berta's has stored their position in space and their color values another important piece of information they store are their position on the texture page so the GPU knows which part of the texture page to draw the part with the sprite on it sinara texture page example the vertices of the red cars bright also store the coordinates of that red car sprite on this texture page now back to the sprite in GMS when you tell game maker studio to draw a sprite GMS creates a plane with four vertices as the corner of the plane then GM ascends that plane with its vertices and the texture page the sprite is on to the GPU and the GPU draws that to the render target to do the the GPU has several shaders like vertex trader geometry shader fragment shader also called pixel shader and computing the geometry shader and the computer cannot be used in TMS so this series will only deal way the the vertex and the fragment shader and actually mainly the fragment shader which certainly is the most important in 2d games although we will look at the vertex shader as well those shaders with the exception of the compute Raider are working in a pipeline each shader has inputs calculated stuff and passes the output to the next step in the pipeline the first trader in the pipeline is the vertex shader as explained before tree EMA sends two sprites together with a plane and its vertices to the GPU the vertices are then sent to the vertex shader with their vertex data like in example position and space and vertex color and coordinates on the texture page the vertex shader processes that data and passes to processed information on to the geometry shader the code inside the vertex shader is run once per vertex of the object so four times per sprites since the sprite is on a rectangular plane and it needs to do that for each sprite or surface once per frame after game the second shade is the geometry shader it deals with the 3d object data as whole instead of on a per vertex basis like the vertex shader did but I can't tell you more about the geometry shader and we can't use it in TMS anyways the next few steps are clipping and transformation stuff I can't say anything about either after those mysterious steps everything needs to be rasterized and is passed on to the fragment shader the fragment shaders job is to transform the data into pixel information here is calculated what pixel gets what color the fragment shader receives the vertex position the vertex collar the texture coordinates of the vertices and the actual texture but we can also send additional textures directly into the fragment shader and mix those in to calculate the final color the fragment shader runs once per pixel of the sprite or surface so for a 64 pixel by 64 pixels sprite drawn one-to-one to the screen this means the code runs 4096 times for a post-processing effect of a full HD game it runs 1920 x 1080 which is bit more than 2 million times per frame this shows that optimizing a complicated fragment shader can make quite a difference especially on slower devices the reason why the GPU can handle that huge amount of calculations is mainly because the GPU unlike the CPU can do lots of those calculations simultaneously and is built to do the implemented operations really really fast the fragment shader outputs to call it off each pixel to next stages of the GPU pipeline most interesting to us is probably the blending stage where the caller from the fragment shader is blended with the color of whatever the pixel is drawn upon in example the application surface we can't write programs for the blending stage that we can tell the GPU how to blend using blend modes in TMS now let's have a closer look at shader programs if you haven't ever looked at a shader before you might first continue with the video where I show the first few very simple shaders because now I'm explaining a lot of stuff into vertex shader and fragment shader and I think it really helps to have looked at some examples before continuing with this video this is a pass through vertex trader pass through by the way means that the shader is just calculating what the next stage is in the GPU pipeline need without doing in anything else to that data right away we see three parts the attributes the bearings and the main function the attributes contain the vertex data and are passed from TMS to the vertex shaders the attributes are in position a three-dimensional vector it's the position of the vertex in room space in normal is a three dimensional vector describing the vertexes normal vector it's only used on 3d objects the in color of four dimensional vector is describing the vertex Escala in red green blue and alpha and the in text record is a two dimensional vector describing the vertex as position on a texture page we cannot change the content of those attributes but we can process them and store them in new variables so in example we cannot write in position equals something because we cannot change an attribute that we can write something equals in position and then change that new variable varying our variables that are passed from shaded to shader in this case the to varying the varying vector text chord and the varying vector collar will be passed from the vertex shader to the fragment shader will see the same varying there again when we get there between the attribute or varying and the actual variable name we also see back-to-back three and Veck for these are the data types of the variables telling what type of data to variable walls declaring the datatype of e to arrival is mandatory in GLSL if a variable data type is not declared the shade of owned compiled in game maker studio we don't use data type so this could be a bit confusing at first but it's actually very simple but let's just get an overview of the most important data types in TLS are the first data type is int int is an integer it can only store whole numbers and it mustn't ever be written with a decimal point so this will work int I equals 1 but this will throw an error int I equals 1 dot 0 also very important GLSL needs you to tell where the end of an instruction is say with the semicolon at the end of each instruction is mandatory the next data type is float float a real numbers floats need to be written with a decimal point so this will throw an error float factor equals 1 because it tries to store an integer in a float variable but these will work you float factor equals 1.5 or factor equals 1 dot or factor equals dot 5 also note here and that I didn't declare the datatypes more than once doing so with there were narrative so this would work float factor if varying vector Tex chord is greater than 0.5 factor equals 0.05 2 equals 1.0 however this wouldn't if varying vector tex cord is greater than 0.5 float factor equals 0.0002 factor equals 1.0 this won't work because the variable factor can only be declared once in home code the next data types are Vectis back to work three back for our vectors with a different amount of components a vector stores multiple floats similar to a one-dimensional array a vector two stores two flats a vector three stores three floats and a vector form stores four floats they're always floats vectors need to be constructed we'll look into that in detail later but inside the past three shader we already see such a construction vector for objects base paths equals vector for in position X in position Y in position Z one point L first a new variable called object space Pass is declared as a vector for data type as we've seen before with the int and float GLSL expects to get the same data type in this case a vector form on the right side of the equal sign as well with the four values and right side are four floats in position X Y Z and 1.0 are all floats to create a vector form from those four floats this code wraps those four floats in brackets and adds the constructor back form in front of the brackets this constructs avec 4 from for floats the US are said we'll see more about constructors later on there are more data types but these are the most important ones we'll look at one more insight to fragment shader though aside from attributes and variants and there's also another important type of variables the uniforms with those variables we can send information from game maker studio into the shader the difference to attributes is that we cannot control the attributes that's handled by the engine but we can decide what information uniforms send into the shader every shader X I think one we will create in this tutorial series will have at least one uniform however attributes and uniforms share some similarities one is that we cannot change a uniform within the shader so we cannot write uniform float brightness brightness x equals 1.1 because we cannot change the uniform brightness another similarity is uniforms like attributes can only be used in the shader where they are declared uniforms cannot be passed on from the vertex shader to the fragment shader but both can have their own uniform and of course we can do something with a uniform in the vertex shader store the result in a varying and passed at varying on to the fragment shader a last type of variable society from attributes variants and uniforms will encounter our constants they're pretty much the same as in any other language and can be set like this Const float factor equals 0.5 the third big part of the pass-through shader is the main function many programming languages need a main function it's basically the code that runs when the program starts but what confused me was the word void in front of main now everyone who knows some other programming language don t amaz probably won't be confused by that at all but I was so let me explain what that void means in GLSL every function needs a return data type so in example if you write a function that returns a float you need to declare the return type float before the functions name just like cell Beck 3 calculate contrast vector e call load strength Vic 3 new color equals something return new color so this function returns new collar which is avec 3 so the function must be declared as BEC 3 as well I won't explain more about functions here because they're pretty easy to use but we might encounter one or two in the tutorials the reason why I mention all this is that I had trouble understanding why the main function always had a void in front the reason is really simple though every function including the main function needs to be declared with a data type even if it's not returning anything at all void preceding the function name just tells GLSL this function won't return anything let's see what happens inside the main function here we first see a line we already looked at before Veck for objects based pass equals leg 4 in position x in position y in position z 1.0 this line gets the object space position of the vertex the shader currently is calculating it's getting that information from the vertex attribute in position and adds a fourth float 1.0 till complete the back for that 1.0 as far as I know is needed to transform the vector by a 4x4 transformation matrix but I'm not sure about that but the transformation is exactly what happens in the next line GL position equals GM matrices matrix world view projection times object's base position objects based paths Triss created a line earlier is now transformed by a 4x4 transformation matrix called matrix world view projection in other engines programs need to write that matrix themselves in TMS this matrix is built in the newly transformed vectors then stored in the GLSL built-in back for variable GL position GL position is the main output of the vertex shader is passed on in the cpu pipeline so every vertex shader will need to set GL position somewhere beneath that we see two to varying that were declared above the main function varying vector collar stores the vertexes collar to pass it on to the fragment shader to understand what this does we can have a look at the GMs function draw sprites general trois pride general sprite sub image left top with height X Y X scale Y scale raft then collar one color two or three color for an alpha jaws sprite channel gives the four vertices of the sprite a column the vertex collar that collar is stored in the attribute in collar of each vertex now here it gets a bit complicated in the vertex shader the variable varying vector collar is a varying but it will not just pass the vertex collar onto the fragment shader it will pass the interpolated collar of a fragment or pixel between the vertices as you can see in the four colors spread out from the four vertices of the sprite the vertex shader interpolates and the four colors we set in Ross sprites general passes that interpolated value for each fragment or pixel to the fragment shader and the fragment shader lens the collar with the sprites texture color as a side note this example also shows if you don't need the vertex color in your rendering you won't need the attribute in color all the varying V V collar inside the shader you can then just remove these here just don't forget to remove the varying color from the fragment shader as well or every pixel will be multiplied by zero resulting in a black rectangle varying vector text cord is doing a similar thing with the texture coordinates of the vertex it stores the interpolated texture coordinates of a specific fragment or pixel on the texture page and passes that data on to the fragment shader this is needed because when drawing a sprite or surface the fragment shader needs to know where to find those pixels to draw it gets a texture page and coordinates of where on that texture page the sprite is located and then renders those pixels let's have a look at a sprite and the texture page the sprite is on again you see the sprite is here on the text page the coordinates of the texture page always range from 0 to 1 0 0 is the upper left corner and 1 1 the right so this right will have coordinates of 0.5 0.6 and 0.76 0.73 texture page won't always be the same size an example if you set the sprites to have its own texture page that page will have the same size as the sprite set of sprites coordinates on the texture page will range from 0 0 to 1 1 the same goes for surfaces their coordinates also always range from 0 0 to 1 1 but as soon as the sprite is on a mixed texture page its coordinates will hardly ever be 0 0 1 1 and that's really important to remember so this pass-through shader is doing nothing else for setting up later stages in the GPU pipeline the vertex shader however could in example change the position of vertex or changed a vertex color or prepared texture coordinates for a second texture passed to the fragment shader it can most likely do much more than access don't know about it now let's have a closer look at the fragment shader the fragment shader is often called pixel shader as well and although our usual eCollege fragment shader if you think of it as a pixel shader it will probably be easier to understand where the vertex shader dealt with vertices of the sprite the pixel shader will deal with the pixels to be drawn the fragment pass-through shader looks a lot simpler than the vertex passeth ocean we just looked at the first thing to note are the two bearings the varying vector Tex chord and the varying vector color at the vertex shader I told you will meet those again and here they are since varying are passed on from shader to shader every varying variable needs to be declared in both shaders or the vertex shader cannot pass them on to the fragment shader inside the main function to pass through shader only has one line of code GL frog call it equals burying vector color times texture 2d Giambi's texture varying vector text chord GL frag colin is the output of the fragment shader at the end of each fragment shader we need to set it to something or the shader jaws just black pixels GL frag color is a Veck for data type so we also need to make sure there's a rect form on the right side of the equal sign varying vector color is a Veck for it contains the interpolated vertex color we received from the vertex shader if one vertex has to call it red and the other is yellow the fragment or pixel halfway between will be interpolated to Orange so VV kala is not red or yellow at that point we recall it is orange TM base texture is of the data types amplitude II so it's a texture and it's simply the texture of the sprite or surface you're drawing with GMS functions like draws write or draw surface I'll explain a little bit more on the data types amplitude II in a few seconds TM base texture is a built-in variable for game maker studio only you will find something similar in any fragment shader in any language although in many cases more complicated than this varying vector Tex chord is the interpolated texture coordinate of the texture page we are drawing again we're not drawing vertices here we're drawing a specific color front texture between those vertices so VV text chord is not the texture coordinate of the vertex it's a texture coordinate of the fragment or pixel between the vertices the last thing we need to look at is the function texture 2d what this does is take a texture that's GM based texture here and coordinates on that texture and returns the Veck for color of that pixel that texture so here we on the back for with the Texel collar is multiplied with the Veck form of the interpolated vertex collar and the result is stored in a built-in variable GL frat collar which GPU will pass on to the next stages for each pixel drawn for each pixel on every frame 60 frames per second that's pretty impressive and still blows my mind I also mentioned earlier that we'll see the last really important data type it's not used in a pass though shader though the data type is called sampler 2d and actually triste holds another texture so if we need an example a bump map like I showed way in the beginning with the brick wall sphere we can pass that bump map texture to the fragment shader and the variable holding the texture is of that data type sampler 2d as mentioned the built-in variable GM based texture is off that data type of sample dually we will work on some shaders using sample 2d but the first view we'll do without there are several more stages after the fragment shader but I actually can't tell you anything about them except for the alpha testing and blending the alpha testing is pretty much just a stage where pixel with an alpha lower than a threshold get discarded you can read more about it in the GMs documentation if you want to they are never before used that functionality the blending stage however can be really important I already mentioned that in the end all that stuff calculated in the shaders will be drawn to the render target some surface like the application surface or just an effect surface you want to process further up until to this point the GPU has no clue what colors are on the render target in the blending stage however the GPU blends the source pixel which was just calculated in all those pipeline stages before and blends it with the destination pixel of the surface were drawing upon how this is done seems to be really confusing to many GMS users because originally a park pixels on the destination surface can suddenly become transparent why this happens is very well explained by Mark Alexander in a tech blog on the game maker page the blog is called explaining blend modes part 1 and part 2 I can only recommend reading that blog if you haven't done so already I will come back to this topic in a much later video after we already covered several basic shaders this video is getting really really long already and so I'm going to make a cut here and we'll see the last part of this introduction and in the next video

Channel: Gaming Reverends - DevCorner

Views: 16,251

Keywords: Shader Tutorial GameMaker, Shader Tutorial, GameMaker, GameMaker Studio, Shader, GLSL, GMS, GMS2, Introduction, YouTube Shader Tutorial

Id: ch4BYqkL1w8

Length: 34min 29sec (2069 seconds)

Published: Sun Oct 08 2017