Maths in OpenGL Video Lecture | Open GL: Basics to Expert - Game Development

hey what's up guys my name is Archana
and welcome back to my OpenGL series so
we've done blending we've done textures
we've done vertex arrays index buffers
vertex buffers we've done all of this
stuff we've got stuff rendering on our
screen but we haven't actually even
touched on one of the biggest parts of
graphics programming maths or math if
you're from the US so what is maths why
do we use it like how can we use it and
why do we even need it
so maths in general is used in pretty
much every area of graphics programming
and as this series continues and we
start dealing with things we'll actually
have to start implementing our own kind
of algorithms that involve maths and
doing calculations and all that I'm
fairly sure that anyone who is new to
OpenGL or you do graphics programming
probably has an idea in their head that
maths is going to be required and we are
going to start diving into those topics
but today we're just gonna kind of talk
about how maths is used in general and
get started with a maths library and
actually write some code that does
something so maths that when I talk
about maths in graphics programming I'm
really talking about two different kind
of areas of maths or two different
concepts that we have matrices and
vectors now matrices a matrix is
essentially an array of numbers that we
can kind of manipulate by multiplying or
we can set up in various ways right it
is literally an array of numbers and
when we multiply those numbers by
something else we get a new set of
numbers and those calculations can be
useful for things like positioning
objects in a 3d world on the flip side
vectors there are two types of vectors
that we deal with in graphics
programming and I know because I get a
lot of comments about this all the time
so we are going to take the time to
quickly talk about them there's
directional vectors and there's
positional vectors right so a vector can
refer to something that you're probably
used to if you've done something like
engineering math sort of high school
maths or depending on different
countries how they teach it all that and
all that but essentially a vector is
really seen as like a direction and
magnitude or a length right so you're
probably if you if you're coming from
actual maths you're probably used to
hearing about a vector as like you know
pointing somewhere like a literal
direction vectors and graphics
programming can be that but they can
also be just positions in either a 2d 3d
or 4d space right so for example I could
have a vector that's like 200 comma 100
and what that means is that it's a point
on my screen that's like 200 pixels in
from the left and a hundred pixels up
from the bottom that is also a vector so
you should definitely get used to that
terminology vectors and matrices I used
a lot but the I would say probably the
most common usage and the most important
usage especially when you're just
beginning is for transformation so we
are definitely going to talk about this
in much more detail with like diagrams
and all that stuff in the future but the
transform at a transformation is
essentially a way that we can get our
vertex buffer with all of its points and
all of the vertices into some kind of
form that we see on our screen the
reason that we need transformation is
for a number of reasons first of all
let's just say we have a massive 3d
world and we have a ball right we need
to position that ball somewhere in the
3d world what if we have a camera moving
around maybe it's orbiting around the
ball right the way that that works is
that well there's no such thing as a
camera really what we need to do really
is just move the world and the ball
around so we change the position of the
world and the ball and that kind of
creates the illusion of a camera
circling or orbiting our out subject we
might want to also like position
vertices in a way that isn't just a
translation it might be something like
scale or we want to rotate things all of
that stuff requires maps to actually
accomplish and the reason that we I mean
if we launch the thing that we have
right now you can see that we don't
really have like a 3d world or anything
we have this channel logo however the
aspect ratio is completely wrong because
by default opengl gives us a projection
matrix
negative one to one which kind of
assumes that the window is actually
square our window is not square is 640
by 480 pixels which means it has a 4:3
aspect ratio 4:3 right not one to one so
even for something as trivial as this we
also need a transformation we need to
actually make our geometry not be as if
our window was square we need to
actually kind of change this this chord
that we're drawing here and applying the
texture to it so that it's the right
aspect ratio to fit our manba even
though our window even that requires a
transformation so a lot of
transformations happening anyway I
consider talking all day about maths and
how it's used you will see as this
series continues let's just jump into it
and let's use a Maps library and what's
just fixed for now this kind of
transformation issue we have with the
trailer and logo so I'm going to be
using a math library that's free it's
called GLM you can find this all with
the link in the description below this
is specifically an OpenGL in mathematics
library doesn't really matter what maths
library you use as long as it's
something that works and contains all
the features we need typically if I was
running my own engine I probably write
my own maths library that makes a lot of
sense OpenGL
the reason this is this look this one's
good is because it's OpenGL specific
which means that like for example the
matrices are column-major ordering so
the way that the actual matrix is laid
out in memory is in a way that OpenGL
kind of expects it to be and doesn't
need to do any kind of transformation or
well as it's called transport the
transposition transposing to actually
convert it into the right format if I
was using a mouse if I had an engine
with a lot of different graphics api's I
probably opt for a row major ordering
because that can be a little bit more
friendly for CPU side multiplication and
all that we're not gonna talk too much
about this what I'm saying is if you
don't like GL m or if you want to use a
different library feel free to I'm just
using GL m because it seems to be the
standard kind of OpenGL maths library
and at this point I don't care because
it works for what I need so over here
I'm going to go to releases which is
over here and then download this latest
release by just clicking on the zip file
over here and once I've got it
downloaded inside the zip file we have a
GL m folder inside
we have a bunch of different things I
really only care about the actual code
which is in the GLM folder so I'm going
to copy that GLM folder I'm going to
then go to the location of my OpenGL
project and an under source vendor I'm
going to paste in that GLM source code
so GLM is a header only library which
means there are no CBP files we don't
need to compile it at all as soon as we
included it all kind of get compiled
like that so we don't have to link
against the library or kind of create a
CPP file like we did with STP image this
stuff is really easy to use and let's
just get right into it so once I've got
this pasted over here one thing I will
do is I'll right-click on OpenGL go to
properties and under all configurations
here in C C++ general I'm just going to
add sauce / fender to my actual
additional include directory so that I
don't have to type vendor every time I
want to include a file so we kind of saw
this I guess in the texture does TVP
file we included bender ACB image we
don't need to do that anymore we can
just do SUV image like that and that
should work fine because we've added
that compiler include directory I'm just
going to refresh my project over here
now I do want to include this like all
these files in my actual solution in my
project I mean they're not gonna get
compiled anyway but I still want them to
come up with searches and all of that so
in other words if I you know press like
ctrl shift F and I want to search for
like GL m or something I want it to
actually search all of my files however
there is a file inside GTC I think it is
so maybe it's in GTX yeah is this dummy
dot CPP file my thumb just says that
it's a head of early library this is
just for kind of say make if you scroll
down you'll see it actually does have a
main function that will interfere with
our main function so let's just
right-click that file and hit exclude
from Project because we obviously don't
want to compile that okay cool so anyway
we're going to your lam up and running
really easy stuff what I'm going to do
now is actually use it inside my
application build CPP file the way that
we're going to fix our issue with the
channel logo is by using something
called a projection matrix now a
projection matrix is a way for us to
actually tell our window how we want to
map all of our different vertices to it
so we have this concept of having a
vertex buffer
filled with vertex positions however we
need to obviously transform that into
some kind of 2d plane because when we
draw it on our on our laptop screen or
on our computer monitor we need it to
actually be drawn in a 2d way so picture
a 3d world right we have this
mathematical representation of a 3d
world but we need to draw it on a 2d
surface so how does that how does the
maps work for that right how do we go
from having this 3d geometry to having a
flat kind of 2d drawing that is what a
projection matrix is useful and we'll
definitely dive into the details and
diagrams and all that stuff in a future
video but the way that we need to fix
this problem is by basically telling all
of our kind of vertex positions that
make up that churner logo that hey the
window that we're drawing onto isn't
actually a square it's 4 by 3 so maybe
do some maths to make that work so if we
go down here the way that we're really
going to do that is pretty simple first
of all I'm going to include the GLM over
here by typing in G om / GL m dot H PB
and we actually need one more include
which i think is QC / matrix transform
okay cool so we've included two header
files here now if we scroll down what
I'm going to do here is what we actually
start to create all of our uniforms I'm
going to create a monochrome my
projection matrix I'm going to call this
GL m mat 4 that's the type it's a 4 by 4
matrix we're going to call it approach
and I want to set it equal to GL n : :
author this is going to create something
called an orthographic matrix now for
the left and right we just I mean close
left right bottom top we really just
need to specify something that adheres
to that four by three aspect ratio so
I'm gonna use something like negative 2
for the left positive 2 for the right
negative 1.5 for the bottom and then
positive 1.5 to the top and we veneer a
file with you specify something like
minus 1 and 1 we don't specify that but
we can okay so if you multiply both of
these numbers by 2 you'll get 4 by 3
that's essentially in my reasoning here
I've just created something that has a
distance of 3 units from the
to bottom of the window and four units
from the left and right so it's a four
by three aspect ratio which should fix
all of our vertex positioning now an
orthographic matrix is just essentially
a way to map all of our coordinates onto
a 2d plane where objects that are
further away do not actually get smaller
this is opposed to like a perspective
projection which is what we're kind of
used to seeing if we take a photograph
in real life where objects that are
further away are actually smaller that's
something that we use for 3d rendering
we're just interested in kind of 2d
rendering here so we don't need that
that functionality orthographic and
perspective projection is a bit of a
topic in itself we'll definitely cover
that and come and compare the
differences so another reminder that
this video is just an introduction to
all of this I just like to give a
practical introduction so that we can
actually guess let me on the screen you
could you can tinker with the numbers
and play around with it yourself
we will definitely dive into this stuff
probably beginning with like the next
episodes and all that stuff okay so once
I've got this projection I need to use
it in my shader because what I'm really
trying to do I could of course do the
multiplication on the CPU side and
actually just multiply all of these
vertex positions by this matrix or
specifically convert these into
basically vector twos or vector fours
and then do the multiplication with this
matrix however I'm actually going to do
that in the shader so if I go to my
basic trader here I'm going to add a
uniform so that I can take in that
matrix from the CPU into our shader
so I want to call it uniform mat for
that's the type you underscore MVP which
is going to be our model view projection
matrix model view projection matrix now
this specific part of it
we're just including a projection matrix
not a view matrix or a model matrix I'm
going to talk all about that lovely
stuff in the future and what I'm going
to do with this matrix is just multiply
my vertex positions with it we're in the
vertex shader this runs once per vertex
and what we're going to do is we're
going to take this vertex position that
comes in from our vertex buffer and just
multiply it with our projection matrix
that's going to move it into the
appropriate space based on that
orthographic matrix that we
actually provided so back in our source
code over here we now need a way to
actually set that uniform so we have a
set uniform for F which is fine for a
vector for but what we really need is
something that is a set uniform
magnetics for air for just Matt for our
fall color and this is going to be
called what's got the the uniform is
called you want to score MVP and then
the value that I want to set is just
this GLM matrix so I'll just pass the
approach that's the function that we now
need to create so if we go into our
shader class over here I'm going to add
that function set uniformat for F I'll
leave this constant ring name and then
I'll just add a constant G LM mad for
matrix just like that and we'll scroll
up to the top and include GL m / GL m
dot H P P like that okay pretty cool so
back in our sip c++ file for our shader
we're going to just add that function
and definition here and just use your
visual assist to get the signature and
now this is going to be GL a uniform mat
for M V the V kind of solid specially
matrix for the V kind of just means that
we're passing in an array so we need to
pass in a float array at this point so
we can provide the uniform location as
we do with all of our other set uniform
functions we're taking the name here the
count is how many matrices were
providing we're providing just one
matrix do we need to transpose the
matrix if your matrix was a row major
matrix which means that the way that
it's laid out in memory is essentially
two by just by the rows not by the
columns like GLM does you need to
transpose it either yourself or you can
pass them true here we don't need to
transpose it because we're using GLM
which stores its matrix like elements in
column major which is what opengl
expects so we can pass in GL false okay
yeah and the value is essentially a
pointer to that float array so what we
can do here is just pass in the memory
address of matrix and then this
basically just says column 0 and element
0 and so column 0 so that's it that's
the way the GLM stores it is as an array
but we can use these index operator
actually get the location of the first
element and then the rest will be stored
sequentially in memory so there we go
let's surround this with the GL call and
that's really all we need to do so now
back an application we set the uniform
as we do over here just once once is
enough we can set it every frame if we
want to like we do with color but since
it's not changing there's no need for us
to do that
if we hit f5 now hopefully this will
work and you can see that we get
something that's a lot smaller but it is
in fact the right aspect ratio and for
comparison if we go over here maybe we
change this orthographic matrix to be 4
4 & 3 3 we're still keeping that 4:3
aspect ratio but we've made it
essentially twice as big our actual
geometry should be a lot smaller and you
can see we have created a smaller
channel logo so I might revert back to
the other one because this is a bit too
small but that's essentially how it
works by specifying these four positions
we're basically specifying the four kind
of boundaries of our window so left is
negative 2 if we try and draw a vertex
position at negative 2 in fact let's
just for fun move one of these to
negative 2 might be hard to take is
weathering a texturing on a color and
the textures outfit but if we draw this
too if we were to change this to
negative 2 it would be at the very very
left edge of our actual window
I'll keep it I'll put it back to 0.5 and
then that's the way this works so that's
the left edge that's the right edge
that's the bottom edge that's the top
edge and then this is the near and far
plane which means if we try and render
something that's kind of outside this it
will get cold
anyway I'm almost confusing myself by
talking about all of this because we
really need to spend like 20 minutes on
each of these concepts which we will do
in the following episodes but I hope you
guys enjoyed this kind of introduction
to mass in OpenGL I can just see like
another 10 to 20 episodes just on this
topic alone let me know what made sense
what didn't make sense what you want to
see more of I'm gonna probably put
together some presentations like I did
with the blending video because that's
really gonna help me explain this stuff
let me know what your thoughts are in
the comments below hit the like button
if you enjoyed this video you wanna
support this series you can go to page 4
knock on door / the cello and get get
all these videos early and get to talk
about this stuff in a private kind of
discord server and
get access to a monthly hangout where we
talk about the direction of these series
and what you want to say and life and
all that stuff and it really does help
support the seriouser as always huge
thank you to all my patreon supporters
for making this possible I will see you
guys next time
live a lot more maths good bye
[Music]