Writing a Shader in OpenGL Video Lecture | Open GL: Basics to Expert - Game Development

hey what's up guys my name is Jonah and
welcome back to my opengl series so last
time we talked all about shaders and we
basically just went through what traders
are and how they work definitely check
out that video if you haven't already
does linked up there you're gonna need
to know how shaders work because today
we're going to write some shaders and
I'm actually really happy that we
dedicate a last video to just talking
about what head is actually asked that I
don't have to do much talking today and
I can actually write some code so we're
gonna just jump in and we're gonna start
writing some code if you don't have all
the code that we've written up to this
point yet you can either go through all
the videos in the playlist and just make
sure you've got everything up to date or
you can actually go to patreon at home
for slash the Cherno help support the
series and get access to all the code
episode by episode up to this point and
going on into the future as well let's
dive in and write some shader code so
just to quickly go through all the code
that we've kind of got so far or at
least the important parts after we kind
of finish like OpenGL and all that we're
basically printing in vertex buffer
which is consistent of these vertex
positions positions are the only
attributes that we're currently
specifying we then specify the layout of
that buffer as well as kind of bind
these attributes to a certain index
index number zero in this case by a
vertex attribute pointer and then inside
our render loop we basically just clear
the screen draw the currently bound
buffer which is this one over here and
then we just swap the buffers and that's
it we don't bother on binding anything
or anything like that we don't really
need to all we're doing is we're
clearing and we're drawing this triangle
now let's go ahead and actually write a
shader so the first thing we actually
need to do is this is a little bit
tedious which is why I kind of want to
run throughs as quickly as possible but
basically we're going to define a new
function here which is basically it's
gonna be static because I don't want it
to leak into other translation units or
C++ files it's going to return an
integer and it's going to be called
create shader and we're actually going
to take in two strings Const SC D string
vertex shader and Const SC D string
fragment shader and inside here we're
going to write the code necessary to
compile these two shaders now in this
case all we're doing is we're taking in
the actual source code of the shaders as
these actual strings so we're providing
two shaders a vertex shader and fragment
shader these strings are just meant to
be the actual source code now shaders
can come from a variety of different
places
we could just we could literally just
write a string in our actual simplest
application which contains our shader
which is what we're going to do today
just for simplicity's sake but you can
also read them in from a file you can
download them from the internet you can
read them in as kind of binary data
there's a lot of different ways that you
can actually kind of compile shaders and
get to the shader compilation stage in
this case we're going to provide up in
jail with a string at the end of the day
you still need to provide OpenGL with a
string which is your shader source code
usually like you might want to be taking
that in from a file or something like
that but for now we're just gonna be
taking what's gonna be writing them in
as strings and we're going to write them
in our safe as possible occasion I think
next episode we're actually gonna take a
look at how I like to deal with shaders
in a more professional application and
we'll kind of write some code to
basically simplify the further shaders
that we're going to write in this series
but for now we're just focusing on how
to actually create Cheddar's so
basically the purpose of this function
is to do well a couple of things but
fundamentally we need to provide OpenGL
with our actual shader source code I
shared a text and we want OpenGL to
compile that program link these two
together into a single shader program
and then give us some kind of unique
identifier for that shader back so that
we can actually bind a batch shader and
use it same as like we did with our
vertex buffer what we actually generate
a buffer and we get an ID back and then
whenever we want to bind it we can just
bind that buffer ID so if we scroll back
over here let's start writing that code
so the first thing we need to do is
create a program now here we kind of
generated buffers that's basically the
equivalent here we basically just type
in GL create program now again this is
lovely OpenGL being completely
inconsistent this function doesn't take
in the reference to an integer or
anything like that or a pointer to an
integer it actually returns an unsigned
integer so what we're going to do is
have the beginning just right on line
and program equals GL create program
again no clue why they decided to be so
inconsistent with their API but hey this
is OpenGL so the next thing we need to
do is create our true shader objects so
vertex shader and fragment shader and
this is basically just kind of some
OpenGL boilerplate code again unsigned
and we'll call this one vs which is
going to just be equal to GL create
shader and this is going to be at what
the type of the show
which in this case is going to be GL
vertex shader now what does code is
actually going to be the same because
basically we're just trying to compile
to different types of shaders but the
process of giving opengl our source code
and all that stuff is actually very very
similar between vertex and fragment
shader so I'm actually going to just
abstract this out into it into its own
function so that I can call that
function two times and not have a bunch
of code duplication so I'm going to go
up here and I'm going to go static
unsigned and compile at shadow and it's
going to be constituted string source
and I believe GL vertex shader is
actually it's just an integer I don't
think they really need let's just see
what create shadow takes in jail Ino and
I think if I search for GL n ohm here
just using visual assist it's an on sign
and so I'm just going to write unsigned
int type now I don't really like using
OpenGL s built-in kind of types for
several reasons but mainly just because
I tend to use multiple graphics api's
and if I saw using OpenGL types for
everything then I kind of need to
include up in jail everywhere and all
that stuff so if you're seeing me kind
of use unsigned int in these cases
instead of gel instead of kind of what
is it
Glu it was written like this I think
yeah I don't like using types like this
I've much prefer just using they're also
possible types which they are anyway
that's just because I tend to deal with
multiple api's and that's what I'm used
to just keep that in mind you might have
seen that before it's definitely what I
would recommend doing okay so if we
scroll back up here compiled shader
let's just move this code that we've got
over here actually I might just move
this create shadow over here and then
just make let's say unsigned int ID
equals GL Creator okay common we can
kind of assign this to be compiled
shader this will be the vertex shader
and I'll specify that it is our GL
vertex shader I actually think I wanted
to reorder these arguments because it
probably makes more sense to actually
specify the type first and then the
actual source code so let's just reorder
these real quick no big deal there we go
all right cool
so let's continue on with our compiled
shader function one thing that I can do
is actually gonna want to expect is
instead of us actually providing a C++
data string it's actually going to want
a role string so I'm just going
right on char s rc4 sauce and it just
set this equal to sauce dot C string
which we can write like this this just
returns the point as you can see it
actually says in a comment return
pointer to null terminated the immutable
array so the immutable definitely means
that you shouldn't be changing this but
also this is just a pointer to the
beginning of our data we could have also
written code like this you might have
seen this kind of code before basically
this is just looking at the very first
character in the string and then
returning a the memory address of it
which ends up returning this because the
string API does provide us with say
string I prefer to write this code one
thing I want to point out this is more
of a save as costing but just in case
you do something crazy the source needs
to exist at this point right this string
needs to exist this doesn't copy the
array or return to you a new kind of
array this returns a pointer to the data
inside st d string meaning that if you
have if if string has gone out of scope
or something and you're still holding on
to this actual char pointer is going to
point to rubbish memory and this code
isn't gonna work so just make sure that
your source string is actually still
alive at the time of you kind of
compiling this code sometimes I see
people kind of you know yes string
they'll say string or something like
that this kind of code is very dodgy I
might actually make a c-plus class
episode on this specific kind of
practice because it seems to kind of
throw off a lot of people and I can see
why it's easy to miss if you need to C++
but basically if this just returns kind
of a temporary string and you get the C
string from it then that string might
have gotten cleaned up might have gone
kind of well might have gone out of
scope by the time we reach this line
which means that this this kind of
pointer is pointing to memory that's
been frayed already and you'll get
errors and so like that which is why my
recommendation is also to kind of if you
if you've got a function which which
returns a string to actually kind of
create and create an actual L value out
of it and then you deal with that again
probably probably probably comment for
the C++ series but just want to throw it
in here why not sorry back to our actual
code let's get back on track we've got
our source we've got a pointer to the
actual source character data the next
thing we're going to do is actually
called
traitor sauce which specifies the source
of our shader you can see the first
thing we want is the shader which is
just basically the ID the next thing we
want is count so how many source codes
are we specifying just one the next
thing it wants is an actual now you'll
note that there are kind of two pointers
here it actually wants a pointer this is
a double pointer it basically just wants
a pointer to the actual pointer so we
actually have to we actually have to
give it the memory address of that sauce
variable and then the length now this is
important
if you don't really wanted to use the
whole string or anything you can
specified here but it's gotta cost in
the null pointer again I encourage you
guys to actually go to Doc's GL and
check out all of these kind of functions
and make sure that you actually
understand kind of the code that you're
writing I am mentioning a lot about how
these have these kind of functions work
in this series just out of experience
but remember knowing for example that
you can pass null into the length like
if length is no H string assumed to be
null terminated stuff like that really
does help to read the docs and I would
be and if I was actually trying to learn
it properly like I assume most of you
guys are keep this open as you go along
with these videos and as you type this
code certainly so that you know kind of
what's going on OpenGL tends to be very
flaky in the sense that if you actually
get a little minor detail wrong you
might just see a black screen in a might
not work at all very very soon we're
gonna have an episode about OpenGL
errors and how to deal with them and my
strategy for dealing with them so that's
coming up soon we don't really I haven't
done it yet because we're just drawing
something as trivial as a triangle and
really that that you wouldn't expect
that to go wrong would you I mean it
will and it can can and probably will
for a lot of you go wrong but very soon
when we start to get into more kind of
fun stuff I am going to make an episode
about OpenGL errors but that being said
keep the documentation open read it with
an API as fragile as OpenGL that gives
you so little help when things go wrong
you want to basically master the dog
master the documentation if you want to
actually be good at OpenGL okay so going
back here we've specified the shader
source code the next thing we should do
is basically just say GL compile shader
and we need a specify whichever want to
compile with in this case is just the
shader ID and that is actually all the
code that we need to write to compile
the actual shadows so we can return the
ID and everything is good now we're not
doing any kind
error-handling so we definitely need to
basically just syntax errors and stuff
like this we need to do some kind of
error handling before this actual shader
to see maybe we just accidentally you
know mr. mr. semicolon or something like
that in our shadow source code and we
can handle all that in a minute okay so
going back to our create shadow with our
juju placate this line of code call it
FS for our fragment shader
type in jail fragment shader and give it
the fragment shader source code over
here once we've done that we basically
need to attach both both of these
shaders to our program so think of this
almost like compiling C++ code we've got
two different files and now we want to
basically link them into kind of one
program so that we can well use both of
them so we're going to type in jail
attached shader we're going to specify
in the program that we want to attach to
and then the actual shader so we're
going to do this two times one for each
shader that I showed a hand fragment
shader then we're going to link our
program by calling GL link program which
if we just take him the name of the
program or rather not not the name of
the ID and finally we're going to type
in GL validate program and these
functions again something that you
should read about in the documentation
if you actually want to understand what
they do you can kind of see that
basically what this does is well
performs validation on the actual
program and the kind of status of the
validation again will be stored as part
of the program's object state which you
can actually call kind of jail get
program and query what the actual result
is and all that stuff again I encourage
you guys to read the documentation I'm
not going to explain these too much
right now because it's kind of code you
write once and forget about so I don't
really think it's important to talk
about them too much but definitely can
sell the documentation especially if you
have problems with your shader or you
just want to understand more and be
ultimate OpenGL master finally we can
actually delete our shaders now that's
because they've been linked into a
program so we can kind of delete the
intermediates if you will in C++ when we
compile something we get intermediate
obj files object files when we're
dealing with microsoft's compiler and at
the end we can kind of delete that
because we've actually got an actual
program now they're stored inside the
program
so actually gonna call jail delete
shader with the s and FS
there are some other functions like GL
detach shader and stuff like that which
will actually delete the source code the
reason I don't like to touch those
functions there's a few reasons first of
all
really that necessary to even clean that
up because it's it's takes a trivial
amount of memory anyway but having the
shade of source code still around is
very important when you kind of deal
with things like graphics deep body
because if you kind of delete the shader
from the GPU the shader source code from
the GPU
you can't verify and you can't kind of
breakpoint it step through your shader
like you can Watson and video tools
which we will get into if you kind of
detached your shaders and delete all the
source code so that you're going to lose
a lot of that a lot of that debugging
ability and to be honest like a lot of
game engines don't even bother calling
GL detach header because it's or such a
minimal like game that it's just it's
not worth it and that's really all we
have to do we can finally return our
program now you might have noticed that
we're actually returning you int whereas
this program is an unsigned int so I'm
just gonna clean this up so that it
actually returns an unsigned int and
that is our shader let's quickly do this
error handling because I have a feeling
when I actually write the shader in a
minute in a minute here it's just it's
just going to be wrong and I'm just
gonna make a mistake and then I'm gonna
be like great nothing works and I'm
gonna have to end up writing this error
handling code anyway so let's just write
it now
much like we just read about GL validate
program setting like some kind of state
and then we can retrieve it we can also
retrieve the result of this compilation
compiled shader doesn't actually return
anything however we can't query it to
find out if anything's wrong and the way
we do that is by calling GL get shader
IV now this is our first kind of
introduction to I and V and all this
because Jill gets shader is really the
function IV is basically the types that
it needs so first of all we type in the
ID then we type in the parameter name in
the form of an actual GL enum which we
know is an unsigned integer basically
this is just going to be a constant here
that's defined by opengl in this case
we're getting the compile status and
then the int parameter which we know is
just an int pointer so I'm going to type
in int result and then passing the
memory address of that result I
basically specifies that we are
specifying an integer V kind of
specifies that it wants a vector so an
array kind of one
case it really just means that once a
pointer then we check to see if the
result is equal to false a result equals
GL false
now you might note that jail false if I
just hit alt f12 here jail false is just
defined to zero so you could if you want
also kind of specify if results with an
exclamation mark to save result as false
and I usually do stuff like that I don't
like doing it here though because we're
specifically checking with jail false
and not jails kind of false or anything
like that this kind of just makes a
little bit more sense I think to people
watching as well so I'll keep it as that
so if there was almost false means that
shadow did not compiled successfully
what we actually want to do now is get
the the error message and the way we can
do that is basically query the error
message of length first so if I type in
into the length and then GL get shader
IV ID chill in for log length you can
see why I just love open jails API
because really it's just it's just as
it's just great and then we'll specify
the memory address of length so that it
can store that data then once we have
that we can actually construct just a
stack allocated kind of char right here
so a message I'll say with the parameter
length now now we get a little bit of a
problem here that I don't like either
but you can see why can't just create a
stack allocated length here because
length is actually a variable and not a
constant and for some reason the C++
just cannot grow this track the stack by
an arbitrary size in some cases we never
know where we're we're good though we're
above this kind of level of comedy so
we're actually going to hack this I
still want this to be defined on the
stack I could use something I could just
most people will probably solve this
just by making this a heap allocation
and then kind of deleting it later or
maybe assigning it to a unique point or
something like that I am NOT most people
I don't like this I still want this to
just be a normal child allocated on the
stack so what I'm going to do is
actually set this equal to Alec a and
then the size being just length times
size of charm chopping of course a law
case child like that okay I'm going to
cost this result back to a child pointer
and we're going to get a point to that
like that Alec a is a function that C
actually gives you which lets you
allocate on the
that dynamically like what we've done
right now okay use at your kind of
discretion a lot of people don't like
using stuff like this there's no reason
for not using it it's a nice function I
like using it in this case it's totally
necessary and let's continue
I might actually make a super lost
episode about this specifically because
it's not as it's not as well-known as it
probably should be okay the next thing
we'll do is GL get shader info log
cheerleading ID the buffer size being
length then it wants an actual length in
the form of a pointer some reason this
is gonna be the output length I guess
maybe again should read the
documentation and then finally once a
pointer to that actual buffer so we'll
just type in message like that then
we're going to actually print the
message to the console I'm just going to
use standard C out in this case so C out
a message and end line before we
actually do that I might print a kind of
fail to compile shader now we don't know
which kind of shader it failed to
compile at this point so what we
actually could do if we were if we were
really cool it's basically just check to
see what type the shader was in this
case we know we're only compiling into
River text or fragment shader so what I
could do is if I just kind of separate
this code out like this what I could do
is write type equals GL vertex shader if
that's true I'm going to actually move
it down here so you can see what I'm
typing if that's true we're going to
write vertex if it's false we're going
to write fragment again this is a little
bit happy because we could have more
than just these two shadow types but I
think that's probably totally fine I'm
going to kind of bring this line back to
being on one line but I've actually got
wrapping turned on so you can see a bit
of it anyway
all right cool so we're printing a
message saying that we failed compile
our type of shader and then we're
printing the message finally we should
kind of handle this result by writing
kill delete shader because of course our
shader compilation didn't work out and
then we can return something like zero
because we are taken outside and so we
can't really return negative one okay
cool there we go now we're not checking
here to see if it works or anything like
that which probably has a cert or
something like that if this doesn't work
out because it's kind of vital to a
program running successfully but anyway
we'll at least get the error message
printing to the console that should be
enough to debug it in our situation here
alright cool so that's all that we need
now we can actually write a shader
quickly and
we use it so let's talk about writing
some shaders now we're going to come
down here to just after we create all
these stuff it doesn't really matter
where we do this much do is after the
kind of add X attribute points on so
first of all we know that we can just
type in an signed into shader equals
create shader and then we just need to
specify true strings which are the
source code and that's it so let's kind
of just write out first shader STD
string vertex shader equals and now
we're going to write our source code now
this is a little bit annoying to write
as a C++ string because we have to put
like a newline character after every
line and all that super annoying but
we'll kind of do it anyway
so I'll kind of bring this down here to
make it a little bit easier first thing
we're going to write is version 334
which basically just means that we're
going to be using geo cell which is
OpenGL shaker which is the GL shading
language are just heading language
version version 3:30 and core means that
it's not going to let us use any kind of
deprecated functions or any time that
that would result in a shader
compilation because we just want to make
sure that we're using the latest and the
greatest that we have now the Rays I'm
not writing like for 50 or for 40 years
because we don't really need all those
new features just yet when we do we will
switch to using those more modern
languages and in this case we're just
ensuring a bit of extra compatibility
and want to write a newline character
and then I'm going to just press Enter
in C++ you don't need to write like plus
or anything like that if you just write
strings kind of like this one after the
other they will be concatenated into a
single string okay next we'll have just
a kind of a blank line just because
again I'll make sure I kind of write new
line here we didn't really need to write
Nilay this is more for me than actual
C++ but will actually do it anyway and
then finally void main this is our main
function for our shader just going to
open it up like it was any other
function you can see I'm already kind of
getting to write new lines everywhere
which is fun another reason why defining
these kind of shaders and files is a lot
better and we will probably do that next
episode this main function works much
the same way as our actual main function
does in C++ when we actually have int
main here we're basically just
specifying what function did this this
main function will get called when this
vertex trader gets called and what we
basically want to do in here is just set
a GL position equal to our attribute
which is our vertex position we
we're kind of specify over here and we
taken by our various attribute at index
zero so how do we access this data how
do we access these two floats in our
actual shader well we need to specify
the actual attribute up here so I'm
going to kind of add some space here and
then specify the attribute and I want to
do this by basically typing in in BEC
for position and then at the beginning
of the line I'm just going to specify
that this actual attribute is located at
index zero and the way I'm doing that is
just by writing a layout location equals
zero like that and then in fact for
position so this does zero is should be
matching up with this zero it is the
index of our attribute so one thing you
might have noticed is that I'm taking an
effect for however I'm actually getting
it effect - why am i doing that well
first of all this needs to be a back for
eventually anyway because GL position is
actually a back four and we can't just
assign a back to it or that four we
could change this to be a back to but
then we actually have to kind of convert
it into a back for by taking in position
X Y and then kind of specifying whatever
we want for the other values which would
probably be something like zero and one
we don't really want to do that instead
what we can do is actually get opengl to
convert this into effect for anyway
remember it knows this is a vector it
knows is this is a two-component
vatican's we've written two here that's
why it knows to cast this and because
it's an actual position it's going to
set the forth kind of component position
double w to actually be one which which
is what it should be if our if our
vector is an actual positional vector we
might talk a little bit more about
mathematics in opengl and how vectors
are work and all that in a future video
but just know that this is what we're
running for now okay cool
that looks pretty good that's actually
all we need to do in our vertex shader
so let's just end that with a semicolon
and let's write a fragment shader I want
to copy all this all this code here come
down here all this fragment shader I
don't need any of this kind of layout
stuff but what I do need to do remember
is a fragment shader should be
outputting a color so I can just I can
keep layout location equals york here if
i like it's not really necessary it will
be 0 by default anyway but I'm just at
changing this to be out there for WA and
then I'll just call this color this
version 330 says the same
main function stays the same but here we
actually specify what color we would
like to output let's try red so I'm
gonna write color equals back for 1.0
0.0 0.0 and then the Alpha value which
is will most of that to 1 okay cool so
colors and graphics programming are
traditionally just floats between 0 and
1 in kind of a non HDR environment so
basically zero is black and one is white
so if you're used to cars being between
0 and 255 think of zero is zero and 255
as 1 so if i write 0.5 that will kind of
be 50% red and the way that these go is
RGB and a now this kind of RGB a layout
and all that kind of depends on your
actual frame buffers format but for this
kind of default setup it definitely is
just RGB a so we should see our triangle
as red now that is all the source code
we need your right hopefully I haven't
made any errors that don't think I have
just checking to make sure I have new
lines everywhere I don't over here
that's not a big deal but I'll add it
anyway
and that looks pretty good to me cool so
over here on the Creator let's specify
our vertex shader and our fragment
shader and hopefully everything goes
well we can bind our shader by just
running GL use program and then shader
and that's it our actual red shader
should now be used to render this I'm
gonna hit f5 and hopefully we will see a
red triangle and we see a white triangle
and no errors as well fantastic let's
take a look at what I do wrong okay so
just scrolling up here and let's take a
look well there you go
GX Chado nice I bet you guys had a good
laugh when you saw me write that make
sure this is obviously compiling the
type so that when I combine two vertex
shaders I'm actually surprised that it
worked well actually no I guess this is
a valid vertex shader because we are
outputting color is just kind of avec 4
a.m. that's all good that would have
been a valid vertex shader that's why we
didn't get any errors we should
definitely verify our messaging is
working correctly let's just hit f5 and
see if this works though alright
fantastic you can see that we've got a
red triangle and our shader seems to
work successfully awesome let's quickly
just close this I'm going to make a
deliberate syntax error in one of my
shaders maybe in the fragment shader
just gonna miss this semicolon here
let's hit f5 okay so we don't get
anything on the screen
and you can see now log it actually does
say fail to compile fragment Raider and
spies it online 9 we have an error
because world's it just has syntax error
syntax error fantastic Thank You Intel
it's great compiled amount alright cool
anyway let's go kind of back let's
revert back to our code this is a very
very simple chatter we've just got a red
triangle running I'll just hit a 5 again
so we can see that awesome triangle
pretty cool stuff one more thing I want
to quickly mention is that what you
should do to clean up your shader once
you're done with it so maybe like over
here is actually called GL delete shader
and then the shader you want to delete
now we should also be doing this for
kind of vertex buffers and all that we
are going to abstract a lot of the stuff
into classes in fact next time I'm going
to show you how to actually reach
headers in from files and my strategy
for reading them in and how I like to
kind of write shaders because I don't
like the way that OpenGL kind of makes
you write them and all that so we'll
talk about that next episode but as we
begin to abstract this into files we are
going to cover actually cleaning up and
all that stuff because that's gonna get
super important when we actually have a
running program in which we kind of
create and destroy things all the time
and we don't want to be leaking Trippi
to memory or anything like that now
we're not going to go too far with the
abstraction of course because this isn't
a game n in a series but we are still
going to abstract it a little bit so
that we don't just write our entire
program in one file it's gonna get very
difficult when we have a lot of code to
actually achieve certain graphics like
effects and strategies and all that so
that should be a lot of fun anyway I
hope you guys enjoyed this video if you
did you can hit the like button if you
want all the source code for this video
because we did write quite a lot you can
go to patreon.com/scishow channel help
support this series and you will get
access to a private github repository
with all of the source code episode by
episode so you can just follow along to
the episode you're currently on and all
of that by just looking at the commit
history it's great and again you'll also
be helping support the series which is
very important there are also some other
pretty cool rewards for example be top
tier patrons actually we have like a
one-hour hangout once a month where we
just talk about pretty much anything
it's pretty cool stuff anyway definitely
check out patreon composter Cherno
really does help support the story so
thank you so much to everyone who is
helping make this happen as always you
can talk about this episode we're just
leaving a comment below or just going to
the channel become such discord and
joining that community it's awesome next
we're gonna do some more shady stuff
I'll see you then goodbye
[Music]