Setting up OpenGL and Creating a Window in C++ Video Lecture | Open GL: Basics to Expert - Game Development

Hey What's up Guys My name is The Cherno and welcome back to my opengl series!
So this is really the first episode of My Opengl Series
last time we just talked about what opengl actually was, a little bit about how it worked
and also what this series would actually contain
if you Guys haven't Seen that video then check it out in that corner
Today though we're actually gonna Jump in and write some code
we are gonna get some work done we're going to get an opengl window
displaying and maybe even draw a triangle
with this series specifically I want to take a more practical approach with the C++ series
I did a lot of explaining, a lot of theory before we actually started writing code
i still want to do that for this
for this series because i believe it's very important to understand actually how everything Works
But
With These Kind of first few episodes I just want to get some code done
i just want to actually write some code
and have something happening on the screen
so that hopefully you guys can kind of feel that sense of progression
a little bit better and then what we'll actually do is end up kind of
as that goes on maybe once a week or so
Have a Bit of a Theory video and Just Talk about how OpenGL specifically works or what Actually happens behind the scenes
Now that being Said our Goal for Today is going to be Just to create a window right i want to be able
To have My operating System create a window for me so if my application is Actually in the form of a Window and then Hopefully
The Goal with that is that in the future we can Draw all of our Graphics inside that Window Now this series specifically i
want...want
To have
Multi-Platform Support Right I want People Who are writing this code on Windows Mac and Linux to also be Able to run this code and
It Should Work on all three Platforms
What that means though is That
We Need to we need some way to set up windowing and Windowing on and Always creating Windows Is
Very Very Platform
Specific so in other Words the way that you the way that you create a window on Windows is you use the Win32
Win32 api, right so you Actually use the Windows Api to
Say Hey i want a window Because of Course the way that You create a window is going to be specific to the operating System
you're using Because That's like an operating System Level Thing and That's What i probably Would do if i was writing a game engine i
Would Probably Just take The time to actually set Up a Window Myself using the Actual operating Systems Api
For Each Platform That i Actually want to support This series though Isn't about
How to write a game engine That's gonna Be another series Later on This series are specifically about opengl and how opengl Works and how
To write opengl code so we don't really care about. How to set up a Window all That
We Just want to write some opengl code and so because of that i'm Actually gonna use a library that Will basically do that for
Me and all This Library is going to do is provide me with the appropriate platform Layer so in other Words it's going
To provide me with an implementation of That windowing creation code and management code as well for
Windows Mac and Linux So that Everyone can Follow Along With That and there are several libraries That Allow Us to do this
But the one that we're gonna use is something Called GLFW and the reason that i like
GLFW is Because This is a Really Kind of Lightweight Library all it's going to do for us is create a window create an open
OpenGl context and Give us access to some basic Things like Input
That's all That it's going to do it's not like SDL which is like a Full Kind of
They've actually Got like a Renderer There so that You can Draw Squares or triangles or whatever you want
to the screen and That'll be Implemented in Either Directx or
Opengl and That That's like a Whole Kind of framework i don't want any of That we're going to be writing our own stuff
All i want to do is automate that first step of: I want to create a window and i don't want
To have to write different implementations for each Platform
I want this code to be pretty multi-platform Pretty portable so i'm going to use library like GLFW Just be that off for me
Again i could Write It Myself But That Would Mean writing It three Times for each Platform
Windows Mac and Linux in this case and That's Just gonna be waste time and not Really the point of the series
So Just Want Everyone to understand Why i'm actually Doing this
So yeah Let's Go ahead and download GLFW if You go to the url that is in the description Below Which is GLFW.org
You'll be taken to this page we care about basically
Two Pages Here first of all There's Just download GLFW 3.2.1 it's Exactly What we want but also on the
Documentation, There's Actually Some Example code of how to create a Window in GLFW. you can See that it's very Very concise right All
We have to do is basically
initialize GLFW and then We Could Just create Our window and That's as simple as that if you want to make our opengl context
We Just Call This One Function and
Then we Can Start a Basic Loop to poll for events and make sure that When our window is closed It Actually Closes and you
Can See we can Write opengl code right Over Here
it's it's Very Very simple and it's Pretty Much Exactly. What we Need to get started
So up in the top here i'm gonna go back to GLFW so this download is Actually for all of the source code
This is another Thing that i want to mention if i was writing if This Was a Game engine Series of something i was actually
Making a Serious application i Would Probably download The source code and Build It Myself i Would add It as
a separate project and Visual studio and probably compile it into a static library and Then Link It with My main Application
Just so that if i Need to debug something i had the source code right there and there's Really no downside to do that
I like having as Much source code as i can in my Project
However This again is about opengl we don't waste time with that all i'm going to do is Just get pre-built
Binaries for My platform and Just Build with That right so to do that I'm Going
To go to download and then You can see we have Windows
Precompiled Binaries so Windows Actually Has prebuilt Binaries linux and mac it Says that you Actually have to downloading and compile source the package above
There's a Guide so follow that if you're one One of Those Platforms i suspect People will probably Run into problems with that Because it's
Not the most Trivial task and With like Make systems like That
It Just tends to be all over the place so if you Need Help with compiling this Format for Linux
Definitely Join My discord at thecherno.com/discord
there will be Plenty of People There Who will be happy to help you out with That
but Specifically since we're on Windows and we Will be for the entirety of This series I'M Just going to download the appropriate
Binaries another note Here we Have 32-Bit or 64-Bit
Binaries
Question i get all The time Which one do Which one do i Get right a Lot of People Seem to think that well i'm
running 64-Bit Windows so of Course i want 64-Bit Windows Binaries
That's all That's not Correct What you Actually want the the
architecture That matters is the architecture that you're Building for right if we Set Up our Visual studio project to build for Win32 or
X86 then we want to get the 32-bit ones if our application is being Built for 64-Bit or x64 right
That's where we want the Binary so it's Actually the base what matters is the architecture the platform of Your
Application so how You compile your application
Not Not the operating System you're Using
Of Course the 64-bit application won't Work on a 32-Bit operating system but if
you're on a 64-Bit operating System Like Windows
10 64 bit you can Run either 32-bit applications or 64-bit applications so the One that you actually download is going to Depend on
On what you compile your application With so we'll Just be using a 32-bit application Because we don't Need a 64-Bit one
For more Serious projects i probably use 64-Bit There's no real difference
It's easy to switch as well it's not like a Whole deal it's not like we have to write different code or anything most of
The time it's Pretty Much The same Thing but to keep It simple
we're Just gonna Use 32 bits over Here i'm gonna click on 32-Bit Windows Binaries and download That
ok
So inside the archive that You download there'll be a GLFW folder and a Bunch of Libs we'll Talk about setting all that Up
In a minute but first We Actually Need to create a Visual studio Solution
So every here i've got Visual studio community 2017 i'm going to click file -> new and then Project
I'm going to make sure that i'm under Visual C++ and General and Select empty Project as My template we're Just going to make a
Brand New Project from scratch in the Location I'm Actually going to change Location from being in my documents
To basically being C:/dev/YouTube/opengl you can Set This to anything else i like to have i like to keep all of
My development Kind of Stuff Under C:/dev that Way it's not in a user folder and i don't
Have to deal with all that so Just C:/dev and then
OpenGL or whatever i've Just put it into a YouTube folder Because of Course this is for the YouTube series
I'm going to call This opengl and Just Click ok
Okay so we've got a Visual studio solution and project setup everything Looks Pretty Good if you want to set It up properly and more
or less Just set It up in a Nicer Way because the Default Visual studio
Way that It sets Up new projects and solutions Is a Bit It's a Bit Weird Check out my video on my Kind of favorite
Set Up for Visual studio for C++ so there'll be a Link Up there
I'm not gonna go through all That Right Now it's Just gonna take time That's not Really about Necessary but definitely Check out that video
If you want to know how i would set This Up properly so again all we're Doing Today IS we're trying to set up
GLFW Basically as Quickly As possible so in the source files well one Thing i'll Actually do is i'll click on the project name i'll
Click on Show all files and then I'm going to Actually make a New folder Here called
src for source so in this show all files mode Actually Will mimic our
Windows Explorer file structure and Directory structure and all That Again That's all Described in the video that i linked Up there so check That
Out if you're not sure
Under There i'm going to add a New item i'm going to call This
"Application.cpp". This going to be our main file the file with the main Function
I'll hit add and i Finally Just have a Normal C++ file in my project what i'm going to do now is Just Basically
Include iostream and Make sure everything is set Up in main i Just Type in std::cout hello and
std::cin.get() i like to do this Just to make sure everything's set Up and everything Will compile you can see we Get this
Opening With Hello Which is perfect so now i'm ready to actually link GLFW and get it to work if i go back
to the GLFW website so here under
Documentation Literally All I'm going to do here is Just copy pretty Much This in this source code Just in its entirety
Copy
And Just paste it over here okay when you get a bunch of Things not Working Because of Course when you actually Setup the library
so let's talk about how i'm gonna set up GLFW in our project i'm going to go to that Zip archive that i
Downloaded with all of our libs there are two things that Matter for us here every Kind of C++ library has include and Also
Lib Right so we're going to talk more in Depth about how
C++ Libraries Work and how to link them and all the differences between all that in a future video in the
C++ series it'll Be Linked Up there if it's already made but definitely Check that out if you're not sure about how Kind of
Libraries Work in C++ but Out of Here what we care about is the lib file there's Actually
Two Here the two lib files that we have Here you can see one Is Labeled with dll so This One's Used for Dynamic
Linking If You want to use the dll to link Up runtime
"glfw3.lib" Is the one that we're going to use though Because That's Just for static linking we don't want to link GLFW
Dynamically we Don't want
to have to use a
dll file
There's no reason for us not a static link yet so we're going to link It statically so what I'm going to do is under
Opengl Just gonna right Click on there hit open folder in file Explorer so that We Actually get to our Location of all of This
And What i like to do is in the solution directory so this is the solution
Directory The Directory with That Solution file i'm going to make a New folder Called
Dependencies and inside
Dependencies I'm gonna make a Folder Called GLFW and then it's like Here i'm Actually going to put all the files that i want
So out of What i want in this Actual archive that i downloaded i want include and i wanted to live Vc
2015 Which is the latest Visual studio version that We Have Here we'll paste this into here of Course we're Actually using Visual studio?
2017 although It won't Matter for our Purposes
It will still Work inside here i can Actually delete that dll file and
The dll lib as Well we don't Need that and include Should Just Have everything We Need so now what We Actually Need to do
Is tell this project that i want you
To also include this folder for includes so that we Can Write code such as "#include "
right so we Need to add an include directory and then We also Need to add
This Lib file to the Linker so that the Linker Actually Links This loop file in and It can Match Up all of The
GLFW Functions so let's take a look at How we might set that up
What i'm going to do is right click on openGL
Hit Properties Now The most important Thing Here i'll Just Make This smaller the most important Thing Here is that youR all Configurations
okay and all Platforms is Really Matter we're Just Messing With Wouldn'T that you do for now but all
Configurations Make sure you're on all configurations and not Like
release If you're editing release and you're Actually in debug It's not gonna Affect your currently
selected Configuration You all you Get errors so we want all Configurations
Under C C++ in general we're going to add an include Directory now
What we could do Right
Is open up our folder here and Just Basically Copy this path and put It in there now we don't want
To do that though Because Other People Who will use this project might not be storing it in C:/dev/YouTube/opengl blah blah
We Actually want to make a relative to the project itself and
specifically i like Making It relative to the solution Directory
Now Visual studio has a Macro for us that is Actually Ours Current solution Directory if we if we Open This
Tab Here and Go to macros
Then You can Actually Type in solution directory and You'll see what it Actually is is C:/Youtube/openGL so basically What
It is is the Actual Solution
Directory That We Have Here the directory that has this solution file and we're Actually going to based our
Our Our include directory path from that Solution directory so i'm going to type in solution
Directory That Actually Already Has a Backslash at The end a trailing Backslash so next we'll go into
Dependencies opengl and include in fact all I'm going to do is copy that last Part and put it over here?
Okay that is our include directory if you want to make sure it's Correct
You can Go to edit here and look at The evaluated value if You copy that into
YouR file Explorer and Hit Enter It Should take You to well GLFW and of course Now that You've set that up on
The Over here this "#include "
Should Work Because we Start in This include directory we're going to the GLFW folder and there's glfw.h
ok
so That's how we can Set Up the include directory next i'm gonna set Up my library directory as Well so on the linker in
General I'm going to specify an
Additional Library Directory This Could Be Very Similar to what we had before gonna start off with Solution Directory
It's going to go to dependencies
In fact i'm Just gonna go back to my folder and copy the path
So under GFLW we Have lib Vc 2015 and there there it is right so grab That
Check that in here and we're good to go on
The input i'm Actually going to specify Which file we want to link Now we don't Actually Need to link all of these i don't
Know Why they here they Feel but Kind of by Default But They're Actually Included in Default Libraries so we can Get Rid of All
That to keep It nice and clean and Just Type in glfw3.lib so basically we're linking
With This glfw3.lib file
Again if I'm going Too fast or anything i will make a video specifically about This in more detail i Just don't want to spend
all day on This so check That Out tear that video out iF it's already made it's not then Just wait Now another Thing we
Actually have to link with is
Opengl But well we'll do It in a minute i'm going to hit ok Because That's all we'll Need for Now you can see That
All of our compiler is go away if we Hit Ctrl F7 to Actually compile our
application You can See each compiled Successfully Now it's not gonna Link
Successfully Because We Haven't Actually you can See we're using an opengl Function Here but we haven't Links with opengl?
But They can't the compilation Succeeds and That's Kind of all we care about for now now if i right click Build This it's Actually
Going to compile It and link the entire application
so let's take a look at That okay so we get a Few Things first of all we Have an Unresolved external Symbol again i
Don't i'm not a big fan of Looking at The Actual error list you Should Be Looking at The output because They are a list
Is Just Mostly Lies Well not in this case but It can be and this Always Gives you more detail
Ok this Kind of Default Lib Conflicts don't Worry about that That's Just a warning and specifically it's an Annoying
Warning That we don't Need to think about fixing even it's not that important This is important However we have GL_CLEAR Is an unresolved exception
We Also Have a Bunch of Window Stuff That is Unresolved Now because i did actually delete most of the
Libraries that We Leaked Again so we'll bring some of them back in a minute but the first one that we're getting Which we'll fix
first is Gl_Clear ok and we Can
Actually Get Rid of That error By Linking with The opengl library so What's happening is we're getting a Linking error if you guys don't
Know how to C++ linker Works Check out that video because i have already made that but Basically?
What Link is trying to do now is find a definition for that Gl clear Function That gel clear Function definition Is inside an opengl
Library file so we Actually have to link against that so
Our view here in Additional dependencies I'M Just gonna add a Semicolon Type in opengl32.lib
If i hit ok and i
Build This you can see that that first error Should Go away
and in fact Now the first time resolve a Sternal Symbol is Just register device notification Stuff Which is basically Windows Kind of Api stuff
So let's Go ahead and add that in Now before we do that i actually Want
to show You one Way that you can find these Things i've deliberately Gotten Rid of all the Kind of Windows and Clothes Because i
Wanted to show You Guys how this Actually Works and how to set it up Kind of Really From scratch
but if you see errors like this Because They Actually do tend
to be quite fog quite common sometimes if you don't set Up correctly you can See that the Function name is Actually registered device notification
W so let's grab That and copy that Actually Googled that so on Msdn
I'm Just gonna Google That you can see we're actually created with Msdn here Which is the microsoft
Documentation so this is the Actual Function That we're trying to link and we don't know where it is so if we scroll down you
Can Actually See that the Library that it's in is user 32 lib
So what we can Do is copy that and Actually Link with that and that that Will actually go away so over here i'll Just
Type in user 32 lib Hit Enter Hit ok and try and Build us again you can see that we Get Way less
Errors Now we've only Got Just a Handful now and
A few of them are Basically create device context Here and swap buffers and all That Stuff so again When i do the same thing
With This i'm gonna Copy this i'm going to go to
im going to go over to the Google Just Basically Google That Function Click on the Msdn link scroll down and you can See This one is in gdi
$32 lib so back to my project and i'm going to link against
gdi32.lib
Okay i'll hit ok and try and compile My code again alright Just a Few more Now drag query file
W again copy that paste it in here msdn and here it is
shell32.lib so back over here you guys Kind of Get the drift shell
32 dot Lib okay and Build alright awesome
No errors at All If We Hit F5 or Just Local Windows debugger to Run our Actual application you can See that we Get a Black
Screen
Now all this Manual Linking That i've Just done you don't need to do that Yourself When you create a New empty project in Visual
studio Like We did you can see it actually did have a Bunch of Links Already Including Like
Kernel32.lib and Stuff Like That i Just wanted to get rid of them Just
to show you how it Actually Works and how to link everything Kind of from scratch i
Hope You don't Need to do that They're Just this was Just Kind of As an Example
Now we've got a Black Screen Here let's quickly draw a Triangle Now what i'm Actually gonna do to Draw This triangle is use legacy
openGL so in the first video we talked about What a Legacy opengl Was and Why we Shouldn't be using this
Legacy Opengl Is the fastest Way that i can Now in
Like five Lines of Code
Draw a Triangle on the screen and My purpose right Now is Just making sure that opengl is Up and running
Not writing again I'm not writing a Graphics engine Right Now right so
Whilst you Shouldn't Be Using like a Seat Opengl like in i guess professional applications Is
Perfectly fine for Debugging People Need to realize that even though some Things are
Discouraged if You're Just writing It temporarily to test something There's
Absolutely nothing Wrong With it so Here's
Keep That in mind so what we're gonna do over here i'm to jail Clear Because i'm Actually Just gonna Type in Jail Begin
Jail Triangles and This you and you Guys Will Kind of get it to
Experience and Legacy Opengl Cars so between Jail Beginning Gl end we Just want to specify
Three vertices i want to type in jail vertex to f which is going to specify it to component Kind of Vertex or 2d i
Guess Vertex Now by Default our Projection Matrix in opengl Is
Between negative One and one in all in every dimension in Every Axis we'll talk more about projection matrices and all This fun Stuff in
Future videos Again Just Trying to draw a Triangle Now so i'm going to type in negative
0.5 F and then negative
0.5 F for y as well and Then for my other Ones i'm going to maybe Make This one in the Middle so it's going
To be Just 0 f for x and also a positive 0.5 F for y and this One's going to be positive
0.5 for x and negative
0.5 for Y so i should be drawing a Triangle That is basically in this Shape
Let's hit F5 and you can See that i get a triangle is perfectly Kind of be in the Middle of My Screen and looks
Pretty Good okay so we can Now conclude That
Opengl Is Working and That's gonna wrap Up this video we've Basically accomplished everything We Wanted to we've got an opengl window
Everything Right Now is in our application file
We are probably going to move it Just into a class or something Just to keep It a Bit more simple we'll do That Next
Time
But Overall Again we're not going to spend
Too Much time creating an Api for Ourselves Because we want to learn opengl
so we've got something Up and running You Guys can recreate This code on youR computer and Hopefully Get something as Well so you can
Finally Making a Nice Little cute opengl application Which draws a single Triangle Exciting Stuff i know
If as we Go as we Go on What Kind of deal with more Stuff Now for all the code in this series i do
Actually encourage That You copy it down Yours Sells Because when you actually
Copy code even even though You are Just Copying from a Screen You Actually Learn It Because you're typing it out Yourself it's like When
you meet someone New a Lot of Times you'll meet someone you don't introduce Themselves and Say Their name and
Then You'll Just Forget Their Names Right Away but if you Actually Say Their name back to them like Hello bob
Then You'll Actually
You're Way more Likely to remember their name right so Kind of with This as Well i like i like the idea of People Actually
Copying Code down
Themselves and Actually Physically Typing It Themselves Because Once You do That
Muscle Memory Will Kind of Kick in and You'll Actually Learn a Lot Faster that being Said if you really want the source code i
Am Actually making That available to patrons so if you pledge on the show no tocom slash
Patreon i'll Sorry If You Put on patreon a Conference after China Probably make the show not a complex patron Work as well
but if you go to patreon.com/scishow
No and you pledge Their you help Support this Series You will actually Get access to the code on github and that Will be separate
for Each
Episode as Well Just Like It is for my other Other Series so if you really want to source code that You Really want to
Help Spoil The Series it's Just You Basically You Just Get a reward for Helping to support the series and making sure that i can
Make more videos There's also a Bunch of Other Rewards on patreon of Course after Jenner
So i really appreciate all the Help i Get from there and That's What Basically
Lets me Sit down and make These videos properly so much appreciated Anyway Next time we're gonna abstract This Out into a class and
Actually Talk about a Modern opengl Because What we've done right Now is we've created an opengl
Context and a Window and everything we're Actually Only Limited to using opengl 1.1 Which is what ships with Windows
Windows Doesn't Windows Has Its own Rendering Api Direct x Direct3d so they don't Actually provide you will the Functions you need for Modern Opengl
As i mentioned in the welcome to opengl video
That's provided for us by our Gpu drivers so what We Need to do next time is Actually somehow get all Those Functions that are
in newer versions of Opengl App From Algae and from our Gpu drivers so that We Can Actually What
We want to be Able to call the functions right so That's what We Need to do in this What we'll talk about Next Time
A little probably Moving This out into a class and all That
Fun Stuff and Then That's When the real funs gonna Begin Next time so i'll see you guys in the next video Goodbye it's true