How Shaders Work (in OpenGL) | How to Code Minecraft Ep. 3

Join the Discord: / discord
Follow me on Twitch: / gameswthgabe
In this episode I do a deep dive into the code and concepts behind GLSL shaders. I go over everything from how to construct them, compile and link them, and execute them on the GPU to how to think about shaders conceptually. This is the next episode in the Coding Minecraft tutorial series. In the next episode I will be covering dynamic textures and texture UVs.
Challenges: github.com/codingminecraft/Mi...
Planet Shader (HamzaHutchinson): www.shadertoy.com/view/llj3zV
Plus Shader (Nimitz): www.shadertoy.com/view/4slXW7
Sierpenski Fractal Shader (Klems): www.shadertoy.com/view/XljSWm
3Blue1Brown Linear Transformations: • Linear transformations...
Shader Versions: en.wikipedia.org/wiki/OpenGL_...
GLSL Builtin Variables: www.khronos.org/opengl/wiki/B...)
Vector Constructors: www.khronos.org/opengl/wiki/D...
Vector Types: www.khronos.org/opengl/wiki/D...
glCreateShader: www.khronos.org/registry/Open...
glUniform: www.khronos.org/registry/Open...
Qualifier Order: www.khronos.org/opengl/wiki/T...
My code: github.com/codingminecraft/Mi...
Bookmarks:
0:00 Intro
1:00 Subscribe!
1:13 Vertex Shader Transformations
3:31 Coding the Transformation Matrix
4:23 Coding the View Matrix
5:48 Coding the Projection Matrix
7:04 How GLSL Works
10:41 GLSL Custom Constructors
11:15 Vector Swizzling
12:43 Compiling Shaders
13:49 Error Checking Compilations
15:30 Linking Shaders
16:24 Error Checking Linking
17:19 GLSL Reflection
19:56 Uploading Uniforms
21:11 In/Out/Flat Keywords
24:00 Shaders Conceptually
Shaders at the end of the video:
(by Kali): www.shadertoy.com/view/NlsXDH
(by knarkowicz): www.shadertoy.com/view/XtlSD7
(by EvilRyu): www.shadertoy.com/view/Xd3fR7
Book of Shaders: thebookofshaders.com/
Music from Music Vine
Fire (by Raft): musicvine.com/track/raft/fire
The Gift (by Onsoho): musicvine.com/track/onsoho/th...
Blue Waltz (by Yoav Ilan): musicvine.com/track/yoav-ilan...
“The Soft Block” licensed via Music Vine: 5KEXLAZZUKPIVGS2
Muse (by Braden Deal): musicvine.com/track/braden-de...
Tell Your Story (by Adi Goldstein): musicvine.com/track/adi-golds...
“Fickle” licensed via Music Vine: ZX7THVN1L1UQWYD0
---------------------------------------------------------------------
Website: ambrosiogabe.github.io/
Github: github.com/ambrosiogabe
Here are some books I recommend if you want to learn about game engine development more thoroughly. I do not profit off any of these sales, these are just some books that have helped me out :)
My Recommended Game Engine Books:
Game Engine Architecture: www.gameenginebook.com/
Game Physics Cookbook (Read this before the next physics book): www.amazon.com/Game-Physics-C...
Game Physics (Ian Millington): www.amazon.com/Game-Physics-E...
Game Programming Patterns (Free): gameprogrammingpatterns.com/
My Recommended Beginning Game Programming Books:
JavaScript Game Design: www.apress.com/gp/book/978143...
My Recommended Java Books:
Data Structures/Algorithms: www.amazon.com/Data-Structure...
LWJGL (Free, but I haven't read this thoroughly): lwjglgamedev.gitbooks.io/3d-g...

[@MysteryPancake]

Looking forward to the 36 hour version for Vulkan

[@GamesWithGabe]

Lol give me a few years and we'll see ;)

[@SearchBeforeToBelieveOnOthers]

@@GamesWithGabe That is crazy kk

[@dimi5862]

This is a series I've alway been looking for, but could never find it. Please make more videos, I really enjoy this kind of content!

[@zeon137]

Incredibly informative and well done as always. Great video and thank you for the quality content :)

[@EnderKill98]

This explained really well how glsl stuff works. I had a course a while ago, but was not quite sure and this video really drove home how it works internally. I also didn't really understand the whole "Shader" vs "Program" stage until now. Great explanation!!!

[@hirzanabqary]

just when i started going through this series there's a new episode. Nice!

[@bxnny0374]

Instant sub. This was the first video I’ve ever seen of yours and it is so, so helpful. I’m so excited to binge watch your whole channel!!!

[@dimitris3sr]

Absolutely wonderful! Can't wait for the next one

[@Destroyer19941995]

Really like how you progressed with your explanations. Feeling like I am watching discovery channel how it works

[@merlang7]

This is best explanation of shaders I've ever seen.

[@XxSabergamingxX]

Please keep up this series I love it!

[@mrCetus]

Nice! Wish there were more content like this!

[@w.t.2905]

WHOOOOOW!!! 2:19 mario can go inside a tube!!! Amazing!

[@patrickcomden8678]

I really love this series! Very excited to see where it goes.

[@battosaijenkins946]

@ GamesWithGabe, You made a huge blunder @ 6:52 where glm::mat4 projection = glm::perspective(glm::radians(45.0f)... not just 45.0f!

[@GamesWithGabe]

Well I wouldn't say it's a huge blunder. Technically 45 radians is the same as 58 degrees, and some people prefer an fov of 60 degrees. And I may have meant 45 radians and not degrees the whole time 😏. In all seriousness good catch though haha, I'll have to update the code for anybody referencing it

[@ibegream5854]

@@battosaijenkins946 bro... You got ratio'd so savagely two times by the same guy, while trying to roast him lmao Or feedback

[@SB-pq8dp]

Incredible! You have such a great talent for explanation :^)

[@Dasedandconfused314]

Dude top notch! I feel like I’m back in college! Thank you!

[@joewilliams4390]

This is a great video! Wish I had this to hand when learning

[@georgeelsham]

This series has given me motivation to try out GPU programming with Metal (not OpenGL, but each to their own), thank you!

[@MehOccor]

Please, make sure to use Metal Debugger as much as you can when learning. It's an awesome tool and it will help you understand all sorts of issues. Watch some WWDC videos to see how to use it, and good luck, started GPU programming with Metal too and it's sick.

[@lobotomiepraktikant1128]

Good video for everybody who wants to learn about shaders! :)

[@RonnyRun]

I'm impressed by your ability to explain such things o.o ❤

[@6px]

i was waiting for this for 2 weeks! lets gooo

[@orbyfied]

Amazing series. Sad that only 4% of people are subscribe. This is professional course level content for free.

[@ricardohnn]

AMAZING CONTENT! Totally subscribing

[@louitdev5540]

Dude your channel is so underrated!

[@mo-s-]

Thanks I wondered how that stuff works for way to long! :D

[@kurciqs8355]

this gotta be the best opengl tutorial

[@doodle173_]

Not sure if you'll ever see this, but I just wanted to say that I think this series is really cool! I tried doing this "Code a Minecraft clone" type project a while ago but never got far past rendering a few cubes - mostly due to confusion and lack of understanding in terms of OpenGL coding. If I'm being honest though, I think this explains a lot of neat concepts that helped me understand some of the issues I had in the past, though.

[@GamesWithGabe]

Thanks for the comment! Even if I don't respond I try to read all the comments and I always appreciate encouragement like this :) And coding minecraft is definitely a hard project haha. I also tried coding it unsuccessfully 2-3 times before I came up with a solution that I like :D

[@junkokonno]

shaders is really daunting the first time I learned about it, it still is.

[@shehryarmahmood5020]

Good man!

[@RiccardoBocci]

can't wait for next ^_^

[@GamesWithGabe]

Thanks! I'll be releasing a devlog in the next week or so. Unfortunately that means the next tutorial will probably be coming out mid-late March, but I'll be working on it in my spare time :D

[@quentinquadrat9389]

Nice video, a cool syntax trick to pass data from vertex shader to fragment shader without confusing namess is to use structures. For example fragment side: out struct v2f_s { vec2 UV; } v2f; and fragment side: in struct v2f_s { vec2 UV; } v2f; and you can access as v2f.UV of course structures can be more complex.

[@GamesWithGabe]

Nice! I haven't messed around with structs in shaders too much, but this is something I've been meaning to try :)

[@KozelPraiseGOELRO]

Kozel thing in head hurt. Maybe this info and tutorial would be usefull to me if I was wanting to learn how to do it.

[@PLANKCTON]

La vidéo est vraiment cool ! C'est bien expliquer est vraiment intéressant pour les gens qui débute comme moi ;)

[@asherhaun]

Oui, c'est bien :D

[@kurciqs8355]

Je le comprends. C'est incroyable.

[@abdoemr3436]

Hi gabe thx very much but I really hope that u make a dedicated course for computer graphics (opengl) then reference this course in the upcoming series

[@VictorGordan]

Very nice video, it reminds me of 3Blue1Brown! :)

[@GamesWithGabe]

Yea, 3blue1brown's animation library is super awesome:D

[@oglothenerd]

[3:50] What font are you using for that code editor window? I really like it!

[@OleKristianElns]

Funny that this showed up in my recommendations. I started learning OpenGL some months ago and I am currently making a minecraft clone myself (without following any tutorials as a challenge). So far I have been able to make a 3d world with minecraft blocks and infinite terrain generator that utilizes a perlin noise-like algorithm that makes the terrain look minecraft-esque. It's fun but also frustrating.

[@GamesWithGabe]

I completely understand. I've been working on a MC clone for the past 8ish months that I plan to turn into my own game. Like you said, it's fun, but it can be very frustrating at times haha. Good job on the progress so far though! And I'm sure you'll learn a ton of new stuff throughout the process :)

[@stavanmehta9218]

Hey in your rasa nlu tutorial which rasa version did you use cause in the new one (Downloaded on Feb 16 2022)almost everything is changed like the model files now have no nlu and core and the interpreter is not being imported although rasa shell works just the same. Thank you

[@user-ks9fh2gv3r]

Реально крутой туториал. Это не то, что я искал, но то, что мне было нужно. Однако я слишком тупой и ограниченный в понимании всего этого сразу. Поэтому увидимся через парочку лет и тогда посмотрим, если эта инфа влезет в меня.

[@immanuelcharles2875]

Is your library open source? If so I would love to see some of its code! Also you have thought me to a lot about graphics programming through the Java Mario game engine series. I feel like I have enough knowledge about shaders and general graphics api stuff to maybe implement these concepts in another graphics api like vulkan or directx! I just want to say thank you for keeping this free for everyone😀.

[@GamesWithGabe]

Yep it's open source! There's no license but I can add an MIT license just to make it clear :) github.com/ambrosiogabe/CppUtils

[@immanuelcharles2875]

@@GamesWithGabe thanks!

[@Gibus21250]

Hello! nice video! What is the background music at 7:38 ? :D

[@WatchInVR1]

Hi. I was typing "understanding registers in shaders" in the search bar in KZbin and got to your video. r1, r2 etc are temporary registers; o0, o1 etc are output register; v1, v2 etc are input register (for vertex shaders 3.0). I would really like to understand this because I want to stereorise shaders in games. This means I want to edit shaders of games through DLL wrappers. Do you have any videos or sources that explains what these registers do and what they mean in ASM or HLSL language..?

[@xd_joe]

Always wondered how shaders were made

[@KiroHayashi]

When KZbin recommend this video when minecraft shaders is not a thing anymore in bedrock, I wish they are adding it back.

[@SuperGrimmy]

glProgramUniform* is much nicer in general, but needs GL 4.1... BUT the vast majority of 3.3 implementations support it. No shader binding needed so you can set a uniform at an point in time without worrying.

[@mobcont8335]

Excellent tutorial and presentation. However i can't help but feel that opengl functions in general are way more overcomplicated than they should be, and i really don't know why. I wanted to take a look at vulkan and other libraries but i think thos will be even worse.

[@rayenhamdaoui]

This video clarifies how easy to use game engines are

[@shivanshuraj7175]

can you do compute shader?for beginners

[@GVal98]

Why am I watching this at 4am. I don't even make games

[@zokalyx]

you could start tho

[@dr_nyt4041]

3:45 glm::scale requires another parameter. You should probably do "glm::mat4 transform = glm::scale(glm::mat4(1.0f), scale);"

[@GamesWithGabe]

That's equivalent to what I did in the video :). Glm overload all those functions so that you can construct the matrix either way

[@dr_nyt4041]

@@GamesWithGabe For me it required me to do it this way. Maybe I have an older version of glm or something

[@noxmore]

I'm new at c++ and was wondering why you're using things like GLint instead of int?

[@GamesWithGabe]

Those are just typedefs that the OpenGL API provides. You can safely use an int most of the time, but it is possible that on some platforms they might use a 16 bit integer or something instead of a 32 bit integer. This would have especially been true around the time OpenGL was created when 32 bit machines were not mainstream. I wouldn't worry about this unless you run into a specific example that requires that though :)

[@chonkychungus]

love these videos but pleaaasee no music :c I want to put my own music on in the background whilst I watch c:

[@joysaha3927]

❤️❤️👌👌👏👏

[@zdspider6778]

3:42 This is wrong. Scaling should be done last. Otherwise, let's say you're scaling it by 0.001. That means whatever translation you apply AFTER, will be scaled by 0.001. The translation itself will be scaled. You won't move it 10 units (for example), you'll move it 10 * 0.001 => 0.01 units. Same goes for rotation. Am I the only one to point this out? 🤔 Am I wrong? And the glm::scale() function takes 2 parameters, not 1. You'd have to use it as: 'glm::scale(glm::mat4(1.0f), scale)' otherwise it won't even compile. You can see for yourself the function definition on GH: /g-truc/glm/blob/master/glm/ext/matrix_transform.inl

[@GamesWithGabe]

Hey thanks for finding the glm error, it should have that glm::mat4(1.0f) as the first parameter. And in regards to the order, you definitely scale first. You may be confused because of how glm applies the multiplication. In this code github.com/ambrosiogabe/MathAnimation/blob/0b85d45f492a5647db989fac295731350e0fe906/Animations/src/math/CMath.cpp#L780 you can see that the scale is the last thing multiplied. However it’s actually multiplied right to left, so the order is scale, rotate, translate. You have the reasoning correct but backwards if that makes sense. If you translate then rotate then scale, the scale will effect the rotation and translation. That’s why you have to scale before you do the other two operations. Hopefully that clears up the confusion, but let me know if you need any other clarification :) For more info you can check out this great learn OpenGL article. Towards the middle they explain it like this: > When multiplying matrices the right-most matrix is first multiplied with the vector so you should read the multiplications from right to left. It is advised to first do scaling operations, then rotations and lastly translations when combining matrices otherwise they may (negatively) affect each other. learnopengl.com/Getting-started/Transformations

[@AstralSnowstorm6157]

1:00 Just give me a sec to start planning a video right quick.

[@icesentry]

You forgot to add a link to the book of shaders. It's easy to google, but just letting you know it's missing.

[@GamesWithGabe]

Thanks for letting me know! I had a feeling I might have missed something haha

[@bonenaut7]

> How to code minecraft > Minecraft usually not using shaders, and even not using such simple things as Vectors, Matrices, Quaternions and etc 🤨

[@bonenaut7]

​@@lolguy91wastakenbyanidiot author says in the title "How to code Minecraft", but minecraft not using shaders by default as i know(1.7.10> absolutely zero shaders)

[@GamesWithGabe]

Maybe I should retitle series to, "How to code minecraft well" ;)

[@bonenaut7]

@@GamesWithGabe and you will be right, fair enough lol Maybe someone sometime will make something really good after your videos (Cant just even look at minecraft after their gameloop in old versions lmao)

[@zokalyx]

shaders are the backbone of graphical programming, so it's really good overall to include them in the series. you could potentially use them in your minecraft clone too.

[@Larkinchance]

i'm having an anxiety attack....

[@elgatoxd-ki2bo]

En español no hay piipippipi

[@cali4484]

Dislike 👎

[@cali4484]

@@lolguy91wastakenbyanidiot so much advertisement made it bad

[@tarck333333rrrr]

Nice! Wish there were more content like this!