Love2D | Shader Tutorial 1 | Introduction

[Music] hello guys this is Dustin and welcome to the first episode of this mini series covering love 2d shaders and kind of shaders in general so this episode we're gonna be talking about what shaders are it's gonna be a little bit technical but shaders are a more advanced topic so it's really good to understand what's actually happening underneath the hood um so first off let's talk about what a shader actually is so essentially shader is Co a shader is code that runs on the graphics card now why we need a graphics card in code that runs the graphs cards because our CPUs are really good at running stuff sequentially so one instruction after the other but when it comes to processing millions of pixels and millions of vertices it just it's not built for that so that's where a graphics card comes in of graphics card has thousands of cores that can all run in parallel basically process every single pix on the scene at the exact same time but we have to tell the graphics card what color each pixel should be and where to place the vertices on the screen and that's where shaders come in so love 2d is built on the open G using the OpenGL API that just means the OpenGL is basically an API that allows you to communicate with the graphics card and control it to tell it what to do and all that and OpenGL uses the GLSL shading language so in turn love 2d also uses GLSL though a slightly modified version so geocell is a different programming language it's not Lua and it looks a lot like C so if you're familiar with the C programming language then you'll fit right in it looks just like C um with just a couple different tweaks and stuff like that it statically typed meaning you have to know the type of the variable and the type of the variable cannot change whereas and we'll go into examples a little bit later I mean yeah like I said lefty uses a slightly modified version of GLSL um it kind of changes a few things it also adds some new types like number and stuff to make it more like love TD and more like Lua so let's talk about static static typing real quick so in lieu of it in Lua you can say local X is equal to hello so X is the is equal to hello and it's the type string but immediately afterwards you can set X equal to a number just like this and this changes its type to an int so Lua is not statically typed because the types can change whereas in GLS cell right here we're setting X to be an integer so we're telling what we're telling the computer what this variable is gonna what type it is and we're setting equal to 100 so we cannot later say X is equal to the string this is not valid so that's one thing you need to keep in mind when you're programming GLSL code so let's talk about the different rendering different stages of rendering so the two that are most important to us right now are is the vertex shader and the fragment shader so these so opengl gives us access to basically write code for these different stages and basically the vertex shader says where each vertice on the screen lies so so it's a little bit confusing because isn't love 2d 2d you know framework well it is but it's also graphically accelerated meaning it's actually above using vertices and actually placing vertices on the screen and all that so you do have to transform those using the vertex shader whereas the fragment shader you can think of a fragment as kind of a pixel but with some extra information like the depth buffer and some other stuff like that so it's basically the right here we say where the vertices lie on the screen so basically where on the screen is the sprite located and then down here we get to say what color each pixel on the sprite actually is so you can yeah here's another example so you can you see this points right here that make up this quad you can imagine as sprites is drawn on this quad the photo text shader says where each points lies in space whereas the fragment shader says what color each pixel on this on this mesh actually is alright so there's my presentation let's actually get into programming some shaders gonna mean that Lua alright what I have here is a very simple love 2d project what it does is it loads an image and then it just draws the image at 0 0 and then I use the are key to restart it so if we run this you can see it just draws the map of link to the past and we can click R and ill restart it very simple so let's actually write a shader and we can actually write a shader in line right here using a multi-line string that lua provides so we can say local shader code is equal to and of course the multi-line string starts by two square brackets and the ends of two square brackets so everything in here is just a string and this is where we're actually gonna write our shader code you can load this from a file but for now I'm just gonna do it like this so love duty requires you to provide a a function that um that gets called and in this function whatever you return as a vector for is the color of that pixel this function is titled effect and it has a couple parameters so the first parameter is effect for color so when you say set love to these set color that color gets passed in right here for this right here right the second coordinates is the image or the second sorry parameter is the image that we're drawing the third parameter is the UV coordinates so when you say when you use a love 2d quad it basically updates these UVs right here um the next of the screen coordinates so this tells us where on where on the screen the pixel we're currently drawing is so there's our effect and basically what we have to do is return a color so we're going to return a color and it's just gonna be a vector for the vector four has four values an X Y Z and a W value or you can think of it as an r g b and then an alpha value so we're gonna just return the color red and it's gonna have full alpha value so if we run this nothing's going to change of course because we just created the string so now we actually have to create the shader I'm going to create a value or action we can make it a global I'm gonna say shader it's equal to love that graphics dot new shader now the first parameter is the fragment shader and then the second parameter is the vertex shader in this for in the first few episodes of this tutorial series we're just gonna be covering the fragment shader and then we'll move on to the vertex shader because the fragment shader for now is the most useful for you guys so if you only provide one value or one parameter that will be considered the the fragment shader alright so again if we run this nothing's gonna happen because all we did was load it so now we actually have to tell love 2d to use our shader so we do that with the set shader function then we pass in the shader variable and then once we tell you love 2d to use a shader we have to tell Ajit you love 2d to stop using the shader so we're gonna go down here and we're gonna just call set shader with no value so now if we run this we'll see that we just get a pure red screen and that's what we expect because we said return the color red for every pixel on the sprite so but what we want to just return the regular color we just want to return the actual color of the pixel of that's on the image so to do that we have to sample the image at the UV coordinates so we're gonna just do that by creating a vector for I'm gonna name this pixel gonna set set that equal to detect the function Texel what it returns is the pixel at the UV coordinates alright and then we're just gonna return that so if we do this nothing changes we just see a complete odd the completely the complete regular image that we expect and then of course we want to multiply this by color and then now we'll yeah now I'll be truly correct so down here we can say love to D that's that color and we're gonna set it to red and remember in the newest love to the updates colors are scaled from zero one and not zero to 255 so now if we run this everything will be red but if we don't multiply this color will see that it you'll see that is it doesn't get multiplied by the color so it's not gonna be red so you can kind of see how this works down here so this opens us up to a lot of really interesting things that we can do for instance let's say we want to make a black and whites we want to make the image black and white we want to make our entire game black and white so to do that we're gonna take the average of the four pixel values so pixel 2r + pixel G + pixel dot A or B sorry I'm in to take the average of course you add them all together and then divide it by three don't forget the semicolon this programming language requires you to have a semicolon and right here we're touch saying that this is a floating-point number meaning the number has a decimal whereas an integer it doesn't have a decimal alright next we're gonna return effective for a V a V and review is gonna use the average as the three RGB values and then we're gonna return it a solid we're gonna have it be a solid alpha so if we just run this we have a black and white image now this is technically not a very good way to do black and white because it has very low contrast as you can see so you want to adjust the contrast later and stuff like that but that's outside the scope of this video so one thing I want to talk about before we end it before I move on to the next episode is the screen Koren's variable so the screen chorus variable is not normalized meaning it's not so the value is not 0 to 1 it's actually the 0 to the size of the coordinates so I can explain this better if I just let's just return screen coordinates we're gonna return one for the blue value I'm gonna do X Y for the red and green value so we're gonna run this and you'll see that's completely white so what we can do is we can actually divide normalize that so we're gonna say vector two it's equal to we're gonna do SC is equal to screen coordinates and we're gonna normalize this by the size of the screen so how do we get the size of the screen right here because right here we don't have any we don't have any values that tell us what the size of the screen is and this is where we get to send in variables into our shader because we have to send in variables from the CPU over to the graphics card so that we can use it in the shader so to do that that's where the extern keyword comes from so we're gonna return we're gonna pass in an external vector to and this is gonna be titled screen all right so to actually send this value we're gonna say love actually we're gonna do it after we set the shader love graphics that order no sorry sorry sorry miss a shader send when we send in the variable screen so make sure this is titled exactly the same thing it's this right here and since it's a vector two we're gonna pass in a table with two values and this is gonna be the screen size so we're gonna say love that graphics dot get width and then we're gonna pass in love that graphics not get height now if we do this we're actually gonna get an error she's shader uniform screen does not exist so this so what our graphics card does is there's an optimization so that if we do not use the variable the X turn very well it's gonna optimize it away and just get rid of it so that's why we get this error so we need to make sure that we actually use the screen coordinates there's the screen variable so we're gonna say SC it's gonna be equal to a vector two and we're gonna say screen chord chords divided by screen dot X and then screen chords dot y divided by screen dot Y alright so this would this is gonna normalize the screen coordinates to zero to one and that's useful for using it as a color and then we're gonna say SC right here so if we run this we'll see that we get this nice like gradient color as is because as red starts going to going to one right here it's going to well it's going to turn more red and then as it goes to one one it's gonna be more white and we can use our pixel sample right here series gonna do this in a multiply the color we get by the pixel color and now we can see that we kind of apply it and mix the two colors together so in the next episode I'm gonna be doing so over the next few episodes I'm gonna be covering simple lighting that we can do using just the pixel shader and then later maybe we'll do some cool like Gadre stuff using the vertex shader and the pixel shader combined but yeah that will be the first step this will be the first episode of the tutorial series I hope you guys enjoyed if you have any questions leave them in the comments below I'll try to answer them as soon as I can and if you want to see something about if you if there's something you don't understand or if you want to see a video cut on shaders like covering a certain topic let me know and I'll get to that yeah let's do the ducks with you guys bye

Channel: SkyVaultGames

Views: 15,694

Keywords: Love2D, code, programming, tutorial, shaders, gamedevelopment, gamedev, indiegame, computerscience, love, lua, script, scripting, glsl, opengl, linux, i3gaps, razorgamedev, skyvaultgames, coding

Id: DOyJemh_7HE

Length: 13min 41sec (821 seconds)

Published: Sun Jun 03 2018