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

hey what's up guys my name is Archana
welcome back to my OpenGL series so last
time we talked about textures and
specifically we got the Cherno logo
rendering onto a quad essentially on our
screen so if you haven't seen that video
definitely pick up there and watch it
it's gonna be important for today
because at the very end of that episode
last time we had a bit of an issue with
how our texture was actually rendering
and then instead of leaving you guys
with the cliffhanger which I was very
tempted to actually do but didn't so uh
yeah it was nice of me right we actually
talked a little bit about blending a
specifically we enabled something called
blending and we set a blend function and
that got our texture rendering normally
so if we take a look at the code
specifically we added these two lines if
I comment them out and run my program we
will get a weird looking texture so
there's our texture looks pretty weird
if I go back to my code and I just
enabled this first line which is just
enabling blending in the first place it
looks well exactly the same and if I
enable both of these lines then we get
something that looks a little bit more
normal or something that we would expect
which is well this which is really
resembling the source image that we
actually used as a texture in this case
so I quickly added those two lines and I
don't really explain them because I
wanted to save them for this video which
is going to be explaining what blending
actually is and I've even done something
a little bit different today which I
hope you'll enjoy in the rest of this
video
okay so blending what is it and why was
our texture rendering incorrectly in the
first place so blending is pretty simple
it's essentially when we render
something that is partially or fully
transparent how do we do that right if I
have something with a concept of
transparency first of all you have to
realize that to you and me when we talk
about transparency and we think of
something maybe like in Photoshop when
you make when you turn down the opacity
of a layer or you have something like
glass that you're rendering that is like
kind of there but not really mostly made
up of reflections perhaps or maybe it's
colored glass so it kind of tends to
view a certain color it all kind of
makes sense to us in our brain and we're
like yeah that that's what I expect to
happen right but when we're talking
about graphics programming you have to
tell the computer what you actually want
it to do because it doesn't know
you want to do and by default OpenGL
doesn't perform any kind of blending it
just kind of takes whatever you're
rendering and just brenda's it as if it
was just something a page or something
normal or something more normal to it
right so just keep in mind that when we
talk about all these kind of concepts
what you expect is not necessarily what
the computer expects and you may have
different definitions so that's why
we're gonna go back to basics and I've
even prepared a bit of a PowerPoint
presentation which is something that I
don't think I've ever done before so let
me know what you think of this kind of
style because I really wanted to kind of
have some diagrams and explain what
blending actually was so what is
blending so suppose that we had this red
square that we rendered and on top of it
in some form we rendered a blue square
now this blue square in this example is
going to be partially translucent right
it's not going to be a fully opaque blue
square because if we just rendered that
on top of our red square well we
wouldn't see the red square at all we
would just get a blue square however in
this example pretended this blue square
is really like a shade of blue glass or
something like that we would expect to
get a combination of those two colors
which we would perceive as purple right
if we literally in real life took red
glass and blue glass and then put them
on top of each other like this we would
see light coming through would actually
be tinted purple and that's what we
would be saved with our eyes more
specifically if we actually look at what
this looks like if we rendered a red
square and then a blue square on top of
it but the blue square was in fact
translucent we would see something like
this which is the combination of those
two colors so blending just determines
how we actually combine our output color
with what is already in our target
buffer so what is our output color
that's the code that we output from our
fragment shader known as the sauce so in
this case we're outputting a blue color
because we're rendering a blue square
and then the target buffer is where
we're actually drawing that that blue
square on to so in this case we're
roaring it onto an already existing
buffer known as our destination which in
this case contains a Red Square so how
do we actually control the way that
these two colors get blended well we
really have three different ways in
OpenGL and they do very different things
so first of all enable and disable GL
enable and disable blend
enables and disables blending in the
first place if you don't have blending
enabled wish you won't by default then
nothing is going to happen your it's
just not gonna blend at all so the first
thing you need to do which is also the
first thing that we did in our code was
Jill enable gel blend secondly we have
something called a blended function
which takes a source and a destination
and this function that we call basically
specifies how we actually blend the two
colors together so the source is how the
source RGB a factor is computed but if
all this is gel one destination is how
the destination RGB a factor is computed
by default this is zero so this is going
to be all a lot clearer when I actually
dive into examples in a minute but when
I talk about the source RGB a factor
essentially what does blend function
determines is what we do when we perform
our blending equation is we take each
color channel of these source
RGB a and the destination RGB a doesn't
have to be RGB a can just be RGB or
whatever color format you're using but
every color channel we take that actual
value and we multiply it with something
and there's something that we multiply
it with is this RGB a factor that we
specify so when when we say to the
default is GL one that means we
literally take our sauce RGB a channels
or separately and we multiply them with
one now anything multiplied with One X
multiplied by one is gonna be X right so
in other words whatever the source is
that does not change the destination
however we know that we by default it's
set to zero and anything multiplied by
zero is zero so what this is basically
saying this default to your blend
function is throw away the destination
and just override it with the sauce
right because everything in the sauce
gets multiplied with one which means it
doesn't change and everything in it in
the destination gets multiplied with
zero which means that it just gets nuked
right it becomes zero so we have those
two separate things right the sauce is
just unchanged and the destination has
been set to zero and now we need to do
something with these two components that
we have and that's where this third
thing comes in which is called our
blending equation so the mode basically
just specifies us the one parameter that
this function text specifies how we
combine the source and destination
colors by default it's add so we have
those two colors as I said we had
source and the destination we need to do
something with those two components we
add them together by add it just means
plus right so you take whatever the
source color is which was the source
color multiplied with one so just the
source color and then you add to it the
destination column multiplied by zero
which is zero so we take source and we
add zero to it which equals source so in
this example by default we get something
this is actually one plus zero which is
just one right which just means use the
source value now this does not mean the
source
alpha value I literally mean all of the
color channels just take whatever the
sources and overwrite the destination
with that source color that is what
happens in OpenGL by default if you
don't set a blend function however what
we did is we used something we actually
set a blend function and specifically we
used the source being GL sauce alpha and
destination being GL one minus source
alpha which is what got us that result
that looked like something that we would
expect so to show a simple example using
these source and destination function
values that we actually set here if the
pixel that we're rendering from our
texture is completely transparent right
so what I mean by that is the alpha is
set to zero it's completely transparent
ourself or zero our destination is one
minus the source alpha so you can see
over here we've set our source to be GL
source alpha which means use whatever
these sauce alpha value is since it's
transparent is zero the destination says
take the inverse of that source alpha so
we look at the source alpha which is
zero and we do 1 minus the source alpha
so in other words 1 minus 0 since our
source alpha is 0 equals 1 so we have
those two values and now what do we do
with them well if we look at the actual
equation behind this it essentially just
means use the destination color the
colors already in the buffer because
alpha 0 means it's transparent which
means we don't see it so we shouldn't
really be writing a pixel at all just
use whatever value is behind that pixel
in that destination buffer if we
actually look at the maps behind this
you can see that for each channel let's
just pretend we have an RGB I text or
Nadja be a buffer we take the source red
channel we multiplied by the source
alpha which is 0 and then we add to it
the destination red Channel multiplied
by the inverse of that so x 1 in the
case and of course zero plus whatever
the destination value is gives us the
destination value and we do that for
every single color channel so you can
see that this mask kind of works out so
that we just don't use any of the source
color Apple we just keep the destination
color in the actual buffer we don't
affect the buffer at all let's look at a
slightly more complicated example
because that was really simple so
pretend that our pixel is partially
transparent here let's just say that
we've got this kind of white square that
is translucent right it's got an RGB of
1 1 1 but the Alpha is 0.5 so here it is
we've got a white square it's white but
it's translucent and then in our
destination buffer we've just got this
kind of destination buffer which we've
just cleared to magenta so 1 0 1 and
we'll say the Alpha is 1 as well here it
is
okay so using our current blending
settings of source alpha and 1 minus cos
alpha let's take a look at the mass so
the red channel is 1 right because the
source red channel is 1 over here it's
our white square we multiply that with
the source alpha which is 0.5 and then
to that we add the destination red
channel which is 1 multiplied by the
inverse of that source alpha 1 - source
alpha which is 0.5 and then that works
out to be 0.5 plus 0.5 which is just 1
so in otherwise we're rendering 1 now
this is going to be the case for a lot
of these channels because you can say
that when literally rendering one's
everywhere not like 0.7 or something
we're literally at the kind of peak of
our non HDR color range so the green
channel is also going to be a little bit
like this but you can see that our green
Channel for our destination is just 0
however since the green channel for our
source is 1 we basically blend that
together and made it halfway and it
gives us 0.5 blue channel is gonna be
identical alpha channel changes a little
bit because we're combining 0.5 and 1
halfway between that we get 0.75 so if
we were to render this white square on
top of this magenta rectangle we would
get something that looks like that if I
just take these color values and I
rented them that's what I get and that's
kind of what you would expect if you had
a white square like a white sheet of
glass or something on an earth that was
partially transparent like this ok so
that's how blending works if you have
any questions leave them in the comments
below it is actually quite
once you understand how it works do a
few of these examples that I've done at
home try some different functions try
some different equations just do it on
paper and see what you get
learning these things is really
important because using blending is
something that you'll be using for a
while in graphics programming in general
and I know that the hardest thing is
always being like well what's source
alpha what's one - source alpha I'm just
told to set that as my blend function
and leave it as that but how does it
actually work well this is how it works
so I hope you enjoyed that if you did
you can hit the like button you can also
help support this series by going to
play eternal comfort - the Cherno huge
thank you as always to all the people
who are supporting this series it would
not be here without those people so huge
thank you everyone should be thanking
them really if you are enjoying this
series hope you enjoyed this little
PowerPoint presentation style I actually
quite liked it because instead of me
waving my hands around all day and
actually trying to draw things and try
and visualize this or attempting to
actually draw stuff live I can just kind
of you know make these cute little
diagrams and fade in animations and I I
don't know I mean I personally think
it's really cool idea let me know what
your thoughts are in the comment section
below next time I'm gonna continue on
with our render and all that cool stuff
now that we have blending working that's
very important that we can actually
start rendering textures properly until
then I'll see you next time goodbye
[Music]