Blending in OpenGL

Patreon ► / thecherno
Twitter ► / thecherno
Instagram ► / thecherno
Discord ► thecherno.com/discord
Series Playlist ► thecherno.com/opengl
Thank you to the following Patreon supporters:
- Dominic Pace
- Kevin Gregory Agwaze
- Sébastien Bervoets
- Tobias Humig
- Peter Siegmund
- Kerem Demirer
Gear I use:
-----------------
BEST laptop for programming! ► geni.us/pakTES
My FAVOURITE keyboard for programming! ► geni.us/zNhB
FAVOURITE monitors for programming! ► geni.us/Ig6KBq
MAIN Camera ► geni.us/t6xyDRO
MAIN Lens ► geni.us/xGoDWT
Second Camera ► geni.us/CYUQ
Microphone ► geni.us/wqO6g7K

[@lahusa_]

These presentations are actually really good (Maybe you could stylize them according to your video/channel color palette)

[@PenguinMaths]

Love the powerpoint! As some others have pointed out, I'm confused why layering a semi transparent color over a fully opaque color would yield a semi transparent color, as shown in the alpha channel of the last slide. Great series.

[@rynho7255]

Damn those slides are so good man. Keep them up, they really help us understand better than just showing pieces of code.

[@no5x937]

This is your most professional presentation/tutorial. Having a written power point presentation greatly improves your presentation style, keeps you focused on top in the correct sequence, and helps eliminate the unnecessary meanderings and ramblings. I strongly recommend you create a PPT presentation as a reference to your future tutorial videos. Keep up the great work!

[@ucmRich]

The "way" you designed your ppt presentation to coincide with how you teach is brilliantly on target. My brain gets it! thank you! ** also thank you for everyone helping to support him!

[@ZyklonV]

That was a nice and concise presentation. It’s a good initiative and makes it clearer. Plus you can pause the video to think. A presentation + live coding is what most teachers do at university.

[@789blablajaja]

Wow, about half a decade ago I learned Java from your videos. Now I am doing it professionally and when I search for an opengl problem I stumble across this. Huge nostalgia wave crushing over me.

[@789blablajaja]

Also, amazing video! Powerpoint was used so well, and your explanations were so simple yet precise.

[@Gettingitfiguredout]

Thought the power point was really helpful, thank you for taking the time.

[@michaldvorak2230]

Really a fan of this presentations style of teaching, would definitely be delighted to see it in your future videos!

[@vectork3]

Thanks Cherno! I really like this new presentation style. Its really easy to understand. Love from Nepal :D

[@davidhall7275]

I love this quote : It is really quite simple once you understand how it works.

[@victorlucki8586]

The slides were a really good addition! They help visualize all the theory quite a bit. Please, so continue with them, if it's not too much work, of course.

[@aura-audio]

Loved the powerpoint presentations! I understand this concept very well now!

[@polaris911]

I've been reading various guides online about this for the last couple days, I shoulda just watched this 12 minute video because you explained it better than any of them. Thanks for posting this, it really helps that you explained *conceptually* what is happening.

[@ibrahimrashwan]

Totally in with the that new style of using presentations simple & strait to the point and it's easy to understand

[@jonathanorr5878]

This really helped thanks a lot for making these videos

[@bjornbork7650]

I liked the powerpoint presentation, very professional, and hope to see more of them in the future.

[@alexandrosmoysi7140]

Presentation is definetly a great tool for you, it lets you take your great explaining skills for code, and use them on non coding topics. Best course ever!

[@Puddlestomps]

The presentation was nice. Helps illustrate the concept.

[@may007ank]

That was very informative. I finally learned something I've been using for a long time, apparently, without understanding.

[@user-kq4fk9bl6d]

Are you going to post a video on order independant transparency? I think its kinda hard to implement correct and i coulnt find anything on the internet.

[@tarasuzy00]

It's easy to understand. Very helpful!

[@yuchen3587]

Fantastic slides!

[@jutuootv590]

thank you so much, this really helped me creating a 2d lighting system for my project :D

[@jeroenkoffeman9402]

And thanks for a very clear explanation video as always!

[@RX7GSLSEowner]

I like the powerpoint presentation. Thumbs up!

[@shruikan123456789]

awesome slides!

[@Wout680]

10:55 Does this mean that the overlap of the white square with the magenta rectangle has an alpha of 0.75? Seems weird how the opaque rectangle with the semi-opaque square creates a semi-opaque result. Or am I interpreting this wrong?

[@PluginEverything]

This confuses me too.

[@goldenlava1019]

yeah

[@taufiqulalam2035]

Imagine three glass shards on top of each other. This alpha value function was designed to simulate that. Kind of. But it can't really properly. but it's fairly accurate.

[@cyqry]

@@taufiqulalam2035 Its not fairly accurate when one of them should be fully opaque.

[@De_Cain]

Love this format, I understood your explanations much better with a pp.

[@arget9272]

I really like the PowerPoint presentation in an explanatory video like this one 👍🏻🤓

[@ty_teynium]

This is similar to the siggraph class lecture presentations, but from your own home, I did actually pick up a lot of what you were explaining this way, but it can be a lot of work that’s why I just wait for the code parts so that I can see what works and where to put them.

[@eythimis]

Awesome thx!!!!

[@rudejehlici5425]

Big like for the presentation! :D

[@clem494949]

In the last example: something semi-transparent (a=0.5) on top af something opaque (a=1) gives you something a bit transparent (a=0.75) ?

[@micheleabruzzese4499]

The equation is wrong for alpha channel, it should be: out_alpha = src_alpha + dest_alpha * (1 - src_alpha) If dest_alpha equals 1, then out_alpha also equals 1

[@Mugistan]

@@micheleabruzzese4499 I'm not sure if that's true 0.5 + 1 * (1 - 0.5 ) = 1.5 * 0.5 giving 0.75

[@micheleabruzzese4499]

@@Mugistan multiplication has priority over addition so it first multiplies dest_alpha times the parentheses, then adds src_alpha

[@Mugistan]

@@micheleabruzzese4499 oh I misread I thought it as like this (0.5 + 1) * (1 - 0.5) sorry my mistake

[@tomneijman4212]

I noticed that too, but that's how the function in the example works (apart from if this is what you want). Cherno's calculation is right, see the OpenGl documentation: docs.gl/gl4/glBlendFunc.

[@yanko694]

Loved the presentation! Have you got any plans to do a turn on glTF 2.0 integration?

[@mngmn]

amazing series , kind of confused about 1 thing though, if the default when not blending is just 1 on all channnels of the source , then it should just nuke the existing buffer data, doesnt that mean that the texture you tried to use (the cherno logo) should just work and replace the old buffer?

[@brod515]

if by default it use 1 for the source and destination is 0 shouldn't the image with these settings just look like the cherno logo but with a black background? Why did the image with the default blending settings look very strange as though the actual image was corrupted in some way?

[@hls333555]

I am confused about that too...

[@landrypierce9942]

Can you do a video about using SPIR-V in OpenGL?

[@user-ub7mi2ou6v]

Awesome!

[@mukeshpareek5414]

Hi Cherno, First of all Thanks for making such awesome videos. Secondly, In my code if i comment out those two lines for blending. Still my texture is rendered perfectly. Can you explain that?

[@haykav]

Mine is too, I don't know what's the deal with that.

[@eriksimon6567]

are you using pngs? I used a jpeg and it worked fine because jpgs don't support transparency.

[@mkgamesartvisuals]

Thanks a lot!

[@vertigo6982]

What song is that in the intro? It's silky smooth.

[@ty_teynium]

Also you should have the slide available for download, for reference!

[@pierre.vieira]

THANKS BRO

[@joaopedrovoga5497]

Nice explanation.

[@charlesz88]

I LOVE the PowerPoint style.

[@mayankshigaonker7725]

I like this style

[@fencer9055]

I'm following along in Java, and when I tested a transparent texture without blending, it worked just fine. Why is that the case?

[@user-dh8oi2mk4f]

Does it still work if you manually disable blending?

[@emanuelkokovics]

SO I thought about testing the program without: GLCall(glEnable(GL_BLEND)); GLCall(glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)); Expecting something distorted to render, but it renders the same, with same problem (rendering just bottom left corner).

[@koungmeng]

8:14 why do we need to calculate alpha value if we dont need that? we need only the RGB values to determine the color, the alpha value is meaningless to us because we use it to find the RGB.

[@SuperKarlFriedrich]

you might use the blended color to calculate yet another blend behind that

[@billypersistent6127]

Yeah, there's no destination alpha variable in any of the RGB equations.

[@Neran280]

Well actually we do not need the alpha value of the frame buffer in that case. There is no dst alpha variable for the RGB values involved. Because we specified SRC_ALPHA and ONE_MINUS_SRC_ALPHA it means that we just look at the shaders output alpha value (SRC_ALPHA) + are only interested in the RGB values of our current frame buffer to compute the final color not the alpha value in the current frame buffer. However we can only do this because we assume that the alpha value in the frame buffer is always 1, which makes sense in a game environment because you will always have something behind an object (IN THE END). In our case this is the black clear color or in a game you will have sky/background or something similar so your framebuffer will never have a non 1 alpha value. For example unity engine with its new renderer uses by default a destination buffer without alpha channel. If you use certain multipass effects you will have to store a new alpha value. One example in which you want to do this is if you want to do direct volume rendering by raycasting in your fragment shader. If you traverse your volume from front to back you can do early ray termination if your accumulated alpha is >= 1. Although you do not need to perform an actual OpenGL blending operation (because the blending is computed in your shader in this case) this accumulated alpha is equivalent to the dest_alpha. however the new alpha value computation is wrong because it does not make sense that an opaque color + an semi transparent color results in a semi transparent color. So in the last example A should equal to 1 and not 0.75. A_out = A_src + (1 - A_src) * A_dest The RGB values are correct.

[@sukhmandersingh4306]

When are we gonna enable blending on logo on laptop's back?

[@ren69ade]

LIke the power point, better than waving hands and drawing imaginary boxes, and also better than live drawing in some drawing program.

[@aljosaskorjanc1475]

Hello there Cherno! I have been trying to get a hold of LWJGL3 for quite some time now. Honestly, I find the learning confusing, due to the fact that there are just so many different sources. So my request is: Can you please make a video in which you explain how to learn OpenGL/LWJGL so that the learning curve is at it's optimum? Should we prefer to read books rather than follow "do this, do that" video tutorials on youtube? If so, which books do you advise us to read (and please, reference us to some good LWJGL books if there even are any because I have found none so far)? Should we follow online articles, blogs and tutorials about OpenGL? Should we study the OpenGL API in depth? (and if so, how?). Please, give us an overview of what way you think is the most productive to learn OpenGL/LWJGL. Yours sincerely, Aljoša

[@senser1o76]

12:19 dangerous gest :D

[@fountainwindmill]

I really like the new powerpoints since I'm a visual learner. I get what you mean by just listening to you, but i had to concentrate less to achieve the same result using your powerpoint. But you can skip them if they take too long to make, they're not necessary, just preferable.

[@MrStarTraveler]

This tutorial needs at leas one video on shader language. Last lesson new stuff was added to our shaders but I don't understand what that stuff is and where it comes from.

[@emilasplund4462]

Powerpoint idea = perfect!

[@regbot4432]

So underrated episode...

[@chiyungchu9463]

WOW, your powerpoint background color so cool, how u blend that.

[@benedikt7846]

Think I might just pass my exam thanks to this one

[@raf.nogueira]

How its possible to find a internship or a job with Opengl and game engine development if have so many engines already made out there ? I learning very much, but i live in poor country there are no possibilities for me to work with this here, but i want so much.

[@jingluntang7479]

OMG first time seeing a ppt

[@dirtyblasion15]

More than helpful

[@aryesegal1988]

Aiii Cherno bruh, where are you flying to at the end of each video tho'? ;)

[@chinmayanand896]

Hey cherno love you bro

[@webgpu]

wkr? authors use cliffhanging to "force" viewers to watch the next video. But your videos are already interesting, we will certainly watch them as they come:) That presentation is great. Visual aids are very helpful to better understand the concepts you talk about.

[@gregd6022]

cryptic explanation ... it simply "mixing" two inputs to get the output, each input has an "amount" coefficient (volume control). output is written to the buffer. (amount coefficients used are selected from a list of available options during setup). done.

[@adamodimattia]

Great video, I wish I could have seen it when I was learning Unity’s HLSL, would have helped me a lot.

[@jlewwis1995]

4:29 can't you technically do binary blending by discarding fragments with alpha < some.value in your fragment shader? The opengl wiki certainly says so, so I wouldn't say that literally *nothing* will happen if you disable blending, it's just that the blending that is still available isn't going to be all that useful unless you can specially get away with only having either solid or completely transparent pixels

[@abcxyz5806]

You can, but this is normally not called blending. Unity e.g. calls that Alpha Clipping. As you said, you cannot mix colors with this. However some engines can fake blending by using dithering, which has the benefit that the usual problems with transparency like front to back sorting do no apply.

[@knayder42]

Are you going to make video about Order Independent Transparency?

[@MichaelYoussry]

No more waving hands! 😢 jk, awesome presentation

[@paulhorbenko9560]

In real life, if we put blue and red glass in front of each other, we won't have any color coming through at all(I believe). Since red glass only lets through the red light, and blue - blue.

[@gliese436-b5]

The PowerPoint was a great idea in my opinion.

[@Tetsujinfr]

Thanks for that, but I think that if viewers are familiar with rgba components already then they should already understand blending and stuff like linear interpolation of alpha * src + (1-alpha) * dest. So good to know how to do it in opengl but I think a rgba basics separate video might be a better option (so that I can skip it and those lost can watch it). Just my 2 pennies here.

[@flusher84265]

Turning off blending yields the Charno logo

[@deesrexcoding3564]

For some reason, it doesnt matter if I enable blending or not......

[@vixellar7933]

#notificationsquad

[@slurpeesauce1750]

Why does ``` layout.Push(2) layout.Push(2) ``` work but ``` layout.Push(4) ``` does not

[@pipding4368]

It's because each time you call layout.Push(), you're telling your VertexBufferLayout about a new 'attribute' of your vertex. At this point, each of our vertices have 2 attributes - a position (which is made up of 2 floats) and a texture coordinate (which is also made of 2 floats). By calling layout.Push(4), you're telling your VertexBufferLayout that your vertices have 1 attribute, which is made up of 4 floats. This causes a problem when your shader tries to read the data from the buffer, since it's expecting 2 attributes but you only defined 1

[@brod515]

I think this is great but I don't think the example you gave about see through a red and a blue glass will look purple is a good example. i think in a real life situation (not sure) the color you would see would be black. I feel like what were doing here in OpenGL with blending should refer to mixing colors as opposed to anything relating to lighting.

[@Wout680]

Would it be a dark-ish purple, the red followed by blue window? How could you achieve subtraction of colours when light is additive?

[@wirosk2916]

@@Wout680 Less amount of light is passing through each layer of glass making it appear darker. Maybe...

[@philmsproduction]

I was thinking the same thing. I think the glass would actually multiply the colors rather than adding/averaging them.

[@bor_kor]

bro switched from normal tutorials to practice only ones, only to switch then to powerpoint presentations

[@bor_kor]

this is good tho, i like theory

[@rhodexa]

I'm pretty sure that if you put a red glass in front of a blue one, the result color would be black... because the red glass will remove any blue light, letting only the red light to pass through. When it hits the blue glass, the red light will be absorbed (or reflected) and no light will be seen on the other side xD

[@War4est]

Probably you didn't assume that the light could come not only from one direction.

[@user-sl6gn1ss8p]

@@rhodexa I think you can get something closer to that setting the source parameter to be the destination's color and the destination to zero. That way I think you "filter" the original color with the new one - if the red is pure red and blue is pure blue you get zero, but if they have common components those survive.

[@rhodexa]

@@user-sl6gn1ss8p You're right. My point was that the 'real-life filter' wasn't a good analogy to what computers do to colors. • What filters do is subtract data from a source. (Passing red light through a blue filter will give nothing, cause no light was blue) • What OpenGL is doing is ‹combining›, adding data from two different sources. (you have a red light source, and a blue one. When mixed, produce a different light: magenta) Just a pedantic comment :D

[@user-sl6gn1ss8p]

@@rhodexa true : )

[@TheNeoxpert]

Why you're not using Linux?

[@mycollegeshirt]

That's a lerp, no?

[@lizzyfleckenstein9837]

"When talking about graphics programming you actually have to tell the computer what you wanna do" Well, this pretty much goes for anything related to computers. Not only programming.

[@devashish0312]

Please start uploading game engine series

[@Behiri]

I'm hearing openGL is deprecated is that true?

[@XxAl3X3IxX]

couldn't find anything about that. Are you sure you can trust the sources that say that?

[@SketchpunkLabs]

You only hear that because the Khronos Group now have the vulkan API, so at some point OpenGL will fade away. Last I read is that Khronos will continue to develop the OpenGL Api. But in all honestly, there is going to be a point where they can not dedicate resources to developing two different Graphic APIs. I believe android is looking to make vulkan their preferred api, windows never supported OpenGL passed version 1, anything afterwards are AMD / nvidia making their own drivers to use modern versions of opengl for windows. Then you have valve which is still developing SteamOS even though they stopped selling the hardware, they're big push is to improve Vulkan support on linux. You can also use vulkan to make games on the Nintendo switch. So its not deprecated but the writing on the wall is that when vulkan is mature enough, opengl will no longer be needed.

[@c1337]

Hi can you make a tutorial about calloc, malloc, realloc and free functions in c++

[@shruikan123456789]

This is C style

[@slaincow4032]

I’m only here for entertainment purposes 😂

[@leonardomarinovic3492]

Eeeeyyyyy wazzup guys chern0 here